CSS Codes
CSS Layouts
Page 1 of 2 12 LastLast
Results 1 to 10 of 17

Thread: Want nav div to run as long as content div

  1. 03-15-2009, 03:37 PM #1
    sivlock
    sivlock is offline Junior Coders
    Join Date
    Mar 2009
    Location
    UK
    Posts
    33
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Want nav div to run as long as content div

    I have set up a left hand side div column and a right one for main content etc but I want the left hand div to run as long with the main content with a filled colour, any help code below:

    <body>
    <div id="main_container_index">
    <!--start left column-->
    <div id="left_col_index"><img /><div style="padding:0px"><a href="index.html"><img /></a></div>
    <div><img /></div>
    <div id="left_col_nav_background">

    <div id="nav">
    <div><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('button1','','images/home_ov.jpg',0)"><img /></a></div>
    <div class="nav_pad_top"><a href="about_main.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('button2','','images/about__ov.jpg',0)"><img /></a></div>
    <div class="nav_pad_top"><a href="the_games.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('button9','','images/games_ov.jpg',0)"><img /></a></div>
    <div class="nav_pad_top"><a href="news.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('button3','','images/news_ov.jpg',0)"><img /></a></div>
    <div class="nav_pad_top"><a href="fans.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('button4','','images/fans_ov.jpg',0)"><img /></a></div>
    <div class="nav_pad_top"><a href="links.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('button5','','images/links_ov.jpg',0)"><img /></a></div>
    <div class="nav_pad_top"><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('button7','','images/contact_ov.jpg',0)"><img /></a></div>
    <div class="nav_pad_top"><a href="site_map.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('button8','','images/site_map_ov.jpg',0)"><img /></a></div>
    </div>

    </div>
    </div>

    <div id="right_col_top_index"><img />
    <div id="main_content"><h2>Header here</h2>
    <p>paragaph goes here</p>
    <div class="badge_left"><a href="something.html"><img /></a>
    <div align="center" style="padding-top:5px"><h2><a href="something.html">Something</a></h2>
    </div></div>
    <div class="badge_right"><img />
    <div align="center" style="padding-top:5px"><h2>Header goes here</h2></div></div>
    <div class="badge_left" style="clear:both;padding-top:5px"><img /></div>
    </div>
    </div>

    <div id="footer">
    <div id="footer_left">copyright</div>
    <div id="footer_right">something</div>
    </div>
    </div>
    </body>

    CSS

    body {
    margin: 0;
    padding: 0;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    background-image: url(../images/background.jpg);
    color: #FFFFFF;
    }

    p {
    line-height: normal;
    padding-top: 5px;
    padding-right: 0px;
    padding-bottom: 5px;
    padding-left: 0px;
    margin-top: 5px;
    margin-right: 0px;
    margin-bottom: 5px;
    margin-left: 0px;
    }

    h1 {
    margin: 0px;
    padding: 0px;
    font-size: 18px;
    color: #092417;
    }

    h2 {
    color: #FFFFFF;
    padding: 0px;
    margin: 0px;
    font-size: 18px;
    }
    h2 a {
    color: #FFFFFF;
    text-decoration: none;
    }
    h2 a:hover {
    color: #35A170;
    }



    #main_container_index {
    width: 875px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    text-align: left;
    overflow: hidden;
    background-color: #000000;
    }

    #main_content {
    background-color: #000000;
    height: 100%;
    padding: 10px;
    }

    #left_col_index {
    float: left;
    width: 174px;
    background-color: #278F5E;
    visibility: visible;
    height: 100%;
    overflow: visible;
    }

    #left_col_nav_background {
    background-image: url(../images/left_nav_background.jpg);
    background-repeat: no-repeat;
    height: 449px;
    }

    #nav {
    text-align: center;
    padding-top: 10px;
    }

    .nav_pad_top {
    margin-top: 5px;
    }

    #right_col_top_index {
    float: right;
    width: 701px;
    overflow: hidden;
    color: #FFFFFF;
    }

    #right_col_index {
    width: 701px;
    float: right;
    background-image: url(../images/main_background_index.jpg);
    height: 704px;
    visibility: inherit;
    }

    #right_col_index a {
    color: #0C3420;
    }

    #right_col_index a:hover {
    text-decoration: none;
    }

    #right_col_main_index {
    margin-top: 125px;
    margin-right: 50px;
    margin-left: 55px;
    float: left;
    color: #000000;
    }

    #footer {
    clear: both;
    background-image: url(../images/footer.jpg);
    background-repeat: no-repeat;
    height: 52px;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 14px;
    }

    #footer_left {
    float: left;
    margin-top: 15px;
    margin-left: 55px;
    }

    #footer_right {
    float: right;
    margin-top: 15px;
    margin-right: 10px;
    }
    #header_main {
    background-image: url(../images/header_about.jpg);
    background-repeat: no-repeat;
    border: 1px solid #33669F;
    height: 42px;
    }
    #header_main_inside {
    #margin-top: 7px;
    margin-left: 5px;
    margin-top: 7px;
    }
    .badge_left {
    float: left;
    margin-left: 20px;
    }
    .badge_right {
    float: right;
    margin-right: 20px;
    }
    Reply With Quote Reply With Quote
  2. 03-15-2009, 03:53 PM #2
    sivlock
    sivlock is offline Junior Coders
    Join Date
    Mar 2009
    Location
    UK
    Posts
    33
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    and how do i get all the floating divs and whatever in the right main div to be all contained within that div?
    Reply With Quote Reply With Quote
  3. 03-15-2009, 04:18 PM #3
    bluewalrus
    bluewalrus is offline Elite Coders
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

    Why are there blank image tags everywhere?
    Reply With Quote Reply With Quote
  4. 03-15-2009, 04:20 PM #4
    sivlock
    sivlock is offline Junior Coders
    Join Date
    Mar 2009
    Location
    UK
    Posts
    33
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Just an indication to where the images would go I can't put everything in.
    Reply With Quote Reply With Quote
  5. 03-15-2009, 04:24 PM #5
    bluewalrus
    bluewalrus is offline Elite Coders
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

    Okay, What does
    and how do i get all the floating divs and whatever in the right main div to be all contained within that div?
    mean? Can you use the actual div names? Same for
    left hand div to run as long with the main content with a filled colour
    Do you want the green to go to the bottom where copyright is?
    Reply With Quote Reply With Quote
  6. 03-15-2009, 04:32 PM #6
    sivlock
    sivlock is offline Junior Coders
    Join Date
    Mar 2009
    Location
    UK
    Posts
    33
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    I want the green background to run down to the footer so
    <div id="left_col_index"> to run down to <div id="footer">

    and also everything to be contained in the main div like so:

    <div id="right_col_top_index"> = main container div for content

    <div class="badge_left"><div class="badge_right"> = content at the moment just runs below because it is floating.
    Reply With Quote Reply With Quote
  7. 03-15-2009, 04:40 PM #7
    bluewalrus
    bluewalrus is offline Elite Coders
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

    umm maybe this I'm not really sure what you want maybe make an image of how page looks and what you want. I added background colors to the divs you said to show what is in which.

    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>Untitled Document</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background-image: url(../images/background.jpg);
color: #FFFFFF;
}

p {
line-height: normal;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
margin-top: 5px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 0px;
}

h1 {
margin: 0px;
padding: 0px;
font-size: 18px;
color: #092417;
}

h2 {
color: #FFFFFF;
padding: 0px;
margin: 0px;
font-size: 18px;
}
h2 a {
color: #FFFFFF;
text-decoration: none;
}
h2 a:hover {
color: #35A170;
}



#main_container_index {
width: 875px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
text-align: left;
overflow: hidden;
background-color: #000000;
}

#main_content {
background-color: #000000;
height: 100%;
padding: 10px;
}

#left_col_index {
float: left;
width: 174px;
background-color: #278F5E;
visibility: visible;
height: 100%;
overflow: visible;
}

#left_col_nav_background {
background-image: url(../images/left_nav_background.jpg);
background-repeat: no-repeat;
height: 449px;
}

#nav {
text-align: center;
padding-top: 10px;
}

.nav_pad_top {
margin-top: 5px;
}

#right_col_top_index {
float: right;
width: 701px;
overflow: hidden;
color: #FFFFFF;
}

#right_col_index {
width: 701px;
float: right;
background-image: url(../images/main_background_index.jpg);
height: 704px;
visibility: inherit;
}

#right_col_index a {
color: #0C3420;
}

#right_col_index a:hover {
text-decoration: none;
}

#right_col_main_index {
margin-top: 125px;
margin-right: 50px;
margin-left: 55px;
float: left;
color: #000000;
}

#footer {
clear: both;
background-image: url(../images/footer.jpg);
background-repeat: no-repeat;
height: 52px;
color: #FFFFFF;
font-weight: bold;
font-size: 14px;
}

#footer_left {
float: left;
margin-top: 15px;
margin-left: 55px;
}

#footer_right {
float: right;
margin-top: 15px;
margin-right: 10px;
}
#header_main {
background-image: url(../images/header_about.jpg);
background-repeat: no-repeat;
border: 1px solid #33669F;
height: 42px;
}
#header_main_inside {
#margin-top: 7px;
margin-left: 5px;
margin-top: 7px;
}
.badge_left {
float: left;
margin-left: 20px;
}
.badge_right {
float: right;
margin-right: 20px;
}
</style>
</head>
<body>
<div id="main_container_index">
<!--start left column-->
<div id="left_col_index"><img /><div style="padding:0px"><a href="index.html"><img /></a></div>
<div><img /></div>
<div id="left_col_nav_background">

<div id="nav">
<div><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('button1','','images/home_ov.jpg',0)"><img /></a></div>
<div class="nav_pad_top"><a href="about_main.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('button2','','images/about__ov.jpg',0)"><img /></a></div>
<div class="nav_pad_top"><a href="the_games.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('button9','','images/games_ov.jpg',0)"><img /></a></div>
<div class="nav_pad_top"><a href="news.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('button3','','images/news_ov.jpg',0)"><img /></a></div>
<div class="nav_pad_top"><a href="fans.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('button4','','images/fans_ov.jpg',0)"><img /></a></div>
<div class="nav_pad_top"><a href="links.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('button5','','images/links_ov.jpg',0)"><img /></a></div>
<div class="nav_pad_top"><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('button7','','images/contact_ov.jpg',0)"><img /></a></div>
<div class="nav_pad_top"><a href="site_map.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('button8','','images/site_map_ov.jpg',0)"><img /></a></div>
</div>

</div>
</div>

<div id="right_col_top_index"><img />
<div id="main_content"><h2>Header here</h2>
<p>paragaph goes here</p>
<div class="badge_left"><a href="something.html"><img /></a>
<div align="center" style="padding-top:5px"><h2><a href="something.html">Something</a></h2>
</div></div>
<div class="badge_right"><img />
<div align="center" style="padding-top:5px"><h2>Header goes here</h2></div></div>
<div class="badge_left" style="clear:both;padding-top:5px"><img /></div>
</div>
</div>

<div id="footer">
<div id="footer_left">copyright</div>
<div id="footer_right">something</div>
</div>
</div>
</body>
</html>
    Reply With Quote Reply With Quote
  8. 03-15-2009, 05:53 PM #8
    sivlock
    sivlock is offline Junior Coders
    Join Date
    Mar 2009
    Location
    UK
    Posts
    33
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Thats what I want for the green bar going all the way down to the footer how did you do that its a bit difficult to see going through the code could you tell me or highlight it? Cheers
    Reply With Quote Reply With Quote
  9. 03-15-2009, 09:19 PM #9
    bluewalrus
    bluewalrus is offline Elite Coders
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

    I changed some of your styles i'm not sure which one did it i changed it before i looked at it. All styles should end with a ";" like "height:20px;". I also changed div align center to text-align:center; I think those are all the changes...
    Reply With Quote Reply With Quote
  10. 03-15-2009, 10:14 PM #10
    sivlock
    sivlock is offline Junior Coders
    Join Date
    Mar 2009
    Location
    UK
    Posts
    33
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Really can't find which style i need to be changing or doing to make the left hand div with background stretch right down to the footer to be filled with green. All my css tags are closed properly and i couldn't see about the div align center but i wouldn't imagine that would have been it.
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Bookmarks

Posting Permissions

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

Forum Rules