Horizontele Ausrichtung von gelisteten <a> Ele. in einem pos DIV

[HoschMOsch]

Hallo allerseits,

ich hab dich da wohl mal wieder voll verrannt.

wer kann mir sagen wie ich es hinbekomme das die <a> die in das mainmenu geschrieben werden horizontal, und jetzt kommts, und über die volle breite von 940 px dargestellt werden. ich meine damit das jenachdem wieviele <a> Elemente da sind das ganze sich prozentual anpasst.

  
	<div id="head">  
		<div id="mainmenu">  
		<a href="index.php?id=3">Start</a><a href="index.php?id=11">Beratung</a><a href="index.php?id=20">Information</a>  
  
		</div>  
		<div id="logo">  
			###LOGO###  
		</div>  
	</div>  

  
#head {  
	background-image:url('images/header.jpg');  
	background-repeat:no-repeat;  
	height:260px;  
	position:relative;  
	text-align:center;  
}  
  
#mainmenu {  
	position:absolute; top:182px; left:10px;  
	background-image:url('mainnav-no.jpg');  
	background-repeat:repeat-x;  
	height:42px;  
	width:940px;  
}  
  
#mainmenu a{  
	 background-image:url('images/mainnav-no.jpg');  
	 background-repeat:repeat-x;  
	 height:42px;  
	 text-decoration:none;  
	 text-align:center;  
	 font-size:11px;  
	 color:black;  
	 float:left;  
 	 width:auto;  
 	 padding-top:12px;  
 	 min-width:200px;  
 	 width:100%;  
}  
  
#mainmenu a:hover {  
	 background-image:url('images/mainnav-ro.jpg');  
}  
  
#mainmenu a:active {  
	 background-image:url('images/mainnav-ac.jpg');  
}  
  
  

[suit]

wer kann mir sagen wie ich es hinbekomme das die <a> die in das mainmenu geschrieben werden horizontal, und jetzt kommts, und über die volle breite von 940 px dargestellt werden. ich meine damit das jenachdem wieviele <a> Elemente da sind das ganze sich prozentual anpasst.

Das ist so nicht möglich. Wenn du deinem Menü die Eigenschaften von Tabellen gibst (table, table-row, table-cell) ist es prinzipiell möglich, es wird aber "kaum ein Browser" mitspielen.

Dennoch sei dir ans Herz gelegt, dass du deinen Code vernünftig auszeichnest - dein http://de.selfhtml.org/css/layouts/navigationsleisten.htmMenü würde z.B. gerne eine Liste sein.

Dein Logo - was vermutlich den Seitenkopf darstellt, könntest du als http://de.selfhtml.org/html/text/ueberschriften.htm#definieren@title=h1-Element auszeichnen.

Aufgrund des von dir verwendeten Markers "###LOGO###" vermute ich, dass du TYPO3 einsetzt - ggf. solltest du dir Subparts ansehen, diese sind wesentlich flexibler als Marker.

[HoschMOsch]

danke für die reaktion.

ja ist typo3 und eigentlich spielt es ja keine rolle.

wie könnte denn eine mögliche lösung aussehen ? mir gehen einfach die ideen aus

[Beat]

danke für die reaktion.

ja ist typo3 und eigentlich spielt es ja keine rolle.

wie könnte denn eine mögliche lösung aussehen ? mir gehen einfach die ideen aus

Wennn dir (und des Users Maus) Zentrierung wichtig ist, aber nicht Ausbreitung über die ganze Breite, bietet sich dieses an

<ul>
<li></li>
..
</ul>

ul{ text-align:center; }
li{ display:inline; display:inline-block; }

mfg Beat

[HoschMOsch]

die ausbreitung über das gesamte element ist doch schon wichtig. trotzdem danke für den einfall.

..keine ahnung was ich noch machen kann.. wenn man sich das mal so überlegt muss es doch schon lösungen geben, schließlich ist das ja recht gängig.

noch jemand eine idee ?

[suit]

die ausbreitung über das gesamte element ist doch schon wichtig. trotzdem danke für den einfall.

..keine ahnung was ich noch machen kann.. wenn man sich das mal so überlegt muss es doch schon lösungen geben, schließlich ist das ja recht gängig.

Ich hab' bereits einige erwähnt:

• nimm eine Tabelle (funzt defintiv in jedem Browser) aber du hast einen ziemlichen Mist im Code
• fingiere eine Tabelle mit CSS - da werden IE6 und 7 streiken
• nimm JavaScript - damit schließt du aber etwa 5 bis 10% der Nutzer aus
• oder berechne es serverseitig es wird mit TYPO3 aber ohne das nötige Hintergrundwissen unnötig kompliziert.

[HoschMOsch]

• nimm eine Tabelle (funzt defintiv in jedem Browser) aber du hast einen ziemlichen Mist im Code

versuch jetzt seit zwei tagen das ganze mit table umzusetzten.

ansich scheint es ja ganz einfach zu sein, nämlich so:

<div style="width:500px;">  
<table style="table-layout:fixed; text-align:center;">  
<tr>  
<td>  
<a>test</a>  
</td>  
<td>  
<a>test</a>  
</td>  
<td>  
<a>test</a>  
</td>  
<td>  
<a>test</a>  
</td>  
</tr>  
</table>  
</div>  

das funktioniert wunderbar obwohl ich in das hier gelesen habe :

Elternelemente von a: Darf innerhalb der folgenden HTML-Elemente vorkommen:
[Block-Elemente] | [Inline-Elemente] (außer a | button) | td | body
(body nur bei Seite HTML Transitional)

man beachte das "td"

was ist aber wenn ich möchte das die ganze zelle klickbar ist ? also nicht nur der Text.

[Beat]

Elternelemente von a: Darf innerhalb der folgenden HTML-Elemente vorkommen:
   [Block-Elemente]
 |
   [Inline-Elemente] (außer a | button)
 |
   td
 |
   body (body nur bei Seite HTML Transitional)

man beachte das "td"

Man beachte die Syntax

was ist aber wenn ich möchte das die ganze zelle klickbar ist ? also nicht nur der Text.

a{ display:block; height:100% }

Bedingt eine definierte Zellenhöhe.

mfg Beat

[HoschMOsch]

a{ display:block; height:100% }

hat mein problem gelöst .. ich merk aber selber das ich noch zu wenig ahnung von css/html habe. sorry das ich euch mit so nooby fragen belästige. bin einwenig frustriert.

ich habe mir jetzt erstmal ein buch gekauft ..Webdesign mit (X)HTML und CSS von Jennifer Niederst Robbins. Ich hoffe das mich das weiterbringt. kennt jemand das buch ? ist es ok ?

danke nochmal

[dieselross]

Warum

li{ display:inline; display:inline-block; }

statt

li{ display:inline-block; }

?

Ist es nicht so, daß hier das "inline-block" das vorher notierte "inline" aufhebt? Ich will gerne dazulernen.

Gruß
dieselross

[Beat]

Warum
li{ display:inline; display:inline-block; }
statt
li{ display:inline-block; }
?
Ist es nicht so, daß hier das "inline-block" das vorher notierte "inline" aufhebt? Ich will gerne dazulernen.

Aber nur dann, wenn der Browser display inline-block interpretiert. Ältere Browser schalten auf inline um. Kaputte browser schalten zuerst auf inline, wodurch ein paar Eigenschaften getriggert werden, dann schalten sie auf display-block.

mfg Beat

[dieselross]

Aber nur dann, wenn der Browser display inline-block interpretiert. Ältere Browser schalten auf inline um. Kaputte browser schalten zuerst auf inline, wodurch ein paar Eigenschaften getriggert werden, dann schalten sie auf display-block.

mfg Beat

Aaah! Danke. Das muß ich mir merken. Ich war wohl davon ausgegangen, daß alle gängigen Brauser "inline-block" interpretieren können. Wieder 'was dzugelernt.

Gruß
dieselross

[suit]

ja ist typo3 und eigentlich spielt es ja keine rolle.

Natürlich spielt es eine Rolle was du zum ausgeben des Codes verwendest - du wirst die meisten Sachen die du hier vorgeschlagen bekommst mit einem 08/15-PHP-Script erstellen können, aber mit HMENU/TMENU erfordert das schon ein paarhundert Zeilen Code (!) um das ordentlich hinzubekommen.

wie könnte denn eine mögliche lösung aussehen ? mir gehen einfach die ideen aus

Die einfachste Möglichkeit (mit dem schlechtesten Ergebnis) ist mit Sicherheit eine Tabelle zu verwenden.

Ohne zu wissen wie das visuell aussehen soll und welche Rahmenvorgaben du hast (z.B. in welchen Browsern es funktionieren _muss_) ist es schlichtweg nicht möglich dir einen ordentlichen vorschlag zu präsentieren.

Die Möglichkeiten reichen weit - von der serverseitigen Berechnung der Breite der einzelnen Menüpunkte über das ignorieren bestimmter Browser bzw auch ergänzende JavaScript-Lösungen sind denkbar.

[HoschMOsch]

ich versteh schon vorauf du hinaus willst. aber es spielt immernoch keine rolle. typo3 gibt im mainmenu einfach nur <a> elemte in rohform aus. deshalb brauch ich eine html/css lösung. das cms dahinter ist doch .. zumindestens was das stylen angeht, weitgehens uninteressant.

wenn es nicht mit css lösbar ist bin ich eh aufgeschmissen da ich nicht genug php/java beherrsche. das fällt also für mich flach.

ich meine . hey ich will einfach nur paar <a> elemente in einem div strechten bis es von links nach rechts reicht. du willst mir doch nicht erzählen das ich dafür java oder php können muss oder ?

[suit]

deshalb brauch ich eine html/css lösung. das cms dahinter ist doch .. zumindestens was das stylen angeht, weitgehens uninteressant.

Wie ich bereits erwähnt habe gibt es keine möglichglichkeit dein Vorhaben per CSS zu realisieren ohne dass du eine Prozentangabe berechnest (dann ist das CMS relevant) oder dass du den IE6 und 7 ausschließt.

wenn es nicht mit css lösbar ist bin ich eh aufgeschmissen da ich nicht genug php/java beherrsche.

Java brauchst nicht - wenn dann JavaScript - für sowas gäbs frameworks (jQuery z.B. - da ist das mit netto 2 bis 3 Zeilen code erledigt)

width eines einzelnen Menüpunkts % = 100 / Anzahl der Menüpunkte

Und PHP wäre dann interessant, wenn du die Core-Funktionen von (TMENU/HMENU) von TYPO3 umgehen willst und eine extension schreibst - davon möchte ich dir allerdings (auch wenn du PHP beherrscht) dringend abraten da du einiges von TYPO3-Seiten beachten musst (Menüzustände, Übersetzungen, HideInMenü, Aktiv von Bis usw).

du willst mir doch nicht erzählen das ich dafür java oder php können muss oder ?

Wie bereits erwähnt mit JavaScript (!= Java) und dem richtigen Framework ist das in ein paar zeilen erledigt - mit PHP würde ich es nicht lösung und mit TYPO3 ist es mit HMENU "etwas" komplizierter.

Tendentiell wäre eine kleine Extension die du im Menü aufrufst am geschicktesten - diese muss lediglich die Untermenüpunkte des derzeitigen Menüpunkts zählen und 100 durch diesen Wert teilen (siehe oben).

Dafür gibts eine fertige Funktion (zum erzeugen eines Arrays aller relevanten Untermenüpunkte) auf die Schnelle hab' ich aber nix gefunden

In tslib_menu ist es jedenfalls nicht enthalten.

---

Zusammenfassend:

Mach ein linksbündiges Menü und sorge per JavaScript für das geleichmäßige aufteilen. Wer kein JavaScript hat, muss auf dieses Gimmick verzichten.

Das ist - imho - die sinnvollste Lösung (Aufwand/Nutzen).