如何使用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布局所需的设计？

回答

相关问题