How to make a CSS div float OVER another div
Now I know how to build tables in html and css, I teach myself div. I understand the positioning of div blocks not so good. I have the following css code:
Code:
div # topbar (
position: absolute;
top: 0px;
left: 20px;
height: 20px;
width: 800px;
text-align: right;
font-family: Tahoma;
background-color: # efefef;
)
div # left (border
position: absolute;
top: 0px;
left: 0px;
height: 500px;
width: 20px;
background-image: url ( "left.jpg");
)
div # right (border
position: absolute;
top: 0px;
left: 800px;
height: 500px;
width: 20px;
background-image: url ( "right.jpg");
)
div # logo (
position: absolute;
top: 20px;
left: 20px;
height: 100px;
width: 800px;
background-image: url ( "logo.jpg");
)
It includes the following html page:
Code:
<html>
<head>
<title> div test page </ title>
<link href="stijl.css" rel="stylesheet" type="text/css">
</ head>
<body>
<div id="topbar"> </ div>
<div id = "left border" </ div>
<div id = "right border" </ div>
<div id = "logo" </ div>
</ body>
</ html>
The logo is something strange on left the hand. By placing the logo, It is of the position of the previous div. I do not want that. In the tutorial I follow do not. Since they use just absolute. Who can help me with this?
Re: How to make a CSS div float OVER another div
First of all, you are missing 3x a ">", careless mistakes, internet explorer doesn't understands. And also omit anything left floating (float: left).
Re: How to make a CSS div float OVER another div
Something still missing. Now I have that on right, and the logo is good, but when I left float is all together. I do not understand so well how to float and clear to work. I will in the future course flexible instead of divs that make static what I have now.
If I omit borders, and it works, but I use almost borders on every layout I create for example shadow effects, etc.
Re: How to make a CSS div float OVER another div
For that kind of shadow effects you can download a background image of suit him wide 1600 x 20 pix where this gradient inside.
Tip, put it there as between:
Code:
# body (
margin: 0px auto;
)
Do you also use container divs will be:
Code:
# container (
margin: 0px auto;
)
