4 spaltiges Layout mit fixen Werten, Vorgehensweise?

[hawkmaster]

Hallo zusammen,
Seit gestern versuche ich nach und nach meine Tabellen mit CSS zu ersetzen.
Dank der Hilfe hier habe ich meine Hauptnavigation nun schon mit CSS und Listen (ul, il) umgesetzt.

An einigen Stellen im Projekt gibt es Tabellen wie:

  
<table width="700">  
  <tr>  
    <td width="150">Textfeld1<br />  
      <input type="text" name="textfield" /></td>  
    <td width="50">Textfeld2<br />  
      <input type="text" name="textfield2" /></td>  
    <td width="160">Auswahl1<br />  
        <select name="select">  
    </select>  
    </td>  
    <td width="320">Platz für Button oder weitere Tabelle </td>  
  </tr>  
</table>  

Bevor ich mir nun was falsches bzw. umständliches angewöhne, möchte ich euch Experten fragen wie ihr dies mit CSS machen würdet.

Könnte man hier nun mit 4 divs arbeiten, etwa:
<div id="spalte1"></div>
<div id="spalte2"></div>
<div id="spalte3"></div>
<div id="spalte4"></div>

und dann mit position und width (bzw. mit festen Werten:
#spalte1 {
position: absolute;
left: 2%;
width: 18%;
}

#spalte2 {
position: absolute;
left: 21%;
width: 39%;
}

#spalte3 {
position: absolute;
left: 61%;
width: 18%;
}

#spalte4 {
position: absolute;
left: 80%;
width: 17%;
}

Oder wäre das Ganze einfacher wieder mit Listen und float zu machen?
Mir geht es unter anderem auch das die Beschriftung wie in der Tabelle ÜBER den Elementen liegt und das die Breiten der Spalten in etwa so sind wie in der Tabelle.

Bin für jeden Hinweis dankbar.

vielen Dank und viele Grüße
hawk

[Steel]

Hi!

Wenn du per float Container nebeneinander positionierts, kannein umgebender Container einen Zeilenumbruch verhindern.

Absolute Positionierung sollte man nur in seltenen Faellen in Erwaegung ziehen.

Pass auf, dass du keine Divsuppe generierst. Wenn die Conatiner mehrere Elemente beinhalten sollen nimm Divs. Sonst das entsprechende Element.

[hawkmaster]

Hallo
vielen Dank für deinen Tipp.

Pass auf, dass du keine Divsuppe generierst. Wenn die Conatiner mehrere Elemente beinhalten sollen nimm Divs. Sonst das entsprechende Element.

ja, deswegen frage ich lieber vorher. Ich habe gelesen das man nicht zu viele "divs" verwenden soll.

Mein Problem ist momentan noch das ich das einfach nicht kapier wonach sich "absolute" und "relative" orientiert. Also an welchen Elementen sie sich ausrichten.

vielen Dank und viele Grüße
hawk

[ChrisB]

Hi,

Mein Problem ist momentan noch das ich das einfach nicht kapier wonach sich "absolute" und "relative" orientiert. Also an welchen Elementen sie sich ausrichten.

position:relative bezieht sich auf die Position, die das Element im "normalen" Fluss einnehmen wuerde, also grob gesagt "da wo es jetzt ohne position eh schon ist". Damit kannst du das Element gegenueber dieser Normalposition verschieben - wobei der urspruenglich von ihm eingenommene Platz weiterhin reserviert bleibt [1].

position:absolute nimmt ein Element aus dem Fluss, aehnlich(!) wie float - es beeinflusst also die Lage nachfolgender Elemente im normalen Fluss nicht mehr, liegt sogesehen "drueber" (oder drunter).
Absolute Positionierung richtet sich nach der Position des naechsten Vorfahrenelements, dessen position-Wert vom Defaultwert static abweicht (das also seinerseits relative, absolute oder fixed positioniert ist). Wenn es kein solches gibt, dann richtet sie sich nach dem Viewport ("Anzeigebereich", in dem der Browser die Webseite darstellt).

Nu' klarer?

[1] Okkult gesprochen:
    table { position:relative; top:...; left:...; }
    ist Tischerücken fuer Anfaenger :-)

MfG ChrisB

[hawkmaster]

Hallo ihr tollen Helfer,

vielen Dank für eure Erklärungen.
Ein wenig klarer ist es schon geworden.
Ich habe mir das auch schon ein paarmal bei Self hier angeschaut und durchgelesen.
Wenn man dann aber selbst mal was ausprobiert in seinen Seiten dann ist es doch noch manchmal schwer zu verstehen, warum ein Element gerade an dieser Stelle steht.
Aber ich werde es schon noch kapieren.
Vielen Dank.

Gruss
hawk

[Harlequin]

Yerf!

Oder wäre das Ganze einfacher wieder mit Listen und float zu machen?

Versuch die 2 Punkte zu trennen.

Die Entscheidung, welche HTML-Elemente man nimmt, basiert auf dem Inhalt. Ich bin mir nicht sicher, ob man das hier wirklich als Liste sehen kann, eher eine Aneinanderreihung von zusammengehörigen Elementen. Ich würde hier wohl Divs nehmen.

Wie man die nebeneinander bringt ist Sache von CSS. Absolute Positionierung führt zu sehr starren Layouts und manch anderen problemen. Man sollte versuchen das zu vermeiden. Deshalb ist es besser die Divs per Float nebeneinander anzuordnen.

Mir geht es unter anderem auch das die Beschriftung wie in der Tabelle ÜBER den Elementen liegt und das die Breiten der Spalten in etwa so sind wie in der Tabelle.

<div id="felder">  
  <div>  
    <label>Textfeld1</label>  
    <input type="text" name="textfield" />  
  </div>  
  <div>  
    <label>Textfeld2</label>  
    <input type="text" name="textfield2" />  
  </div>  
</div>  

#felder{ width:700px;}  
#felder div {float:left; width:100px;}  
#felder label {display:block;}  

so in etwa...
(bei verschiedenen Breiten für die Divs diese per ID formatieren)

Gruß,

Harlequin

[hawkmaster]

Hallo Harlequin,
auch dir nochmals vielen Dank für deine Tipps.

Wie man die nebeneinander bringt ist Sache von CSS. Absolute Positionierung führt zu sehr starren Layouts und manch anderen problemen. Man sollte versuchen das zu vermeiden. Deshalb ist es besser die Divs per Float nebeneinander anzuordnen.

ich muss sagen mit "float" kann ich mich auch momentan eher anfreunden.
Das mit "position: absolute und relative" verwirrt mich gerade sehr.
Ich hatte eben mal einen Versuch damit gemacht und unter meiner Hauptnavigation (Liste mit ul und li) 4 Divs platziert die einen Position Wert haben.
<div id="links">Spalte1</div>
<div id="mittelinks">Spalte2</div>
<div id="mitterechts">Spalte3</div>
<div id="rechts">Spalte4</div>

#links {
position: absolute;
width: 18%;
background-color: #C0C0C0;
}

#mittelinks {
position: absolute;
left: 21%;
width: 39%;
background-color: #ffffff;
overflow: auto;
}

#mitterechts {
position: absolute;
left: 61%;
width: 18%;
background-color: #ffffff;
}

#rechts {
position: absolute;
left: 80%;
width: 17%;
background-color: #C0C0C0;
}
Ich habe dieses Beispiel im Netz entdeckt.
Diese Divs bzw, Boxen wurden nun aber direkt unter meiner <ul> Navigation gesetzt, obwohl darunter noch andere Tabellen und Input Elemente kamen.

Also ich kann das noch so oft lesen hier in Self, so ganz kapier ich das noch nicht ;-(

vielen Dank und viele Grüße
hawk

[Harlequin]

Yerf!

Also ich kann das noch so oft lesen hier in Self, so ganz kapier ich das noch nicht ;-(

Position:absolute ist nicht unbedingt leicht zu erklären. Ich bin mir grad selber nicht ganz sicher, wie ein Browser reagiert, wenn nur left aber kein top oder bottom angegeben wird.

Aber die Bezugspunkte für diese Angaben sind normalerweise die linke obere (für top und left) und die rechte untere (für bottom und right) Ecke des <Body>. Dies lässt sich ändern, indem man einem umgebenden Element ebenfalls eine Positionierung (abweichend vom default static) gibt. Damit sind dann dessen Eckpunkte die neuen Bezugspunkte.

Wichtig ist dabei auch, das absolut positionierte Elemente völlig unabhängig zu anderen Elementen sind, dass heist sie beeinflussen den normalen Fluss nicht positionierter Elemente nicht mehr. Dies führt normalerweise zu einer Überlappung von Elementen.

Gruß,

Harlequin

[hawkmaster]

@Harlequin,

Position:absolute ist nicht unbedingt leicht zu erklären. Ich bin mir grad selber nicht ganz sicher, wie ein Browser reagiert, wenn nur left aber kein top oder bottom angegeben wird.

Ich habe es auch so verstanden bzw. es gelesen das als Bezugsquelle der <body> genommen wird. Daher dachte ich auch ohne Angabe von "top" das die Box ganz oben sein muss. Ich habe ja sonst nirgends im Versuchscode eine Positionierung drin.
Aber die Boxen waren am Ende von
</ul> orientiert.

Na egal, ich werde erst mal weiter mit "float" arbeiten.
Vielleicht kapier ich es ja doch noch irgendann :-)

Danke nochmals.

vielen Dank und viele Grüße
hawk

[Steel]

Hi,

Ok. Relative Position bezieht sich immer auf das Element selbst. 0 ist also immer da, wo es normalerweise stehen wuerde. Ausserdem bleibt das Element im Fluss.

Absolute Position bezieht sich immer auf das LETZTE positionierte Element. Also auf das Elternelement, wenn das nicht positioniert ist, auf dessen,... Gibst du also dem Elternelement position (wie Harlequin schon sagte, alles ausser dem standard static) beziehen sich 0 werte immer auf dessen Raender. Keine Angaben lassen das absolut positionierte Element, da, wo es ohne Positionierung auch stehen wuerde. Top:0 verschiebt es also an den obersten Rand des zuletzt positionierten Elements, laest aber right/left stehen. Es wird also lediglich vertikal verschoben.

Dazu kommt aber noch, das ein absolut positioniertes Element aus dem Fluss genommen wird. Das heisst es wird von anderen Elementen nicht mehr umflossen.

Wird aber von SELFHTML doch alles wunderbar erklaert und gezeigt.