✔ 3 Spalten Layout mit variablen Bereichen

[Gladiator6]

Dann ist ja alles bestens

 

[Maik]

... und das Thema kann als erledigt markiert werden

 

[Gladiator6]

Eigentlich würde ich noch gerne warten, falls noch Probleme auftauchen muss ich sonst wieder einen neuen Thread eröffnen...

 

[Maik]

Das Thema wird dadurch ja nicht geschlossen, und kann jederzeit fortgeführt werden, wenn unerwartete Probleme auftreten sollten.

 

[Gladiator6]

Da ist auch schon eine neue Frage aufgetaucht:

Du hast mein Layout ja gesehen. In beiden Spalten (links und recht) hat es "Platz" für Überschriften. Nun muss ich den Text ja irgend wie so positionieren, damit er am richtigen Ort reinpasst.

Das positionieren ist kein Problem. Ich habe das mal mit position: relative; gemacht, funktioniert an und für sich ganz gut.

Was aber, wenn jemand im Browser den Schriftgrad erhöht hat, oder die Schrift nicht installiert hat? Dann ist das Layout am A... Gibt es dazu irgend welche Lösungsansätze?

 

[Maik]

Damit das Layout beim Vergrößern des Schriftgrades nicht gesprengt wird, müßte es mit einer relativen Maßeinheit, wie z.B. em, skaliert werden.

 

[Gladiator6]

Das ist mir bewusst, aber wenn ich einen Fixen Hintergrund habe nützt das ja wenig? Das würde doch nur Sinn machen, wenn auch die Spaltenbreite variabel ist?

 

[Maik]

Stimmt, bei einem Layout mit fixen Hintergrundbildern lässt sich diese Methode nicht anwenden.

 

[Gladiator6]

Weitere eigentlich simple Frage:

Wie kann ich am besten den Text innerhalb eines Divs Formatieren?

Ich möchte dass der Text vom Div Rand links und rechts 10 px Abstand hat.

Im Moment habe ich ziemlich Mühe den Text innerhalb von Divs zu formatieren, bzw. weiss nicht wie ich das am besten anstellen soll:

Ich habe schon span innerhalb von div gebraucht, dann habe ich versucht <p> mit einer Klasse einzurücken, mit position:absolute; oder relative, dann habe ich aber Probleme dass zB. ein Bild trotzdem ganz am Rand ohne Abstand ist...

 

[Maik]

Du könntest anstelle der Elementpositionierung die padding-Eigenschaft (= Innenabstand) für das DIV verwenden.

Aber Achtung: gemäß dem Boxmodell wird u.a. diese Eigenschaft zur Breiten-/Höhenangabe des Elements hinzuaddiert und hätte bei dem folgenden Beispiel zur Folge, daß die Box 220 Pixel breit/hoch dargestellt wird:

div.box {
width: 200px;
height: 200px;
padding: 10px; /* gilt für alle vier Seiten */
}

Wenn die quadratische Box aber mit einer Kantenlänge von 200 Pixel angezeigt werden soll, muß der padding-Wert von den Dimensionsangaben abgezogen werden:

div.box {
width: 180px; /* 200px - 2*10px */
height: 180px; /* 200px - 2*10px */
padding: 10px; /* gilt für alle vier Seiten */
}