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

    Wah! My CSS skills are letting my layout down.

    I can't seem to get my layout to stretch properly!
    http://www.subtle-edge.com <- as you can see, it's quite broken, and my footer no longer displays at all. I know how to get a table layout to stretch, but this is yet another roadblock I've met since trying to use a Div based layout.
    If anyone could give me a hand, I'd be eternally grateful!
    And as a note, my menu won't be staying like that, I know it's difficult to read

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello again Throlkim,
    I see you have
    Code:
    #subtle-edge-07_ {
    position:absolute;
    	left:0px;
    	top:789px;
    	width:180px;
    	height:auto;
    	background:#000 url('http://subtle-edge.com/images/subtle_edge_07.png') repeat top center;
    }
    in the hopes that will repeat-y on the left side but ... it won't. For a div to expand with content it has to have content in it. Empty divs don't do much.

    For your layout to work you should probably use nested divs and no absolute positioning.
    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

  • Users who have thanked Excavator for this post:

    Throlkim (01-05-2008)

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Have a look at how nested divs work...
    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>Untitled Document</title>
    <meta name="" content="authored by http://nopeople.com/Design" />
    <style type="text/css">
    html, body {
    	background: #CCCCCC;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    #wrap {
    	width: 1024px;
    	background: url(http://subtle-edge.com/images/subtle_edge_07.png) repeat-y left;
    margin: 0 auto;
    }
    #wrap_inner {
    	width: 1024px;
    	background: url(http://subtle-edge.com/images/subtle_edge_08.png) repeat-y right;
    }
    	#curtains-l {
    		float: left;
    	}
    	#curtains-r {
    		float: right;
    	}
    #container {
    	width: 648px;
    	margin: 0 0 0 180px;
    }
    </style>
    </head>
    <body>
    <div id="wrap">
    	<div id="wrap_inner">
                    <img src="http://subtle-edge.com/images/subtle_edge_02.png" width="180" height="706" alt="left curtains" id="curtains-l" />
                    <img src="http://subtle-edge.com/images/subtle_edge_04.png" alt="right curtains" width="196" height="706" id="curtains-r" />
            <div id="container">
                <img src="http://subtle-edge.com/images/subtle_edge_03.png" width="648" height="184" alt="logo" />
                <img src="http://subtle-edge.com/images/subtle_edge_03.png" width="648" height="184" alt="logo" />
                <img src="http://subtle-edge.com/images/subtle_edge_03.png" width="648" height="184" alt="logo" />
                <img src="http://subtle-edge.com/images/subtle_edge_03.png" width="648" height="184" alt="logo" />
                <img src="http://subtle-edge.com/images/subtle_edge_03.png" width="648" height="184" alt="logo" />
                <img src="http://subtle-edge.com/images/subtle_edge_03.png" width="648" height="184" alt="logo" />
                <img src="http://subtle-edge.com/images/subtle_edge_03.png" width="648" height="184" alt="logo" />
                <img src="http://subtle-edge.com/images/subtle_edge_03.png" width="648" height="184" alt="logo" />
            <!--end container--></div>
        <!--end wrap_inner--></div>
    <!--end wrap--></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

  • Users who have thanked Excavator for this post:

    Throlkim (01-05-2008)

  • #4
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    5
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks very much for the help, I can see how it would work, but I'm still absolutely confused. Divs are infuriating to work with. >.>
    I've managed to get it sort of in the right place, but my menu has a weird gap in it now, I can't seem to get the top curtain to float over the top, and I haven't even attempted failing with the footer yet.
    I hate divs :'(

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Move the top curtain to the div that has the side curtains. That way the top image will push the side ones down.

    A lot of times a gap like that can be fixed with display:block; I'm sure smarter people here can explain why.

    You should remove all that extra CSS while your doing your re-design, sooner or later it's going to cause a conflict somewhere.

    Try this:
    Code:
    html {
    	margin: 0;
    	padding: 0;
    	}
    
    body { 
    	background: #000000; 
    	}
    
    * {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    #wrap {
    	width: 1024px;
    	background: url(http://subtle-edge.com/images/subtle_edge_07.png) repeat-y left;
    margin: 0 auto;
    }
    #wrap_inner {
    	width: 1024px;
    	background: url(http://subtle-edge.com/images/subtle_edge_08.png) repeat-y right;
    }
    	#curtains-l {
    		float: left;
    		top:83px;
    	}
    	#curtains-r {
    		float: right;
    		top:83px;
    	}
    #container {
    	width: 648px;
    	margin: 0 0 0 180px;
    	background:#000 url('http://subtle-edge.com/images/subtle_edge_06.png') repeat top center;
    }
    #logo img{
    display: block;
    }
    #menu {
    		
    }
    #top{
    display: block;
    }
    Code:
    <div id="wrap">
    	<div id="wrap_inner">
    			<img src="http://subtle-edge.com/images/subtle_edge_01.png" alt="" id="top">
                    <img src="http://subtle-edge.com/images/subtle_edge_02.png" alt="left curtains" id="curtains-l" height="706" width="180">
                    <img src="http://subtle-edge.com/images/subtle_edge_04.png" alt="right curtains" id="curtains-r" height="706" width="196">
            <div id="container">
    			
    <div id="logo">
    <img src="http://subtle-edge.com/images/subtle_edge_03.png" alt="">
    </div>
    <div id="menu">
    <img src="http://subtle-edge.com/images/subtle_edge_05.png" alt="" usemap="#menu" border="0" height="131" width="648">
    <map name="menu" id="menu"><area shape="rect" coords="-7,-2,161,46" href="http://www.subtle-edge.com/content/showcase" target="_self" alt="Showcase"><area shape="rect" coords="489,12,623,69" href="http://www.subtle-edge.com/content/author" target="_self" alt="Author"><area shape="rect" coords="163,24,324,74" href="http://www.subtle-edge.com/content/tutorials" target="_self" alt="Tutorials"><area shape="rect" coords="329,15,481,67" href="http://www.subtle-edge.com/content/articles" target="_self" alt="Articles">
    
    
    
    </map>
    </div>
            <!--end container--></div>
        <!--end wrap_inner--></div>
    <!--end wrap--></div>
    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

  • Users who have thanked Excavator for this post:

    Throlkim (01-05-2008)

  • #6
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    5
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Ooh, that worked great, it's starting to look more correct - thanks very much.
    I've had a bash at the footer, but again I've managed to mess it up. I just don't understand the different positioning options for divs - they never end up where I meant to put them.


  •  

    Posting Permissions

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