• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Formular Elemente positionieren

Status
Für weitere Antworten geschlossen.
S

Seikilos

Neues Mitglied
Hallo,

ich hab folgenden HTML Code
Code: 
<html>
    <head>
        <title>Title</title>
        <style type="text/css">
         

  body {
    font-family:  Arial, sans-serif;
    font-size: 10pt; 
    color: #000;  
    
  }
  #ql{
      position: absolute;
    text-align: left;
    border: 0;
    color: #fff;
    width: 110px;
    height: 50px;
  }
  
  #ql .t{
      width: 80px;
    border: 0;
    background: #888888;
    margin-bottom: 10px;
    height: 16px;
    
  }
  
  #ql .s{
      position: absolute;
    right: 5px;
    top: 0px;
    width: 18px;
    height: 43px;
    display: block;
    background: #888888;
      border: 0;
  }
        </style>
    </head>
    <body>
        <div id="ql">
            <form action="" name="quicklogin_form" >
                        <input class="t" type="text" name="n0" value="" />
                        <br />
                        <input class="t" type="text" name="n1" value="" /> 
                        <input class="s" type="submit" name="n2" value="&nbsp" /> 
                    </form>
        </div>
    </body>
</html>

Und versuche das dritte Element bündig am Unteren auszurichten, im FF und im Opera klappt es, nur IE macht den Abstand der Elemente 1 und 2 falsch, so dass es nicht passt, kriegt man das übergreifend ohne Extralösungen für IE hin?
 
1.) Ich sehe keinen Doctype. Der ist aber essentiell damit die Browser wenigstens eine Chance haben das selbe anzuzeigen.
2.) Verzichte auf absolute Positionierung - das führt in vielen Fällen zu Problemen, wie auch bei dir scheinbar.
 
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Und wie soll ich ohne die relative Positionierung dieses Problem lösen? Ferner macht mir ja nicht das relative Probleme, sondern die Interpretaton der Browser (eher wohl des IE) der Zeilenhöhe
 
Du solltest auf die absolute Positionierung verzichten und die statische Positionierung verwenden, d.h. du solltest keine "position"-Eigenschaft verwenden. Und ja, es geht auch so wenn man sich erstmal mit den Grundlagen beschäftigt. Kleiner Tipp: als erstes sollte man alle Innen- und Außenabstände auf 0 setzen:

Code: 
* { margin: 0px;padding: 0px; }
 
Hab ich natürlich, habs in dem Democode hier nur vergessen. Wie umgeht man position? Wenn ich 3 Divs habe wobei 1 und 2 untereinander stehen sollen und 3 rechts davon? Negative margins?
 
Ich kenne float, aber ich brauch dennoch negative margins um das dritte Div rechts neben den ersten beiden darzustellen, nicht wahr? n float: left bei zweiten Div hilft mir nicht wirklich, weil das dritte Div ja nur nach rechts vom zweiten Div rutscht
 
Nein, brauchst Du nicht. Es kommt nur auf die HTML-Strukturierung an. Beispiel:

CSS:
Code: 
.links { float: left;width: 200px; }
.rechts { float: left;width: 250px; }
HTML
Code: 
<div id="rahmen">
<div class="links">
<div>erstes div links</div>
<div>zweites div links</div>
</div>
<div class="rechts">
<div>das hier steht rechts</div>
</div>
</div>
Ungetestet, aber die Richtung stimmt ... :roll:
 
Ja, sicher, das ist mir klar, ich wollte nur zusätzlichen Markup vermeiden. Vor allem, wenn abhängig des Parents Div drei mal Links mal Rechts dargestellt werden soll, so geht die Nomenklatur flöten und Namen wie Spalte 1 und Spalte 2 find ich nicht sooo hilfreich
 
Übrigens ist XHTML 1.0 Transitional kein geeigneter Doctype, weil er Mozillas in den Almost Standard Mode schaltet. Alle Browser sollten aber - sofern möglich - in den Standards Mode geschaltet werden, da böte sich XHTML 1.0 Strict besser an (ist auch besser, weil Transitional auch unsaubereren Code erlaubt).
LANtastic’s Artikel » DTD - Document Type Declaration - Das richtige Doctype

Seikilos schrieb:
...so geht die Nomenklatur flöten und Namen wie Spalte 1 und Spalte 2 find ich nicht sooo hilfreich
Zum Vergrößern anklicken....
Die Nomenklatur sollte sich nicht auf das Layout beziehen! "Trennung von Inhalt und Layout" - dazu gehört nicht nur, dass HTML den Inhalt auszeichnet und alles Layout in einem externen Stylesheet ist, sondern auch, dass Klassen und IDs nicht gemäß dem Layout gewählt werden, sondern - wie bei HTML üblich - gemäß der Semantik, gemäß dem Inhalt. Deswegen nennt man eine Navigation auch "navi" oder "menu" und niemals "left". Will man das Menü mal auf die rechte Seite packen, geht das im Stylesheet in 10 Sekunden, und das ist dann sofort aktiv für 10, aber auch für 100 oder für 1000 Seiten einer gesamten Website. Klar, das geht auch nocht, wenn das Menü "left" heißt, aber da geht die Nomenklatur dann wirklich flöten, wenn man ein Element, das rechts steht "links" nennt. Oder man muss doch wieder den HTML-Code aller 1000 Seiten ändern und das ist ja auch ein Punkt, den die Trennung von Inhalt und Layout vermeiden kann!

Gruß,
-Efchen
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben