[Erledigt] List-Item mit dynamischer Breite in einer Menu-Liste

chunky · 10.03.2010, 19:25

Hallo.

Ich kämpfe schon seit Tagen mit einem Problem.

Ich habe ein CSS-Menu, das mit einer ul die Menu-Einträge horizontal nebeneinander darstellt. Das Menu hat sieben Einträge und einen weiteren achten, leeren Eintrag an der rechten Seite. Die Menu-Einträge sollen alle dieselbe Breite haben (fix oder als Prozentzahl der verfügbaren Breite).

Jedes Menu-Item hat ein halb-transparentes Hintergrundbild, so dass der Hintergrund sichtbar ist.
Bei Mousehover wird der Hintergrund durch einen ebenfalls halb-transparenten anderen Hintergrund ersetzt.

Mein Problem: Ich bekomme das Menu nicht auf die ganze Breite gestreckt.
Den letzten Menu-Eintrag muss ich auf die ganze verfügbare Breite ausdehnen.

Hier ein Beispielbild:

Ich habe schon alles mögliche versucht.
Gebe ich dem letzten Eintrag z.B. width:100%, was in einer Tabelle funktionieren würde, dann bricht der Browser das Menu um und gibt dem letzten Menu-Eintrag die ganze verfügbare Breite.

Mein Code:

Code:

<style type="text/css">
#menu{
	margin-left:175px;
	font-size:14px;
	float:left;
	color:#000000;
/*font-weight:bold;*/
}
#menu ul{
	white-space:nowrap;
	list-style-type: none;
}
#menu li{
	display: inline;
	float:left;
	width:88px;
	text-align:center;
	background:url(/img/menu_item.gif);
	background-repeat:repeat;
		filter: alpha(opacity=75);
		-moz-opacity: 0.75;
		opacity: 0.75;
}
#menu li:hover{
	background:url(/img/menu_item_selected.gif);
	background-repeat:no-repeat;
	background-position:top center;
		filter: alpha(opacity=65);
		-moz-opacity: 0.65;
		opacity: 0.65;
}
#menu li a{
/* display:block */
/*	width:100px; */
	height:30px;
	font-size:14px;
	padding: 7px 0px 6px 0px;
	color:#000000;
	line-height:30px;
}
#menu li a:hover{
	text-decoration:none;
	border:0px;
	color:#000000;
}
</style>

Code:

<div id="menu" style="width:775px;">
				<ul>

			<?php

			$args = array(
				'child_of' => 0,
				'sort_order' => 'ASC',
				'sort_column' => 'menu_order',
				'hierarchical' => 1,
				'parent' => -1,
				'exclude' => 21,
				'offset' => 0 );

				$pagearr = get_pages($args); //object!

			foreach($pagearr as $p){
			echo "	<li><a href='".get_page_link($p->ID)."'>".$p->post_title."</a></li>"."\n";
			}
			?>

<li class="menuitemspacer" style="display:table-cell;width:100%;">&nbsp;</li>

				</ul>
		</div>

Das einfachste wäre natürlich, dem ganzen Menu einen halb-durchsichtigen Hintergrund zu verpassen. Dann würde der Effekt mit dem Mouse-Over aber nicht mehr funktionieren. Denn der Mouse-Over muss den Hintergrund eines Menu-Items ersetzen, damit man den Seitenhintergrund noch sehen kann.

Baltasar · 10.03.2010, 20:18

kurze frage: wozu brauchst du den letzten, leeren menüeintrag?

chunky · 10.03.2010, 20:44

Die List-Items haben alle einen Hintergrund. Das ist einfach ein graues Bild, das halbdurchsichtig ist.
Bei Mouse-over wird dieses Bild durch ein ebenfalls halb-transparentes Bild ersetzt.

Den letzten Menueintrag brauche ich nur, damit das Listeneintrag-Hintergrundbild dort auch gezeigt wird.

Link kann ich euch hier nicht zeigen, sonst wird die Seite ratz-fatz in Google indiziert. Es handelt sich jedoch nur um eine temporäre Installation, die später verschoben wird.

nikosch · 10.03.2010, 23:16

Semantisch gesehen ist das totaler Murx.

chunky · 11.03.2010, 08:04

Sehr konstruktiv. Was ist denn daran "Murks"?

Baltasar · 11.03.2010, 08:25

Ein Listeneintrag ist eben ein Listeneintrag der einen Inhalt als Listeneintrag deklariert. Ohne Inhalt auch kein Listeneintrag.

chunky · 11.03.2010, 13:13

Zitat:

Zitat von Baltasar

Ein Listeneintrag ist eben ein Listeneintrag der einen Inhalt als Listeneintrag deklariert. Ohne Inhalt auch kein Listeneintrag.

Falsch. Deshalb steht ja auch im Listeneintrag ein " " drin.
Das ganze funktioniert auch, aber nur wenn ich dem letzten Eintrag eine feste Breite gebe.

nikosch · 11.03.2010, 18:50

Nicht falsch. Du willst ein "Menü" bauen. Menüs sind durch die Abbildung einer URI auf einen Bezeichner gekennzeichnet. Ein unsichtbarer Bezeichner ( ) kann wohl kaum als sinnvoll erachtet werden. Erst recht, wenn einer Hover eine Funktionalität suggeriert. Da man das Problem anders lösen kann, ist Dein Plan falsch.

Zitat:

Sehr konstruktiv.

Ist es, wenn man sich nicht alles auf dem Tablett servieren lässt. Googlen nach "Liste Menü Semantik" hätte Dich sicher nicht umgebracht.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] IE Quirks Modus und Menu	chunky	HTML, Usability und Barrierefreiheit	9	10.02.2010 16:27
menü liste crosbrowser tauglich machen	kid01	HTML, Usability und Barrierefreiheit	8	29.06.2009 13:02
[Erledigt] Menü liste aus Datenbank auslesen	oma420	Datenbanken	3	30.01.2009 17:27
horizontales Menü	Fritz73	Scriptbörse	9	26.05.2008 22:26
Menü auf php-Seite		PHP Tipps 2005	20	01.02.2005 20:24
[Erledigt] Liste in Textarea einfügen		HTML, Usability und Barrierefreiheit	0	03.01.2005 19:16

10.03.2010, 19:25
chunky Erfahrener Benutzer Registriert seit: 19.01.2010 Beiträge: 324 PHP-Kenntnisse: Anfänger	[Erledigt] List-Item mit dynamischer Breite in einer Menu-Liste Hallo. Ich kämpfe schon seit Tagen mit einem Problem. Ich habe ein CSS-Menu, das mit einer ul die Menu-Einträge horizontal nebeneinander darstellt. Das Menu hat sieben Einträge und einen weiteren achten, leeren Eintrag an der rechten Seite. Die Menu-Einträge sollen alle dieselbe Breite haben (fix oder als Prozentzahl der verfügbaren Breite). Jedes Menu-Item hat ein halb-transparentes Hintergrundbild, so dass der Hintergrund sichtbar ist. Bei Mousehover wird der Hintergrund durch einen ebenfalls halb-transparenten anderen Hintergrund ersetzt. Mein Problem: Ich bekomme das Menu nicht auf die ganze Breite gestreckt. Den letzten Menu-Eintrag muss ich auf die ganze verfügbare Breite ausdehnen. Hier ein Beispielbild: Ich habe schon alles mögliche versucht. Gebe ich dem letzten Eintrag z.B. width:100%, was in einer Tabelle funktionieren würde, dann bricht der Browser das Menu um und gibt dem letzten Menu-Eintrag die ganze verfügbare Breite. Mein Code: Code: <style type="text/css"> #menu{ margin-left:175px; font-size:14px; float:left; color:#000000; /font-weight:bold;/ } #menu ul{ white-space:nowrap; list-style-type: none; } #menu li{ display: inline; float:left; width:88px; text-align:center; background:url(/img/menu_item.gif); background-repeat:repeat; filter: alpha(opacity=75); -moz-opacity: 0.75; opacity: 0.75; } #menu li:hover{ background:url(/img/menu_item_selected.gif); background-repeat:no-repeat; background-position:top center; filter: alpha(opacity=65); -moz-opacity: 0.65; opacity: 0.65; } #menu li a{ /* display:block / / width:100px; */ height:30px; font-size:14px; padding: 7px 0px 6px 0px; color:#000000; line-height:30px; } #menu li a:hover{ text-decoration:none; border:0px; color:#000000; } </style> Code: <div id="menu" style="width:775px;"> <ul> <?php $args = array( 'child_of' => 0, 'sort_order' => 'ASC', 'sort_column' => 'menu_order', 'hierarchical' => 1, 'parent' => -1, 'exclude' => 21, 'offset' => 0 ); $pagearr = get_pages($args); //object! foreach($pagearr as $p){ echo " <li><a href='".get_page_link($p->ID)."'>".$p->post_title."</a></li>"."\n"; } ?> <li class="menuitemspacer" style="display:table-cell;width:100%;"> </li> </ul> </div> Das einfachste wäre natürlich, dem ganzen Menu einen halb-durchsichtigen Hintergrund zu verpassen. Dann würde der Effekt mit dem Mouse-Over aber nicht mehr funktionieren. Denn der Mouse-Over muss den Hintergrund eines Menu-Items ersetzen, damit man den Seitenhintergrund noch sehen kann.


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

10.03.2010, 20:18
Baltasar Erfahrener Benutzer Registriert seit: 26.10.2003 Beiträge: 592	kurze frage: wozu brauchst du den letzten, leeren menüeintrag?

10.03.2010, 20:44
chunky Erfahrener Benutzer Registriert seit: 19.01.2010 Beiträge: 324 PHP-Kenntnisse: Anfänger	Die List-Items haben alle einen Hintergrund. Das ist einfach ein graues Bild, das halbdurchsichtig ist. Bei Mouse-over wird dieses Bild durch ein ebenfalls halb-transparentes Bild ersetzt. Den letzten Menueintrag brauche ich nur, damit das Listeneintrag-Hintergrundbild dort auch gezeigt wird. Link kann ich euch hier nicht zeigen, sonst wird die Seite ratz-fatz in Google indiziert. Es handelt sich jedoch nur um eine temporäre Installation, die später verschoben wird.

10.03.2010, 23:16
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 34.257 PHP-Kenntnisse: Fortgeschritten	Semantisch gesehen ist das totaler Murx. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

11.03.2010, 08:04
chunky Erfahrener Benutzer Registriert seit: 19.01.2010 Beiträge: 324 PHP-Kenntnisse: Anfänger	Sehr konstruktiv. Was ist denn daran "Murks"?

11.03.2010, 08:25
Baltasar Erfahrener Benutzer Registriert seit: 26.10.2003 Beiträge: 592	Ein Listeneintrag ist eben ein Listeneintrag der einen Inhalt als Listeneintrag deklariert. Ohne Inhalt auch kein Listeneintrag.