Ein Div, Zwei Spalten für Text

[kevin23]

Hallo liebes Forum,

ich habe seit heute Nacht ein Problem, dass eigentlich ganz einfach sein sollte, sich aber hartnäckiger rausstellt, als ich dachte.

Ich arbeite zur Zeit mit Contao um eine Website zu erstellen, hier wird die Navigation automatisch erzeugt, soweit so gut.

Meine Navigation soll so aussehen



Ich habe maximal 8 Punkte, die sollen Nebeneinander angeordnet werden, wenn die höhe vom Div erreicht ist.

Wie kann ich das umbrechen innerhalb von der automatischen Menüpunkt ausgabe erzwingen? Ich habs mit float: left versucht, hat natürlich nicht geklappt :(

Ich hoffe ihr könnt mir helfen.

Liebe Grüße und danke im voraus

Kevin

 

[prm]

Das klappt schon mit float: left.
Allerdings musst du dann die Reihenfolge der Links entsprechend anpassen:
1,5,2,6,3,7,4,8

 

[kevin23]

Hst du auch ne Idee, wie ichs hinbekomme, dass die Formatierung passt (wie auf dem Screenshot zu sehen)?

 

[Fisker31]

Hst du auch ne Idee, wie ichs hinbekomme, dass die Formatierung passt (wie auf dem Screenshot zu sehen)?

Habs mal so versucht:

<div id="head_nav1">
  <ul>
    <li>Menüpunkt 1</li>
    <li>Menüpunkt 2</li>
    <li>Menüpunkt 3</li>
    <li>Menüpunkt 4</li>
  </ul>
  <ul>
    <li>Menüpunkt 5</li>
    <li>Menüpunkt 6</li>
    <li>Menüpunkt 7</li>
    <li>Menüpunkt 8</li>
  </ul>
</div>

CSS:

body {
	background-color: #EAFCCC;
}
#head_nav1 {
	color: #709FA5;
	font-family: Verdana, Geneva, sans-serif;
	height: 180px;
	width: 280px;
	border: 1px solid #709FA5;
}
#head_nav1 ul {
	float: left;
	list-style-type: none;
	line-height: 40px;
	margin: 0px;
	padding-top: 0px;
	padding-right: 30px;
	padding-bottom: 0px;
	padding-left: 0px;
}

Die abstände musst du halt mit Padding oder Margin irgendwie einstellen. Würde es jetzt noch selber machen aber muss leider weg.

Viel Erfolg!

 

[kevin23]

Ja vielen Dank schonmal. Mit UL und LI funktioniert das leider nicht, da meine Links automatisch ausgegeben werden (wegen contao). Ich könnte eine UL-LI liste bekommen, aber keine trennung.

ich habs jetzt hinbekommen, indem ich den a-tags eine breite gegeben hab und dann mit float: left den umbruch gemacht. Sieht jetzt ganz gut aus.

Danke für deine Mühe

 

[Fisker31]

Helfe doch gerne! ^^