CSS Help
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me
Go Back   Dev Shed Forums > Web Design > CSS Help
Reload this Page

css and table alignment

Discuss css and table alignment in the CSS Help forum on Dev Shed.
css and table alignment Cascading Style Sheets (CSS) forum discussing all levels of CSS, including CSS1, CSS2 and CSS Positioning. CSS provides a robust way of applying standardized design concepts to your web pages.

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
Page 1 of 2 1 2 >
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old June 4th, 2003, 11:47 PM
ROT ROT is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jul 2000
Posts: 41 ROT User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 11 m 35 sec
Reputation Power: 9
css and table alignment
curious, how to get a table to align in a horizontal manner using css...with html you would just

<table align="center">

but, i tried

table {align: center;}

to no avail, ive looked some things up and it appears that's not valid...

any ideas aside from hard coding it into the html?
Reply With Quote
  #2  
Old June 5th, 2003, 12:04 AM
jharnois's Avatar
jharnois jharnois is offline
mod_dev_shed
Dev Shed God 19th Plane (14000 - 14499 posts)
  
Join Date: Sep 2002
Location: Atlanta, GA
Posts: 14,299 jharnois User rank is Major General (70000 - 90000 Reputation Level)jharnois User rank is Major General (70000 - 90000 Reputation Level)jharnois User rank is Major General (70000 - 90000 Reputation Level)jharnois User rank is Major General (70000 - 90000 Reputation Level)jharnois User rank is Major General (70000 - 90000 Reputation Level)jharnois User rank is Major General (70000 - 90000 Reputation Level)jharnois User rank is Major General (70000 - 90000 Reputation Level)jharnois User rank is Major General (70000 - 90000 Reputation Level)jharnois User rank is Major General (70000 - 90000 Reputation Level)jharnois User rank is Major General (70000 - 90000 Reputation Level)jharnois User rank is Major General (70000 - 90000 Reputation Level)jharnois User rank is Major General (70000 - 90000 Reputation Level)jharnois User rank is Major General (70000 - 90000 Reputation Level)jharnois User rank is Major General (70000 - 90000 Reputation Level) 
Time spent in forums: 1 Month 1 Week 2 Days 1 h 54 m 17 sec
Reputation Power: 760
Code:
table
  {
  margin-left: auto;
  margin-right: auto;
  }
Reply With Quote
  #3  
Old June 5th, 2003, 05:20 AM
ROT ROT is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jul 2000
Posts: 41 ROT User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 11 m 35 sec
Reputation Power: 9
just tried your solution, still defaulted to the left...
Reply With Quote
  #4  
Old June 5th, 2003, 09:30 AM
adios adios is offline
Senior Citizen
Dev Shed Regular (2000 - 2499 posts)
  
Join Date: Jan 2001
Location: leftcoast
Posts: 2,019 adios User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 10
Reply With Quote
  #5  
Old June 5th, 2003, 09:39 AM
ROT ROT is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jul 2000
Posts: 41 ROT User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 11 m 35 sec
Reputation Power: 9
k, thanks -- will give it a try in a few

**hrm, that doesnt work either -- im not sure what's goin on but im not liking it...**
Last edited by ROT : June 5th, 2003 at 10:54 AM.
Reply With Quote
  #6  
Old June 5th, 2003, 10:57 AM
ROT ROT is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jul 2000
Posts: 41 ROT User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 11 m 35 sec
Reputation Power: 9
maybe because that was for centering text and im trying to center a table
Reply With Quote
  #7  
Old June 5th, 2003, 11:05 AM
icy_polecat's Avatar
icy_polecat icy_polecat is offline
Senior Polecat
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jun 2003
Location: Jersey (the original version)
Posts: 210 icy_polecat User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 59 m 57 sec
Reputation Power: 6
Send a message via Yahoo to icy_polecat
Lightbulb
actually, adios was right,

to center a table you need to contain it within a DIV which has text-align: center applied to it ... and bob's your fathers brother

so:

<style>
div.centerinner {
text-align: center;
}
</style>

...

<div class="centerinner">
<table>
<tr>
<td> </td>
<tr>
</table>
</div>

should produce the effect you are after ... unless you're using some weird browser combination I'm not aware of!

Icy
__________________
Quidquid latine dictum sit, altum viditur.

http://www.XSet.co.uk
Reply With Quote
  #8  
Old June 5th, 2003, 11:27 AM
ROT ROT is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jul 2000
Posts: 41 ROT User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 11 m 35 sec
Reputation Power: 9
im an idiot, pft...

style code:

div#content {text-align: center;}

html code:

<div id="content">
</div>

had my text-align left instead of center

showing myself again to check the basics first...

**well, problem with this is it aligns any untagged text center also. so you either have to tag the text left or find a diff way**
Last edited by ROT : June 5th, 2003 at 11:29 AM.
Reply With Quote
  #9  
Old June 5th, 2003, 11:32 AM
adios adios is offline
Senior Citizen
Dev Shed Regular (2000 - 2499 posts)
  
Join Date: Jan 2001
Location: leftcoast
Posts: 2,019 adios User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 10
Just override the 'outer' alignment with specific CSS applied to the nested element(s) involved. No extra charge.
Reply With Quote
  #10  
Old June 5th, 2003, 11:35 AM
ROT ROT is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jul 2000
Posts: 41 ROT User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 11 m 35 sec
Reputation Power: 9
not sure what you just said
Reply With Quote
  #11  
Old June 5th, 2003, 11:45 AM
adios adios is offline
Senior Citizen
Dev Shed Regular (2000 - 2499 posts)
  
Join Date: Jan 2001
Location: leftcoast
Posts: 2,019 adios User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 10
Notice this...

.outerCenter {
text-align: center;
}

.innerCenter {
text-align: left;
margin-left: auto;
margin-right: auto;
}

...from the example I posted? Because the left-aligning rule is more specific ('closer' to) any contained text, it over-rides the text-align rule in the outer container. Try it.
Reply With Quote
  #12  
Old June 5th, 2003, 12:09 PM
ROT ROT is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jul 2000
Posts: 41 ROT User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 11 m 35 sec
Reputation Power: 9
ah, i see what you're saying... ya, i already got it taken care of due to the fact the titlebar and content sections of the table were already id'd
Reply With Quote
  #13  
Old June 13th, 2003, 01:52 AM
DrWorm's Avatar
DrWorm DrWorm is offline
Contributing User
Dev Shed Novice (500 - 999 posts)
  
Join Date: Aug 2002
Location: Queensland, Australia
Posts: 545 DrWorm User rank is Sergeant (500 - 2000 Reputation Level)DrWorm User rank is Sergeant (500 - 2000 Reputation Level)DrWorm User rank is Sergeant (500 - 2000 Reputation Level)DrWorm User rank is Sergeant (500 - 2000 Reputation Level)DrWorm User rank is Sergeant (500 - 2000 Reputation Level) 
Time spent in forums: 3 Days 1 h 36 m 46 sec
Reputation Power: 14
This is driving me nuts. I've seen how setting the left and right margins can be used to horizontally centre something. And IE6 correctly renders it when I view these pages that do it. But for some reason it doesn't work when I try it on my own pages. Here's my code...

Code:
<style type="text/css">
<!--
#content-area {
	padding : 10px 20px 20px 20px;
}

#content-area div.diagram {
  width : 50%;
	border-top : 2px solid Black;
	border-bottom : 2px solid Black;
	padding-top : 10px;
	margin : 0px auto;
}

div.diagram span.caption {
	border-top : 1px solid Black;
	display : block;
	margin-top : 10px;
	font-size : smaller;
	width : 100%;
}
-->
</style>
</head>

<body>

<div id="content-area">

<div class="diagram">
		<img src="images/image.gif" width="300" height="200" /><br />
    <span class="caption"><strong>Figure 1:</strong> Lorem ipsum dolor sit amet, 
    consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet 
    dolore magna aliquam erat volutpat.</span>
	</div>

</div>

</body>


This works in Opera but not in IE6 and I can't work out why. I know IE6 supports this use as this same method is used on http://www.alistapart.com/stories/practicalcss/ and it renders perfect.

Any ideas what I'm doing wrong?

Note: I have tried different ways of setting the left and right margins but it never make any difference. I also know an alternative method to centre it by giving diagram a pixel width and a negative sized margin but I really want a percentage width
__________________
Ooh, they have the Internet on computers now!
Reply With Quote
  #14  
Old June 13th, 2003, 03:32 AM
jharnois's Avatar
jharnois jharnois is offline
mod_dev_shed
Dev Shed God 19th Plane (14000 - 14499 posts)
  
Join Date: Sep 2002
Location: Atlanta, GA
Posts: 14,299 jharnois User rank is Major General (70000 - 90000 Reputation Level)jharnois User rank is Major General (70000 - 90000 Reputation Level)jharnois User rank is Major General (70000 - 90000 Reputation Level)jharnois User rank is Major General (70000 - 90000 Reputation Level)jharnois User rank is Major General (70000 - 90000 Reputation Level)jharnois User rank is Major General (70000 - 90000 Reputation Level)jharnois User rank is Major General (70000 - 90000 Reputation Level)jharnois User rank is Major General (70000 - 90000 Reputation Level)jharnois User rank is Major General (70000 - 90000 Reputation Level)jharnois User rank is Major General (70000 - 90000 Reputation Level)jharnois User rank is Major General (70000 - 90000 Reputation Level)jharnois User rank is Major General (70000 - 90000 Reputation Level)jharnois User rank is Major General (70000 - 90000 Reputation Level)jharnois User rank is Major General (70000 - 90000 Reputation Level) 
Time spent in forums: 1 Month 1 Week 2 Days 1 h 54 m 17 sec
Reputation Power: 760
Code:
#content-area
  {
  padding : 10px 20px 20px 20px;
  text-align: center; /* IE support */
  }
Reply With Quote
  #15  
Old June 13th, 2003, 09:13 AM
Eclipce Eclipce is offline
Contributing User
Dev Shed Novice (500 - 999 posts)
  
Join Date: Sep 2000
Posts: 763 Eclipce User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 1 Day 5 h 29 m 25 sec
Reputation Power: 0
Yes, IE does not support the margin: auto; property correctly.
Reply With Quote
Reply
Page 1 of 2 1 2 >

Viewing: Dev Shed Forums > Web Design > CSS Help > css and table alignment

« Previous Thread | Next Thread »

Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On