Welche Container benutzen(div,span,tabelle?!)

Olaf

hallo,
wie kann ich nebeneinander 3 Container(also leere Platzhalter verwenden).
Ich hab ein Bild mitgepostet,ursprünglich wurde das Layout mit Tabellen erstellt.
Das Bild zeigt lediglich leere Felder, weiter unten hab ich versucht sowas mit ASCII zu zeichnen :P:

Wie kann ich nun diese 3 Felder mit anderen Elementen ersetzen?
"div" funktioniert nebeneinander nicht da immer ein Zeilenumbruch miterstellt wird und mit "span"(span war eigentlich CSSmäßig für sowas gedacht oder?) funktioniert rein gar nichts. Mit span konnte ich bis jetzt absolut noch nix anfangen

mfg und danke für die Hilfe

___________________________
|''''''''''''''''|'''''''''''''''''''''''''''''''''''|''''''''''''''''|
|''''''''''''''''|'''''''''''''''''''''''''''''''''''|''''''''''''''''|
|''''''''''''''''|'''''''''''''''''''''''''''''''''''|''''''''''''''''|
|''''''''''''''''|'''''''''''''''''''''''''''''''''''|''''''''''''''''|
|''''''''''''''''|'''''''''''''''''''''''''''''''''''|''''''''''''''''|
|______|_____________|______|

Sojo

Hallo Olaf,

Ich bin zwar selber erst div-Anfänger, aber ist nicht das hier das was du suchst?
Sojo

Phunthom

Was spricht dagegen das Layout mit den Tabellen zu behalten?

Ja, tut mir leid, ich weiß dass man eine Frage eigentlich nicht mit einer Gegenfrage beantwortet aber ich würde gerne was über die Gründe erfahren

Sojo

Zitat von Phunthom

Was spricht dagegen das Layout mit den Tabellen zu behalten?

- HTML-Dokumente werden schlanker
- Barrierefreiheit
- Style lässt sich komfortabel zentral verwalten

GreatStuff

Ho,

Zitat

Was spricht dagegen das Layout mit den Tabellen zu behalten?

Tabellen sind langsamer und nicht dafür geschaffen Layouts zu erstellen (klar es geht, aber man hämmert doch auch nicht mit 'ner rohrzange nur weils geht oder?) sondern Daten tabellarisch darzustellen
Von daher ist es löblich, wenn ein "Tabellen-Mensch" auf div's umsteigen will.

mit dem span-tag kann man inline formate (üblicherweise text oder innerhalb von p-Tags, etc.) per css formatieren. Wenn du ein <span> in ein p-Tag oder über Text legst und span nicht per css formatierst, passiert erstmal gar nichts. Der span-tag erzeugt keinen Textumbruch.

div-container werden dazu verwendet um layouts zu erstellen. Der div-Tag erzeugt einen Container um die eingeschlossenen Inhalte & Formate (listen, absätze, etc.) und einen Zeilenumbruch.

Wenn du ein layout wie bei dem Bild oben erstellen möchtest, brauchst du 3 div's:

linke spalte - im quelltext das erste div bekommt "float:left;" zugewisen und sagen wir mal "width:150px;".

rechte spalte - im quelltext das zweite div - bekommt "float:right;" und "width:150px;".

inhalt (mittlere spalte) - im quelltext das LETZTE div - bekommt kein float, nur ein "width:600px".

Um die drei divs könntest du noch ein viertes legen (wäre im quelltext dann das allererste, vor dem div für die linke spalte) und dem ding dann so formatieren:
margin: 40px auto 10px auto; width:900px;

dann wär die seite schön mittig. Das ergebnis ist dann ein dreispaltiges layout mit einer fixen breite von 900px (angaben sind richtwerte, für 1280x1024 und 1024&768 aber nahezu perfekt).

Du hast übrigens Glück, ich hab hier noch eine kleine Vorlage von mir gefunden:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
	<title>Test Layout</title>
	<style type="text/css">
		*{margin:0;padding:0;}
	</style>
	</head>
	<body>
		<div style="margin: 40px auto 10px auto; width:900px;">
			<div style="background-color:#33FF00;">
				header
			</div>
			<div style="float:left; width:150px; background-color:#D2D2D2;">
				<ul>
					[*]Home
					[*]...
				[/list]
			</div>
			<div style="float:right; width:150px; background-color:#D2D2D2;">
				infomenü


				...
			</div>
			<div style="background-color:#EEEEEE; width:600px; margin:0px 150px 0px 150px;">
				inhalt...
				leerzeile...


				leerzeile...


				leerzeile...


				leerzeile...


				leerzeile...


				leerzeile...


			</div>
			<div style="background-color:#33FF00; width:600px; margin:0px 150px 0px 150px;">
				evtl. Footer für Impressum, interne Verlinkung etc.
			</div>
		</div>
	</body>
</html>

Alles anzeigen

Vielleicht blickst du mit diesem konkreten (einfachen) Beispiel besser durch (es lässt sich sehr leicht so umbauen, dass du nur mehr die drei spalten hast - einfach header- und footer-div entfernen). Wenn du deine Seite mit CSS gestalltest, solltest du den CSS Quelltext allerdings in eine seperate *.css datei auslagern (schneller und einfacher handhabbar).

Ich hoffe ich konnte damit ein bisschen helfen

mfg
Stefan

Lizzard

Zitat von GreatStuff

<span> um ein p-Tag

Wenn du einen Span-Tag um ein P-Tag legst, hast du allerdings schon einen Fehler Produziert. Block-Elemente dürfen nicht von Inline-Elementen umschlossen werden. Genauso wenig wie du eine Ul in ein P packen darfst, oder ein a um ein Div.
Du stülpst ja auch keinen Luftballon um nen Karton, sondern legst den Luftballon in den Karton

GreatStuff

sorry so ein blödsinn ich meinte es natürlich anders rum, so (danke für den hinweis):

Code

<li class="boxtitle">


<span class="fett">Szene Links:</span></p>

als beispiel wie man ein span anwenden kann (obs jetzt sinnvoll ist oder nicht is fraglich), aber so wäre das valide (HTML 4.01 Transitional hab ich ausprobiert)

Olaf

danke für die vielen Tipps und Hinweise!

GreatStuff : Hab deine Vorlage getestet... Genau sowas in der Art hab ich gesucht, allerdings sind jetzt weitere Fragen aufgetaucht und zwar gibts ja per float eben left, "middle" und right. Kann ich dann nur 3 nebeneinander haben oder auch mehrere?

Und wie bekomm ich das dann hin dass ich mehrere divs nebeneinander habe?

mfg [/b]

sejuma

float middle gibt es nicht.
Du kannst natürlich auch mehr als drei div's nebeneinander bekommen, indem du ihnen jeweils ein "float:left;" zuweist.
Beim dreispaltigen Aufbau floatet man normalerweise die linke Spalte links und die rechte rechts. Der Mittelteil schiebt sich dann dazwischen.

Olaf

hallo,
also irgendwie hab ich einige Probleme und blick mich nicht ganz durch!

Probiert mal folgenden Code aus und schaut ihn euch(ich verwende Firefox) in einem Browser an!

HTML

<html>


<head>
<title>Titel der Seite</title>
</head>




<body>


<div style="width:750px;">
  <div style="padding-left:10px; padding-top:14px; padding-right:10px; background-color:#FF0000; float:left; width:153px;">DIV links
DIV links
DIV links
DIV links</div>
  <div style="padding-top:14px; background-color:#00FF00; float:right; width:172px;">DIV rechts
DIV rechts
DIV rechts
DIV rechts
DIV rechts
DIV rechts
DIV rechts
</div>
  <div style="padding-left:8px; padding-top:14px; padding-right:8px; background-color:#0000FF;">DIV mitte
DIV mitte
DIV mitte
DIV mitte
DIV mitte
DIV mitte
DIV mitte
DIV mitte
</div>
</div>


</body>
</html>

Alles anzeigen

Man sieht dass das linke und das rechte div-Tag funktionieren aber das mittlere nicht, wenn das mittlere div-Tag länger(nach unten) wird dann schiebt es sich in die anderen divs rein, ich will aber dass die 3divs alle eigenständige Container sind!

mfg

PS: Lasst euch nicht durch die vielen
s verwirren, das soll nur zur Veranschaulichung dienen!

sejuma

Das float bezieht sich nur auf die Größe (Höhe) des umfließenden Elementes.
Ordne dem mittleren div deshalb noch die Abstäne von links und rechts zu, dann sollte es klappen:

Code

margin-left: 173px; margin-right: 172px;

Olaf

ok danke,das hat wunderbar funktioniert aber wieder ist eine Frage aufgetaucht!
Wenn ich beim rechten div einen Abstand vom linken Rand will, also vom eigenen div-Rand(padding) dann vergrößert sich das gesamte rechte div-Tag Richtung Mitte.

Zum Testen, einfach meinen Code hernehmen und im div Tag noch ein padding-left anhängen dann sieht man was ich meine...

Code

<div style="padding-left:20px; padding-top:14px; background-color:#00FF00; float:right; width:172px;">DIV rechts
DIV rechts
DIV rechts
DIV rechts
DIV rechts
DIV rechts
DIV rechts
</div>

Schon langsam verzweifle ich mit diesen div Tags
Ich find das wirklich sehr sehr sehr umständlich, außerdem hab ich ganze Zeit das Gefühl dass dieses gesamte rumgecode irgendwie zusammengepfuscht, also nicht wirklich stabil ist. Kann mich auch täuschen weil ich noch unerfahren bin!

Aber vielen Dank für die Antworten und Hilfe bis jetzt!
mfg

sejuma

Das sieht nur am Anfang etwas umständlich aus. Mit der Zeit denkst du dir dabei gar nichts mehr
Zum Verständnis sieh dir mal das CSS-Boxmodell an.
Zur eigentlichen Breitenangabe (width) musst du noch die Innenabstände und sofern vorhanden die Rahmenstärken hinzuzählen und berücksichtigen. Je größer der Innenabstand, je kleiner musst du die Breite wählen.

Damit ich nicht immer rechnen muss, arbeite ich mit einem flexiblen Layout:
Definiere die Breiten statt in Pixeln in Prozentwerten. Zusammen mit padding- und margin-Angaben sollten dann nicht mehr als 100% in der Summe herauskommen damit man nicht scrollen muss.
Hierzu folgendes Beispiel
Diese Methode hat ausßerdem den Vorteil, dass sich die Breite einer Seite immer auch der jeweiligen Bildschirmauflösung anpasst.

Tags

Benutzer online in diesem Thema