Question

This is not the typical navigation found on other sites and I am having a hard time trying to convert it because I am new to CSS. (Not the search bar at the very top; just below that)

How it is supposed to look:

I managed to get this far: http://jsfiddle.net/NZ8JY/

Right part: the name of the page (seide) should align right next to the right-most and biggest picture.

Left part: I need the “ul” list to be on the same height as the right part.

What would be the best way to accomplish this?

Sorry about the ugly html code… My parents made the site with frontpage and I’m trying to clean it up with CSS and PHP 😉

SOLVED: http://jsfiddle.net/XcnDg/

Answer 1

Here you go,
Save it as test.html and try to understand what every line is doing.

  <style type="text/css">

#nav {border:1px solid; height:100px;}
#nav ul{float:left;}
.right {float:right; border:2px solid; width:800px;}



#menuitems{float:right;margin:20px 0 0 0;}

#menuitems ul li {
display:inline;
margin:0 0 0 0;
border:1px solid;
padding:20px;
}

#logo {float:right;}
#lastimage {padding:40px; border:1px solid;float:right;}
</style>
<div id="nav">

<ul>
<li>First</li>
<li>Second</li>
<li>third</li>
<li>fourth</li>
</ul>
<div id="lastimage">
image Last



</div>                  
<div id="logo">Text goes here</div>


                    <div id="menuitems">

                        <ul>
                            <li>Image 1</li>
                            <li>Image 2</li>
                            <li>image 3</li>
                            <li>image 4</li>

                        </ul>
                    </div>  


</div>