CODEWITHSUNDEEP
htmlcss
Rasto
Rasto

Reputation: 17794

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:

layout example

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

Upvotes: 0

Views: 171

Answers (2)

efalconer
efalconer

Reputation: 2621

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>

Upvotes: 2

Trevor
Trevor

Reputation: 148

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

Upvotes: 0

Related Questions