-
opposing floats
I want to have a header where a logo is positioned to the left and a menu to the right, but they wouldbe on the same level.
I have tried floating both elements and then clearing the floats to no avail.
can anyone help please.
link http://217.46.159.226/authorbank/
css
Code:
body{
margin:0;
padding:0;
}
#container
{
width: 90%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}
#top
{
padding: .5em;
background-color: #ddd;
border-bottom: 1px solid gray;
}
#top h1
{
padding: 0;
margin: 0;
}
#menu{
float:right;
}
#logo img{
float:left;
}
*.float-divider{
clear:both;
display:block;
}
#leftnav
{
float: left;
width: 160px;
margin: 0;
padding: 1em;
}
#post{
width:159;
margin-left:5px;
}
.posts{
font-size:10px;
}
#rightnav
{
float: right;
width: 160px;
margin: 0;
padding: 1em;
}
#content
{
margin-left: 200px;
border-left: 1px solid gray;
margin-right: 200px;
border-right: 1px solid gray;
padding: 1em;
max-width: 36em;
}
#footer
{
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
}
#leftnav p, #rightnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; }
Mark up
Code:
<body>
<div id="container">
<?php
outputSearchBox ();
?>
<div id="top">
<img id="logo" src="images/logo.png"/>
<div id="menu">
<div class="underlinemenu">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="#">Authors</a></li>
<li><a href="#">Publishers</a></li>
<li><a href="wipedemo.htm">Community</a></li>
<li><a target="_blank" href="http://217.46.159.226/authorbank/wordpress/index.php">Blog</a></li>
<li><a href="#">Storyboard</a></li>
</ul>
</div>
</div>
<div class="float-divider"></div>
</div>
<div id="leftnav">
-
Try adding this to your css code:
Code:
#top {
overflow: hidden;
}
#logo {
float: left;
}
Good luck!
-
-
I have used that on the page you posted before and it worked fine so you must be doing some mistake. Could you please post a link to the page where you are testing this so I can take a look?
-
-
1 Attachment(s)
The code I posted is not being used on that page. Could you please add it to your css code? I have done that myself and it worked fine, here's a screenshot:
Attachment 2483
-
Hi,
Its included, but I dont get the effect you get.
Code:
#top
{
padding: .5em;
background-color: #ddd;
border-bottom: 1px solid gray;
overflow:hidden;
}
#top h1
{
padding: 0;
margin: 0;
}
#menu{
float:right;
}
#logo{
float:left;
}
*.float-divider{
clear:both;
display:block;
}
-
Is this the css file you put it in: http://217.46.159.226/authorbank/includes/layout.css?
I can't see the code I posted there. Just copy and paste it to the bottom of the page and it will work just fine. If you are testing this on a different page than the one you posted, please post a link to that page.
Good luck!
-
Hi,
I checked the layout code and you are correct - the changes are not there.
The editor i am using shows the code changed but its not.
I have used a different editor and different machine and changed the code which now works but the columns have lost integrity.
i have put the clear floats in. Can u see my error?
Thank you for your patience, much appreciated.
-
No, I can't see any error because the code is still not there. Are you sure you are not testing this on a different page? In any case, you have a mistake on the page you posted, you closed the quotes in the wrong place here:
Code:
<link href="/authorbank/includes/menu.css" media="screen" rel="stylesheet" type="text/css />"
<link href="/authorbank/includes/sidemenu.css" media="screen" rel="stylesheet" type="text/css />"
Change it to:
Code:
<link href="/authorbank/includes/menu.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/authorbank/includes/sidemenu.css" media="screen" rel="stylesheet" type="text/css" />
Fix those and then add the code I posted and you should be fine. Again, if you are testing this on a different page and it's still not working out for you, please post a link to that page, otherwise I can't do much more to help you.
Good luck!
