Tabellen / Layout mit DIV CSS, grundsätzliche Frage

[Felix da cat]

Hallo,

Ich beschäfitge mich zurzeit mit der Verwendungs DIV und CSS für den Aufbau von Webseiten und als Tabellenersatz.

Ich habe bereits ein bisschen herumprobiert und mir ein paar erstellte Layouts angeschaut, steige aber leider noch nicht ganz durch.

Ich habe 2 Layoutteile, die ich gerne mit DIV umsetzen würde.

1.)
In einer herkömmlichen Tabellenzelle von 650px Breite möchte ich folgende Anordnung, siehe Bild.

Die beiden roten DIV Felder habe ich problemlos hinbekommen. Jedoch konnte ich die gelben Felder nie unter den roten Feldern platzieren. Egal ob ich einen DIV Container um die roten Felder gesetzt habe oder nicht, die gelben Felder sind immer über die roten Felder gerutscht.

Was muss ich wo definieren, damit die gelben Felder unter den roten platziert werden? Muss ich um die roten Felder ein weiteres DIV Feld, also einen "Container", anlegen?


2.)
Ich würde gerne eine 2-spaltige Artikelauflistung mit DIV Feldern realieren, siehe Bild.

Und in den DIV Feldern (rot) jeweils noch eine Unterteilung (gelb).

Mit Tabellen ist sowas problemlos zu realisieren, klar! Geht das mit DIV / CSS auch?

Kleine Tipps helfen mir meist schon weiter

Danke im Voraus!

Felix

 

[Maik]

Hi!

@ 1.) Wenn die gelben DIVs über die roten rutschen, lässt dies die Vermutung zu, dass du die roten DIVs a) mit absoluten Positionsangaben, oder b) mit der floatEigenschaft versehen und sie anschliessend mit der clear-Eigenschaft nicht aufgehoben hast.

Für weitere Hinweise solltest du hier mal den Quellcode posten, denn aus dem Sreenshot lässt sich der Quellcode nicht "kompilieren".

@ 2.) Hier benötigst du die float-Eigenschaft, um die zwei "Hauptspalten" zu erzeugen. Das rote Feld wäre jeweils ein Elternelement, in dem die gelben Felder eingebettet werden - nebeneinander liegende Felder würden ebenfalls mit der float-Eigenschaft ausgezeichnet werden.

Vielleicht helfen dir diese allgemeinen Angaben weiter.

Nur frage ich mich, weshalb du eine Tabelle mit DIVs "nachbauen" willst, wenn sie (die Tabelle) semantisch ihre Daseinsberechtigung hat?

 

[Felix da cat]

Hallo Maik,

vielen Dank für deine Hilfe.

Ich bin ein bisschen weiter gekommen, und im IE funktioniert es nun auch.

Jedoch habe ich im FF und in Opera das Problem, dass DIV Feld mit 360px nicht in dem oberen DIV Feld bleibt.

Hier der Code

<table border="0" width="640" cellspacing="0" cellpadding="0">
<tr>
<td>

		
<div style="width: 640px; height: 130px; border: 1px black solid;">

	<div style="float: left; width: 250px; height: 130px; padding:  5px 0px 0px 130px; 
	background-image: url(.jpg); background-repeat:no-repeat; cursor: pointer;"  onclick="window.location.href='.php'">
	<a href=".php"><img src=".gif" border="0" width="120" height="120">
	</div>
	<div style="float: right; width: 350px; height: 130px; padding: 40px 95px 0px 10px; text-align: left; font-size: 11px; color: black;
	background-image: url(.jpg); background-repeat:no-repeat; cursor: pointer;" onclick="window.location.href='.php'">
	Blah
	</div>

</div>

<img src="images/pixel_trans.gif" width="100" height="1" border="0">

<div style="width: 640px; height: 110px; padding: 0px;">

	<div style="float: left; width: 210px; height: 110px;">
	<a href=".php"><img src=".gif" border="0"></a>	
	</div>
	<div style="float: left; width: 210px; height: 110px;">
	<a href=""><img src=".gif" border="0"></a>		
	</div>	
	<div style="float: left; width: 210px; height: 110px;">

	<a href=""><img src=".gif" border="0"></a>
	</div>
	
</div>			


</td>
</tr>
</table>

Ich steig da nicht durch

Felix

 

[Maik]

Ich behaupte jetzt einfach mal, dass du das HTML-Dokument derzeit im "Quirksmode" übergibst, weshalb der IE das Boxmodell falsch interpretiert, denn danach werden zur width- und height-Eigenschaft eines Elements die gesetzten padding-Angaben hinzuaddiert, was die tatsächliche Boxenbreite und -höhe ergibt.

Nach deinen Angaben mißt somit die linke Box 380*135px, und die rechte 455*170px, was eine Gesamtbreite von 835px ergibt, die umschliessende Box aber nur 640px breit sein soll. Nicht der IE, sondern Firefox und Opera interpretieren das Stylesheet vollkommen richtig, und brechen nun das zweite DIV in die nächste Zeile um, weil der erforderliche Platz im Elternelement nicht vorhanden ist.

Um die gewünschten Boxendimensionen zu erzielen, müssen in diesem Fall die jeweiligen padding-Werte von der Breiten- und Höhenangabe subtrahiert werden (Breite - linker Innenabstand - rechter Innenabstand / Höhe - oberer Innenabstand - unterer Innenabstand):

#leftDiv {
float: left;
width: 120px; /* 120px + 130px = 250px */
height: 125px; /* 125px + 5px = 130px */
padding: 5px 0px 0px 130px;
background-image: url(.jpg);
background-repeat:no-repeat;
cursor: pointer;
}

#rightDiv {
float: right;
width: 245px; /* 245px + 95px + 10px = 350px */
height: 90px; /* 90px + 40px = 130px */
padding: 40px 95px 0px 10px;
text-align: left;
font-size: 11px;
color: black;
background-image: url(.jpg);
background-repeat:no-repeat;
cursor: pointer;
}

Im HTML-Dokument setzt du vor dem <html>-Tag eine der folgenden Doctype-Deklarationen ein, damit das Dokument im "Standardsmode" übergeben wird, und der IE sich an das Boxmodell hält:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
        "http://www.w3.org/TR/html4/strict.dtd">

 

[chrissb2303]

Hallo Felix,

ich habe dein Problem gelesen und kann mich nur Maik zu deinem Problem anschließen.

Zum besseren Verständnis, mußt du zu deinen gewünschten höhen und breiten immer die entsprechenden paddings und margins hinzurechnen.

z.B.:

Ein <div> - Container soll 250px breit sein und ein padding-left von 10px und ein padding-right von ebenfalls 10px haben dazu soll auch noch ein gesamt- border von 2px vorhanden sein.

Die Breite wäre insgesamt 274px breit die man benötigen würde. denn die jeweils 2px / seite des borders müssen auch berücksichtigt werden um die Seite richtig dar zu stellen.

das gleiche gilt für margins.

Ich hoffe das hilft dir ein wenig weiter....

gruß

chriss

 

[Felix da cat]

Hallo Maik und Chriss,

danke für die Hilfe. Es funktioniert, in allen 3 Browsern. Kapiert habe ich es auch.

Gibt es keine andere Möglichkeit Objekte innerhalb DIV Feldern zu positionieren, ohne dass man die Padding-Pixel von DIV width/height abziehen muss?

 

[Maik]

Hi!

Gibt es keine andere Möglichkeit Objekte innerhalb DIV Feldern zu positionieren, ohne dass man die Padding-Pixel von DIV width/height abziehen muss?

Doch die gibt es, indem die padding-Eigenschaft an ein Kindelement des DIVs übergeben wird - also z.B.:

#leftDiv {
float: left;
width: 250px; 
height: 130px; 
background-image: url(.jpg);
background-repeat:no-repeat;
cursor: pointer;
}

#leftDiv p {
padding: 5px 0px 0px 130px;
}

<div id="leftDiv">
    <p>Text im leftDiv</p>
</div>