Here is the code:
Code:
<!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>
<title>AVT</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body>
<div id="fluid-bar"></div>
<div id="container">
<!--Menu-->
<div id="menubg">
<div id="menuitem1"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('link1','','images/link1_over.jpg',1)"><img src="images/link1.jpg" name="link1" width="135" height="63" border= "0" id="link1" alt="home" /></a>
</div>
<div id="menuitem2">
</div>
</div>
<!--End Menu-->
<!--Header-->
<div id="header">
<div id="textnava">
<div id="textnavb">
link 1 | link 2 | link 3 | link 4</div>
</div>
</div>
<!--End Header-->
<!--Main Content-->
<div id="content">
<div id="main">
<div id="maincontent">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent sollicitudin nisl nec lorem. Vestibulum tempor pellentesque nisi. In pretium. Integer euismod leo id risus gravida ullamcorper. Curabitur interdum justo nec nisi. Vestibulum elementum adipiscing dui. Proin sed magna. Phasellus lectus libero, dapibus sit amet, tincidunt ut, scelerisque sit amet, justo. Nunc nisi risus, gravida vitae, ultricies in, lacinia sed, lacus. Nulla libero. Morbi dolor purus, dignissim eget, ornare sed, volutpat et, arcu. Praesent pharetra neque non sapien. Etiam vitae elit. Maecenas elementum semper felis. Suspendisse potenti. Nunc lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque interdum ultrices lacus. Mauris leo. Nulla lacus eros, placerat quis, eleifend sit amet, tincidunt id, eros. </p>
<p>Cras consectetuer dictum turpis. Pellentesque nunc. Proin nisi dui, dapibus at, vehicula quis, hendrerit a, nisi. Suspendisse accumsan, mauris et pulvinar porta, mauris eros gravida est, eu sodales magna risus adipiscing nibh. </p>
</div>
</div>
</div>
<div id="right">
</div>
</div>
<div id="footer"> </div>
</body>
</html>
Here is the CSS:
Code:
@charset "utf-8";
/* CSS Document */
html {
height: 100%;
}
body {
background-image:url(images/pagebg.jpg);
background-repeat: repeat-y;
background-position: center center;
background-color: #000000;
height: 100%;
}
#container {
min-height: 100%;
_height: 100%;
position: relative;
top: 10px;
padding-bottom: 40px;
}
#fluid-bar {
border: 0px;
width: 100%;
height: 20px;
position: absolute;
background-image: url(images/headerbg.jpg);
background-repeat: repeat-x;
top: 0px;
left: 0px;
}
#menubg {
border: 0px;
width: 900px;
height: 63px;
background-image: url(images/menu_bg.jpg);
margin: auto;
top: 20px;
}
#menuitem1{
border: 0px;
width: 135px;
height: 63px;
margin: auto;
top: 20px;
float: left;
}
#menuitem2{
border: 0px;
width: 135px;
height: 63px;
margin: auto;
top: 20px;
float: left;
}
#header {
margin-left: auto;
margin-right: auto;
width: 970px;
height: 270px;
background-image: url(images/avtbanner.jpg);
background-position: center center;
}
#textnava {
width: 575px;
height: 20px;
padding-left: 35px;
margin-top: 175px;
position: absolute;
}
#textnavb {
background-color: #000;
color: #FFFFFF;
width: 505px;
height: 20px;
padding-left: 150px;
padding-top: 8px;
opacity: .5;
position: absolute;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
}
#content {
margin-left: auto;
margin-right: auto;
width: 900px;
padding-bottom: 40px;
}
#right{
border: 0px;
width: 230px;
float: right;
padding-left: 20px;
padding-top: 4px;
padding-right: 5px;
padding-bottom: 40px;
}
#rightcontent_top{
border: 0px;
width: 220px;
height: 40px;
clear: left;
padding-bottom: 40px;
}
#main{
border: 0px;
width: 610px;
float: left;
padding-left: 15px;
padding-top: 4px;
padding-right: 5px;
padding-bottom: 40px;
}
#maincontent{
border: 0px;
width: 590px;
height: auto;
float: left;
background-image: url(images/content_center.jpg);
padding: 5px;
color:#CCCCCC;
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
border-top: solid;
border-bottom-color: #444;
border-bottom-style: solid;
border-bottom-width: medium;
border-top-color: #444;
border-top-width: medium;
padding-bottom: 40px;
}
#footer {
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
width: 900px;
height: 30px;
clear: both;
background: #000000;
position: relative;
margin-top:-40px;
}
Any help would be awesome, I don't know how much I could thank you guys. I'm really trying hard to learn this thing, because I have fallen in love with what CSS can do.
Yelp!
Reply With Quote
Originally Posted by Nyne Lyvez
Bookmarks