#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Posts
    8
    Rep Power
    0

    CSS Problem: newbie question....


    Hi,

    I'm still getting a hang of CSS and am having a problem -- I'm having a hard time for a specific section to "expand" down as I add content -- for example: I have a:

    Code:
    <div class="content">
      Hi.
      Hi.
      Hi.
      ..... etc (just an example)
    </div>
    and for content I'd have:

    Code:
    .content
    {
        background-color: #000000;
        height: 400px;
    }
    That's no problem.. but I have that on top of ANOTHER <div> tag that has a black background -- it's hard to explain.. so I will give you a link to the page:

    http://daband.org/v1/

    As you can see -- the black doesn't keep extending down. I have no idea how to solve this.

    The link to my stylesheet is at:

    http://daband.org/v1/standard.css

    Please take a look at the source of the page and stylesheet to see what I'm doin wrong... I'm clueless..

    Regards
    Sym
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2002
    Posts
    809
    Rep Power
    17
    Make your content_body position relative instead of absolute.

    Code:
    .content_body
    {
    	top: 5px;
    	left: 162px;
    	height: 480px;
    	padding: 1px;
    	position: relative;
    	width: 460px;
    	color: white;
    	background-image: url('http://daband.org/v1/images/body_bg.gif');
    	background-repeat: repeat;
    }
  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Posts
    8
    Rep Power
    0
    Originally posted by Nasrim
    Make your content_body position relative instead of absolute.

    Code:
    .content_body
    {
    	top: 5px;
    	left: 162px;
    	height: 480px;
    	padding: 1px;
    	position: relative;
    	width: 460px;
    	color: white;
    	background-image: url('http://daband.org/v1/images/body_bg.gif');
    	background-repeat: repeat;
    }
    Well, it still looks messed up, here's how it looks now:

    http://daband.org/v1/index2.html
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2002
    Posts
    809
    Rep Power
    17
    You changed main_body and navigation to relative. They need to stay absolute.

    Only one you needed to change was content_body.

    Also you are short on closing </div> tag at the bottom.

    It works this way in my tests with IE, Mozilla, and Opera.
  8. #5
  9. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    use float. easiest solution,

    Code:
    .navigation
    {
    	float:left;
    	padding: 1px;
    	width: 146px;
    	background-color: #000000;
    	border-right: 1px #E8E4DC dotted;
    
    
    }
    
    .content_body
    {
    	margin-left: 155px;
    	padding: 1px;
    	width: 460px;
    	color: white;
    	background-image: url('http://daband.org/v1/images/body_bg.gif');
    	background-repeat: repeat;
    }
    and there is lots you could to fix up that code,
    remeber to use alt-attributes on every image,

    instead of the table in the navigation
    you could have used a list,

    instead of this
    Code:
    <div class="content_body">  
          
          <img src="images/body_news.gif" border="0">  <br><br>  
                   
          <div class="content_title">
            Launch: rgamer.net. 
          </div>            
          <div class="content_date">
    
            November 24th, 2003
          </div>      
          <div class="content_text">
            Welcome!  rgamer.net has finally launched.  We hope that you like our layout.
            Welcome!  rgamer.net has finally launched.  We hope that you like our layout.
            Welcome!  rgamer.net has finally launched.  We hope that you like our layout.
            Welcome!  rgamer.net has finally launched.  We hope that you like our layout.
            Welcome!  rgamer.net has finally launched.  We hope that you like our layout.
            Welcome!  rgamer.net has finally launched.  We hope that you like our layout.          
          </div>
    you could write it like

    Code:
        <div class="content_body">  
          
    	  <h1><img  src="body_news.gif" alt="Current news"></h1> 
               
          <h2>
            Launch: rgamer.net. 
          </h2>            
          <h3>
            November 24th, 2003
          </h3>      
          <p>
            Welcome!  rgamer.net has finally launched.  We hope that you like our layout.
            Welcome!  rgamer.net has finally launched.  We hope that you like our layout.
            Welcome!  rgamer.net has finally launched.  We hope that you like our layout.
            Welcome!  rgamer.net has finally launched.  We hope that you like our layout.
            Welcome!  rgamer.net has finally launched.  We hope that you like our layout.
            Welcome!  rgamer.net has finally launched.  We hope that you like our layout.          
          </p>
    and the css

    Code:
    .content_body
    {
    	margin-left: 155px;
    	padding: 1px;
    	width: 460px;
    	color: white;
    	background-image: url('http://daband.org/v1/images/body_bg.gif');
    	background-repeat: repeat;
    }
    
    .content_body h2
    {
    	font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	font-weight: bold;
    	color: #B6C1D5;
    }
    
    .content_body h3
    {
    	font-family: arial;
    	font-size: 7pt;
    	color: #6A7589;
    	font-weight: bold;
    }
    
    .content_body p 
    {
    	align: justify;
    	padding: 5px;
    }
  10. #6
  11. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Posts
    8
    Rep Power
    0
    Originally posted by Nasrim
    You changed main_body and navigation to relative. They need to stay absolute.

    Only one you needed to change was content_body.

    Also you are short on closing </div> tag at the bottom.

    It works this way in my tests with IE, Mozilla, and Opera.
    Akh, I will try your float solution soon.. but for now, Nasrim, I have tried what you said and this is what it now looks like in I.E and then in Mozilla Firebird. It looks pretty much perfect in I.E, except the left dotted line doesn't extend down -- it stops 1/2 down as shown. And in Firebird, the content body looks messed up on the bottom, as shown here:





    How can I get the dotted line to extend all the way down? It doesn't seem to want to.... and the bottom looks messed up in Firebird (what I mainly use).
  12. #7
  13. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Posts
    8
    Rep Power
    0
    Well, it seems like I solved the problem about it not showing up correctly on the bottom with Firebird -- I fixed that as shown on:

    http://daband.org/v1/

    However, I cannot seem to get the white border dotted line on the left to continue down as more content is added -- it' doesn't have a height specified so to me it should keep going -- but it seems to simply stop going down.

    Any ideas?
  14. #8
  15. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    you are missing the <ul></ul> tags in the
    navigation list

    just set the border-left to .content_body instead
    of border-right in .navigation

    .content_body
    {
    ..
    border-left: 1px #E8E4DC dotted;
    }
  16. #9
  17. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Posts
    8
    Rep Power
    0
    Akh,

    I hate to be a bother but I changed .content_body to have the border-left, and the dotted line runs past the black on the bottom -- take a look:

    Any ideas?:

    http://daband.org/v1/
    Last edited by sym; November 25th, 2003 at 05:43 PM.
  18. #10
  19. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    it is because of the relative postion, top:5px;

    just replace it with
    margin-top:5px;
  20. #11
  21. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2002
    Posts
    809
    Rep Power
    17
    If you change the top margin on your content_body to 0 it fixes that problem, and if you're going to use <ul> you need to increase the navigation width to accomodate the way it pushes everything to the right.

    Code:
    .content_body
    {
    	top: 0px;
    	left: 162px;
    	padding: 5px;
    	position: relative;
    	width: 460px;
    	color: white;
    	border-left: 1px #E8E4DC dotted;
    }

IMN logo majestic logo threadwatch logo seochat tools logo