Header and Footer HTML/CSS Fix? - TechSpott

April 24th, 2010, 10:40 PM

I need the buttons in the header and footer to be aligned to the center of their respective places. If you need the pictures then just email me.

<?xml version="1.1" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US">

<head>

<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="title" content="MyBackground" />
<meta name="description" content="This is a test of my backround using CSS." />
<meta name="keywords" content="css, background, test, html" />
<meta name="rating" content="General" />
<meta name="distribution" content="Local" />

<title>MyBackground</title>

<style type="text/css">

#container {
width: 780px;
margin: auto auto;
position: relative; /* so header and footer can be positioned */
}

#container2 {
width: 780px;
margin: auto auto;
position: relative;
}

#header {
position: absolute;
top: 0;
width: 100%;
height: 100px;
background: #eee;
}

#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background: #dad;

}

body {
background-image: url(mainbg.gif);
background-attachment:fixed;
}

#white {
background-color: #FFFFFF;
width:500px;
margin-left:auto;
margin-right:auto;
margin-top:60px;
margin-bottom:60px;
åŽŸå¸–åœ°å€: TechSpott - Computer and technology forums http://www.techspott.com//showthread.php?p=10083
}

#inside {
padding-top:5px;
padding-bottom:5px;
padding-right:10px;
padding-left:10px;
}

</style>

<style type="text/css">

#nav-menu ul {
list-style: none;
padding: 0;
margin: 0;
}

#nav-menu li {
float: left;
margin: 0 0.15em;
}

#nav-menu li a {
background: url(background.gif) #fff bottom left repeat-x;
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
border: 0.1em solid #dcdce9;
color: #0d2474;
text-decoration: none;
text-align: center;
}

#nav-menu {
width:30em
}
</style>

<style type="text/css">

a.squarebutton {
background: transparent url(square-gray-left.gif) no-repeat top left;
display: block;
float: left;
font: normal 12px Arial;
line-height: 15px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 23px) */
height: 23px; /* Height of button background height */
padding-left: 5px; /* Width of left menu image */
text-decoration: none;
}

a:link.squarebutton, a:visited.squarebutton, a:active.squarebutton {
color: #000000; /*button text color*/
}

a.squarebutton span {
background: transparent url(square-gray-right.gif) no-repeat top right;
display: block;
padding: 4px 25px 4px 25px; /*Set 9px below to match value of 'padding-left' value above*/
}

a.squarebutton:hover { /* Hover state CSS */
background-position: bottom left;
}

a.squarebutton:hover span { /* Hover state CSS */
background-position: bottom right;
color: black;
}

.buttonwrapper { /* Container you can use to surround a CSS button to clear float */
overflow: hidden;
width: 100%;
}
</style>

</head>

<body>

<div id="container">
<div id="header">
<div id="nav-menu">
<ul>
<li><a href="#">Services</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>
</div>
</div>

<p>
<br />
<br />
<br />
</p>

<div id ="white">

<p id="inside">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis nunc a massa varius dapibus. Nunc semper dignissim ipsum ut lobortis. Sed non eros in mauris eleifend fermentum. Duis non pretium justo. Fusce vehicula, sem in feugiat facilisis, neque sapien cursus velit, et facilisis nisi dui id sapien. Duis pulvinar condimentum aliquam. Nulla mauris ipsum, egestas convallis dignissim a, vehicula ut augue. Integer consectetur mauris non libero eleifend luctus. In molestie imperdiet sem
åŽŸå¸–åœ°å€: TechSpott - Computer and technology forums http://www.techspott.com//showthread.php?p=10083
heres the bottom Fusce gravida varius massa, ultrices molestie lectus interdum vitae. Ut vitae odio arcu. Mauris ac neque risus. Aliquam commodo odio vel orci eleifend scelerisque. Sed porta semper euismod. Morbi ultricies convallis tristique. Duis eu enim vel neque facilisis dapibus quis nec ligula. Vestibulum ut ipsum justo, imperdiet pretium augue. Nunc gravida tristique nisl, vitae commodo ligula imperdiet ac. Praesent posuere, tellus id blandit viverra, metus dui tincidunt tortor, sodales dignissim velit urna in massa. Aenean eu tellus orci. Praesent congue mi vitae quam fermentum consequat. Praesent vestibulum, dolor et eleifend imperdiet, eros orci viverra diam, eu gravida ante ante nec justo. Phasellus sollicitudin tellus id mi placerat adipiscing. Aenean nec ligula magna, vitae faucibus sem. Aliquam sit amet blandit justo.

Ut mi justo, tempor sagittis venenatis quis, fringilla a lorem. Praesent eu dui mi, sed consequat lorem. Lorem ipsum dolor sit amet, consectetur adipiscing
In hac habitasse platea dictumst. Vestibulum nisi nulla, aliquet eget sollicitudin scelerisque, consequat sit amet sapien. Aenean quis enim et urna dapibus consectetur ac quis eros. Aenean.
</p>

</div>

<p>
<br />
<br />
<br />
</p>

<div id="container2">
<div id="footer">
<div class="buttonwrapper">
<a class="squarebutton" href="http://www.google.com/" style="margin-left: 6px"><span>Google</span></a>
<a class="squarebutton" href="http://www.yahoo.com/" style ="margin-left: 6px"><span>Yahoo!</span></a>
<a class="squarebutton" href="http://www.ask.com" style="margin-left: 6px"><span>Ask</span></a>
</div>
</div>
</div>
</body>
</html>

Support our advertisers!