In the page you will see a div called div_topbanner. I want to load a flash in there.
But I bet I messed up with the css a bitbecause the dimensions of header get a bit messed up when resizing the window. Also it's "higher" in IE (7) than FF.
Thought someone would be so kind to have a look?
header.php
<div id="header">
<img id="mainlogo" src="image/main_logo.png">
<div id="div_login">
<ul>
<li>User Name:</li>
<li><input id="txtUserName" type="text" /></li>
<li>Password:</li>
<li><input id="txtPassword" type="password" /></li>
<li>Remember Me<input type="checkbox" id="chkRememberMe" /></li>
<li><input type="button" id="btnLogin" value="Login" /></li>
<li><a href="/">Forgot Password?</a></li>
</ul>
</div> <!-- login -->
<div id="div_topbanner">
</div>
<div id="div_topnav">
<ul id="ul_topnav">
<li id="li_home"><a href="home.php">Home</a></li>
<li id="li_cand"><a href="about_cand.php">China Automotive News Daily</a></li>
<li id="li_trial"><a href="trial_access.php">Trial Access</a></li>
<li id="li_translations"><a href="translation_services.php">Translation Services</a></li>
<li id="li_work"><a href="work_with_us.php">Work</a></li>
<li id="li_lang"><a href="home.php">Language</a></li>
</ul>
</div> <!-- div_topnav-->
</div>style.css
body
{
color: #333333;
margin: 0;
}
#header
{
height: 150px;
}
#mainlogo
{
position: relative;
top: 60px;
}
#div_login
{
position: absolute;
right: 0px;
top: 0px;
background: #ececec url(../image/login_right.gif) no-repeat bottom left;
text-align: right;
}
#div_login ul
{
margin: 0;
padding: 6px 20px 4px 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 70%;
}
#div_login li
{
display: inline;
}
#div_login #txtUserName, #txtPassword
{
border: 1px #666666 solid;
width: 70px;
font-size: 80%;
margin-right: 6px;
}
#div_login #chkRememberMe
{
margin: 2px;
margin-right: 10px;
vertical-align: middle;
}
#div_login #btnLogin
{
border: 1px #666666 solid;
font-size: 80%;
margin-right: 10px;
vertical-align: middle;
}
#div_login a
{
color: #333333;
}
#div_topbanner
{
background-color: #333333;
position: absolute;
right: 0px;
top: 40px;
width: 500px;
height: 80px;
}
#div_topnav
{
position: relative;
top: 60px;
float: left;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
background: #ffffff url(../image/topnav_bottom.gif) repeat-x bottom left;
}
#div_topnav li
{
list-style: none;
float: left;
margin: 0;
padding: 0;
font-family: "Lucida Grande" , sans-serif;
font-size: 70%;
}
#div_topnav a
{
float: left;
display: block;
margin: 0 1px 0 0;
padding: 4px 8px;
color: #333;
text-decoration: none;
border: 1px solid #9B8748;
border-bottom: none;
background: #F9E9A9 url(../image/topnav_off.gif) repeat-x top left;
}
#div_topnav a:hover, body#home #li_home a, body#about_cand #li_cand a, body#trial_access #li_trial a, body#translation_services #li_translations a, body#work_with_us #li_work a
{
color: #333;
padding-bottom: 5px;
border-color: #727377;
background: #fff url(../image/topnav_on.gif) repeat-x top left;
}
