将表格导航转换为css导航布局

Question

这不是其他网站上的典型导航，我很难尝试转换它，因为我是CSS的新手。 （不是顶部的搜索栏;正好在其下方）

它应该如何显示：

我设法做到这一点：http://jsfiddle.net/NZ8JY/

右边部分：页面名称（seide）应该在最右边和最大的图片旁边对齐。

左侧部分：我需要“ul”列表与右侧部分位于同一高度。

实现这一目标的最佳方法是什么？

对于丑陋的HTML代码感到抱歉......我的父母用首页制作了网站，我正在尝试用CSS和PHP清理它;）

已解决：http://jsfiddle.net/XcnDg/

Answer 1

你走了， 将其保存为test.html并尝试了解每一行正在做什么。

  <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>