CSS positioning images and nav menus.

[ron11612002]

hello,

I'm creating a corporate website as a school project and I have questions about positioning my images and texts on the web page. here is an example of text i"m trying to put on top in the navigation bar. first the source code:
<div id="Logo">

<h1> Alpert's Newspaper Delivery </h1>

</div> <!-- end of logo -->

second the css for the Logo:

#Logo h1 {float:right;
font-family:"Times New Roman", Times, serif;
font-style:italic;
padding-right:20px;
font-size:36px;
color:#F00;
text-decoration:underline}

I want to put the image in the navigation bar on the right side.

Here's the source code for the navigation bar:

#headercontainer{height:24px;background:#000;display:block;padding:45px 0 0 15px;}
#headermenu{position:relative;display:block;height:24px;font-size:16px;font-weight:bold;font-family:Arial,Verdana,Helvitica,sans-serif;}
#headermenu ul{margin:0px;padding:0;list-style-type:none;width:auto;}
#headermenu ul li{display:block;float:left;margin:0 1px 0 0;}
#headermenu ul li a{display:block;float:right; clear:both; color:#FFF;text-decoration:none;padding:5px 20px 0px 20px;height: 19px;background: transparent url(../images/foxmenu_bg-OFF.gif) no-repeat top left;}
#headermenu ul li a:hover{color:#fff;background:transparent url(images/foxmenu_bg-OVER.gif); background-repeat:repeat-x}
#headermenu ul li a.current,#headermenu ul li a.current:hover{color:#000;background:#fff}


Here is the navigation source code using divs:


<div id="headercontainer">



<div id="headermenu">

<ul>

<li><a href="" title=""> Home</a></li>
<li><a href="" title=""> About Us</a></li>
<li><a href="" title="" class="current"> Services</a></li>
<li><a href="" title=""> Owners</a></li>
<li><a href="" title=""> Advantages</a></li>
<li><a href="" title=""> Publications</a></li>
<li><a href="" title=""> Mission Statement</a></li>

</ul>

</div><!--End of headermenu-->


</div> <!--end of headercontainer-->


Now keep in mind, I got this nav menu from another website. Is there anyway i can modify it to have my logo appear in the top right of this nav menu.

The navigation menu has a black background with red buttons. Should I extend the height of the nav bar and then vertical-align:top the logo. This didn't seem to work. Also is there anyway I can post a screenshot of my home page.

Thanks
Ron

[kaafmim]

If I get it right, you want to put the Logo div inside headermenu. So first of all you should put the logo inside this div. I see the li tags are all right floated; So, to put your logo on the right side, you should right align in (via putting a float:right; in its style definition). And to have it on the right end of the block, you should put it before the ul tag.

The first problem with your code is that you try to right align the logo h1, this won't help, as h1 is an inline element, so it can't be floated. You should do something like this:

...
<style>

#logo { float:right; }

#logo h1 {
...

</style>

...

<div id="headermenu">

  <div id="logo">....</div>

  <ul>
    <li><a href="" title=""> Home</a></li>
...

But as this doesn't seem like a clean source to me, I suggest you modify the source code of the header, or if you are not so easy with html and css, pick a navigator from somewhere else.

[ron11612002]

Thanks a lot. It worked.