Hiya. I'm having a bit of trouble centering some text with css. I'll post my html and css style sheets, and then explain a bit further: <head> <link rel="stylesheet" href="style.css" /> </head> <body> <div id="page"> <div id= "top"> <span id="heading1">Random Page for Matt</span> <!-- HERES THE HTML PART --> </div> <div id="columns"> <div id="left"> <b>Links</b><br /><br /> <a href="http://www.google.com">Google</a><br /> <a href="http://www.wikipedia.org/">Wikipedia</a><br /> <a href="http://www.w3schools.com/">Css Guide</a> </div> <div id="middle"> <center><h1>Lorem ipsum...</h1></center> </div> <div id="right"> <a href="http://www.dotnetbutton.com/" target="_blank"> <img src="http://www.w3schools.com/images/dotnetbutton.gif" alt="dotnetbutton" border="0"></a> <br /> <a href="http://www.dotnetbutton.com/" target="_blank">Dynamic button image generation</a> </div> </div> <div id="bottom"> <b><font color = white>Disclaimer: </b></font> </div> </div> </body> HTML: body { text-align: center; } a:link { color: white; text-decoration: underline; } a:visited { color: red; text-decoration:underline; } span#heading1 { /* HEADING ONE. THIS IS THE CSS PART OF THE PROBLEM */ text-align:center; color:white; font-size:30pt; } div#page { margin-left:auto; margin-right:auto; width: 750px; background-color:#A9A9A9; text-align:left; } div#top { position: relative; width: 750px; margin-top:10px; margin-bottom:10px; background-color: black; height:100; } div#columns { position: relative; width: 750px; top: 0px; height:430px; background-color:#A9A9A9; text-align:left; } div#left { float:left; width:142px; padding-left: 8px; /*8 + 142 = 150 total width*/ background-color: black; height:100%; color:white; } div#middle { position: relative; width: 414px; padding-left: 8px; padding-right:8px; /*8 + 8 + 414 = 430 total width */ top: 0px; left: 10px; background-color: white; height:100%; overflow:auto; color:black; } div#right { position:absolute; width:142px; padding-left: 8px; /*142 + 8 = 150 total width */ height:422px; padding-top:8px; top: 0px; left: 600px; background-color: black; } div#bottom { position: relative; width: 750px; clear: both; margin-top: 10px; background-color: black; height:100; } Code (markup): I want the title of the page to be centered, and as far as I can see it should be. I am trying to avoid using the center tags. The text takes on the font size and color attributes fine. Just not the center one. It's probably a trivial mistake, but any help would be appreciated.
text-align:center; should be in div#top. also, i don't see why you don't want to use center tags when you are using tags like <font>, <b>, <br />, etc... heading1 should be H1, and h1 should be h2. plus, what's with the height:100; ? does that even do anything. Regards, Nick
What Hades said - and frankly you shouldn't even be bothering with div#top either, nor should you need #columns for that matter. The <b> section is obviously a header for that column, so it too should be a h2, you have a LIST of links, mark it up as such, axe abusing the target attribute (which has NO place in modern code in the first place...) If I have time later tonight (I'm on the way out the door to a doctors appointment right now) I'll toss together a rewrite to show you what I mean.... for now, here's a rough rewrite of your markup. </head><body> <div id="container"> <h1>Random Page for Matt</h1> <div id="left"> <h2>Links</h2> <ul> <li><a href="http://www.google.com">Google</a></li> <li><a href="http://www.wikipedia.org/">Wikipedia</a></li> <li><a href="http://www.w3schools.com/">Css Guide</a></li> </ul> <!-- #left --></div> <div id="middle"> <h2>Lorem ipsum...</h2> <!-- #middle --></div> <div id="right"> <a href="http://www.dotnetbutton.com/"> <img src="http://www.w3schools.com/images/dotnetbutton.gif" alt="dotnetbutton" /> </a> <a href="http://www.dotnetbutton.com/"> Dynamic button image generation </a> <!-- #right --></div> <div id="footer"> <b>Disclaimer:</b> Disclaimer Text Here <!-- #footer --></div> <!-- #container --></div> </body></html> Code (markup): Oh, but I do disagree with hades on singling out the use of <b> - STRONG and EM are there to SUPPLEMENT <b> and <i>, not replace them. You are not EMPHASIZING a book title, nor would he be screaming the word disclaimer.
^I agree with your views on the <strong> and <em> tags in relation to the <b> and <i> tags; however, if the point is simply to present a block of text in a distinguishable fashion (such as a header title), it would probably be better to simply use CSS to modify the text, using font-weight:bold. That is the one problem I have with the <b> and <i> tags. <strong> and <em> are descriptive tags, while <b> and <i> tags are presentational tags. I think the only reason they haven't been deprecated, like <font>, <center>, etc., is because the Web design community is split about 50/50 on whether they are acceptable mark-up tags or not. Those that argue for their inclusion tend to point to the fact that they are shorter to type, and therefore take up less space in the overall file. Should that really be the point for using them? I would take deathshadow's suggestion as far as his edited markup goes, however. It is MUCH cleaner.
@mike: A major part of the issue with <b> and <i> is that there are typographical conventions calling for their use. In effect the tags are semantic, drawing their meaning from the context. Consider a bibliographic entry: Doe, John. "Typographic Conventions", Journal of Print History vol. 12 2003: 17-40 or Doe, John. Typographic Conventions, Journal of Print History vol. 12 2003: 17-40 Both are considered correct, but the first is gaining dominance. Notice the use of quotes, italics and bolding. All follow common convention, and we infer the meaning from the context. In general, book titles, journal names, ship names, &c. were underscored when typed (remember typewriters?) and rendered bold in print. The titles of articles were quoted when typed and italicized in print. Both tags do have semantic and structural value, even if it is derived from their context. Both are completely unrelated to the <em> and <strong> tags, though rendered similarly. cheers, gary