mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Di 23.04.2024 22:13 Benutzername: Passwort: Auto-Login

Thema: CSS-Problem mit 3-spaltigem Layout vom 26.01.2008


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> CSS-Problem mit 3-spaltigem Layout
Autor Nachricht
tob1as
Threadersteller

Dabei seit: 20.08.2007
Ort: Zürich
Alter: -
Geschlecht: Männlich
Verfasst Sa 26.01.2008 14:11
Titel

CSS-Problem mit 3-spaltigem Layout

Antworten mit Zitat Zum Seitenanfang

Hallo allerseits

Ich habe ein Problem mit meinem CSS-File. Ich habe eine kleine Seite erstellt, bei welcher der Inhaltsteil im div "content" bestimmt wird. Ich habe darin 3 Spalten, wobei der Hauptinhalt in die mittlere "cont_center" kommt.

Der Code ist so aufgebaut:

Code:
#content         {
                width:1109px;               
                min-height:414px;
                  height:auto !important;
                  height:414px;
                margin: 2px 0px 0px 6px;
               }

#cont_left            {
                width:180px;
                min-height:412px;
                  height:auto !important;
                  height:412px;
                background-color: #e1dfe0;
                float:left;
                position: absolute;
               }


#cont_center               {
                width:240px;
                min-height:412px;
                  height:auto !important;/
                  height:412px;
                background-color: #eae8e9;
                margin: 0px 4px 0px 182px;
                position: absolute;
                padding-left:5px;
                padding-right:5px;
               }


#cont_right           {
                clear: both;
                width:667px;
                min-height:412px;
                  height:auto !important;
                  height:412px;
                background-color: #eeebec;
                margin: 0px 4px 0px 434px;
                padding-top:0.3px;
                padding-left: 5px;
                padding-right: 5px;
                position:absolute;
               }
               


Ich möchte nun, dass diese alle nebeinander sind, was momentan leider noch nicht der Fall ist, die rechte rutscht irgendwie immer runter. Ausserdem sollten alle immer gleich hoch sein, also dynamisch je nach Inhaltslänge im cont_center.

Wäre super wenn ihr mir dabei ein wenig helfen könntet, ich hab jetzt schon etliche Tutorial-Lösungen verwendet, doch funktionierte es mit meinem CSS leider nicht.

Lieber Gruss
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Sa 26.01.2008 14:54
Titel

Re: CSS-Problem mit 3-spaltigem Layout

Antworten mit Zitat Zum Seitenanfang

tob1as hat geschrieben:
Ich möchte nun, dass diese alle nebeinander sind, was momentan leider noch nicht der Fall ist, die rechte rutscht irgendwie immer runter.


Code:
div#left,
div#center,
div#right {
   float: left;
   width: _ ;
}


Zudem, Google: "clearing Floats"

tob1as hat geschrieben:
Ausserdem sollten alle immer gleich hoch sein, also dynamisch je nach Inhaltslänge im cont_center.


Ist nicht möglich. Workarounds wären Javascript oder besser "faux columns".
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
bluecafe

Dabei seit: 04.03.2007
Ort: -
Alter: -
Geschlecht: -
Verfasst Sa 26.01.2008 15:12
Titel

Antworten mit Zitat Zum Seitenanfang

Weshalb gibts du dem mittleren Container ein position: absolute?? Der Sinn von float ist es doch, dass dann der mittlere Container in den Zwischenraum zwischen links und rechts rein'floaten' kann und nicht mit position absolute platziert wird. Dem content center brauchst du dann auch keine Weite zu geben, denn die passt sich dann automatisch dem Rest an, der zwischen float:left und float:right übrig bleibt. Versuche es nochmal ohne position:absolute und ohne Weitenangabe für das mittlere div. Außerdem - wenn ich es jetzt im Kopf auf die Schnelle richtig gerechnet habe - sprengen die Weiten der drei inneren Container die Weite des umfassenden Containers. Dann ist es kein Wunder, wenn eine Box nach unten rutscht.

P.S. ich sehe gerade du hast dem linken ja auch noch ein position absolute gegeben. Entweder position absolute oder float, aber beides zusammen passt nicht. Und dem rechten Container musst du dann natürlich noch ein float:right mitgeben.

Hier mal eine Vorlage: http://www.html-seminar.de/dreispaltiges-layout-in-css.htm


Zuletzt bearbeitet von bluecafe am Sa 26.01.2008 15:19, insgesamt 3-mal bearbeitet
  View user's profile Private Nachricht senden
 
Ähnliche Themen Probleme bei 3-Spaltigem YAML mit IE6
mit InDesign (CS&) 2-spaltige Fußnoten in 1-spaltigem Text?
layout problem
css layout problem
Hab da ein Problem - Layout
Problem bei CSS-Layout
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.