...

View Full Version : Need Help with my layout



elementis0
09-19-2007, 07:07 PM
Well I have been designing a website for my teacher as a lil advanced project he has given me, so far it has only been designed for IE7 (im going to make it cross browser compatible later)

but my problem is with the stretch of the side navigation. I want my side navigation to stretch with the content box as it grows, so i can have a nice black border going all the way down the page along with the side nav, Right now since the side navigation does not stretch down with the content, the border does not stretch itself down, So I am hoping somebody here can solve my dilemma. All I need is the side navigation divs to stretch itself down as the content part of the page gets longer. heres the 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" xml:lang="en" lang="en">
<head>
<title>MR Technical Test</title>
<style type="text/css">

/*-------------Misc.-------------*/

html, body{
height:100%;
}

body{
min-width:850px;
margin:0px;
padding:0px;
}

/*--------------------------------*/


/*-------------Header------------*/
.headercontain
{

width:100%;
height:150px;
background-image:url('headergrad.png');
margin:0px;
padding:0px;
}

.logo
{
width:470px;
height:150px;
background-image: url('mrtlogo.png');
clear:right;
}

.slogan
{
position:absolute;
top:115px;
left:275px;
font-family:verdana, sans-serif;
color:#9E9191;
}

.quote
{
position:absolute;
top:15px;
left:500px;
min-width:25%;
}

div.headerstrip
{
height:25px;
width:100%;
background-color:#8D1D1D;
margin:0px;
padding:0px;
}

h3.header
{
color:white;
text-align:center;
position:absolute;
left:55%;
}

/*-----------------------------------*/


/*---------------Topnav--------------*/

div.topnav
{
width:100%;
height:30px;
background-image:url('navtopgrad.png');
border-right:1px solid black;
}

ul.move
{
float:right;
position:relative;
bottom:25px;
padding-right:25%;
}


li.topnav
{
display:inline;
padding-left:1em;
}

a.topnav
{
color:#000000;
text-decoration:none;
}

a.topnav:hover
{
color:#8D1D1D;
text-decoration:none;
}

div.search
{
background-color:#8D1D1D;
width:200px;
padding:0px;
height:30px;
color:#ffffff;
padding-left:3px;
}


div.search
{
background-color:#8D1D1D;
width:200px;
padding:0px;
height:30px;
color:#ffffff;
padding-left:3px;
}



/*-----------------------------------*/


/*----------------Side navigation------------*/
div.navside
{
border-right:1px solid black;
width:203px;
float:left;
min-height:200%;
padding:0px;
margin:0px;
}

div.undernav
{
background-image:url('contentgrad.png');
background-color:#000099;
background-repeat:repeat-x;
border-right:1px solid black;
min-height:150px;
height:100%;
width:203px;
}


h3.navside
{
text-align:center;
position:relative;
top:25%;
}

div.navbutton
{
width:202px;
height:50px;
background-image:url('sidebtngrad.png');
border-bottom: 1px solid black;
border-left: 1px solid black;
}




/*------------------------------------*/


/*----------------Content--------------*/

div.contentcontain
{
width:100%;
background-image:url('contentgrad.png');
background-repeat:repeat-x;
padding:0px;
}

div.contenthead
{
width:70%;
height:25px;
background-color:#8D1D1D;
margin:auto;
margin-top:2em;
}

h3.contenthead
{
color:white;
text-align:center;
}

div.contentbox
{
border:1px solid #8D1D1D;
width:69.8%;
margin:auto;
padding:0px;
background-image:url('contentboxgrad.png');
background-color:#FEFEFE;
background-repeat:repeat-x;
min-height:110px;
}

p.contentbox
{
padding:1em;
}

a.read
{
color:#4D7DF7;
text-decoration:none;
font-weight:bold;
float:right;
padding-right:1em;
margin:0px;
}

/*-------------------------------------*/


/*--------------Footer-----------------*/

div.footer
{
width:100%;
height:25px;
background-color:#8D1D1D;
border:1px solid black;
}

/*-------------------------------------*/

</style>
</head>
<body>

<!-- Header -->
<div class="headercontain">
<p class="quote">"To be concious that you are ignorant of the facts is a great step to
knowledge"<br />
- Benjamin Disraeli</p>
<div class="logo">
<h4 class="slogan">My Slogan Here</h4>
</div>
</div>

<!-- Start Top Navigation -->
<div class="topnav">
<div class="search">
<form class="search">
Search: <input type="text">
</form>
</div>
<ul class="move">
<li class="topnav"><a href="#" class="topnav">Home</a></li>
<li class="topnav"><a href="#" class="topnav">Archives</a></li>
<li class="topnav"><a href="#" class="topnav">Downloads</a></li>
<li class="topnav"><a href="#" class="topnav">Support</a></li>
<li class="topnav"><a href="#" class="topnav">About</a></li>
<li class="topnav"><a href="#" class="topnav">Services</a></li>
</ul>
</div>
<!-- End Top Navigation -->
</div>
<!-- End Header -->


<!-- Start Content and Side navigation -->
<div class="contentcontain">

<!-- Start headerstrip -->
<div class="headerstrip">
<h3 class="header">Header Here</h3>
</div>
<!-- End Headerstrip -->

<!-- Start Sidenavigation -->

<div class="navside">
<div class="navbutton">
<a href="#" class="topnav"><h3 class="navside">Home</h3></a>
</div>
<div class="navbutton">
<a href="#" class="topnav"><h3 class="navside">Sample Tags</h3></a>
</div>
<div class="navbutton">
<a href="#" class="topnav"><h3 class="navside">Template Info</h3></a>
</div>
<div class="navbutton">
<a href="#" class="topnav"><h3 class="navside">Free Templates</h3></a>
</div>
<div class="navbutton">
<a href="#" class="topnav"><h3 class="navside">Premium Templates</h3></a>
</div>
<div class="navbutton">
<a href="#" class="topnav"><h3 class="navside">Affiliates</h3></a>
</div>

<!-- Make div.undernav Expand with the content, cannot figure out how to -->

<div class="undernav">Test
<!-- End --></div>




</div>
<!-- End Side navigation -->


<!-- Start Content -->
<div class="contenthead">
<h3 class="contenthead">Support Styleshout</h3>
</div>
<div class="contentbox">
<p class="contentbox">
If you are interested in supporting my work and would like to contribute, you are welcome
to make a small
donation through the
donate link on my website - it will be a great help and will surely be appreciated.
</p>
<a href="#" class="read">Read More...</a>
</div>


<div class="contenthead">
<h3 class="contenthead">Template Info</h3>
</div>
<div class="contentbox">
<p class="contentbox">
Template Info
Refresh is a free, W3C-compliant, CSS-based website template by styleshout.com
. This work is distributed under the Creative
Commons Attribution 2.5 License, which means
that you are free to use and modify it for any purpose. All I ask is that you include a
link back to my website in your credits.For more free designs, you can visit my website
to see my other works.Good luck and I hope you find my free templates useful!

</p>
<a href="#" class="read">Read More...</a>
</div>


<div class="contenthead">
<h3 class="contenthead">Template Info</h3>
</div>
<div class="contentbox">
<p class="contentbox">
Template Info
Refresh is a free, W3C-compliant, CSS-based website template by styleshout.com
. This work is distributed under the Creative
Commons Attribution 2.5 License, which means
that you are free to use and modify it for any purpose. All I ask is that you include a
link back to my website in your credits.For more free designs, you can visit my website
to see my other works.Good luck and I hope you find my free templates useful!

</p>
<a href="#" class="read">Read More...</a>
</div>
</div>
</div>
<!--End Content and Side navigation -->
<!--Start Footer-->
<div class="footer">
</div>
</body>
</html>


and heres a zip file of the .htm and the pictures if you would like them:
5668

_Aerospace_Eng_
09-19-2007, 07:09 PM
You need to use the faux columns (http://alistapart.com/articles/fauxcolumns) technique.

You also have a case of divitis (http://csscreator.com/divitis).

VIPStephan
09-19-2007, 07:25 PM
[…] it has only been designed for IE7 (im going to make it cross browser compatible later)

That’s the wrong approach. Although IE 7 is better than IE 6 it’s still IE with a weird “hasLayout (http://www.satzansatz.de/cssd/onhavinglayout.html)” model. If you wanna create cross-browser compatible websites test them in Opera/Firefox/Safari/Konqueror. Chances are good that they will look alright in IE automatically – and if not then you’re gonne fix IE’s errors. That’s the way to go and it saves you a lot of work in the first place.

elementis0
09-20-2007, 05:30 PM
Well Stephan, I actually usually do design with firefox, opera etc... but at school I have no other choice than to use IE7.

As for the faux columns layout, I actually already read that article before but it was not exactly what I am searching for. I wanna just be able to expand the white background of the side nav with the content without a repeated background image, since the background image of the gradient I have is not vertically repeatable.

Can anybody here just look at the code and see if they can edit it themselves for the side nav to auto stretch with the content? Is there another way to do this without faux columns?

ScottInTexas
09-21-2007, 02:38 PM
Just try setting the height of the nav column to 100%. It should stretch with the height of the entire page no matter how long the main content is.

_Aerospace_Eng_
09-21-2007, 04:07 PM
Just try setting the height of the nav column to 100%. It should stretch with the height of the entire page no matter how long the main content is.
No it won't. It will only go as high as the window. If the content gets longer than the viewable area of the window it won't get bigger.


Can anybody here just look at the code and see if they can edit it themselves for the side nav to auto stretch with the content? Is there another way to do this without faux columns?

Sure but I'm not about to download a zip file. Put up your page somewhere on a free host or something. Help us help you.

elementis0
09-21-2007, 05:35 PM
Alright, Ill make a freewebs account really quick and will hopefully have it online tomorrow for you guys to look at. (I dont have internet at home right now or itd be up by today, i have to do it all at school)

So thanks for all the support so far, Ill have it online soon so you guys can help me resolve my problem.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum