mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Sa 03.12.2016 19:10 Benutzername: Passwort: Auto-Login

Thema: dreispaltiges div layout vom 13.12.2006


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> dreispaltiges div layout
Seite: 1, 2  Weiter
Autor Nachricht
konsumkünstler
Threadersteller

Dabei seit: 05.06.2005
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mi 13.12.2006 16:18
Titel

dreispaltiges div layout

Antworten mit Zitat Zum Seitenanfang

servus miteinander,

ich bin schon völlig am verzweifeln. und zwar versuche ich schon seit stunden ein dreispaltiges div-layout auf die beine zu stellen, was wiefolgt aufgebaut ist: (screenshot)

Code:

<body>
<div id="container">   
   <div id="links">
   </div>
   <div id="rechts">
   </div>
   <div id="mitte">
   </div>
   <div style="clear:both"></div>
</div>
</body>


die dazugehörige css:

Code:

#container {
width:800px;
background-color:orange;
}

#links {
float:left;
width:200px;
background-color:red;
}

#mitte {
float:left;
width:400px;
}

#rechts {
float:left;
width:200px;
background-color:red;
}


das gefloate funktioniert im IE einwandfrei. allerdings zickt der Firefox rum, da er mir die hintergrundfarbe im container nicht anzeigt - allerdings tut er dies, wenn "right" nicht mehr gefloatet wird. eine andere Möglichkeit habe ich so versucht umzusetzen:

Code:

<div id="container">   
   <div id="links">
   </div>
   <div id="mitte">
   </div>
   <div id="rechts">
   </div>   
   <div style="clear:both"></div>
</div>


die css:

Code:

#container {
width:800px;
background-color:orange;
}

#links {
float:left;
width:200px;
background-color:red;
}

#mitte {
width:400px;
margin-left:200px
}

#rechts {
float:right;
width:200px;
background-color:red;
}


das wiederum funktioniert im firefox, aber im IE nicht, da im IE die "mitte" einen so großen abstand von oben hat wie "rechts hoch ist".

und Tabellen möchte ich nicht nehmen. vielleicht hat einer noch ne idee..

Viele Grüße
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Mac

Dabei seit: 26.08.2005
Ort: Köln
Alter: 54
Geschlecht: Männlich
Verfasst Mi 13.12.2006 16:41
Titel

Antworten mit Zitat Zum Seitenanfang

hmm,
schau mal, vielleicht hilft das weiter
http://intensivstation.ch/templates/
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
konsumkünstler
Threadersteller

Dabei seit: 05.06.2005
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mi 13.12.2006 17:29
Titel

Antworten mit Zitat Zum Seitenanfang

ne leider auch nicht. ist wohl ein sehr spezielles problem. was ich nicht verstehen kann, da es ja eingentlich ein ein pillepalle layout ist.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 35
Geschlecht: Männlich
Verfasst Mi 13.12.2006 17:48
Titel

Re: dreispaltiges div layout

Antworten mit Zitat Zum Seitenanfang

konsumkünstler hat geschrieben:


die css:

Code:

#container {
width:800px;
background-color:orange;
}

#links {
float:left;
width:200px;
background-color:red;
}

#mitte {
width:400px;
margin-left:200px
}

#rechts {
float:right;
width:200px;
background-color:red;
}


das wiederum funktioniert im firefox, aber im IE nicht, da im IE die "mitte" einen so großen abstand von oben hat wie "rechts hoch ist".

und Tabellen möchte ich nicht nehmen. vielleicht hat einer noch ne idee..

Viele Grüße


jetzt denk mal ganz scharf nach:
links: breite 200px.
mitte: breite: 400px, 200px von links entfernt.
rechts: breite 200px.

so. auf wieviel kommst du da (1000px) und wie breit ist dein container (800px)?
was passiert also? richtig! er bricht um, da nicht alle 3 elemente in dieser breite unterzubringen sind.
zudem würde ich deinem mittleren container noch ein float: left; spendieren, denn sonst wirst du das problem des umbruchs auch weiterhin haben.

ergo:

Code:

#container {
width:800px;
background-color:orange;
}

#links {
float:left;
width:200px;
background-color:red;
}

#mitte {
width:400px;
foat: left;
}

#rechts {
float:right;
width:200px;
background-color:red;
}


Zuletzt bearbeitet von sahnemuh am Mi 13.12.2006 17:51, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
konsumkünstler
Threadersteller

Dabei seit: 05.06.2005
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mi 13.12.2006 18:10
Titel

Antworten mit Zitat Zum Seitenanfang

das margin-left ergibt sich dadurch, das die "mitte" nicht wie gewünscht von "links" left-gefloatet wird..das umgehee ich eben dadurch, das ich der "mitte" ein margin-left von 200px verpasse..

sieht zwar komisch aus, ist aber so..

würde ich der "mitte" noch ein float:left verpassen, würde "rechts" wieder zerhackt werden..(siehe beispiel 1) .. wenn du die beiden beispiele mal anwenden würdest, dann würdest du sehen und verstehen was ich meine..


Zuletzt bearbeitet von konsumkünstler am Mi 13.12.2006 18:12, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 35
Geschlecht: Männlich
Verfasst Mi 13.12.2006 18:26
Titel

Antworten mit Zitat Zum Seitenanfang

mein fehler.

ist der source, den du hier postest derjenige, bei dem probleme auftreten?
denn:

Code:
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title>TEST</title>
      
   <style type="text/css">
         #container {
         width:800px;
         background-color:orange;
         }
         
         #links {
         float:left;
         width:200px;
         background-color:red;
         }
         
         #mitte {
         float:left;
         width:400px;
         }
         
         #rechts {
         float:left;
         width:200px;
         background-color:red;
         }
   </style>   
      
   </head>
<body>
<div id="container">   
   <div id="links">&nbsp;
   </div>
   <div id="mitte">&nbsp;
   </div>
   <div id="rechts">&nbsp;
   </div>   
   <div style="clear:both"></div>
</div>
</body>
</html>


wird bei mir einwandfrei dargestellt..
  View user's profile Private Nachricht senden
konsumkünstler
Threadersteller

Dabei seit: 05.06.2005
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mi 13.12.2006 18:36
Titel

Re: dreispaltiges div layout

Antworten mit Zitat Zum Seitenanfang

jo. im IE funktionierts ja auch.

konsumkünstler hat geschrieben:

das gefloate funktioniert im IE einwandfrei. allerdings zickt der Firefox rum, da er mir die hintergrundfarbe im container nicht anzeigt - allerdings tut er dies, wenn "right" nicht mehr gefloatet wird...


grüße und danke für die mühen Lächel

EDIT: jaaaaaaaaaa..ich habs raus. falls es jemanden interessiert. manche ältere versionen vom FF brauchen im clearenden Element ein &nbsp; .. juhu..ich bin so glücklich * huduwudu! *


Zuletzt bearbeitet von konsumkünstler am Mi 13.12.2006 19:21, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
2LL

Dabei seit: 21.11.2006
Ort: Erdgeschoss rechts
Alter: 42
Geschlecht: Männlich
Verfasst Mi 13.12.2006 19:48
Titel

Antworten mit Zitat Zum Seitenanfang

Ist zwar gelöst ansonsten gibt es hier ein Tutorial Guck rechts! zum Tut Guck links! . Meine Page läuft 4spaltig * Mmmh, lecker... *

Zuletzt bearbeitet von 2LL am Mi 13.12.2006 19:48, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden
 
Ähnliche Themen [CSS] dreispaltiges Layout mit fester Breite im IE6
3-spaltiges div-Layout in festem div macht Probleme
Probleme mit Layout - div im layout height="100%"
[hilfe] DIV layout
... ein vernünftiges Div-Layout.
Umsetzung Layout Tab./DIV
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
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.