Menu
I have started a website with a redbackground and i want a little bit of white at the top.
i have this code:
CSS:
body {
background-color: #ff4d4d;
}
#header {
background-color: #ffffff;
height: 20px;
}
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Fat Oblongs</title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="header"></div>
</body>
</html>
Which produces:
501
Set the position of div at the bottom of its container can be done using bottom, and position property. Set position value to absolute and bottom value to zero to placed a div at the bottom of container.
In order to pull an html element out of the natural flow of how the elements are layed out on the screen you need to use position: absolute. This will allow the element to become a layer above the other elements (assuming that the z-index value is greater than all other's).
You should make sure your body and html elements have no margin and padding:
html, body {
padding: 0;
margin: 0;
}
Sidenote: you also really should not use XHTML 1.0 Transitional as your doctype. If possible, simply use HTML5 (this has no influence over your borders, but still, don't use transitional doctypes unless you have a very good reason to do so)
<!doctype html>
body, html {
border: 0;
padding: 0;
margin: 0;
}
Browsers tend to have a few pixels of padding/margins around the window edges. The above CSS removes that all.
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
