website: http://uuilliam.net/personalp/
How it should look:
Problem 1:
it appears correct in Internet explorer but in all other browsers, the bottom bit of the logo is cut off
[SOLVED]
Problem number 2: (updated first post with new details)
When I resize my browser, It mis-aligns some of my buttons most likely cause I am using % instead of absolute pixels, but I need it in % to work correctly.
Problem number 3: how would I add a border but hide the top bit of the border? as it overlaps my navigator, I wouldn't mind if it went under.
code:
CSS
HTML Code:
#navigation {
background:none;
margin:0 auto;
}
#nav {
background:url(images/nav_repeat_x.png) #333333 repeat-x;
width:100%;
height:50px;
}
.links {
background:none;
margin:0px 0px 0px 60%;
height:50px;
}
#home{
float:left;
width: 41px;
height: 50px;
margin: 0px 0px 0px 25px;
background: url(images/home.png) no-repeat 0 0;
}
#home:hover{
background:url(images/home_rollover.png) no-repeat 0 0;
}
#home span{
display: none;
}
#about{
float:left;
width: 42px;
height: 50px;
margin: 0px 0px 0px 25px;
background: url(images/about.png) no-repeat 0 0;
}
#about:hover{
background:url(images/about_rollover.png) no-repeat 0 0;
}
#about span{
display: none;
}
#portfolio{
float:left;
width: 59px;
height: 50px;
margin: 0px 0px 0px 25px;
background: url(images/portfolio.png) no-repeat 0 0;
}
#portfolio:hover{
background:url(images/portfolio_rollover.png) no-repeat 0 0;
}
#portfolio span{
display: none;
}
#contact{
float:left;
width: 53px;
height: 50px;
margin: 0px 0px 0px 25px;
background: url(images/contact.png) no-repeat 0 0;
}
#contact:hover{
background:url(images/contact_rollover.png) no-repeat 0 0;
}
#contact span{
display: none;
}
#comment{
float:left;
width: 67px;
height: 50px;
margin: 0px 0px 0px 25px;
background: url(images/comment.png) no-repeat 0 0;
}
#comment:hover{
background:url(images/comment_rollover.png) no-repeat 0 0;
}
#comment span{
display: none;
}
.overlay {
background:none;
margin:-50px 0px 0px 10%;
width:150px;
height:150px;
float:left;
overflow:visible;
}
#top {
background:url(images/overlap.png) no-repeat;
width:150px;
height:11px;
}
#left {
background:url(images/overlap_1.png) no-repeat;
width:8px;
height:122px;
margin:0px auto;
float:left;
}
#logo {
background:url(images/logo_134_122.png) no-repeat;
width:134px;
height:122px;
margin:0px auto;
float:left;
}
#logo span {
display:none;
}
#right {
background:url(images/overlap_2.png) no-repeat;
width:8px;
height:122px;
margin:0px auto;
float:right;
}
#bottom {
background:url(images/overlap_3.png) no-repeat;
width:150px;
height:17px;
margin:0px 0px 0px 0px;
float:left;
}
#wrapper {
background:none center;
width:75%;
margin:-2px auto;
padding:50px;
}
HTML / PHP:
PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Photolio ~ Photography Portfolio</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#ffffff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="navigation">
<div id="nav">
<div class="links">
<a id="home" href="index.php" title="home"><span>Home</span></a>
<a id="about" href="about.php" title="about"><span>About</span></a>
<a id="portfolio" href="folio.php" title="portfolio"><span>Portfolio</span></a>
<a id="contact" href="contact.php" title="contact"><span>Contact</span></a>
<a id="comment" href="comment.php" title="comment"><span>Comment</span></a>
</div>
</div>
<div class="overlay">
<div id="top"></div>
<div id="left"></div>
<div id="logo"><a id="logo" href="index.html" title="logo"><span>logo</span></a><br /></div>
<div id="right"></div>
<div id="bottom"></div>
</div>
</div>
</div>
<!--this is the content area starting from here-->
<div id="wrapper">
since I am coding in php, this is the "header.php" file
that is why I dont close the wrapper or html file.
Last edited by UUilliam; 02-17-2010 at 06:25 PM..
|
