Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Centering a DIV tag on the page

    Hello, I have been learning to use DIV tags to control page layout rather than tables. One problem which I cannot seem to overcome is setting a single div tag which spans the entire height of the document to be centered on the page. The code which I am working on is available to view here.

    I have tried setting the text-align property of the div tag as well as the body tag to be center and this does not seem to work in Firefox or IE. I would really appreciate any help here as I have searched through a number of different forums and tutorials and have not found any solution.

    I have also pasted the code below, thank you for any assistance you can render.

    document:
    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
      <head>
        <title>criticallyinsane</title>
    
        <link rel="stylesheet" href="include/style.css" type="text/css" />
    
        <img class="preload" src="images/island_mail_on.gif">
      </head>
    
      <body>
    	<div id="body">
    		<img src="horizon.php">
    		<div id="links">
    			<span class="first">
    				<a href="http://www.criticallyinsane.com:2095/horde/">mail.</a>
    			</span>
    			<span class="second">
    				<a href="http://www.criticallyinsane.com/main.html">go.</a>
    			</span>
    			<span class="third">
    				<a href="http://www.criticallyinsane.com/gallery">gallery.</a>
    			</span>
    		</div>
    		<img src="images/island_mail_off.gif" onMouseOver="this.src='images/island_mail_on.gif';" onMouseOut="this.src='images/island_mail_off.gif';">
    	</div>
      </body>
    </html>
    stylesheet:
    Code:
    body
    {
    	text-align:center;
    	height:100%;
    	width:100%;
    }
    
    img
    {
     border:0px
    }
    
    .preload
    {
     display:none
    }
    
    #wrapper
    {
    	height:100%;
    	width:100%;
    	text-align:center;
    	background-color:white;
    }
    
    #body
    {
    	position:absolute;
    	text-align:center;
    	top:0px;
    	left:0px;
    	width:640px;
    	height:100%;
    	background-color:#1767EB
    }
    
    a
    {
    	color:white;
    	text-decoration:none;
    }
    
    a:hover
    {
    	background-color:red
    }
    
    #links
    {
    	padding-top:50px;
    	padding-bottom:50px;
    	font-family:arial;
    	color:#FFFFFF;
    	font-weight:bold;
    	vertical-align: bottom;
    	text-align:center;
    }
    
    .first
    {
    	position:absolute;
    	left:100px;
    }
    
    .second
    {
    	position:absolute;
    	left:300px;
    }
    
    .third
    {
    	position:absolute;
    	left:480px;
    }

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,680
    Thanks
    6
    Thanked 1,009 Times in 982 Posts
    Since divs have a width of 100% by default you can't actually see that it is centered when you center it so you have to assign a width to that div and then apply margin: 0 auto; to it. The first value applies a top and bottom margin (here "zero" - can be changed if you want/need) and the second value ("auto") is for left and right margins.

    Edit: General note: Block elements (like <div>, <ul>, <p>...) or elements set to display: block; are centered with the method above, inline elements (like <img>, <a>, <span>...) or elements set to display: inline; can only be centered with text-align: center; assigned to their parent element.
    Last edited by VIPStephan; 05-08-2006 at 08:57 PM.

  • #3
    New to the CF scene
    Join Date
    May 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you Stephen, that fixed my problem. I really appreciate your reply!

    Jon


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •