Feedback erbeten - Umstieg von Tabellen auf CSS

html.de-Forum HTML, XHTML & CSS
1

Hallo zusammen,

nachdem ich hier im Forum schon einiges an (konstruktiver) Kritik bekommen hab betreffend der Tabellen die ich zum positionieren verwende, möchte ich nun Schritt für Schritt auf CSS Layout umsteigen.

Als Testbalon hab ich mal den Header neu gesetzt und frage mich nun ob das so richtig ist, oder man es noch verbessern kann.

Vielen Dank im vorraus für euer Feedback. Hier mein Code:

<style type="text/css">
    #header {
        position:relative;
        background-color:#2A6EE4;
        height:30px;
    }
    #header_elements{
        position:relative;
        top:0px;
        left:16px;
        color:white;
        font-size:15px;
    }
    #header_elements #submit{
        position:relative;
        top:6px;
    }        
    #header_links{
        position:relative;
        top:2px;
        left:36px;        
    }
    #header_links a{    
        color:white;    
    }
</style>
<div id="header">
    <div id="header_elements">
    <input type="text" name="q" id="fq" value='Suche' autocomplete="off" style="width:200px;height:17px;border:none;color:#999999;">
        <select name="cns" id="cns" style="width:106px;height:19px;border:0px;">
            <option value="">Teste
        </select>

        <input name="submit" id="submit" type="image" src="gm.gif" title="suchen">
        <span id="header_links">
            <a href="en.htm"><strong>link</strong></a>&nbsp;| <a href="gen.htm">link 2</a>
        </span>
    </div>
</div>
2

Verzichte in diesem Fall auf alle relativen Positionierungen und verwende für äußere Abstände „margin“ sowie um nebeneinander anzuordnen „float“.

Ebenso verwendest du m.E. noch zu viele id’s. Deren Angaben kannst du teilweise auch direkt den jeweiligen Elementen (z.B. „input“) zuweisen.
Löse dich noch etwas mehr vom Tabellendenken, denn nicht für jede Zelle brauchst du eine eigene Angabe.

3

Vielen Dank für Deine Kritik.

Ich konnte zwei loswerden indem ich statt dessen das Form Element anspreche.

Das Hauptproblem das ich momentan habe, ist das die Felder nicht in allen Browsern horizontal auf einer Höhe sind.

Mein neues Style sieht mittlerweile so aus:

#header {
    background-color:#2A6EE4;
    height:30px;
    color:white;
}
#header form a{
    color:white;
    font-size:15px;
}
#fq{
    margin-top:6px;
    margin-left:16px;
    padding:2px 0px 1px 0px;
    width:200px;border:none;                                        
}        
#header select{    
    position:relative;
    top:-1px;    
    margin-top:0px; 
    padding:1px;
    width:140px;    
    border:0px;
}    
#submit{
    position:relative;
    top:4px;
    padding-right:30px;
}

Hast Du noch einen Tipp wie ich

  1. die Elemente für alle Browser in eine horizontale linie bringe
  2. Das CSS sauberer und kompakter gestalten kann

Vielen Dank im vorraus

4

Die Browser haben z.T. unterschiedliche Standardeinstellungen, was die Abstände von Elementen betrifft. Dies kannst du damit vermeiden: Unterschiedliche Abstände in verschiedenen Browsern