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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cool Layout freaks out. (CSS - not much code)

    Well in IE 6 everything shows up ok, but there is some whaitespace between elements I don't want... In Fire fox the #container seems to freak out and cut the page off.

    I'm currently testing, so it's nothing great.

    -Thanks.


    Here is the CSS code.


    Code:
    #container {
    	/*margin-left:10%;
    	margin-right:10%;*/
    	width:800px;
    	border: 1px solid #000000;
    
    }
    
    #topleftlogo {
        float:left;
    	height:98px;
    	width:291px;
    
    }
     
    #toprightbg {
        float:right;
    	width:509px;
    	height:78px;
    	background-color:#FFFFFF;
    }
    
    #toprightnav {
        float:right;
    	width:499px;
    	height:20px;
    	background-color:#C0C0C0;
    	padding-left:10px;
    
    }
    
    #banner {
    	width:800px;
    	height:183px;
    	
    }
    
    
    #bannerbottom {
    	width:800px;
    	height:35px;
    	background-color:#000000;
    
    }
    
    #leftbar {
    background-color:#CCCCCC;
    	width:291px;
    	float:left;
    	height:400px;
    
    }
    
    #rightbar {
    background-color:#666666;
        float:right;
    	width:509px;
    	height:400px;
    	
    }
    
    #footer {
       width:800px;
       height:35px;
    background-color:#000000;
    
       
    }

    html Code.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta content="description" name=description>
    <meta content="keywords" name=keywords>
    <LINK href="css/rewrite.css" type=text/css rel=stylesheet>
    <title>Title</title>
    </head>
     
    <body>
    
    <div id="container"><!--contain the site -->
    
    <div id="topleftlogo"><img width="291" height="98" border="0"/></div>
    
    <div id="toprightbg"><img width="509" height="78" border="0" /></div>
    
    <!-- Navigation -->
    <div id="toprightnav"><a href="#">Link 1</a> | <a href="#">Link 2</a> | <a href="#">Link 3</a> | <a href="#">Link 4</a> |
    <a href="#">Link 6</a> | <a href="#">Link 6</a>
    </div> <!-- End Navigation -->
    
    <div id="banner"><img width="800" height="183" border="0" /></div>
    
    <div id="bannerbottom">
    </div>
    
    <div id="leftbar">
    </div>
    
    <div id="rightbar">
    </div>
    
    <div id="footer">
    </div>
    
    <!-- End container -->
    </div>
    </body>
    </html>

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Firefox isn't freaking out. Its doing what its supposed to. Once you float elements they are taken out of flow. You need to clear them.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta content="description" name="Description" />
    <meta content="keywords" name="Keywords" />
    <title>&nbsp;</title>
    <style type="text/css">
    #container {
    width:800px;
    border:1px solid #000;
    margin:auto;
    }
    
    #topleftlogo {
    float:left;
    height:98px;
    width:291px;
    }
    
    #toprightbg {
    float:right;
    width:509px;
    height:78px;
    background-color:#FFF;
    }
    
    #toprightnav {
    float:right;
    width:499px;
    height:20px;
    background-color:silver;
    padding-left:10px;
    }
    
    #banner {
    height:183px;
    }
    
    #bannerbottom {
    height:35px;
    background-color:#000;
    }
    
    #leftbar {
    background-color:#CCC;
    width:291px;
    float:left;
    height:400px;
    }
    
    #rightbar {
    background-color:#666666;
    float:right;
    width:509px;
    height:400px;
    }
    
    #footer {
    height:35px;
    background-color:#000;
    }
    
    .clear {
    clear:both;
    font-size:0;
    line-height:0px;
    }
    </style>
    <title>Title</title>
    </head>
    <body>
    <div id="container">
    	<!--contain the site -->
    	<div id="topleftlogo"><img src="img.gif" width="291" height="98" border="0" alt="" /></div>
    	<div id="toprightbg"><img src="img.gif" width="509" height="78" border="0" alt="" /></div>
    	<div class="clear">&nbsp;</div>
    	<!-- Navigation -->
    	<div id="toprightnav"><a href="#">Link 1</a> | <a href="#">Link 2</a> | <a href="#">Link 3</a> | <a href="#">Link 4</a> | <a href="#">Link 6</a> | <a href="#">Link 6</a> </div>
    	<!-- End Navigation -->
    	<div id="banner"><img src="img.gif" width="800" height="183" border="0"  alt="" /></div>
    	<div id="bannerbottom"></div>
    	<div id="leftbar"> </div>
    	<div id="rightbar"> </div>
    	<div class="clear">&nbsp;</div>
    	<div id="footer"> </div>
    	<!-- End container -->
    </div>
    </body>
    </html>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wow, thanks for the fast reply. Thanks, I've been reading, and overlooked, or the book neglected to mention this.

    Again thanks!

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,793
    Thanks
    6
    Thanked 1,022 Times in 995 Posts
    By a short glimpse at your code it looks like you're just switching from table based website coding and haven't quite understood the purpose/advantage of CSS based layout (with the mandatory foundation of semantic HTML) yet. So read on semantics as this may remove some of your issues.

    Plus make sure your HTML code is valid before you start styling with CSS.

    Edit: Ah, dammit! Too slow by searching for good inspirational sources and words...


  •  

    Posting Permissions

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