CODEWITHSUNDEEP
htmlcss
user1020045
user1020045

Reputation: 19

css layout header

I am new to webdesign and I thought I grasped the idea on how to make a layout. I am having a hard time positioning the images correctly in my layout to make a proper header.

The image posted is what i am trying to achieve. I posted the code I wrote which is totally wrong. Any help is appreciated! -thank you

http://img220.imageshack.us/img220/7097/helpcopy.jpg)

HTML

<div id="container">
    <div id= "header">
        <div id="leftimage">
            <img src="images/1.jpg" alt="" width="604" height="85" />
        </div>

        <div id ="rightimage">
                <div id="verticalimage">
                    <img src="images/2.jpg" alt="" width="29" height="85" />
                </div>
                <div id="horizontalimages">
                    <img src="images/3.jpg" alt="" width="182" height="32" />
                    <img src="images/4.jpg" alt="" width="182" height="22" />
                    <img src="images/5.jpg" alt="" width="182" height="31" />
                </div>
        </div>
    </div>
</div>

CSS

body{
background: white;
font-family: Arial, Helvetica, sans-serif;
color:#7d806c;
font-weight: bold;
}

#container{
width: 1000px;
margin:0 auto;
outline: 1px dashed red;
}
#leftimage{
width:604;
height: 85;
float: left;
}
#rightimage{
width: 211; 
height: 85;
float: right;
margin: 25px 0 0 0;


}
#verticalimage{
width:29;
height:85;
float:left;

}
#horizontalimages{
width:182;
height:85;
float: right;
}

Upvotes: 2

Views: 410

Answers (4)

Sonal Khunt
Sonal Khunt

Reputation: 1894

i dont know how u want to display your header images

but on my guesses

you have try this

                <div id="horizontalimages">
                <img src="Images/image3.jpg" alt="" width="182" height="32" /><br />
                <img src="Images/image4.jpg" alt="" width="182" height="22" /><br />
                <img src="Images/image5.jpg" alt="" width="182" height="31" /><br />
            </div>

Upvotes: 0

Sowmya
Sowmya

Reputation: 26989

There is no style for header so its not aligning the div properly. and px is missing in "horizontalimages" class. Add the below style in your css

#header {position:relative; background-color:#FFF} 
#horizontalimages{width:182px; height:85px; float: right;}

Upvotes: 5

Will
Will

Reputation: 20235

You forgot to add px to the end of your CSS width/height declarations. And with some reformatting of the floats, I came up with this: http://jsfiddle.net/4gddY/.

Still trying to figure out the problem with the spacing between the horizontal images.

EDIT: Setting the images to display: block worked. http://jsfiddle.net/4gddY/1/

Here is the CSS:

body{
    background: white;
    font-family: Arial, Helvetica, sans-serif;
    color:#7d806c;
    font-weight: bold;
}
#container{
    width: 1000px;
    margin:0 auto;
    outline: 1px dashed red;
}
#leftimage{
    width:604px;
    height: 85px;
    float: left;
}
#rightimage{
    width: 211px; 
    height: 85px;
    margin: 25px 0 0 auto;
}
#verticalimage{
    width:29px;
    height:85px;
    float:left;
}
#horizontalimages{
    width:182px;
    height:85px;
    margin-left: auto;
}
img {
    display: block;
}

Upvotes: 1

Salman
Salman

Reputation: 3726

I am just scripting this out by looking at your layout. Hopefully it will help you to figure out how to manage the floats. Output: http://jsfiddle.net/P3Sjk/

<html>

<body>

<style type="text/css">
* { margin:0px; padding:0px; }
div.header{ width:1000px; }
div.w604 { float:left; width:604px; height:85px; background-color:#65FF00; }
div.w29 { float:right; width:29px; height:85px; background-color:#000000 }
div.w182 { float:right; width:182px; height:85px; }
div.h32 { width:182px; height:32px; background-color:#FFD800; }
div.h22 { width:182px; height:22px; background-color:#FF4E00; }
div.h31 { width:182px; height:31px; background-color:#6601FF; }
</style>

<div class="header">
    <div class="w604"></div>
    <!---whitespace-->
    <div class="w182">
        <div class="h32"></div>
        <div class="h22"></div>
        <div class="h31"></div>
    </div>
    <div class="w29"></div>
</div>

</body>
</html>

Upvotes: 4

Related Questions