CSS: Div Ausrichtungs-Problem
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
ausrichten
blocken
dank
datei
display
farbe
frage
hintergrundfarbe
http
index
inhalt
kleineren spalte
linke leiste
mitte
rechte leiste
spalten
suchbegriff
text
url
zelle
-
Hi,
Schon seit ein paar Stunden habe ich ein Problem mit meinem Template für Joomla beim ausrichten meiner div´s. Deswegen habe ich hier eine kurze beispielseite erstellt mit css Datei:
http://goldensun.lima-city.de/unzip_test/6/index.html
http://goldensun.lima-city.de/unzip_test/6/css/template.css
hier sind meine Fragen:
1. Wenn ich den Inhalt der rechten oder Linken leiste Vergrößere, bleibt die größer der kleineren gleich. Wie kann ich ereichen, dass es wie eine Tabelle zwei gleich große (height) Zellen habe?
(Ich hab schon was mit display:block; versucht, hat aber irgendwie nicht geklappt)
2. Durch das floating:left; wird erreicht, das die rechte leiste die Linke umschließt. Dabei wird aber die größe der ersten leiste abgezogen (größe gesammt:800px linke Leiste:200px rechte Leiste:600px). Ist es besser das schon zu addiren und so zu lassen oder was muss man hinzufügen, dass das nicht geschieht?
3. Wenn ich in der CSS datei schreibe:" body {text-align:center;} " wird nur der Text mittig ausgerichtet und die div´s bleiben. So mache ich immer normal eine weitere div, die alles enthält und die untergeordnete mittig ausrichtet. Kann ich mir die div auch irgendwie sparen?
Hoffe ihr könnt mir helfen..
Schonmal Danke für eure Antworten!
Beitrag zuletzt geändert: 13.9.2010 15:44:49 von goldensun -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Du machst ein div, welches alle anderen enthält. Diesem div gibst du margin: 0 auto und die maximale gewünschte Breite der Seite.
Ich nenne das immer Wrapper. Dann machst du ein div für den Head mit voller Breite, für die Mitte und für den Foot mit voller Breite. In dem div in der Mitte machst du dein linkes und rechtes div, dem linken div gibst du float: left und die gewünschte Breite, dem rechten div gibst du margin-left mit der Breite vom linken div sowie die Restbreite.
Das einfachste, um der kleineren Spalte eine (optisch) gleiche Höhe zu geben ist, die Farbe des Wrappers der der Spalte anzugleichen.
Beitrag zuletzt geändert: 13.9.2010 15:09:17 von vertico -
Danke für deine Hilfe
Jetzt sieht die Seite so aus
http://goldensun.lima-city.de/unzip_test2/6/index.html
http://goldensun.lima-city.de/unzip_test2/6/css/template.css:
2 und 3 sind so gelöst. Wenn ich jetzt die Spalten mit unterschiedlichen größen Einträgen fülle, giebt es bei der rechten Spalte den Hintergrund des middle div, links der content div.
d.h. ich kann eine website erstellen, muss jedoch aufpassen, dass die Navigationsleiste immer größer oder gleichgroß ist.
Jetzt bleibt mir nur noch die Frage, wie mann die zwei div´s mit gleicher Höhe ausrichten kann.
-
Üblicherweise ist der Inhalt der Seite immer länger als die Navi. Du kannst dem rechten div ein min-height geben, damit der eigentliche Inhaltsbereich immer mindestens zB. 500px hoch ist. Es bleibt trotzdem dynamisch und passt sich an, wenn der Inhalt 500px übersteigt.
Wenn du dem mitte-div als Beispiel die Hintergrundfarbe #ccc gibst, dem linken div ebenfalls #ccc und dem rechten div #aaa stellst du fest, das es optisch den Eindruck macht, dass das linke div die gleiche Höhe vom rechten hat. -
Das, was vertico beschreibt, nennt sich "faux columns". Mit dem Suchbegriff und Google bekommst Du einige Tutorials dazu.
Gruß Tom -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
