Problem mit linker Spalte

[Eugen]

Hallo Leute ;-) ...

Ich habe ein Problem mit einer Seite. Diese hat links eine Spalte, die 200 Pixel Breit ist. Diese floatet Links da ich daneben eine weitere Spalte darstellen will.

Die rechte Spalte selber floatet nicht und hat links einen Margin von 200 Pixeln. Nun ist es so das ich in der rechten Spalte ein Menü mit Menuitems darstelle, mit DIV Elementen, wo jedes links floatet. Unter dem Menü möchte ich dann den Content darstellen, deshalb habe ich am Ende des Menüs ein DIV mit der CSS clear:both Eigenschaft gesetzt.

Das Problem ist nun das der Content dann nicht direkt unter dem Menü dargestellt wird, sondern sogar noch unter dem linken Element welches links floatet. Das liegt wohl daran das dieses clear:both alle floats (und nicht nur das Menü float) aufhebt. Habt Ihr eine Idee wie man das besser machen kann, oder was ich machen muss damit es funktioniert?

Vielen Dank,
Euer Eugen

[AirMax]

Das liegt wohl daran das dieses clear:both alle floats (und nicht nur das Menü float) aufhebt. Habt Ihr eine Idee wie man das besser machen kann, oder was ich machen muss damit es funktioniert?

#clearleft {  
  clear:left;  
} 

[Eugen]

Das liegt wohl daran das dieses clear:both alle floats (und nicht nur das Menü float) aufhebt. Habt Ihr eine Idee wie man das besser machen kann, oder was ich machen muss damit es funktioniert?

#clearleft {

clear:left;
}

>   
  
Hi AirMax,  
  
ist der gleiche Effeckt, da left ja gecleared wird.  
  
Gruß, Eugen

[AirMax]

Oder Du lässte die "FLoat-Geschichten" und steigst auf display: um. Deine Menü-Divs display: inline; und Dein content display: block;

gruss

[Eugen]

Oder Du lässte die "FLoat-Geschichten" und steigst auf display: um. Deine Menü-Divs display: inline; und Dein content display: block;

gruss

Hi AirMax,

wenn ich das mache stehen die einzelnen Punkte aber untereinander, egal welche width: ich denen verpasse.

Gruß, Eugen

[AirMax]

wenn ich das mache stehen die einzelnen Punkte aber untereinander, egal welche width: ich denen verpasse.

Wie sieht denn Dein Menü "mit DIV Elementen" aus? Haste mal HTML-code?

[Eugen]

wenn ich das mache stehen die einzelnen Punkte aber untereinander, egal welche width: ich denen verpasse.

Wie sieht denn Dein Menü "mit DIV Elementen" aus? Haste mal HTML-code?

Hi AirMax, klar:

HTML:

<div id="maincontent">
  <div id="menu">
    <div class="menuitem">
      <div><span>Eintrag 1</span></div>
    </div>
    <div class="menuitem">
      <div><span>Eintrag 2</span></div>
    </div>
    <div class="menuitem">
      <div><span>Eintrag 3</span></div>
    </div>
    <div class="last"></div>
  </div>
</div>

CSS:

#menu div.menuitem {
    width:130px;
    margin:0px 20px 15px 0px;

float:left;
}

.last {
  clear:both;
}

Gruß, Eugen

[Steel]

Hi!

<div id="maincontent">
  <div id="menu">
    <div class="menuitem">
      <div><span>Eintrag 1</span></div>
    </div>
    <div class="menuitem">
      <div><span>Eintrag 2</span></div>
    </div>
    <div class="menuitem">
      <div><span>Eintrag 3</span></div>
    </div>
    <div class="last"></div>
  </div>
</div>

Das ist keine Divsuppe mehr, sondern ein Diveintopf... Wozu dienen denn die ganzen divs und spans? Nimm doch lieber die dafuer vorgesehene Liste oder reihe meinetwegen einfach ein paar Links hintereinander auf.

[Gunnar Bittersmann]

@@Eugen:

nuqneH

<div id="maincontent">
  <div id="menu">
    <div class="menuitem">
      <div><span>Eintrag 1</span></div>
    </div>
    <div class="menuitem">
      <div><span>Eintrag 2</span></div>
    </div>
    <div class="menuitem">
      <div><span>Eintrag 3</span></div>
    </div>
    <div class="last"></div>
  </div>
</div>

Autsch. Deine Navigation besteht aus mehreren Menüpunkten, ist also eine Auf_list_ung von solchen. Das sollte sich im Markup widerspiegeln: 'ul' (bzw. 'ol').

Wozu die Klasse "menuitem"? Wenn sämtliche Listenpunkte derselben Klasse angehören, erübrigt sich eine Klassifizierung.

Und wozu das 'div' und 'span' darin? Und wozu das leere 'div [@class="last"]'?

Das Markup sollte so aussehen:

<div id="maincontent">  
  <ul id="menu">  
    <li>Eintrag 1</li>  
    <li>Eintrag 2</li>  
    <li>Eintrag 3</li>  
  </ul>  
</div>

Qapla'

[Eugen]

Hallo Gunnar,

Autsch. Deine Navigation besteht aus mehreren Menüpunkten, ist also eine Auf_list_ung von solchen. Das sollte sich im Markup widerspiegeln: 'ul' (bzw. 'ol').

Wozu die Klasse "menuitem"? Wenn sämtliche Listenpunkte derselben Klasse angehören, erübrigt sich eine Klassifizierung.

Und wozu das 'div' und 'span' darin? Und wozu das leere 'div [@class="last"]'?

Das Markup sollte so aussehen:

<div id="maincontent">

<ul id="menu">
    <li>Eintrag 1</li>
    <li>Eintrag 2</li>
    <li>Eintrag 3</li>
  </ul>
</div>

>   
> Qapla'  
  
das Problem ist das manche Menüeinträge noch Unterpunkte haben. Dann müsste das ganze ja so aussehen:  
  
<ul>  
<li>Eintrag 1</li>  
<li>Untereintrag 1</li>  
<li>Untereintrag 2</li>  
<li>Untereintrag 3</li>  
</ul>  
<ul>  
<li>Eintrag 2</li>  
<li>Untereintrag 1</li>  
<li>Untereintrag 2</li>  
<li>Untereintrag 3</li>  
</ul>  
  
Die ULs müssten dann ja wieder floaten. Und dann habe ich doch wieder das gleiche Problem wie mit den DIVs, oder nicht?  
  
Gruß, Eugen

[AirMax]

das Problem ist das manche Menüeinträge noch Unterpunkte haben. Dann müsste das ganze ja so aussehen:

<ul>
<li>Eintrag 1</li>
<li>Untereintrag 1</li>
<li>Untereintrag 2</li>
<li>Untereintrag 3</li>
</ul>
<ul>
<li>Eintrag 2</li>
<li>Untereintrag 1</li>
<li>Untereintrag 2</li>
<li>Untereintrag 3</li>
</ul>

Oder so:

  
<ul>  
  <li>Eintrag 1</li>  
    <ul>  
      <li>Untereintrag 1</li>  
      <li>Untereintrag 2</li>  
      <li>Untereintrag 3</li>  
    </ul>  
  <li>Eintrag 2</li>  
    <ul>  
      <li>Untereintrag 1</li>  
      <li>Untereintrag 2</li>  
      <li>Untereintrag 3</li>  
    </ul>  
</ul>  

Du verschachtelst einfach zwei Listen ineinander.

[Bobby]

Moin

Oder so:

<ul>
  <li>Eintrag 1</li>
    <ul>
      <li>Untereintrag 1</li>
      <li>Untereintrag 2</li>
      <li>Untereintrag 3</li>
    </ul>
  <li>Eintrag 2</li>
    <ul>
      <li>Untereintrag 1</li>
      <li>Untereintrag 2</li>
      <li>Untereintrag 3</li>
    </ul>
</ul>

> Du verschachtelst einfach zwei Listen ineinander.  
  
Falsch:  
  
Kindelement von ul darf NUR li sein!!! Validiere das mal wie du es hast und du wirst Fehler erhalten.  
  
Gruß Bobby  

-- 
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-  
### Henry L. Mencken ###  
-> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-  
## Viktor Frankl ###  
  
ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)

[AirMax]

Falsch:

Kindelement von ul darf NUR li sein!!! Validiere das mal wie du es hast und du wirst Fehler erhalten.

Stimmt. Das </li> sass am falschen Ort.

[Bobby]

Moin

das Problem ist das manche Menüeinträge noch Unterpunkte haben. Dann müsste das ganze ja so aussehen:

<ul>
<li>Eintrag 1</li>
<li>Untereintrag 1</li>
<li>Untereintrag 2</li>
<li>Untereintrag 3</li>
</ul>
<ul>
<li>Eintrag 2</li>
<li>Untereintrag 1</li>
<li>Untereintrag 2</li>
<li>Untereintrag 3</li>
</ul>

Quatsch. Du kannst in LI neue UL anlegen. Verschachteln ist jederzeit möglich.

<ul>  
  <li>Eintrag 1  
    <ul>  
      <li>Untereintrag 1</li>  
      <li>Untereintrag 2</li>  
      <li>Untereintrag 3</li>  
    </ul>  
  </li>  
  <li>Eintrag 2  
    <ul>  
      <li>Untereintrag 1</li>  
      <li>Untereintrag 2</li>  
      <li>Untereintrag 3</li>  
    </ul>  
  </li>  
</ul>

Gruß Bobby

[Eugen]

Hi Bobby,

Quatsch. Du kannst in LI neue UL anlegen. Verschachteln ist jederzeit möglich.

<ul>

<li>Eintrag 1
    <ul>
      <li>Untereintrag 1</li>
      <li>Untereintrag 2</li>
      <li>Untereintrag 3</li>
    </ul>
  </li>
  <li>Eintrag 2
    <ul>
      <li>Untereintrag 1</li>
      <li>Untereintrag 2</li>
      <li>Untereintrag 3</li>
    </ul>
  </li>
</ul>

  
Ok, habe es nun so gemacht. Per CSS habe ich dann eingestellt das immer der erste LI Eintrag, z.B. Eintrag 1, Eintrag 2 etc. pp. links floated, die anderen LIs mit den Untereinträgen aber nicht, damit diese untereinander stehen. Klappt auch Wunderbar.  
  
Nur wenn ich jetzt unter dem UL (also unter dem Menü) z.B. schreibe:  
  
<h2>Test</h2>  
  
Dann steht die Überschrift unter dem Eintrag 2 und nicht unter dem gesamten Menü. Das liegt wieder daran das die Einträge links floaten, und wenn ich den float nun wieder aufhebe z.B. mit clear:left oder clear:both, dann habe ich doch wieder das gleiche Problem wie am Anfang. Also das die Überschrift unter dem linken Bereich steht, da dass clear wohl alle Floats aufhebt und nich nur das aktuelle.  
  
Gruß, Eugen

[AirMax]

Dann steht die Überschrift unter dem Eintrag 2 und nicht unter dem gesamten Menü. Das liegt wieder daran das die Einträge links floaten, und wenn ich den float nun wieder aufhebe z.B. mit clear:left oder clear:both, dann habe ich doch wieder das gleiche Problem wie am Anfang. Also das die Überschrift unter dem linken Bereich steht, da dass clear wohl alle Floats aufhebt und nich nur das aktuelle.

Hast Du für den Content, also Deine rechte Spalte, überhaupt ein margin-left: definiert?

[Eugen]

Hast Du für den Content, also Deine rechte Spalte, überhaupt ein margin-left: definiert?

Ja, habe ich. Exakt so breit wie die linke Box.

Gruß, Eugen

[ChrisB]

Hi,

http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout

MfG ChrisB