How can I lay out desired design using html and CSS?
I'm trying to lay the header of my page out so that it looks like this:
I would like to avoid using tables if posible. I'm html and css beginer co I cannot get it working :(.
This is my best try till now:
Html:
<div class="rightAlign" >
开发者_StackOverflow社区 <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;
}
It does not work as desired of cause: Menu line is not on the bottom aligned to bottom of "Big header picture".
Thank you for any help, ideas and advices
To get your menu to line up with the bottom of your big image though you need to absolutely position the menu items within a relative parent. I've simplified it a bit, but here are the necessary pieces to make it happen:
<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>
W3 visual formatting model is also a great read for learning how CSS layouts work.
Also: Have you tried 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 %
}
加载中,请稍侯......
精彩评论