Jetzt bin ich völlig durcheinander...

[Conny]

Hallo ihr,

eigentlich ist das doch so einfach, was ich vorhabe, aber irgendwie habe ich mich inzwischen total verstrickt. Vielleicht seid ihr so nett und helft mir ein wenig beim Entwirren.

So soll es sein:

-------------1-------------- |  ---------2------------   | |  |                     |  | |  ----------------------   | |                           | |  --3--  -------4-------   | |  |    | |              |  | |  |    | |              |  | |  |    | |              |  | |  |    | |              |  | |  |    | |              |  | |  |    | |              |  | |  |    | |              |  | |  |    | |              |  | |  |    | |              |  | |  |    | |              |  | |  |    | |              |  | |  -----  ---------------   | |  ----------5-----------   | |  |                     |  | |  ----------------------   |

1 ist die Ebene, auf der alle anderen liegen. Sie soll mittig ausgerichtet werden. Dazu habe ich notiert:

#alles {  text-align:center;  margin-left:auto;  border-left-width:0px;  padding-left:0px;  width:775px;  padding-right:0px;  border-right-width:0px;  margin-right:auto;  }

Problem: Mozilla zentriert, IE nicht.

2 ist die Kopfzeile und funktioniert so weit. Gleiches gilt für die Fußzeile 5.

3 soll das linke Menue werden und 4 der Textbereich. Im HTML-Quellcode nacheinander notiert:

<div id="Kapitelmenue">Menue</div> <div id="Textbereich">Inhalt</div>

werden diese Ebenen ja zunächst nacheinander angezeigt, also statt so:

--3--  -------4-------  |    | |              |  |    | |              |  |    | |              |  -----  ---------------

so:

--3--  |    |  |    |  |    |  -----  -------4-------  |              |  |              |  |              |  |              |  |              |  |              |  |              |  ----------------

Um sie immerhin schon einmal vertikal richtig zu positionieren, notierte ich:

#Kapitelmenue {position:relative; width:200px;} #Textbereich {position:relative; width:575px; left:200px;}

Das sieht dann so aus:  --3--  |    |  |    |  -----  ------4---------         |               |         |               |         |               |         |               |         |               |         |               |         ----------------

Mozilla macht es, IE produziert absoluten Müll:

-------------1-------------- |  ---------2------------   | |  |                     |  | |  ----------------------   | |                           | |               ---3--      | |               |     |     | |               |     |     | |               |     |     | |               |     |     | |               ------      | |                  -----------------4-------------- |                  |                               | |                  |                               | |                  |                               | |                  |                               | |                  -----------------4-------------- |                           | |  ----------5-----------   | |  |                     |  | |  ----------------------   |

position:absolute; würde sich jedoch am body-Rand orientieren, also aus der Ebene 1 herausfallen. Auch keine Lösung.

Ergänze ich #Textbereich um top:-15px; (Wobei -15 nur ein ca-Wert ist, der ändert sich auch dauernd.), stehen die beiden Bereiche schließlich auch horizontal nebeneinander, diesmal auch im IE. (Natürlich weiterhin mit der vertikalen Verschiebung im IE.)

Aber: Fülle ich 3 mit viel Text und 4 mit wenig, sieht es so aus:

--3--  |    |  |    |  |    | ----------4-----------  |    | |                     |  |    | |                     |  -----  ----------------------

Fülle ich 4 mit viel Text und 3 mit wenig, sieht es so aus:

---3--   ----------4-----------  |     |  |                     |  |     |  |                     |  ------   |                     |           |                     |           |                     |           |                     |           ----------------------

Auch hier sowohl im Mozilla als auch IE.

Meine Angaben für die beiden Ebenen:

#Kapitelmenue { position:relative; width:200px; text-align:left; vertical-align:top; font-family:arial, helvetica, sans-serif; font-size:12px; color:#000000; }

#Textbereich { position:relative; top:-19px; left:200px; width:575px; text-align:left; vertical-align:top; text-decoration:none; font-family:arial, helvetica, sans-serif; font-size:12px; color:#000000; }

Es könnten Tippfehler sein oder falsch verstandene Angaben oder fehlende Angaben oder generelle Darstellungsprobleme der Browser, gegen die man nichts machen kann, oder... Wahrscheinlich ist es von jedem etwas, nur habe ich inzwischen keine Ahnung mehr, wo ich ansetzen soll.

Ist jemand so nett und hilft mir?

Grüße, Conny

[Ole]

hi

zum zentrieren siehe:
https://forum.selfhtml.org/?t=89079&m=531748

warum gibst du [3] nicht einfach ein float (siehe selfHTML) mit?

so long
ole
(8-)>

--
Yes,...for example garlic!

[Conny]

Hi Ole,

zum zentrieren siehe:
https://forum.selfhtml.org/?t=89079&m=531748

Ja supi, du bist ein Schatz. :-)

warum gibst du [3] nicht einfach ein float (siehe selfHTML) mit?

Float hatte ich sogar schon ausprobiert, ist ja auch eigentlich die erste Idee, aber das funktionierte aus irgendeinem Grund nicht. Das hatte sich wohl mit einem anderen Fehler kombiniert.

Mozilla macht es jetzt jedenfalls, aber der IE schiebt es in die nächste Zeile:

--3--
 |    |
 |    |
 |    |
 -----  ---------4-----------
        |                   |
        |                   |
        |                   |
        ---------------------

Habe ich denn noch irgendetwas falsch angegeben:

#Kapitelmenue{
position:relative;
float:left;
border:1px solid #000000;
width:200px;
text-align:left;
vertical-align:top;
text-decoration:none;
font-family:arial, helvetica, sans-serif;
font-size:12px;
color:#000000;
}

#Textbereich {
position:relative;
border:1px solid #ff0000;
left:200px;
width:575px;
text-align:left;
vertical-align:top;
text-decoration:none;
font-family:arial, helvetica, sans-serif;
font-size:12px;
color:#000000;
}

Watt iss nu noch falsch?

Conny

[Ole]

hi

Habe ich denn noch irgendetwas falsch angegeben:

nicht falsch, aber evtl. ein bisserl zuviel :)

#Kapitelmenue{
float:left;
border:1px solid #000000;
width:200px;
text-align:left;
vertical-align:top;
text-decoration:none;
font-family:arial, helvetica, sans-serif;
font-size:12px;
color:#000000;
}

#Textbereich {
border:1px solid #ff0000;
width:575px;
text-align:left;
vertical-align:top;
text-decoration:none;
font-family:arial, helvetica, sans-serif;
font-size:12px;
color:#000000;
}

so funktioniert es bei mir.
du kannst position und left weglassen, dann passt das mit dem umfließen auch :)

so long
ole
(8-)>

[Danny]

Hier eine Lösung. Leider gibts Probleme, wenn Navi oder Inhalt eine Hintergrundfarbe haben, weil die Höhe der benachbarten Spalte sich nicht 100% ausdehnt wie es bei Tabellen der Fall wäre. Dafür gibts einen Workarround mit HG-Bild (siehe http://www.alistapart.com)

Margin, Padding u. Border zählen teilweise mit zu den Maßen und müssen bei width, bzw. height berücksichtigt werden (abziehen)...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <title></title>
 <style type="text/css">
 body {
  margin: 0px;
  padding: 0px;
  text-align: center; /* IE */
  font-family: arial, helvetica, sans-serif;
  font-size: 12px;
  color: #000000;
 }
 #alles {
  margin-right: auto; /* Moz, Op */
  margin-left: auto; /* Moz, Op */
  padding-right: 0px;
  padding-left: 0px;
  width: 775px;
  text-align: left; /* ! */
 }
 #Kopf {
  background-color: #e0e0e0;
 }
 #Fuss {
  clear: both; /* ! */
  background-color: #e0e0e0;
 }
 #Kapitelmenue {
  width: 200px;
  float: left;
 }
 #Textbereich {
  text-decoration: none;
 }
 </style>
</head>
<body>

<div id="alles">
 <div id="Kopf">
  Kopfzeile
 </div>
 <div id="Kapitelmenue">
  Menu
 </div>
 <div id="Textbereich">
  Inhalt
 </div>
 <div id="Fuss">
  Fusszeile
 </div>
</div>

</body>
</html>

[Conny]

Tach,

Habe ich denn noch irgendetwas falsch angegeben:

nicht falsch, aber evtl. ein bisserl zuviel :)

Das kann natürlich auch sein. :-)

so funktioniert es bei mir.

Bei mir nicht. Der IE ignoriert nach wie das float. Ich verstehe einfach nicht, wieso. :-(

du kannst position und left weglassen, dann passt das mit dem umfließen auch :)

Naja... Wenn ich left weglasse funktioniert das mit dem Umfließen natürlich schon noch. Befriedigend allerdings nur, solange der Text im Inhalsbereich kürzer ist als im Menübereich. Ansonsten fließt er ja _unterhalb_ der Menüebene weiter. :-)

Grüße,
Conny

[Ole]

hi

Naja... Wenn ich left weglasse funktioniert das mit dem Umfließen natürlich schon noch. Befriedigend allerdings nur, solange der Text im Inhalsbereich kürzer ist als im Menübereich. Ansonsten fließt er ja _unterhalb_ der Menüebene weiter. :-)

ich weiß ja nicht was du da genau machst, allerdings sieht es bei mir genau so aus wie es sollte

|----| |--------|
|    | |        |
|----| |        |
       |        |
       |        |
       |--------|

ich kann mir auch nicht vorstellen, dass das div seine form so verändert das es ein sechseck wird....meines wissens ist das nciht möglich.

mein versuchsscript sieht so aus:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
 <title>Unbenannt</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style>
#Kapitelmenue{
position:relative;
float:left;
border:1px solid #000000;
width:200px;
text-align:left;
vertical-align:top;
text-decoration:none;
font-family:arial, helvetica, sans-serif;
font-size:12px;
color:#000000;
}

#Textbereich {
position:relative;
border:1px solid #ff0000;

width:575px;
text-align:left;
vertical-align:top;
text-decoration:none;
font-family:arial, helvetica, sans-serif;
font-size:12px;
color:#000000;
}

</style>

</head>

<body>
<div id="Kapitelmenue">&nbsp;</div>
<div id="Textbereich">
 <p>&nbsp;</p>
 <p>&nbsp;</p>
 <p>&nbsp;</p>
 <p>&nbsp;</p>
 <p>&nbsp;</p>
</div>

</body>
</html>

so long
ole
(8-)>

[Conny]

Guguck Ole,

ich glaube, ich habe herausgefunden, an was es lag. Und zwar liegen die beiden Ebenen ja gemeinsam auf einer anderen, die eine feste Breite hat. Die Breite der Menüebene plus die der Inhalsebene müssen zusammen den Wert der Breite des Gesamtebene ergeben. Taten sie rein rechnerisch auch, aber der IE macht da ja immer Mätzchen. Jetzt habe ich einfach die Breite der Textebene etwas verkleinert und es funktioniert.

Allerdings gibt es nach wie vor Probleme mit dem float. Die Angaben für #Kapitelmenue {position:relative; width:150px; float:left;} und #Inhaltsbereich {position:relative; left:10px;} werden verschieden interpretiert. IE zeigt links den Menü"kasten" und mit 10px Abstand dazu den Inhalts"kasten", während Mozilla beide "Kästen" an der gleichen Stelle beginnen lässt und die Textebene von dort 10px einrückt. Das führt dazu, dass der Inhalt des Inhalts"kastens"s zunächst um den Menü"kasten" fließt, bei viel Text dann aber unterhalb weiter verläuft. So in dieser Art:

------- hdgasd
 |     | hgadshgghg
 |     | hagdhg
 |     | jahduwnx
 |     | jhdqbs
 |     | hagsdddz
 ------- uahsdghghjgas
   hghagsdhgsd
   asdiknsd
   jkhdkhkjhjk
   ajshdjhd

Durch das float scheint sich für Mozilla das position:absolute; zu verändern: nicht mehr das vorher stehende Menü ist der Bezugspunkt sondern die Kopfzeile.

Und nu?

Conny,
langsam leicht genervt von so einem Mist *grrrr*

[Danny]

Hi,

mit CSS2 u. ohne Browser-Bugs wäre so ein tabellenfreies Layout eigentlich gar kein Problem. Ich habe, wie viele andere wahrscheinlich auch, die gleichen leidvollen Erfahrungen gemacht wie Du in Bezug auf diese Technik. Mittlerweile bin ich so genervt von diesen ganzen seltsamen Verhaltensweisen und Hacks, bzw. Workarrounds, dass ich eine Mischform aus CSS-Positionierung und Tabellen verwende. Vielleicht ist diese Lösung auch was für Dich. Here it comes:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <title></title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <meta http-equiv="Content-Language" content="de">
 <meta http-equiv="imagetoolbar" content="no">
 <meta name="MSSmartTagsPreventParsing" content="true">
 <style type="text/css">

body {
 margin: 0;
 padding: 0;
 text-align: center;
 font-family: verdana, arial, helvetica, sans-serif;
 font-size: 13px;
}
#page-wrapper {
 margin: 2.5% auto 2.5% auto;
 padding: 0;
 width: 900px;
 text-align: left;
 border: 1px solid #c0c0c0;
}

#header {
 padding: 5px;
 background: #e0e0e0 url(_img/hdot.gif) bottom repeat-x;
}

#main-table {
 width: 100%;
 border-spacing:0;
 border-collapse:collapse;
}
#td-col-1, #td-col-2, #td-col-3 {
 vertical-align: top;
 text-align: left;
}
#td-col-1 {
 width: 25%;
 background: #f8f8f8 url(_img/vdot.gif) right repeat-y;
}
#td-col-2 {
 height: 500px;
 background: #ffffff;
}
#td-col-3 {
 width: 25%;
 background: #f8f8f8 url(_img/vdot.gif) left repeat-y;
}

#col-1 {
 padding: 10px;
}
#col-2 {
 padding: 10px;
}
#col-3 {
 padding: 10px;
}

#footer {
 padding: 5px;
 background: #e0e0e0 url(_img/hdot.gif) top repeat-x;
}

</style>
</head>
<body>
<div id="page-wrapper">

<div id="header">
  Kopf
 </div>

<div id="main">
  <table id="main-table" summary="Content (3-Spalten-Layout)">
   <tr>
    <td id="td-col-1">
     <div id="col-1">
      Spalte 1
     </div>
    </td>
    <td id="td-col-2">
     <div id="col-2">
      Spalte 2
     </div>
    </td>
    <td id="td-col-3">
     <div id="col-3">
      Spalte 3
     </div>
    </td>
   </tr>
  </table>
 </div>

<div id="footer">
  Fuß
 </div>

</div>
</body>
</html>

freundlichen Gruß
Danny

[Conny]

Hallo Danny,

so genervt wie ich jetzt bin, scheint mir die Erfüllung deiner Prognose nicht mehr gar so fern zu sein. :-)

Aber noch gebe ich mich geschlagen, ich denke, dass es doch noch irgendwo eine Lösung gibt.

Danke aber auf jeden Fall für die Mühe, die du dir mit dem riesigen Code gemacht hast. Ich habe mir ein Lesezeichen drauf gelegt und werde es mir später anschauen. Heute habe ich keinen Nerv mehr für eine ganz und gar andere Lösung.

Grüße,
Conny

[Ingo Turski]

Hi,

Aber noch gebe ich mich geschlagen, ich denke, dass es doch noch irgendwo eine Lösung gibt.

recht so :-)

Mal ein Tip von mir: Du benötigst für dieses Layout keine einzige Angabe zu position.
Grob skizziert geht das so (wobei die Ziffern Deine Elemente repräsentieren):

body: text-align:center (für den IE<6 bzw. im quirks-mode)
1: text-align:left; width:x; margin:auto;
2: keine spezielle Formatierung erforderlich
3: float:left; width:x;
4: margin-left:x;
5: clear:left;

freundliche Grüße
Ingo

[Ole]

hi

------- hdgasd
|     | hgadshgghg
|     | hagdhg
|     | jahduwnx
|     | jhdqbs
|     | hagsdddz
------- uahsdghghjgas
   hghagsdhgsd
   asdiknsd
   jkhdkhkjhjk
   ajshdjhd

der text steckt doch in einem anderen dich, oder habe ich dich die ganze zeit falsch verstanden? denn wenn er in einem div stecken würde, würde er nicht unter dem anderen div weiterfließen.

nimm die source die ich dir gepostet habe als ausgangsmaterial, damit klappt es im IE und mozilla so wie du es haben möchtest.

so long
ole
(8-)>

[Mathias Bigge]

Hi Ole,

zum zentrieren siehe:
https://forum.selfhtml.org/?t=89079&m=531748

und:
8ink:http://aktuell.de.selfhtml.org/tippstricks/css/ausrichtung/index.htm]

Viele Grüße
Mathias Bigge

[MrS]

Ebene Nummer 3 sollte das style-Attribut: float:left; erhalten.

GreetZ MrS

[Detlef G.]

Hallo Conny,

um das Verhalten bei gefloateten Div besser zu verstehen habe ich mir mal
folgende Testseite mit mehreren Varianten gemacht:
http://d-graff.de/demos/selfhtml/float_left_test.html
Rufe die Seite mit verschiedenen Browsern auf, schiebe das Browserfenter auch
ganz schmal und schau dir dabei das Verhalten der beiden Boxen an.

Auf Wiederlesen
Detlef

[Gernot Back]

Hallo Detlef,

um das Verhalten bei gefloateten Div besser zu verstehen habe ich mir mal folgende Testseite mit mehreren Varianten gemacht:
http://d-graff.de/demos/selfhtml/float_left_test.html
Rufe die Seite mit verschiedenen Browsern auf, schiebe das Browserfenter auch ganz schmal und schau dir dabei das Verhalten der beiden Boxen an.

Hat dir jemand schon mal gesagt, dass du ein echter Schatz bist?
Sonst sage ich das jetzt mal.

Gruß Gernot

[Detlef G.]

Hallo Gernot,

meine Testseite http://d-graff.de/demos/selfhtml/float_left_test.html
habe ich hier das erste Mal am 20.03.2004 gepostet.
Ich habe sie mal gemacht, um selbst das Verhalten gefloateter Elemente zu
kapieren.
Falls du es noch nicht weißt, es gibt auch welche mit drei Boxen:
http://d-graff.de/demos/selfhtml/dreidivs.html
http://d-graff.de/demos/selfhtml/dreidivs1.html

Auf Wiederlesen
Detlef

[Gernot Back]

Hallo Detlef,

habe ich hier das erste Mal am 20.03.2004 gepostet.
Ich habe sie mal gemacht, um selbst das Verhalten gefloateter Elemente zu kapieren.

Das wusste ich nicht, aber unabhängig davon; Ich finde es einfach klasse, dass du andere an deinen Kapierversuchen teilhaben lässt. Das ist ja nicht selbstverständlich, leider!

Gernot

[Mathias Bigge]

Hi Detlef,

eigentlich wäre Float wirklich mal einen Artikel wert. Viel fehlt ja gar nicht:
Eine Beschriftung der Boxen mit der CSS-Formatierung, ein paar Hinweise auf die verschiedenen Browser, ein süßer kleiner Hack für den IE, vielleicht ein etwas komplexeres Beispiel, etwa mit nem Bildchen in einer der Boxen, das von Text umflossen wird. Toll wären natürlich ein paar Sätze. wie man daraus ein komplexeres Layout bauen kann, aber ich will mal nicht zu heftig träumen, aber solche simplen und klaren Demos sind genau das richtige für einen TuT, finde ich. Was meinen die anderen? Zu trivial? Angesichts der vielen Fragen hier im Forum IMHO nicht.

Viele Grüße
Mathias Bigge

[at]

Hallo.

Was meinen die anderen? Zu trivial?

Nein, mach das ruhig.
MfG, at

[Ingo Turski]

Hi,

eigentlich wäre Float wirklich mal einen Artikel wert.

halte ich auch für eine gute Idee.
Es gibt zwar schon diverse Seiten mit float-Vorlagen, aber liegt meist der Schwerpunkt auf der Präsentation der Vorlage und des Quelltextes als auf einer einfachen Erklärung, wie man so etwas _selbst_ entwickelt.

ein süßer kleiner Hack für den IE

nunja, vielleicht wäre es tatsächlich so besser als ein Beispiel zu zeigen, daß Umwege in HTML geht, um die Bugs zu umschiffen.

freundliche Grüße
Ingo