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
    Feb 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Aligning div Layout

    Hello there...new here so just let me know if I do something worng...I'll correct it.


    I got this layout I'm trying to set-up:

    Code:
    <title>.::Home::.</title>
    <style>
    #fundal{
    	height: 780px;
    	width: 780px;
    	background-image: url(slices/800x600site.gif);
    }
    #header{
    	background-image: url(slices/images/header.gif);
    	height: 188px;
    	width: 698px;
    }
    #meniu{
    	background-image: url(slices/images/layout_phtshopsliced_06.gif);
    	width: 699px;
    	height: 53px;
    }
    #ctop {
    background-image: url(slices/images/layout_sliced2_15.gif);
    width: 501px;
    height: 29px;
    }
    
    body {
    	margin-top: 0px;
    	margin-bottom: 0px;
    	background-color: #D2D2D2;
    }
    </style>
    </head>
    
    <body>
    <div id="fundal">
    	<div id="header">
    	</div>
    	<div id="meniu">
    	</div>
    	<div id="ctop">	
    	</div>
    </div>
    </body>

    the problem is that if I use "<center>" before the "fundal" div...
    Code:
    <body>
    <center><div id="fundal">
    	<div id="header">
    	</div>
    	<div id="meniu">
    	</div>
    	<div id="ctop">	
    	</div>
    </div></center>
    </body>
    it just centers everything... I'd like just the "fundal","header" and "meniu" divs centered. The "ctop" must be aligned left. Got any ideea on how to this.?


    P.S. I like using divs for the layout.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,915
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    Quote Originally Posted by Hantu View Post
    P.S. I like using divs for the layout.
    So why are you using a deprecated center tag then? If you already go the modern way then do it correctly:
    Code:
    #header, #meniu {margin: 0 auto;}

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Hello Hanto,
    In this example body has text-align: center;(for older browsers) and fundal has margin: 0 auto;. That centers your site.
    header and meniu also have margin: 0 auto; that centers them within fundal.
    Setting text-align: left; in fundal aligns ctop left. (I didn't check that in IE6)

    Code:
    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>.::Home::.</title>
    <style type="text/css">
    html, body {
    	text-align: center;
    	background-color: #D2D2D2;
    }
    * {
    	margin: 0;
    	padding: 0;
    }
    #fundal, #header, #meniu {
    	margin: 0 auto;
    }
    #fundal{
    	height: 780px;
    	width: 780px;
    	text-align: left;
    	background-image: url(slices/800x600site.gif);
    }
    #header{
    	height: 188px;
    	width: 698px;
    	background-image: url(slices/images/header.gif);
    }
    #meniu{
    	width: 699px;
    	height: 53px;
    	background-image: url(slices/images/layout_phtshopsliced_06.gif);
    }
    #ctop {
    	width: 501px;
    	height: 29px;
    	background-image: url(slices/images/layout_sliced2_15.gif);
    }
    </style>
    </head>
    
    <body>
    <div id="fundal">
    			<div id="header">
    			<h1>header</h1>
    			</div>
    						<div id="meniu">
    						<ul>
    						<li>one</li>
    						<li>two</li>
    						<li>three</li>
    						</ul>
    						</div>
    	<div id="ctop">	
    	<p>some stuff</p>
    	</div>
    </div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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