PDA

View Full Version : CSS - Floating navigation help



jdamon78
Jan 20th, 2007, 03:27 PM
Hi, I wonder if you can help please?

At the moment my navigation is situated on the left hand side of the screen and when the user reduces the size of the window the central container overlaps the navigation - How can i stop this please? Is there anyway of stopping the container at the border of the navigation?

The web page I have is www.harrisons.biz/decking.html

I would also like to be able to float the navigation on the right hand side of the central container, so that the menu moves with the container when a user resizes the window. I can only seem to be able to position it statically at the moment...

Any help would be appreciated.

koyama
Jan 20th, 2007, 04:05 PM
sounds like you should be looking at floated 2 column layout which basically looks like this:


#wrapper {
width: 800px;
margin: 0 auto;
}
#left {
width: 200px;
float: left;
}
#main {
width: 600px;
float: left;
}



<body>
<div id="wrapper">
<div id="left">your menu</div>
<div id="main">your main content</div>
</div>
</body>

Excavator
Jan 20th, 2007, 05:23 PM
Hello jdamon78,
That's easy enough to do by just putting everything inside a centered div.

CSS:

BODY {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: xx-small; PADDING-BOTTOM: 0px; COLOR: #4f4c23; PADDING-TOP: 0px; FONT-FAMILY: verdana, arial, san-serif; BACKGROUND-COLOR: #c2c299
}
#wrap {
width: 890px;
margin: 25px auto;
}

#container {
float: left;
PADDING-RIGHT: 1em;
PADDING-LEFT: 1em;
PADDING-BOTTOM: 1em;
WIDTH: 650px;
PADDING-TOP: 1em;
HEIGHT: 500px;
BACKGROUND-COLOR: #4f4c23
}
#containercenter {
PADDING-RIGHT: 1em; PADDING-LEFT: 1em; PADDING-BOTTOM: 1em; MARGIN-LEFT: auto; WIDTH: 588px; COLOR: #4f4c23; MARGIN-RIGHT: auto; PADDING-TOP: 1em; HEIGHT: 340px; BACKGROUND-COLOR: #ffffff
}
UL#navigation {
float: right;
PADDING-LEFT: 1em;
MARGIN-LEFT: 0px;
WIDTH: 200px;
LIST-STYLE-TYPE: none;
}
UL#navigation A {
FONT-SIZE: xx-small; COLOR: #ffffff; FONT-FAMILY: verdana, arial, san-serif; TEXT-DECORATION: none
}

stuff in small caps is what I changed.


HTML

<BODY>
<div id="wrap">
<DIV id=container>
<H1><STRONG>Harrisons</STRONG> garden services</H1>
<H2>A friendly and professional garden maintenance company working in Farnham,
Surrey and the surrounding area. Our small team offer a wide range of skills,
and a year round, fully insured service.</H2>
<DIV id=containercenter>
<DIV class=underconstruction><IMG
alt="This site is currently under construction. For further information please contact Andy on 07979 492909"
src="Harrisons_files/underconstruction.gif"> </DIV></DIV>
<H3><SPAN class=h3highlight>TELEPHONE</SPAN> 01252 652700 &nbsp;<SPAN
class=h3highlight>MOBILE</SPAN> 07979 492909</H3></DIV>
<UL id=navigation>
<LI> <A href="http://www.harrisons.biz/maintenance.html">GARDEN
MAINTENANCE</A> </LI>
<LI> <A href="http://www.harrisons.biz/lawn.html">LAWN CARE &amp;
MAINTENANCE</A> </LI>
<LI> <A href="http://www.harrisons.biz/shrub.html">SHRUB RESHAPING &amp;
PRUNING</A> </LI>
<LI> <A href="http://www.harrisons.biz/feeding.html">FEEDING &amp;
FERTILISING</A> </LI>
<LI> <A href="http://www.harrisons.biz/planting.html">PLANTING</A>
<P></P></LI>
<LI> <A href="http://www.harrisons.biz/treesurgery.html">TREE SURGERY</A> </LI>
<LI> <A href="http://www.harrisons.biz/felling.html">FELLING &amp;
CLEARING</A> </LI>
<LI> <A href="http://www.harrisons.biz/stump.html">STUMP GRINDING</A> </LI>
<LI> <A href="http://www.harrisons.biz/hedge.html">HEDGE CUTTING &amp;
RESHAPING</A> </LI>
<LI> <A href="http://www.harrisons.biz/crown.html">CROWN REDUCTION &amp;
LIFTING</A> </LI>
<P></P>
<LI> <A href="http://www.harrisons.biz/landscaping.html">SOFT LANDSCAPING</A> </LI>

<LI> <A href="http://www.harrisons.biz/turfing.html">TURFING &amp;
SEEDING</A> </LI>
<LI> <A href="http://www.harrisons.biz/fencing.html">FENCING</A> </LI>
<LI> <A href="http://www.harrisons.biz/patio.html">PATIO CARE</A> </LI>
<LI> <A href="http://www.harrisons.biz/decking.html">DECKING</A> </LI>
<P></P>
<LI> <A href="http://www.harrisons.biz/about.html">ABOUT US</A> </LI>
<LI> <A href="http://www.harrisons.biz/testimonials.html">TESTIMONIALS</A> </LI>
<LI> <A href="http://www.harrisons.biz/contact.html">CONTACT US</A> </LI>
</UL>
</div>
</BODY>

jdamon78
Jan 21st, 2007, 10:14 AM
That's absolutely perfect! Thanks so much!

Out of curiosity, you've individually marked the padding:

PADDING-RIGHT: 1em;
PADDING-LEFT: 1em;
PADDING-BOTTOM: 1em;
PADDING-TOP: 1em;

rather than using: padding: 0;

Is this a better way of writing the style sheets?

Thanks

bin
Jan 21st, 2007, 01:33 PM
Yes, less browser misinterpreting

Excavator
Jan 21st, 2007, 05:01 PM
That's absolutely perfect! Thanks so much!

Out of curiosity, you've individually marked the padding:

PADDING-RIGHT: 1em;
PADDING-LEFT: 1em;
PADDING-BOTTOM: 1em;
PADDING-TOP: 1em;

rather than using: padding: 0;

Is this a better way of writing the style sheets?

Thanks

You wrote that, I just didn't change it. I prefer the shorthand approach and would have written that padding: 1em; or, while in developing stage and still changing things around maybe I would write it padding: 1em 1em 1em 1em;