如何使用html和CSS佈局所需的設計？

我試圖把我的網頁的標題出來，使它看起來像這樣：如何使用html和CSS佈局所需的設計？

layout example

我想避免，如果更多鈔票使用表。我是HTML和CSS beginer合作，我不能得到它的工作:(

這是我最好的嘗試到現在。

HTML：

<div class="rightAlign" > 
    <div class="notificationArea"> 
     <img src="../bigHeaderImage.png" /> 
    </div> 
    <div> 
     <div> 
      <img src="../smallImage.png" />Some info<br/> 
      Other info 
     </div> 
     <div> 
      <div class="ignoreRightAlign"> 
       <a href="#" >Menu1</a> 
       <a href="#" >Menu2</a> 
      </div> 
      <a href="#" >Menu3</a> 
     </div> 
    </div> 
</div>

CSS：

.rightAlign 
{ 
    clear: both; 
    text-align: right; 
} 
.ignoreRightAlign 
{ 
    float: left; 
}

它不能按原因工作：菜單行不在底部對齊「Big header picture」底部。

感謝您的任何幫助，想法和建議

來源

2011-03-01 drasto

爲了讓您的菜單與您的大圖像的底部對齊，儘管您需要將菜單項絕對放置在相對父項中。我已經簡化了一點，但這裏有必要的部分，使之發生：

<html> 
<head> 
    <title>test</title> 
    <style type="text/css" media="screen"> 

     .right 
     { 
      float: right; 
     } 
     .header 
     { 
      position: relative; 
     } 
     .menu 
     { 
      position: absolute; 
      bottom: 0; 
      right: 0; 
      left: 250px; 
     } 
     .info p 
     { 
      float: right; 
     } 
     .rightHeader 
     { 
      float: right; 
     } 
    </style> 
</head> 
<body> 
    <div class="header"> 
     <img src="bigimage.png" /> 
     <div class="rightHeader"> 
      <div class="info"> 
       <img src="smallimage.png" /><p>Some info <br /> Other info</p> 
      </div> 
      <div class="menu"> 
       <a href="#" class="right">Menu 3</a> 
       <a href="#">Menu 1</a> 
       <a href="#">Menu 2</a> 
      </div> 
     </div> 
    </div> 

</body> 
</html>

來源

2011-03-01 22:11:37 efalconer

我認爲自己是一位優秀的程序員，我甚至在大學裏開設一些程序課程。我沒有爲網絡做任何事情，主要是沒有GUI的桌面應用程序或應用程序。現在我需要做真正的網站。我很快學習，希望能夠學習所有標籤及其功能。我更喜歡嘗試，直到找到正確的解決方案，而不是使用soem框架，這會產生一些我不明白的可怕代碼。 – drasto 2011-03-01 22:22:23

雖然我不認爲使用框架是一個不好的解決方案，但它並不能真正解決您在菜單項垂直對齊時遇到的問題。我編輯了我的答案，解釋如何做到這一點，盡我所知。 – efalconer 2011-03-01 22:58:49

@efalconer謝謝你的回答。還有一個原因讓我不使用框架：這不是靜態的html頁面，它是ASP.NET MVC web應用程序的一部分。所以我需要對代碼有很好的理解和控制，以便我可以在其中插入動態元素。 – drasto 2011-03-02 09:59:46

W3 visual formatting model也是一個很好的閱讀，瞭解CSS佈局如何工作。

另外：您是否嘗試過CSS「position」？

.smallPicture 
{ 
position: absolute; //Or relative (among other options) 
right: 15px; //Or whatever it needs to be 
top: 0; // Can be in ##px or ##em or % 
}

來源

2011-03-01 21:28:32 Trevor

沒有必要...但其真正需要使用的ID模板和文本和圖像的類，以防破裂該模板，因爲你只能使用一次id。 – Thew 2011-03-01 21:31:47

「HTML應該使用ID而不是類」呃，爲什麼？ – BoltClock 2011-03-01 21:32:22

是啊....呃，錯...... – bpeterson76 2011-03-01 21:34:10

如何使用html和CSS佈局所需的設計？

回答

相關問題