|
|
Posted by Edwin van der Vaart on 05/19/07 12:49
JWL wrote:
> Edwin van der Vaart wrote:
>> JWL wrote:
>>> Hi
>>>
>>> I'm new to CSS layout techniques and have a question.
>>>
>>> Suppose I have a navbar and want to split it into two columns so I
>>> can put links on the left and some accessibility controls on the right:
>>>
>>> +--------------------------------------------------------------+
>>> | home | about us | contact us large text | normal text |
>>> +--------------------------------------------------------------+
>>>
>>> In my attempt, I start off with a #navbar div and then nest two divs
>>> inside #navbar, floating one left and the other right, e.g.:
>>>
>>> <div id="navbar">
>>> <div id="left">...</div>
>>> <div id="right">...</div>
>>> </div>
>>>
>>> #left {
>>> float: left;
>>> padding-left: 20px;
>>> }
>>> #right {
>>> float: right;
>>> padding-right: 20px;
>>> }
>>>
>>> My question is, if I then follow this with:
>>>
>>> +--------------------------------------------------------------+
>>> | home | about us | contact us large text | normal text |
>>> +--------------------------------------------------------------+
>>> | content | #sidemenu |
>>> | | |
>>> | | |
>>> | | |
>>> +--------------------------------------------------------------+
>>>
>>> i.e., two more divs, one floated left (#content) and the other
>>> floated right (#sidemenu), #navbar appears to collapse so if I have a
>>> background image or colour on it, it disappears. The only way I know
>>> how to fix this is add an explicit height to #navbar, but I'd prefer
>>> to avoid setting heights if possible.
>> Use "clear: both;" for #content. That way the content will be floating
>> to the left and the #sidemenu to the right. The menu and the normal
>> text stay on their place.
>
> Thanks for answering. But even with clear: both; on #content, the
> #navbar div appears to collapse. You can see what I mean here:
>
> http://www.sarroukhs.f2s.com/index.html
>
> The #navbar div has a bright red background but the colour isn't visible
> unless I put a height on #navbar.
Already mentioned to use an unorder-list <ul> instead of a paragraph <p>
like this:
<div id="navbar">
<div id="left">
<ul>
<li><a href="#">Home</a> |</li>
<li><a href="#">About us</a> |</li>
<li><a href="#">Contact us</a></li>
</ul>
</div>
<div id="right">
<ul>
<li>normal text |</li>
<li>large text</li>
</ul>
</div>
</div>
In the style sheet:
#navbar {
background-color: #F00;
overflow: hidden;}
#left, #right {Background: #0066ff;
#left {float: left;}
#right {float: right;}
#left ul, #right ul {
margin: 0em;
padding: 1em;
list-style: none;}
#left ul li, #right ul li {display: inline;}
I suggest to use percentage instead of a fix width for the #content and
#sidebar.
--
Edwin van der Vaart
http://www.semi-conductor.nl/ Links to Semiconductors sites
http://www.evandervaart.nl/ Edwin's persoonlijke web site
Explicitly no permission given to Forum4Designers, onlinemarketingtoday,
24help.info, issociate.de, velocityreviews, umailcampaign.com,
gthelp.com, webfrustration.com, excip.com and many other to duplicate
this post.
Navigation:
[Reply to this message]
|