5 replies [Last post]
zeeker
Offline
Regular
Last seen: 15 years 40 weeks ago
Joined: 2003-10-11
Posts: 11
Points: 0

Hey guys. I am learning the concept of developing sites completely with CSS and I am bangin my head on this one...

I am trying to create a header that has a logo overlaying the left hand side of it without using absolute positioning for it. This is because I need the logo to adjust to the page as the header does in the center of the page. The site is completely done with CSS using DVI tags. The 'header' is a DIV and is contained within a DIV. This way the 'header' box is centered in the page at all resolutions. By this, the header moves. I want the logo to be on top of the 'header' box as in the illustration. This means that the logo has to be positioned out side of the DIV that the 'header' box is in. This would be easy using Absolute possitioning, but since the 'header' box moves, I can not use this method.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 21 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Logo overlay...

Hi zeeker,
Try floating the image left within the header div and use negative margins to position it where you want.
.header img{float:left; margin-left:-20px; margin-top:-50px;}
Hope that helps

zeeker
Offline
Regular
Last seen: 15 years 40 weeks ago
Joined: 2003-10-11
Posts: 11
Points: 0

Logo overlay...

Hmmm....makes sense....must try... Laughing out loud

Thanks

zeeker
Offline
Regular
Last seen: 15 years 40 weeks ago
Joined: 2003-10-11
Posts: 11
Points: 0

Logo overlay...

Sweet...after picking it apart I came up with the following:

<style type="text/css">
<!--
#headerbox {
position: absolute;
left: 50%;
width: 600px;
height: 100px;
padding: 0px;
border: 1px solid #000000;
background-color: yellow;
margin-left: -300px;
}
#headerlogo {
position: absolute;
left: 50%;
width: 200px;
height: 50px;
padding: 0px;
border: 1px solid #000000;
background-color: red;
margin-left: -400px;
margin-top: -10px;
}
-->
</style>
</head>
<body>
<div id="headerbox"></div>
<div id="headerlogo"></div>
</body>

With the sizes and the colors, this is obviously test code. The point is, it worked. Now I have another ?

I saw this code in another post...what does it mean:

voice-family: "\"}\"";
voice-family:inherit;
width: 500px;
}
html>body #thisblock { /* be nice to Opera 5 */
width:500px;
}

rocketscience
Offline
Regular
Calgary, AB
Last seen: 15 years 50 weeks ago
Calgary, AB
Joined: 2003-08-07
Posts: 16
Points: 0

Logo overlay...

Thats a hack to fix the problem with IE 5x. http://tantek.com/CSS/Examples/boxmodelhack.html

zeeker
Offline
Regular
Last seen: 15 years 40 weeks ago
Joined: 2003-10-11
Posts: 11
Points: 0

Logo overlay...

sweet....thanks...