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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 21
  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Posts
    116
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question 2 column layout appears wrong

    I am still quite new to css and even though I have been trying some around with building up a basic layout. My "content boxes are sliced into 2 or three parts, when I added both headers everything was fine, when I started adding the content box of the left one, the right one is pushed down. So when I added the footer of the left content box, the right one is even pushed further down.

    A picture:



    CSS:

    Code:
    #wrapper #bodyArea #leftHeader {
    	background-image: url(../images/big_header_content.gif);
    	height: 37px;
    	width: 600px;
    	margin-top: 15px;
    	margin-right: 10px;
    	margin-left: 15px;
    	float: left;
    }
    #wrapper #bodyArea #leftContent {
    	background-image: url(../images/content_big.gif);
    	height: 271px;
    	width: 600px;
    	margin-top: 0px;
    	margin-right: 10px;
    	margin-left: 15px;
    	float: left;
    }
    #wrapper #bodyArea #leftFooter {
    	background-image: url(../images/big_content_bottem.gif);
    	height: 29px;
    	width: 600px;
    	margin-top: 0px;
    	margin-right: 10px;
    	margin-left: 15px;
    	float: left;
    }
    #wrapper #bodyArea #rightHeader {
    	background-image: url(../images/small_content_header.gif);
    	height: 37px;
    	width: 250px;
    	margin-top: 15px;
    	margin-right: 15px;
    	margin-left: 10px;
    	float: right;
    }
    #wrapper #bodyArea #rightContent {
    	background-image: url(../images/small_content_box.gif);
    	height: 300px;
    	width: 250px;
    	margin-top: 15px;
    	margin-right: 15px;
    	margin-left: 10px;
    	float: right;
    }
    HTML:

    Code:
    <body>
    <div id="wrapper">
      <div id="logoWrapper"></div>
      <div id="navigation"></div>
      <div id="slideShow"></div>
      <div id="bodyArea">
        <div id="leftHeader"></div>
        <div id="leftContent"></div>
        <div id="leftFooter"></div>
        <div id="rightHeader"></div>
        <div id="rightContent"></div>
      </div>
    </div>
    </body>
    What did I do wrong?

    Thanks already
    Last edited by Krentenbol; 09-24-2011 at 05:21 PM.

  • #2
    New Coder
    Join Date
    Aug 2011
    Location
    OH, USA
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    A link would be nice, and maybe your current css.

  • #3
    Regular Coder
    Join Date
    Sep 2011
    Posts
    116
    Thanks
    1
    Thanked 0 Times in 0 Posts
    It is not online yet, I could put it on a free host if necessary. I added the css code.

  • #4
    New Coder
    Join Date
    Aug 2011
    Location
    OH, USA
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    See if this works:

    Code:
    #wrapper #bodyArea #leftHeader {
        background-image: url(../images/big_header_content.gif);
        height: 37px;
        width: 600px;
        max-width: 600px;
        margin-top: 15px;
        margin-right: 10px;
        margin-left: 15px;
        float: left;
    }
    #wrapper #bodyArea #leftContent {
        background-image: url(../images/content_big.gif);
        height: 271px;
        width: 600px;
        max-width: 600px;
        margin-top: 0px;
        margin-right: 10px;
        margin-left: 15px;
        float: left;
    }
    #wrapper #bodyArea #leftFooter {
        background-image: url(../images/big_content_bottem.gif);
        height: 29px;
        width: 600px;
        max-width: 600px;
        margin-top: 0px;
        margin-right: 10px;
        margin-left: 15px;
        float: left;
    }
    #wrapper #bodyArea #rightHeader {
        background-image: url(../images/small_content_header.gif);
        height: 37px;
        width: 250px;
        max-width: 250px;
        margin-top: 15px;
        margin-right: 15px;
        margin-left: 10px;
        float: right;
    }
    #wrapper #bodyArea #rightContent {
        background-image: url(../images/small_content_box.gif);
        height: 300px;
        width: 250px;
        max-width: 250px;
        margin-top: 15px;
        margin-right: 15px;
        margin-left: 10px;
        float: right;
    }

  • #5
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,226
    Thanks
    10
    Thanked 269 Times in 268 Posts
    I would have those left and right areas, rather than being three separate divs, each be a single div, with three elements inside them. Say #leftBox and #rightBox (styled much like your #left and #right items are now). Then inside then you might style #leftBox h1 to be your header area, then no separate style for the content area of the boxes, and then if you have a footer you might just have a class for the footer styles.

    As you have is now, those three areas that make up a box have no semantic connection to each other.

    Dave

  • #6
    New Coder
    Join Date
    Aug 2011
    Location
    OH, USA
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by tracknut View Post
    I would have those left and right areas, rather than being three separate divs, each be a single div, with three elements inside them. Say #leftBox and #rightBox (styled much like your #left and #right items are now). Then inside then you might style #leftBox h1 to be your header area, then no separate style for the content area of the boxes, and then if you have a footer you might just have a class for the footer styles.

    As you have is now, those three areas that make up a box have no semantic connection to each other.

    Dave
    I didn't think of that. Using perscents instead of pixels could help too. (if its a screen size problem.)

  • #7
    Regular Coder
    Join Date
    Sep 2011
    Posts
    116
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by flyingfisch View Post
    See if this works:

    Code:
    #wrapper #bodyArea #leftHeader {
        background-image: url(../images/big_header_content.gif);
        height: 37px;
        width: 600px;
        max-width: 600px;
        margin-top: 15px;
        margin-right: 10px;
        margin-left: 15px;
        float: left;
    }
    #wrapper #bodyArea #leftContent {
        background-image: url(../images/content_big.gif);
        height: 271px;
        width: 600px;
        max-width: 600px;
        margin-top: 0px;
        margin-right: 10px;
        margin-left: 15px;
        float: left;
    }
    #wrapper #bodyArea #leftFooter {
        background-image: url(../images/big_content_bottem.gif);
        height: 29px;
        width: 600px;
        max-width: 600px;
        margin-top: 0px;
        margin-right: 10px;
        margin-left: 15px;
        float: left;
    }
    #wrapper #bodyArea #rightHeader {
        background-image: url(../images/small_content_header.gif);
        height: 37px;
        width: 250px;
        max-width: 250px;
        margin-top: 15px;
        margin-right: 15px;
        margin-left: 10px;
        float: right;
    }
    #wrapper #bodyArea #rightContent {
        background-image: url(../images/small_content_box.gif);
        height: 300px;
        width: 250px;
        max-width: 250px;
        margin-top: 15px;
        margin-right: 15px;
        margin-left: 10px;
        float: right;
    }
    This didn't help, any other ideas? It isn't a screensize problem I guess. Since the width is 900 in total, 600 + 250 + (2*10) + (2*15)= 900 pixels. I could also try with the elements?

  • #8
    New Coder
    Join Date
    Aug 2011
    Location
    OH, USA
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    could we see the HTML code also?

  • #9
    Regular Coder
    Join Date
    Sep 2011
    Posts
    116
    Thanks
    1
    Thanked 0 Times in 0 Posts
    There you go:

    Code:
    <body>
    <div id="wrapper">
      <div id="logoWrapper"></div>
      <div id="navigation"></div>
      <div id="slideShow"></div>
      <div id="bodyArea">
        <div id="leftHeader"></div>
        <div id="leftContent"></div>
        <div id="leftFooter"></div>
        <div id="rightHeader"></div>
        <div id="rightContent"></div>
      </div>
    </div>
    </body>

  • #10
    Regular Coder
    Join Date
    Sep 2011
    Posts
    116
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I am still pretty new with css and stuff. Could someone explain how I style the header and footer of my left content box when it's one div, not 3 parts.

    Edit: I tried something here is my code:


    Code:
    .left {
    	float:left;
    	width:600px;
    }
    .left.title {
    	margin-top:15px;
    	margin-left:15px;
    	margin-right:10px;
    	margin-bottom:0px;
    	background-image:url(../images/big_header_content.gif);
    	height:40px;
    }
    .left.box {
    	margin-top:0px;
    	margin-left:15px;
    	margin-right:10px;
    	margin-bottem:0px;
    	background-image:url(../images/content_big.gif);
    	height:400px;
    }
    .left.footer {
    	margin-top:0px;
    	margin-left:15px;
    	margin-right:10px;
    	margin-bottem:15px;
    	background-image:url(../images/big_content_bottem.gif);
    	height:40px;
    }
    Html

    Code:
      <div class:"left">
      <div class:"title">Big content title</div>
      <div class:"box">Content</div>
      <div class:"footer">Footer</div>
      </div>
    Could someone explain why the background image doesn't show up, it only shows up the text.
    Last edited by Krentenbol; 09-25-2011 at 11:20 AM.

  • #11
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,226
    Thanks
    10
    Thanked 269 Times in 268 Posts
    You're on the right path with this. Note your class:"left" (as well as the rest of them) is wrong, it should be class="left" with an equal sign.

    Then once you have this working, I would change your .left.title to .left h1 (or h2) so that rather than defining a new class called .title, you use a header as is semantically correct. I would also change your .left style to look something like:
    Code:
    .left {
    	float:left;
    	width:600px;
    	padding:15px;
    	background-image:url(../images/content_big.gif);
    	height:480px;
    }
    That should allow you to elliminate the .left.box class completely, and your html will then look like:
    Code:
    <div class="left">
      <h1>Big content title</h1>
      <p>Content</p>
      <div class="footer">Footer</div>
    </div>
    Presumably then you'll add another class .right to address the second box.

    Dave

  • #12
    Regular Coder
    Join Date
    Sep 2011
    Posts
    116
    Thanks
    1
    Thanked 0 Times in 0 Posts
    The header is fixed in this way. But the content and footer both ain't. The layout got screwed this way. This picture shows what I mean. Not just the content box is wrong also the header is shown wrong. This picture shows how the header should look like.

    I hope you can help me.

    My CSS code:

    Code:
    .left {
    	float:left;
    	width:600px;
    	padding:15px;
    	background-image:url(../images/content_big.gif);
    	height:480px;
    }
    
    .left h2 {
    	margin-top:15px;
    	margin-left:15px;
    	margin-right:10px;
    	margin-bottom:0px;
    	background-image:url(../images/big_header_content.png);
    	height:40px;
    }
    .left.footer {
    	margin-top:0px;
    	margin-left:15px;
    	margin-right:10px;
    	margin-bottem:15px;
    	background-image:url(../images/big_content_bottem.gif);
    	height:40px;
    }
    my html code:

    Code:
      <div id="bodyArea">
    	<div class="left">
      		<h2>Big content title</h2>
      		<p>Content</p>
      		<div class="footer">Footer</div>
    	</div><!--end class left-->  
      </div><!--end bodyArea -->
    Last edited by Krentenbol; 09-25-2011 at 07:07 PM.

  • #13
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,226
    Thanks
    10
    Thanked 269 Times in 268 Posts
    Is your page on a server we can see yet? It's very hard to debug your code when we have to build our own web site from it. If not, then please post it all here and I'll take a look.

    Dave

  • #14
    Regular Coder
    Join Date
    Sep 2011
    Posts
    116
    Thanks
    1
    Thanked 0 Times in 0 Posts
    No it's not on a server but here is the full code:

    Css:

    Code:
    * {
    	margin: 0px;
    	padding: 0px;
    }
    #wrapper {
    	width: 900px;
    	margin-right: auto;
    	margin-left: auto;
    }
    #wrapper #logoWrapper {
    	background-image: url(../images/Title.gif);
    	height: 102px;
    	width: 900px;
    	margin-right: auto;
    	margin-left: auto;
    }
    a img {
    	border-top-style: none;
    	border-right-style: none;
    	border-bottom-style: none;
    	border-left-style: none;
    }
    #wrapper #slideShow {
    	background-image: url(../images/Slideshow.gif);
    	height: 270px;
    }
    #wrapper #navigation {
    	background-image: url(../images/Navigation.gif);
    	height: 63px;
    }
    #wrapper #bodyArea {
    	background-image: url(../images/White_bg_content.gif);
    	height: 367px;
    }
    .left {
    	float:left;
    	width:600px;
    	padding:15px;
    	background-image:url(../images/content_big.gif);
    	height:480px;
    }
    
    .left h2 {
    	margin-top:15px;
    	margin-left:15px;
    	margin-right:10px;
    	margin-bottom:0px;
    	background-image:url(../images/big_header_content.png);
    	height:40px;
    }
    .left.footer {
    	margin-top:0px;
    	margin-left:15px;
    	margin-right:10px;
    	margin-bottem:15px;
    	background-image:url(../images/big_content_bottem.gif);
    	height:40px;
    }

    here is the html:

    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=utf-8" />
    <title>Index</title>
    <style type="text/css">
    body {
    	background-color: #999;
    }
    </style>
    <link href="css/layout.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    <div id="wrapper">
      <div id="logoWrapper"><a href="index.html"><img src="images/banner.png" width="317" height="96" alt="Logo" /></a></div>
      <div id="slideShow"></div>
      <div id="bodyArea">
    	<div class="left">
      		<h2>Big content title</h2>
      		<p>Content</p>
      		<div class="footer">Footer</div>
    	</div><!--end class left-->  
      </div><!--end bodyArea -->
    </div><!--end wrapper -->
    </body>
    </html>

  • #15
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,226
    Thanks
    10
    Thanked 269 Times in 268 Posts
    I don't have your images, but try this, it may be closer to what you want:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>Big content title Content Footer</title>
    <style type="text/css">
    body {
    	background-color: #999;
    }
    * {
    	margin: 0px;
    	padding: 0px;
    }
    #wrapper {
    	width: 900px;
    	margin-right: auto;
    	margin-left: auto;
    }
    #wrapper #logoWrapper {
    	background-image: url(../images/Title.gif);
    	height: 102px;
    	width: 900px;
    	margin-right: auto;
    	margin-left: auto;
    }
    a img {
    	border-top-style: none;
    	border-right-style: none;
    	border-bottom-style: none;
    	border-left-style: none;
    }
    #wrapper #slideShow {
    	background-image: url(../images/Slideshow.gif);
    	height: 270px;
    }
    #wrapper #navigation {
    	background-image: url(../images/Navigation.gif);
    	height: 63px;
    }
    #wrapper #bodyArea {
    	background-image: url(../images/White_bg_content.gif);
    	height: 367px;
    }
    .left {
    	float:left;
    	width:600px;
    	background-image:url(../images/content_big.gif);
    	height:480px;
    	position:relative;
    }
    .left h2 {
    	padding:5px 10px 0;
    	background:url(../images/big_header_content.png) no-repeat;
    	height:37px;
    }
    .left .footer {
    	padding:0 10px 15px 15px;
    	background-image:url(../images/big_content_bottem.gif);
    	height:40px;
    	position:absolute;bottom:0;
    }
    </style>
    </head>
    
    <body>
    <div id="wrapper">
      <div id="logoWrapper"><a href="index.html"><img src="images/banner.png" width="317" height="96" alt="Logo" /></a></div>
      <div id="slideShow"></div>
      <div id="bodyArea">
    	<div class="left">
      		<h2>Big content title</h2>
      		<p>Content</p>
      		<div class="footer">Footer</div>
    	</div><!--end class left-->  
      </div><!--end bodyArea -->
    </div><!--end wrapper -->
    </body>
    
    </html>


  •  
    Page 1 of 2 12 LastLast

    Tags for this Thread

    Posting Permissions

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