Code: Select all
<!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">
<link href="myselfcss.css" rel="stylesheet" type="text/css" />
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body bgcolor="#333333">
<div id="header_wrap">
<div id="header">
<div id="site_logo"></div>
</div>
</div>
<div id="menu_wrap">
<div id="menu">
<ul>
<li><a href="myself.html">Who am I ?</a></li>
<li><a href="myself.html">Academic Background</a></li>
<li><a href="myself.html">Professional membership</a></li>
<li><a href="myself.html">Contact me</a></li>
</ul>
</div>
</div>
<div id="contents_wrap">
<div id="contents">
<div class="top_image"></div>
<div class="my_photo"></div>
<div class="project_contents">
<div class="project_text"></div>
<p> hi all !!!</p>
</div>
</div>
</div>
</body>
</html>
CSS code ....
#body{
margin:0px;
padding:0px;
background-color:#333333;
}
#header_wrap {
height:140px;
width:100%;
margin::0px;
padding:0px;
background:url(blue.jpeg);
}
/*
#header {
width::980px;
margin:0 auto:
padding:0;
}*/
#site_logo {
margin::0;
height:140px;
width:900px;
background:url(mickeyb.jpeg) no-repeat ;
}
#menu_wrap{
background:url(menu_wrap.jpeg);
height:35px;
width:100%;
margin:0px;
}
#menu {
width:1100px;
height:35px;
margin: 0px ;
padding:0px;
}
#menu ul {
margin::0 0 0 35px;
padding:0px;
list-style:none;
}
#menu li {
margin:0px;
padding:0px;
display:inline;
}
#menu a {
display:block;
height:35px;
width:250px;
float:left;
text-decoration:none;
font-size:16px;
font-weight:bold;
color:#333;
white-space:2px;
background:url(buttons.jpeg);
outline:none;
text-align:center;
}
#menu a:hover {
color:#999;
background:url(hover.jpeg) bottom:no-repeat;
}
#contents_wrap {
width:980px;
margin:0 auto;
}
#contents {
width:1000px;
margin:30px;
padding:9px;
border:1px solid:#c3c4c5;
background:#d8d7d7;
}
.top_image{
background:url(who.jpeg) center;
width:550px;
height:96px;
}
.my_photo {
background:url(myself.jpeg);
float:left;
width:300px;
height:225px;
}
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
please refer the attachments first.
The problem is I am not getting the desired look in firefox and internet explorer. I haven't tried out in other browsers.
there are two different types of gaps under the logo in two browsers.
The contents (.contents in css code) is not centerd as i wanted. Is there any metod to achive this goal.
Regards
Shehan31