✔ DIV-Container verkleinern?

[chuvak]

Ich hab links ein Menü, welches bei Klick auf der rechten Seite ein Untermenü öffnet.
Die Menüs sind jeweils in DIV-Containern, deren Breite auf 110px festgelegt ist.
Wenn man weiter rechts auf die DIVs klickt (wo sie eigentlich nicht mehr zu sehen sind), "reagieren" sie trotzdem, d.h. das Untermenü auf der rechten Seite wird aufgerufen.

Hier ist der Link: GELÖSCHT

Wieso ziehen sich die DIVs über die gesamte Breite der Seite?

Danke!

 

[Sven Mintel]

Wieso ziehen sich die DIVs über die gesamte Breite der Seite?

...weil sie Blockelemente sind, und diese dieses Verhalten haben.

Lösung:

div.a{float:left;
	clear:both;}

das float bewirkt, dass die divs von nachfolgenden Elementen entgegen dem Standardverhalten "umflossen" werden können... sie nehmen dadurch nur den Platz ein, den ihnen ihr Inhalt abverlangt.

Die clear-Eigenschaft wiederum sorgt dafür, dass sie nicht umflossen werden...sie nehmen aber weiterhin nur soviel Platz ein wie oberhalb beschrieben.

Kleine Anmerkung:
<a>-Elemente dürfen keine <div>-Elemente enthalten, du benötigst die ganzen <div>'s auch überhaupt nicht, denn du kannst per CSS ein <a>-Element auch ein Block-Element darstellen lassen.

 

[chuvak]

Vielen Dank erstmal!

Kleine Anmerkung:
<a>-Elemente dürfen keine <div>-Elemente enthalten, du benötigst die ganzen <div>'s auch überhaupt nicht, denn du kannst per CSS ein <a>-Element auch ein Block-Element darstellen lassen.

Ja, das weiß ich, ich wollte nur, dass das ganze Rechteck ein Link ist und nicht nur der Text darin.
Könntest du mir deine Idee genauer erklären? Ich konnte nicht ganz folgen.

 

[Sven Mintel]

Ersetze die Angaben für div.a und div.a:hover durch dies:

div#oben a{
	margin:5px;
	width:110px;
	background:#000000;
	display:block;
	float:left;
	clear:both;
	text-align:center;
}
div#oben a:hover{
	color:#f00000;
 	background-color:#dddddd;
}

Und die <div>'s entferne komplett:

<div id="oben"> <br />
  <a href="javascript:void(0);" onclick="zeigen('vorbereitung');">Vorbereitung</a>
  <a href="javascript:void(0);" onclick="zeigen('kirche');">Kirche</a>
  <a href="javascript:void(0);" onclick="zeigen('park');">Park</a>
  <a href="javascript:void(0);" onclick="zeigen('halle');">Halle</a>
  <a href="javascript:void(0);" onclick="zeigen('portraet');">Porträt</a>
  <a href="javascript:void(0);" onclick="zeigen('bearbeitung');">Bearbeitung</a>
  <a href="javascript:alert('Das Video ist momentan noch nicht verfügbar.\nBitte versuchen Sie es später noch einmal.')">Video</a>
</div>

Durch das display:block; werden die Links jetzt als Blockelement dargestellt.......fertsch

 

[chuvak]

Hey, wieder was Neues gelernt.
Dankeschön