Help!

swantonbomb88 · Aug 3, 2008

Ok, so I have 2 things that I need help with for my site, which involves css, and html.

First.
I need to get rid of the gap at the bottom the page under the footer... I think its something to do with the padding, but IDK...

Second.
I need to make the icon buttons under the logo like in this picture, with a hover. I tried everything...

Heres the picture of the layout:
http://www.swantonsite.exofire.net/ryhol/newlayout.png

Heres the images for the icons under the logo(hover included):
http://www.swantonsite.exofire.net/ryhol/images/home_on.png
http://www.swantonsite.exofire.net/ryhol/images/home_off.png
http://www.swantonsite.exofire.net/ryhol/images/about_on.png
http://www.swantonsite.exofire.net/ryhol/images/about_off.png
http://www.swantonsite.exofire.net/ryhol/images/email_on.png
http://www.swantonsite.exofire.net/ryhol/images/email_off.png

Thanks

EDIT:
Heres my site:
http://swantonsite.exofire.net/ryhol/

and the codes:

HTML:

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Ryhol</title>
</head>
<body>
<div class="logo">
</div>
<div class="sidebar">
<div class="navaffhead">
Navigation
</div>
<div id="menu3">
<a href="http://forums.x10hosting.com/programming-help/index.htm">Home</a>
<a href="http://forums.x10hosting.com/programming-help/forum">Forum</a>
<a href="http://forums.x10hosting.com/programming-help/about.htm">About</a>
<a href="http://forums.x10hosting.com/programming-help/webdesign">Web Design</a>
<a href="http://forums.x10hosting.com/programming-help/portfolio">Portfolio</a>
<a href="http://forums.x10hosting.com/programming-help/contact.htm">Contact</a>
</div>
<div class="navaffhead">
Affiliates
</div>
</div>
<div class="ad">
<script type="text/javascript" src="http://x10hosting.com/adserve.js?corporate"></script>
</div>
<div class="head">
Lorem Ipsum
</div>
<div class="box">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed et erat. Sed in lectus eget velit sollicitudin dictum. Morbi elit dolor, auctor eget, molestie sit amet, posuere sed, dui. Vivamus commodo, magna mollis tempor sagittis, elit velit vehicula metus, eu auctor lectus neque sit amet est. Fusce imperdiet augue eget leo. Aliquam mattis scelerisque lacus. In sem risus, iaculis sit amet, suscipit non, facilisis a, pede. Aliquam blandit. Nullam ut velit eget tortor molestie consectetuer. Aenean tempus rutrum diam. Etiam elit ante, tempus eu, tempus non, aliquet eget, turpis. Duis ante ipsum, feugiat sagittis, pulvinar in, porttitor nec, urna. Integer sem mauris, feugiat a, fermentum at, posuere ac, eros.
<br/><br/>
Nam convallis pellentesque tellus. Curabitur lobortis. Phasellus cursus, augue eget condimentum euismod, libero sem ullamcorper velit, sed dictum massa quam id metus. Vestibulum adipiscing purus. Praesent eget tortor. Maecenas nulla. Suspendisse in lorem. Suspendisse potenti. Curabitur posuere, augue eu rhoncus feugiat, justo nunc tempor diam, at lobortis magna tortor non orci. Vivamus convallis augue sed elit. Donec nec nibh. Maecenas mauris. Etiam rutrum erat consectetuer quam. Aenean dictum. Morbi vitae risus ut nisi condimentum porta. Sed lacinia, ante cursus placerat lobortis, enim pede varius risus, id suscipit quam augue a dolor. Ut enim arcu, consectetuer rhoncus, molestie vel, sollicitudin id, turpis. Vivamus dui libero, pellentesque in, aliquam at, tincidunt vitae, eros. Nunc vel dui ac eros consequat sagittis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</div>
<div id="footer1">
</div>
<div id="footer2">
&nbsp;&copy; Copyright 2008. All Rights Reserved.
<br/>
&nbsp;<a href="http://validator.w3.org/check?uri=referer">Valid XHTML</a>
<a href="http://jigsaw.w3.org/css-validator/check/referer">Valid CSS</a>
</div>
</body>
</html>

HTML:

body {
background-color:#F1F1F1;
margin:0;
padding:0;
}
img {
border:0 none;
display:block;
}
.logo {
background-image:url(images/logo.png);
height:151px;
width:275px;
}
.sidebar {
background-image:url(images/sidebarbg.png);
height:600px;
width:275px;
}
#menu3 {
clear:both;
}
#menu3 a {
background-image:url(images/navbg.png);
background-repeat:repeat-x;
clear:both;
color:#FFFFFF;
float:left;
font-size:14px;
font-weight:bold;
height:25px;
padding-left:10px;
text-decoration:none;
width:240px;
}
#menu3 a:hover {
background-image:url(images/navbg_hov.png);
background-repeat:repeat-x;
color:#0B99FB;
}
.navaffhead {
background-image:url(images/navaff_head.png);
color:#000000;
float:left;
font-family:arial;
height:38px;
text-align:center;
width:250px;
}
#footer2 {
background-image:url(images/footer1.png);
background-repeat:no-repeat;
color:#FFFFFF;
font-family:arial;
font-size:15px;
height:67px;
margin-bottom:0;
padding-top:10px;
width:275px;
}
#footer1 {
background-image:url(images/footer2.png);
background-repeat:repeat-x;
float:right;
height:67px;
width:740px;
}
#footer2 a {
color:#FFFFFF;
font-size:12px;
font-weight:bold;
text-decoration:none;
}
#footer2 a:hover {
color:#0B99FB;
font-weight:bold;
text-decoration:underline;
}
.head {
background-image:url(images/head.png);
background-repeat:no-repeat;
color:#F1F1F1;
font-family:arial;
font-size:20px;
height:30px;
position:absolute;
right:50px;
text-align:center;
top:110px;
width:600px;
}
.box {
background-color:#C4C4C4;
color:#0096FE;
font-family:arial;
font-size:12px;
height:300px;
position:absolute;
right:50px;
text-align:left;
top:140px;
width:600px;
}
.ad {
background-color:#C4C4C4;
height:60px;
position:absolute;
right:95px;
top:25px;
width:468px;
}

DefecTalisman · Aug 3, 2008

You looking for a mouse over script.
Something like this maybe -> http://www.defectalisman.com/local_grill/cdb/signup.php ?

swantonbomb88 · Aug 5, 2008

Ok, I figured teh rollover thing out(not published on web yet) but I still need help with the gap at the bottom.

DefecTalisman · Aug 5, 2008

Ok, heres an idea.
You could try putting the 2 footer div's in a placeholder.

PHP:

#footer_container {
	height:1em;
	width:100%;
	position:fixed;
	bottom:0;
	padding-top:1px;
	margin-top:1px;
}

#footer1 {
	background-image:url(images/footer2.png);
	background-repeat:repeat-x;
	float:right;
	height:67px;
	width:740px;
}

#footer2 a {
	color:#FFFFFF;
	font-size:12px;
	font-weight:bold;
}

Code:

...
<div id="footer_container">
<div id="footer1">
</div>
<div id="footer2">
&nbsp;&copy; Copyright 2008. All Rights Reserved.
<br/>
&nbsp;<a href="http://validator.w3.org/check?uri=referer">Valid XHTML</a>
<a href="http://jigsaw.w3.org/css-validator/check/referer">Valid CSS</a>
</div>
</div>
</body>
</html>

Help!

swantonbomb88

New Member

DefecTalisman

Community Advocate

swantonbomb88

New Member

DefecTalisman

Community Advocate

Free Web Hosting

Our Community

Legal