轉換表導航爲css導航佈局

這不是在其他網站上發現的典型導航，我很難嘗試轉換它，因爲我是CSS新手。（而不是在最頂端的搜索欄中，僅低於）轉換表導航爲css導航佈局

它應該是怎樣看：

我設法遠遠地得到這樣的：http://jsfiddle.net/NZ8JY/

右部分：的名字頁面（seide）應該在最右邊和最大的圖片旁邊對齊。

左側部分：我需要「ul」列表與右側部分位於同一高度。

完成此操作的最佳方法是什麼？

對不起醜陋的HTML代碼...我的父母做與FrontPage網站，我試圖用CSS和PHP把它清理乾淨;）

解決：http://jsfiddle.net/XcnDg/

來源

2012-01-15 Lorof

請問您可以隔離問題代碼並將其發佈在此處嗎？如果你必須使用http://jsfiddle.net，但鏈接到一個活網站是不好的。只要你開始編輯它或鏈接消失，問題的價值和目的就完全失去了。大多數情況下，你可以通過隔離它來解決問題，最終甚至不需要幫助:) – 2012-01-15 12:12:52

是的，沒有這樣想過。如果其他人可以從我的問題中獲利，那將會很棒！將更新主文章 – Lorof 2012-01-15 12:28:06

在這裏你去，將其另存爲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>

來源

2012-01-15 12:33:34

感謝您的答案，但它並沒有完全回答我的問題。我無法讓#logo在不移動#menuitems的情況下正確地浮動。也無法在#menuitems – Lorof 2012-01-15 13:40:02

下面顯示文字我無法爲您提供所有的東西，我已經爲您提供了這個想法，現在您必須注意其他問題，您可以在表格中添加Logo和4張圖片2行1列，在第一行添加徽標，底部添加圖像 – 2012-01-15 13:49:33

轉換表導航爲css導航佈局

回答

相關問題