[CSS + HTML] positioneren van div tags lukt niet

[Verwijderd]

Hallo,

Ik probeer een bepaalde pagina geheel met div tags op te maken. Ik ondervind echter problemen bij het op de juiste plaats krijgen van de tags. Een serie div tags waarvan de inhoud onder elkaar moet komen dacht ik simpelweg zo onder elkaar te kunnen zetten (deze staan gezamenlijk weer binnen een vierde div tag). Deze divs hebben allemaal een achtergrond die ik als achtergrondplaatje via CSS toewijs.

code:

    <div id="left">
      <form name="Login" method="post" action="login.php">
      <div id="left1">
        <table cellpadding="1" cellspacing="0">
          <tr>
            <td class="login">Gebruikersnaam</td>
            <td><input name="Gebruikersnaam" type="text" id="Gebruikersnaam" size="12" maxlength="15"></td>
          </tr>
          <tr>
            <td class="login">Wachtwoord</td>
            <td><input name="Wachtwoord" type="password" id="Wachtwoord" size="12" maxlength="15"></td>
          </tr>       
        </table>
      </div>
      <div id="left2"><input name="Login" type="submit" value="Login"></div>
      </form>
      <div id="left3"></div>
    </div>

Ik krijg hierbij bijvoorbeeld in IE6 onder het formulier een witte regel en daarna pas de inhoud van div "left3". In FF gaat dit wel goed.
Ook heb ik een probleem wanneer ik aan div "left1" een stijleigenschap: padding-top:13px meegeef om de tabel die in deze div staat pas na 13 pixels te laten beginnen. Als ik dit doe dan schuiven div "left2" en div "left3" ook 13 pixels naar beneden, zodat er een lege ruimte van 13 pixels tussen div "left1" en div "left2" ontstaat.

Hoe kan ik dit beter aanpakken?
Ik heb zitten kijken naar position:absolute en dan per div aangeven waar deze moet komen op het scherm, maar dan zit je natuurlijk met verschillende resoluties. Ik zat zelf te denken om BINNEN de overkoepelende div "left" de overige divs absoluut te positioneren, maar ik weet niet of zoiets mogelijk is.

Iemand die me een beetje op weg kan helpen?

[TeeDee]

Heb je misschien ook een werkend voorbeeld?

[faabman]

Misschien kun je, voordat je met opmaak begint beter eerst opnieuw nadenken over de HTML die je gebruikt. Betere opmaak voor een formulier, die ook genoeg mogelijk geeft om opmaak toe te voegen

HTML:

<form>
  <fieldset>
    <label for="foo">
      <span>foo</span>
      <input type="text" name="foo" id="foo" />
    </label>
  </fieldset>
</form>

Verder:

• Heeft elke div eigen achtergrond? Waarom voeg je die achtergrond dan niet gewoon samen en plaats je die als achtergond van het formulier?
• Vervang <input type=button / submit / reset, door een <button type=button / submit / reset -> maakt het opmaken met CSS gelijk ook een stuk gemakkelijker

[marko77]

de witte regel onder het form in IE komt doordat forms standaard een hoge margin hebben in IE.

form {
margin:0;
}

zou dit op moeten lossen.
Het feit dat de top padding op div1 hetzelfde doet bij div2 komt denk ik door een css fout, maar je hebt die niet in de TS gepost.

[Verwijderd]

Bedankt voor de hulp!!!

Faabman: ik zal je tips m.b.t. het formulier ter harte nemen, die ga ik zeker verwerken!

Marko77: die oplossing wat betreft de margin van het form werkt perfect!
Je gaf verder aan dat je dacht dat ik een CSS-fout had gemaakt, waardoor de padding niet goed gaat. Hieronder mijn complete pagina incl. CSS. Kun je kijken waar de fout zit?

Alvast bedankt!

code:

<style>
html,body {
    margin:0;
    padding:0px;
    text-align:center;
}
#container {
    margin:0 auto;
    width:780px;
    text-align:center;
}
#top {
    background-image:url(images/top.jpg);
    background-repeat:no-repeat;
    width:770px;
    height:125px;
}
#bottom {
    width:770px;
    height:300px;
}
#left {
    width:215px;
    height:300px;
    float:left;
}
#left1 {
    width:215px;
    height:80px;
    background-image:url(images/Left1.jpg);
    background-repeat:no-repeat;
    text-align:left;
    padding-left:13px;
    padding-top:14px;
}
#left2 {
    width:215px;
    height:26px;
    background-image:url(images/Left2.jpg);
    background-repeat:no-repeat;
    vertical-align:middle;
    padding-left:5px;
    text-align:left;
}
#left3 {
    width:215px;
    height:29px;
    background-image:url(images/Left3.jpg);
    background-repeat:no-repeat;
}
#right {
    width:555px;
    height:300px;
    float:right;
}
.login {
    font-family:Arial, Helvetica, sans-serif;
    font-size:10px;
    color:#990066;
}
form {
    margin:0;
} 
</style>
</head>


<body>
<div id="container">
  <div id="top">&nbsp;
  </div>
  <div id="bottom"> 
    <div id="left">
      <form name="Login" method="post" action="login.php">
      <div id="left1">
        <table cellpadding="1" cellspacing="0">
          <tr>
            <td class="login">Gebruikersnaam</td>
            <td><input name="Gebruikersnaam" type="text" id="Gebruikersnaam" size="12" maxlength="15"></td>
          </tr>
          <tr>
            <td class="login">Wachtwoord</td>
            <td><input name="Wachtwoord" type="password" id="Wachtwoord" size="12" maxlength="15"></td>
          </tr>       
        </table>
      </div>
      <div id="left2"><input name="Login" type="submit" value="Login"></div>
      </form>
      <div id="left3"></div>
    </div>

    <div id="right">
    &nbsp;
    </div>
  </div>
</div>
</body>

[marko77]

als ik die code bekijk in mn browser dan zitten alle divs keurig aan elkaar, zonder 13 px ertussen oid.

Wel moest ik i.p.v.
background-image:url(images/Left1.jpg);
dit erin plaatsen
background:#dddddd url(images/Left1.jpg);

maar dat is alleen omdat ik de plaatjes niet heb, en dus met kleuren moest werken.

[Reinier]

faabman schreef op donderdag 10 augustus 2006 @ 21:40:
Misschien kun je, voordat je met opmaak begint beter eerst opnieuw nadenken over de HTML die je gebruikt. Betere opmaak voor een formulier, die ook genoeg mogelijk geeft om opmaak toe te voegen

HTML:

<form>
  <fieldset>
    <label for="foo">
      <span>foo</span>
      <input type="text" name="foo" id="foo" />
    </label>
  </fieldset>
</form>

Is het niet juister om het form binnen de fieldset te plaatsen? In plaats van andersom? Never mind!

[Boelie-Boelie]

Een fieldset maakt deel uit van een form, het behoort daarom in de form (Voorbeeldje.) Een fieldset is een gegroepeerd aantal formitems. Je kunt meerdere fieldsets binnen een form hebben.

[ Voor 39% gewijzigd door Boelie-Boelie op 11-08-2006 13:02 ]

[Reinier]

Je hebt gelijk, dankjewel.

[Verwijderd]

Marko bedankt voor je hulp!

Doordat jij getest hebt met een achtergrondkleur ipv een plaatje ben ik nu gaan begrijpen waar het probleem zit. Kennelijk wordt er wanneer je padding-top:14px;
gebruikt ook 14px minder van je achtergrondplaatje weergegeven. Dit vind ik op zich overigens erg vreemd aangezien achtergrond en positionering van de inhoud van de div ten opzichte van de rand van de div eigenlijk niets met elkaar te maken hebben (in mijn ogen dan).

Als ik nu echter een achtergrondplaatje van 94 px hoog (dus 80 + 14) gebruik ipv 80 px hoog dan sluiten de achtergronden van de divs weer perfect op elkaar aan. De divs zelf sloten de hele tijd al op elkaar aan, maar dit had ik niet in de gaten vanwege dat rare gedoe met die achtergrond

Overigens nog iemand die een verklaring heeft voor het feit dat er bij gebruik van padding-top:14px;
ook 14px minder van je achtergrondplaatje weergegeven wordt?