The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Positioning
KlaasVdm
post Nov 24 2008, 01:41 PM
Post #1





Group: Members
Posts: 1
Joined: 24-November 08
Member No.: 7,186
I've got my table positioned with
margin: 0 auto
so when I enlarge my window, the main elements stay centered.

now i have placed 6 menu buttons on this table, but i gave them an absolute position, since this was the only way to get them where i wanted them to be.
the problem is, when i enlarge my window, the menu buttons do not move along with the other elements of the site.
this, probably, because they have
position: absolute

But when I try any other 'position' setting, the button is not placed where i want it to be.

How can I make sure the buttons move along with the site?

CODE

div{
position:fixed;
margin: 0 auto;
top:155px;
left:25px;
width:119px;
height:25px;
}

div.een{
top:155px;
left:25px;
width:119px;
height:25px;
}

div.twee{
left:150px;
}

div.drie{
left:269px;
}

div.vier{
left:650px;
}

div.vijf{
left:769px;
}

div.zes{
left:888px;
}


.maintable{
margin: 0 auto;
width:1024px;
align:center;
}


CODE

<body>
<table class="maintable" width="1024px" border="0">
  <tr>
    <td>
        <table width="1020px" border="0" cellspacing="5" cellpadding="0">
          <tr>
            <td><img src="images/banner.gif" width="1010" height="165" />
            <div class="een">
                <center>
                <a href="pagina01.html"> menu-item </a>    
                </center>
              </div>
            <div class="twee">
                <center>
                <a href="pagina02.html"> menu-item </a>
                </center>
            </div>
            <div class="drie">
                <center>
                <a href="pagina03.html"> menu-item </a>
                </center>
            </div>
            <div class="logo">
                  <a href="home.html" class="blocked">&nbsp;<br /><br /><br /><br /><br /><br /><br /><br /></a>            
            </div>
            <div class="vier">
                <center>
                <a href="pagina04.html"> menu-item </a>
                </center>
            </div>
            <div class="vijf">
                <center>
                <a href="pagina05.html"> menu-item </a>
                </center>
            </div>
            <div class="zes">
                <center>
                <a href="pagina06.html"> menu-item </a>
                </center>
            </div>            </td>
          </tr>
          <tr>
            <td><img src="images/bg.gif" width="1010" /></td>
          </tr>
    </table></td>
  </tr>
</table>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Nov 24 2008, 04:03 PM
Post #2


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
Positioning everything is not a good thing, as you have noticed. When I tried your code in my browser (Safari/Mac) the links were all over the place, but surely not where you'd want them.
If I were you, I'd use a list for those links, so you won't need al those <div>' and <center> tags. Go see at Listamatic and pick the one that suits your needs.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 19th April 2024 - 04:36 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC