Container - Tips verstehe ich nicht

Container - Bilder neu

Verlaufs-Container

Container mit Spalten

 

 

man könnte das mit der Funktion "Container mit Spalten" in RocketCake machen.

 

Beginne mit einem Container mit 3 Spalten. Dann fügst du in die linke Spalte die drei linken Spalten ein, und das gleiche mit der rechten Spalte.

 

Unten fügst du einfach einen Container mit 2 Spalten hinzu.

 

 

Am sinnvollsten ist es wohl das in Corel Draw zu erstellen, und es dann als Grafik zu speichern

Alternativ: MS Publisher Speichern als HTML oder *.png mit Transparenz

 

  • Auf Hintergrundfarbe achten. Transparent und *.png (Export in Corel Draw. NICHT Photo Paint

  • Seitengröße in Pixel aber in CM umrechnen?

 

[image]

 

 

Soll ein DIV-Container eine exakt festgelegte Höhe und Breite haben, ist es ratsam, sich vorher mit dem CSS-Box-Modell vertraut zu machen. Die Parameter height und width (Höhe und Breite) legen nämlich nicht – wie man zunächst vermutet – Höhe und Breite des Containers fest, sondern Höhe und Breite des Inhalts.

Die tatsächliche Breite eines Containers ergibt sich aus der Breite des Inhalts, dem Innenabstand (padding), der Rahmendicke und dem Außenabstand (margin). Dabei muss man die Angaben für Innenabstand, Rahmendicke und Außenabstand doppelt (jeweils für die linke und die rechte Seite des Containers) berücksichtigen. Das gilt analog für die Berechnung der Höhe eines DIV-Containers.

 

 

 

 

Der Center Befehl funktioniert zwar mit einem einfachen “text-align: center;”, jedoch nicht bei allen Browsern – da der Befehl sehr “dreckig” ist! ;) Aber hier habe ich eine Lösung für Euch, welche bei allen gängigen Internet-Browsern funktionieren sollte!

 

Dazu gebt ihr einfach im obersten Container folgende Werte an:

 

“margin-left: auto; margin-right: auto; text-align: center;”

 

Jetzt sollte das DIV zentriert sein! Sollte es aus welchen gründen auch immer Probleme mit abgeschnittenen Inhalten geben, müsst ihr noch die Breite des DIV Containers fest hinterlegen! Dies erledigt ihr mit “with: 200px”!