SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Nov 2003
    Location
    San Jose, California
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Positioning CSS Menu bar

    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;topxx;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.

  2. #2
    SitePoint Member
    Join Date
    Nov 2003
    Location
    San Jose, California
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have just tested my site on MacIE5, Safari, and Mozilla. All browsers display the site all messed up. How can i fix this? THe only way it will show correctly is in ie6 windows.

  3. #3
    SitePoint Member
    Join Date
    Nov 2003
    Location
    San Jose, California
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    can anyone help?

  4. #4
    SitePoint Addict Knightime's Avatar
    Join Date
    Jan 2003
    Location
    USA
    Posts
    376
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try putting everything inside another container <div> so when the resolution changes, all contents inside the outer-most <div> react uniformly.
    Troy

  5. #5
    SitePoint Enthusiast
    Join Date
    Dec 2002
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    also bear in mind that position: absolute always refers to the way the div elements is positioned according to the PARENT div element, not the html body necessarily....

    so, as Knightime mentioned include a parent div with position: relative specified and "drop" all absolutely positioned divs inside....

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You have these in your stylesheets:
    Code:
     {This is the Menu Bar}.
    They should be wrapped in css comments not brackets as that may cause you some problems e.g
    Code:
    /*This is the Menu Bar*/
    I'm not sure exactly how your layout is supposed to be but it doesn't look like you need any absolute positioning if all you are doing is centering fixed width elements. Just give them a fixed width and use margin-right:auto & margin-left:auto to centre them.

    You can stacjk the elements on top of each other and just keep them apart using margin-top:5% etc.

    Here's a rough example of your page as I don't know anything about flash (i've just put a few borders on to see things etc.) I'm sure you can work it out from here on:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml11/DTD/xht...ansitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>CSS Test Page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    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;
    text-align:center;
    }
    
    #center { 
    background: #FFFFFF;
    border: 1px solid black;
    margin-right: auto;
    margin-left: auto;
    margin-top: 3%;
    text-align: center;
    width: 610px;
    height: 300px;
    }
    
    .logo { 
    margin-right: auto;
    margin-left: auto;
    margin-top: 1%;
    text-align: center;
    width:400px;
    height:100px;
    border:1px solid black;
    }
    
    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}
    
    #centertable {
    margin-top:100px;
    width:300px;
    height:275px;
    overflow:auto;
    color:black;
    border:1px solid #000;
    font-family: tahoma;
    font-size: 8pt;
    color:black;
    background:red;
    }
    #menu
    {
    font-family: tahoma; font-size: 8pt; color:black;
    background: #FFFFFF;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    margin-top:3%;
    }
    </style>
    </head>
    <body>
    <div class="logo"> 
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
      codebase="http://download.macromedia.com/pub/s...rsion=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>
    </div>
    <div id="menu"> <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> 
    </div>
    
    <div id="center"> 
      <iframe frameborder="0" border=0 width="590" height="300"
     src="home.html" name=iframe scrolling=yes allowtransparency="true"></iframe>
    </div>
    </body>
    </html>
    Hopefully that will look better in mozilla now.

    Paul


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •