Hi, I'm working on my personal site and I'm trying to do the layout. First of all, I did it with HTML and tables, but then I figured out about CSS and now I'm planning to do a total conversion. I have started from scratch again and doing the site over. I am having problems positioning the menu. Right now its positioned all the way on the top. I need it to be positioned in between the flash and the div. Whenever I try to do position:absolute;top
xx;leftxx, and i try my site at different resolutions, it gets messed up. I need it to stay in the same middle of the two spot when i change resolution and such. Can anyone help? thanks
Here is my site:
link
Here is my css file:
Code:
body {
color: black;
background-color: white;
cursor:crosshair;
scrollbar-3dlight-color: white;
scrollbar-arrow-color: black;
scrollbar-base-color: white;
scrollbar-darkshadow-color: white;
scrollbar-face-color: white;
scrollbar-highlight-color: black;
scrollbar-shadow-color: black;
scrollbar-track-color: white;
}
{Main outer table that contains the iframe}
#center {
background: #FFFFFF;
border: 1px solid black;
margin-right: auto;
margin-left: auto;
margin-top: 3%;
text-align: center;
width: 50%;
height: 10%;
}
{This is the main page logo}
#logo {
margin-right: auto;
margin-left: auto;
margin-top: 1%;
text-align: center;
}
{Link Hovers and mouse overs}
A:link{text-decoration: none}
A:visited{text-decoration: none}
A:active{text-decoration: none}
A:hover{text-decoration: none}
A:hover{background:white;
color:black;
font-weight:bold}
A:visited{color:black}
A:active {color:black}
A:link{color:black}
{This is the Update Table for the mainpage}
#centertable {
position:absolute;
top:15;left:145;
width:300;
height:275;
overflow:auto;
color:black;
border:solid;
border-top-width:1px;
border-left-width:1px;
font-family: tahoma;
font-size: 8pt;
color:black;
border-bottom-width:1px;
border-right-width:1px;
}
{This is the Menu Bar}
#menu
{
font-family: tahoma; font-size: 8pt; color:black;
onMouseOver="style.backgroundColor='grey'";
onMouseOut="style.backgroundColor='white'";
background: #FFFFFF;
position:absolute;
margin-right: auto;
margin-left: auto;
margin-top: auto;
text-align: center;
width: 100%;
height: 1%;
}
Here is my HTML tag
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test Page</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div align="center" id="menu">
<center>
<A HREF="home.html" target="iframe">Homepage</A>|
<A HREF="home.html" target="iframe">Monday</A>|
<A HREF="home.html" target="iframe">Tuesday</A>|
<A HREF="home.html" target="iframe">Wednesday</A>|
<A HREF="home.html" target="iframe">Thursday</A>|
<A HREF="home.html" target="iframe">Friday</A>
</center>
</div>
<div align="center" id="logo">
<center>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,42,0"
id="logo" width="400" height="100">
<param name="movie" value="logo.swf">
<param name="quality" value="high">
<param name="bgcolor" value="#FFFFFF">
<embed name="logo" src="logo.swf"
quality="high" bgcolor="#FFFFFF" swLiveConnect="true"
width="400" height="100"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
</object>
</center>
</div>
<div align="center" id="center">
<table width="600" height="300" border="0" cellspacing="1" cellpadding="1" bordercolor="black">
</div>
<iframe frameborder="0" border=0 width=590 height=300
src="home.html" name=iframe scrolling=yes
style="position:absolute;" allowtransparency="true"></iframe>
</div>
</body>
</html>
If you can help, please. thanks a lot.
Bookmarks