Feb 5th, 2008, 12:03
|
|
Junior Member
|
|
Join Date: Jan 2008
Location: UK
Posts: 43
Thanks: 0
Thanked 0 Times in 0 Posts
|
|
|
Re: When is it ok to use Absolute Positioning ??
so the code that i posted above would be good practice ???
can i show you this code , just to see if i'm getting it correctly ..............
Quote:
XHTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style_screen.css" />
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="main"></div>
<div id="footer"></div>
<div id="text">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rhoncus neque sit amet odio. Duis fringilla arcu placerat nunc. Cras mattis euismod ante. Aliquam erat volutpat. Aenean pulvinar turpis mattis ipsum. Proin vestibulum semper risus. Maecenas diam. Donec nonummy neque. Etiam suscipit nunc eu tortor. Vivamus volutpat, risus non consectetuer molestie, justo velit consequat mi, sit amet ullamcorper nunc elit aliquet orci. Proin purus turpis, tincidunt ut, lacinia sit amet, pharetra at, lorem. Morbi mattis metus id ipsum iaculis porta. Maecenas ut ipsum sed est commodo placerat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In posuere lorem. Duis aliquam, est sed euismod scelerisque, tortor felis lobortis arcu, a aliquam nisl urna quis risus. Quisque ac elit vitae turpis porttitor fermentum. Nullam dignissim, massa sed pretium vestibulum, leo elit vulputate urna, in luctus nunc orci in marcus. </p>
</div>
</div>
</body>
</html>
|
Quote:
* {
margin : 0;
padding : 0;
}
body {
background-image: url(images/background.jpg);
background-attachment:fixed;
}
#container {
position:relative;
width:1000px;
margin: 0 auto;
padding: 0;
z-index:1;
}
#header {
background-image: url(images/header.png);
height:171px;
margin:0;
z-index:2;
}
#main {
background-image:url(images/main.png);
height:967px;
margin:0;
z-index:2;
}
#footer {
background-image:url(images/footer.png);
height:62px;
margin:0;
z-index:2;
}
#navigation {
position:absolute;
left:439px;
top:0px;
width:532px;
height:62px;
z-index:2;
}
#text {
position:absolute;
left:35px;
top:171px;
width:630px;
height:237px;
z-index:2;
}
p {
font: 0.7em Arial, Helvetica, sans-serif;
}
|
|