1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

text-align:center doesn't seem to work

Discussion in 'CSS' started by Iamadam_1, Apr 30, 2008.

0
  1. #1
    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.
     
    Iamadam_1, Apr 30, 2008 IP
  2. Hades

    Hades Well-Known Member

    Messages:
    1,873
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    150
    #2
    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
     
    Hades, May 1, 2008 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #3
    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.
     
    deathshadow, May 1, 2008 IP
  4. mike.greenleaf

    mike.greenleaf Peon

    Messages:
    14
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    ^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.greenleaf, May 2, 2008 IP
  5. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #5
    @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
     
    kk5st, May 2, 2008 IP