CSS Button zijn plek geven

**T Borst** · 13-11-2007, 06:40

Beste vrienden van SD,

Ik zit met een probleem.
Ik heb vlede keer een lay-out gemaakt om te oefenen met css
en dat is ook gelukt voor een deel:
http://www.sauruscss.net/leoniegfx/gecodeerd/
Je ziet dat de buttons mooi onder de header zitten..

Nu het volgende ik heb het zelfde gedaan bij een ander, maar de button blijft op zijn plekkie staan

PHP Code:


.menu {
float: left; 
width: 100%;
height: 50px;
background-repeat: repeat-x;
}

.button {
position:absolute;
margin-top: 108px;
margin-left: 220px;
height: 29px;
width: 112px;
background: #FFF url('images/button.gif')
}

Stukje uit het html bestandje:

PHP Code:


<body>
    <div class="container">
        <div class="header"><img alt="Header" src="images/header.gif">
          <br>
        </div>
      <div class="menu">
        <p><div><img src="images/button.gif" alt="LeonieGFX.nl" name="text" width="112" height="29" align="top" id="button" /></div></p>
      </div>
                <div class="content">Dit is je content.
                </div>
            <div class="footer"><img alt="footer" src="images/footerlogo.gif">
            </div>
    </div>

</body>

Wat doe ik fout waarom blijft de button op de plek waar ik hem niet wil?

Met Vriendelijkegroet,
Tino Borst

**Edwin P.** · 13-11-2007, 06:46

..wat meer uitleg is welkom..
screenshot? welke browser?
tip: vermijd zoveel mogelijk position:absolute,is bagger in IE6

**T Borst** · 13-11-2007, 12:43

http://www.sauruscss.net/mafialegocy/index.html
Normale url
http://www.sauruscss.net/mafialegocy/opmaak.css
Css,

Wie o wie kan me helpen! groetjes!:)

**T Borst** · 13-11-2007, 13:53

Iemand niemand?

**Michiel Otten** · 13-11-2007, 23:35

Code:

.button {
position:absolute;
margin-top: 108px;
margin-left: 220px;
height: 29px;
width: 112px;
background: #FFF url('images/button.gif')
}

Hier define je een class

Code:

<p><div>
<img src="images/button.gif" alt="LeonieGFX.nl" name="text" width="112" height="29" align="top" id="button" /></div></p>

Hier roep je een id="button" aan, dat klopt dus niet..
dus de code wordt:

Code:

<p><div>
<img src="images/button.gif" alt="LeonieGFX.nl" name="text" width="112" height="29" align="top" class="button" /></div></p>

Ik hoop voor je dat het werkt.
Position absolute is gevaarlijk in IE 6 hoor

EDIT:
Of je kunt van de class button een id maken door:
.button {

te vervangen door

#button {

CSS Button zijn plek geven