navigationsliste verschwindet gelegentlich?
sph
- html
0 JürgenB0 sph0 Engin0 Ingo Turski0 sph
0 Ingo Turski
hallo selfer!
ich hab da ein sehr seltsames problem mit einer webseiten-navigation, und zwar: ein link des menüs verschwindet.
und zwar einfach so, mittendrin, immer wieder mal. dieses verhalten lässt sich nicht reproduzieren und taucht oft tagelang garnicht auf - dann plötzlich fehlt wieder der link aus der liste, ist aber beim reload der seite wieder da wo er hingehört.
manchmal tritt dieses problem direkt drei, vier mal hintereinander auf, manchmal wie gesagt garnicht.
die webseite selbst ist noch in arbeit, hier ist aber mal der code.
html:
<div class="main_nav">
<ul class="menu">
<li><span class="navitem">
<a href="#" class="navlink home current"> </a>
</span></li>
<li><span class="navitem">
<a href="#" class="navlink live"> </a>
</span></li>
<li><span class="navitem">
<a href="#" class="navlink media"> </a>
</span></li>
<li><span class="navitem">
<a href="#" class="navlink info"> </a>
</span></li>
<li><span class="navitem">
<span id="nav_last">
<a href="#" class="navlink shop"> </a>
</span>
</span></li>
</ul>
</div>
und css:
.main_nav {
height: 35px;
width: 900px;
text-align: center;
background: url(nav_bg.gif) 0 0 no-repeat;
}
.menu {
display: table;
padding: 0;
margin: 0 auto;
white-space: nowrap;
list-style-type: none;
}
* html .menu {
display: inline-block;
width: 1px;
padding: 0 0 0 0;
}
*:first-child+html .menu {
display: inline-block;
width: 100%;
padding: 0 0 0 0;
}
.menu a {
text-decoration: none;
}
.menu li {
display: table-cell;
}
* html .menu li {
display: inline;
}
*:first-child+html .menu li {
display: inline;
}
.navitem {
display: block;
padding: 0 5px 0 30px;
background: url(nav_bullet.gif) center left no-repeat;
text-decoration: none;
height: 35px;
}
* html .navitem {
display: inline-block;
margin: 0 -2px;
height: 35px;
}
*:first-child+html .navitem {
display: inline-block;
margin: 0 -2px;
height: 35px;
}
.navlink{
display: block;
width: 100px;
height: 35px;
}
.home {
background: url(nav_home.gif) 0 0 no-repeat;
}
.live {
background: url(nav_live.gif) 0 0 no-repeat;
}
.media {
background: url(nav_media.gif) 0 0 no-repeat;
}
.info {
background: url(nav_info.gif) 0 0 no-repeat;
}
.shop {
background: url(nav_shop.gif) 0 0 no-repeat;
}
.home:hover,
.live:hover,
.media:hover,
.info:hover,
.shop:hover,
.current {
background-position: -100px 0;
}
#nav_last {
display: block;
height: 35px;
padding: 0 25px 0 0px;
background: url(nav_bullet.gif) center right no-repeat;
}
... für ne einfache liste ist das - imo - ne menge text. aber was will man machen wenn man eine horizontale, zentrierte, "echte" liste mit rollover-bildern und einem sauberen abschluss nach dem letzten eintrag haben will?
der link, der probleme bereitet, ist zu 99% der letzte, in diesem fall der shop-link. ein freund hilft mir allerdings etwas beim testen und er legt seine hand dafür ins feuer dass auch schon andere links dieser liste "verschwunden" sind, was mir persönlich bisher noch nicht passiert ist.
eigentlich dachte ich daran diesen aufbau beizubehalten. zum einen funktioniert das - normalerweise - recht gut, ist scheinbar "semantisch korrekt" (ich kenn mich da ja nicht so aus...) und obendrein noch flexibel.
mich persönlich würde einfach nur interessieren warum es da vorkommen kann dass diverse teile der liste nicht korrekt angezeigt werden. und falls sich für dieses problem keine lösung findet muss einfach wieder "position: absolute" herhalten, zwar nicht ganz die feine art, aber was bleibt mir übrig - es muss funktionieren, punkt.
hat hier jemand ne idee? nen hinweis? ne lösung? hab ich einfach ein brett vorm kopf? ich bin für jede hilfe dankbar.
grüße & eine angenehme arbeitswoche,
sph
Hallo sph,
<div class="main_nav">
<ul class="menu">
...
>
> und css:
>
> ~~~css
> ...
> .menu {
> display: table;
> ...
>
bist du sicher, dass display:table bei einer Liste erlaubt und sinnvoll ist und unterstützt wird? Hast du dir schon mal die Beispiele in selfhtml angesehen? http://de.selfhtml.org/css/layouts/navigationsleisten.htm
Gruß, Jürgen
Hallo sph,
bist du sicher, dass display:table bei einer Liste erlaubt und sinnvoll ist und unterstützt wird? Hast du dir schon mal die Beispiele in selfhtml angesehen? http://de.selfhtml.org/css/layouts/navigationsleisten.htm
ja. und genau deswegen hab ich die dort (und auch sonst wirklich überall) zu findenden horizontalen listen-menüs auch wieder verworfen.
mit 'display:inline' hab ich keine akzeptable lösung gefunden um den gewünschten rollover-effekt zu erzielen. dafür sind angaben zur größe der einzelnen items leider notwendig, das funktioniert dann mit 'inline' nichtmehr so ganz.
ich weiß nicht ob erlaubt ist was ich da mache, allerdings funktioniert es. manchmal jedenfalls ;)
getestet hab ich das bisher nur mit ie6/7 und firefox, opera sollte das aber auch ganz gut vertragen - und auch für die jeweiligen ableger anderer betriebssysteme erwarte ich mir keine großen schwierigkeiten oder ggf. entsprechende hacks.
ich bin aber natürlich offen für alles, falls ich bei meiner doch sehr zeitintensiven recherche _die_ ultimative liste übersehen hab bitte ich um nachsicht und einen link ;)
anforderungen, nochmal:
-> list-items müssen horizontal zentriert sein
-> die items selbst müssen in der größe frei definierbar sein
-> mittels css und entsprechenden grafiken bzw. background-image-verschiebung soll ein hover-effekt erzielt werden
-> das letzte item erhält zwei bullet-grafiken: eine führend, eine abschließend
naja, das soll mal eine navigation werden die sich eigentlich nicht wirklich ändert, wie gesagt - ich verzichte meinetwegen auch auf die ganze flexibilität und schieb mir die einzelnen items so zurecht wie ich sie haben will. ich befürchte dass es darauf hinauslaufen wird.
das ist allerdings keine wirklich optimale lösung, finde ich.
eine derart funktionierende liste könnte ich durchaus öfter mal gebrauchen, mich wundert etwas dass es da keine wirklich gute und überzeugende lösung dafür gibt.
gut, allerdings bin ich nicht vom fach - womöglich übersehe ich einfach nur das naheliegendste, aka. brett vorm kopf.
jedenfalls: danke für deinen beitrag,
grüße!
sph
Hi sph,
anforderungen, nochmal:
-> list-items müssen horizontal zentriert sein
-> die items selbst müssen in der größe frei definierbar sein
-> mittels css und entsprechenden grafiken bzw. background-image-verschiebung soll ein hover-effekt erzielt werden
-> das letzte item erhält zwei bullet-grafiken: eine führend, eine abschließend
eine derart funktionierende liste könnte ich durchaus öfter mal gebrauchen, mich wundert etwas dass es da keine wirklich gute und überzeugende lösung dafür gibt.
Ich werd aus deinem Problem nicht schlau. kannst du nicht ein Online beispiel hochladen?
Die anforderungen die du da stellst klingen recht einfach, deine beschreibung allerdings macht
das ganze sehr Mysthisch und Rätselhaft.
Grüße aus H im R,
Engin
Ich werd aus deinem Problem nicht schlau.
ich auch nicht, sonst wär ich nicht hier ;)
kannst du nicht ein Online beispiel hochladen?
Die anforderungen die du da stellst klingen recht einfach, deine beschreibung allerdings macht
das ganze sehr Mysthisch und Rätselhaft.
mist, dann kann ich also doch nicht so gut erklären wie ich dachte... na, wie auch immer - du hast recht. ohne beispiel alles doof, mein fehler, hätte ich (wiedermal) gleich von vornherein drandenken sollen. hier also diese navigation: http://red-button.de/tmp/
du hast völlig recht, an sich ist das keine große sache, was ich da machen will. und mir fallen auch etliche wege ein wie ich das wesentlich einfacher hinbekomme - und wenn ich dafür auf die liste verzichte und das ganze dann eben "unschön" zusammenflicke, es würde seinen dienst tun.
allerdings weiß ich nicht wie man eine "echte" liste ganz einfach dazu bringen kann so auszusehen und das zu tun. ich dachte auch das wäre relativ leicht, ich bin dabei aber nur auf hürden gestoßen.
ich hab ja immernoch ein wenig hoffnung dass ich einfach was total offensichtliches übersehen hab, das wär natürlich noch der idealfall. aber ich kenn mein glück... :\
na, vielleicht hilft dir ja dieses beispiel weiter, das ist übrigens ein zu eins identisch mit dem baustellen-menü, bei dem dann hin und wieder mal ein link verschwand (... um das eigentliche problem nochmal anzuschneiden ;) )
grüße,,,
sph
Hi sph,
hier also diese navigation: http://red-button.de/tmp/
na, vielleicht hilft dir ja dieses beispiel weiter, das ist übrigens ein zu eins identisch mit dem baustellen-menü, bei dem dann hin und wieder mal ein link verschwand (... um das eigentliche problem nochmal anzuschneiden ;) )
Also bei mir verschwindet nichts, aber so wie es auschaut suchst du eine Horizontal-Navigation mit gleitenden Hintergründen,
wo du dann wahrscheinlich die Hintergründe der Current Seite hervorheben möchtest, richtig?
Grüße aus H im R,
Engin
Hi Engin,
Also bei mir verschwindet nichts, aber so wie es auschaut suchst du eine Horizontal-Navigation mit gleitenden Hintergründen,
wo du dann wahrscheinlich die Hintergründe der Current Seite hervorheben möchtest, richtig?
Ich wollte noch was ergänzen:
Nach nochmaligem begutachten der Seite und deiner Fragestellung würde ich denken,
das dich einfache spans hier schon weiter bringen würden.
<ul>
<li><span></span></li>
<li><a href="#">Link1</a></li>
<li><span></span></li>
<li><a href="#">Link2</a></li>
<li><span></span></li>
<li><a href="#">Link3</a></li>
<li><span></span></li>
</ul>
Die span dann den anforderungen entsprechend formatieren, evtl., wenn´s nicht anders geht noch ein
rein,
müsste eigentlich ausreichen.
Grüße aus H im R,
Engin
hello again,
Also bei mir verschwindet nichts
bei mir auch nicht, jedenfalls nicht letzte woche von dienstag bis freitag. davor und danach schon, bei unverändertem code. ich habs anfangs mal erwähnt - genau das ist eigentlich der grund warum ich mich hier zu wort melde.
ein nicht reproduzierbarer, zufällig auftauchender fehler.
immer spitze sowas, ich weiß...
aber so wie es auschaut suchst du eine Horizontal-Navigation mit gleitenden Hintergründen
äh... nein?
zum einen wüsste ich nicht was diese verlinkte navigation mit der von mir genutzten zu tun hat, zum anderen brauche ich keine flexiblen hintergründe die sich einem text anpassen - der text ist der hintergrund. (bitte - wenn jetzt einer anfängt dass das aber garnicht SEO ist geh ich kotzen...)
wo du dann wahrscheinlich die Hintergründe der Current Seite hervorheben möchtest, richtig?
richtig. mach ich ja bereits, ist dieses "current"-ding...
Nach nochmaligem begutachten der Seite und deiner Fragestellung würde ich denken,
das dich einfache spans hier schon weiter bringen würden.
<ul>
<li><span></span></li>
<li><a href="#">Link1</a></li>
<li><span></span></li>
<li><a href="#">Link2</a></li>
<li><span></span></li>
<li><a href="#">Link3</a></li>
<li><span></span></li>
</ul>
>
> Die span dann den anforderungen entsprechend formatieren, evtl., wenn´s nicht anders geht noch ein ` `{:.language-html} rein,
> müsste eigentlich ausreichen.
hm... die idee gefällt mir! das sorgt dafür dass das ganze nicht so verschachtelt ist - könnte dann sogar was bringen. mal sehen wie weit ich damit komme, vorerst mal danke für die anregung und deine bemühungen :)
grüße
sph
Hi sph,
aber so wie es auschaut suchst du eine Horizontal-Navigation mit gleitenden Hintergründen
äh... nein?
zum einen wüsste ich nicht was diese verlinkte navigation mit der von mir genutzten zu tun hat, zum anderen brauche ich keine flexiblen hintergründe die sich einem text anpassen - der text ist der hintergrund. (bitte - wenn jetzt einer anfängt dass das aber garnicht SEO ist geh ich kotzen...)
Naja, ich hatte dich falsch verstanden, daher meine verspätete ergänzung. Ich hatte angenommen du hast etwas komplexeres
vor wie das die Sterne beim hovern aufleuchten und so.
Grüße aus H im R,
Engin
hey, ich nochmal kurz:
wo du dann wahrscheinlich die Hintergründe der Current Seite hervorheben möchtest, richtig?
ich bin beeindruckt! zuerst dachte ich: ja klar, man gibt dem element das anders aussehen soll eben einfach die entsprechende css definition mit - aber DER trick is nich übel, den muss ich mir merken 8]
thx alot!
Hi sph,
ich bin beeindruckt! zuerst dachte ich: ja klar, man gibt dem element das anders aussehen soll eben einfach die entsprechende css definition mit - aber DER trick is nich übel, den muss ich mir merken 8]
Diese body auszeichnung eignet sich ja für noch viel mehr, mit den body id
kannst du
jedes Element in jeder Seite extra formatieren, vereinzelten Seiten mindest höhen geben und <p>
auf der einen Seite
anders darstellen als auf der anderen und ach weiss der Geier. :)
Grüße aus H im R,
Engin
Hi,
wo du dann wahrscheinlich die Hintergründe der Current Seite hervorheben möchtest, richtig?
ich bin beeindruckt! zuerst dachte ich: ja klar, man gibt dem element das anders aussehen soll eben einfach die entsprechende css definition mit - aber DER trick is nich übel, den muss ich mir merken 8]
den solltest Du besser gleich wieder vergessen, denn er ist so unsinnig, wie die atuell angezeigte Seite zu verlinken. Sowohl was die Barrierefreiheit betrifft, als auch die Verwirrung einiger Besucher, die drauf klicken und es sich nichts ändert.
Der bessere Weg ist, den HTML-Code zu ändern - die Verlinkung zu entfernen und ggfls. ein anderes Element wie em stattdessen zu wählen.
freundliche Grüße
Ingo
den solltest Du besser gleich wieder vergessen, denn er ist so unsinnig, wie die atuell angezeigte Seite zu verlinken. Sowohl was die Barrierefreiheit betrifft, als auch die Verwirrung einiger Besucher, die drauf klicken und es sich nichts ändert.
Der bessere Weg ist, den HTML-Code zu ändern - die Verlinkung zu entfernen und ggfls. ein anderes Element wie em stattdessen zu wählen.
hey,
danke für den ratschlag - aber diese funktion wird schon so ihren nutzen finden.
das menü da, da ist ja nur ein haupt-menü. durch untermenüs gibts noch zwei drei weitere seiten, die man besuchen kann und drum würd ich den link schon lassen. damit kommt man quasi immer wieder zur haupt-kategorie (wenn man so will, aber ich erklär besser nichts mehr, versteht eh niemand).
das mit den em kapier ich gerade nicht - da das menü aus grafiken besteht brauch ich mir über skalierbarkeit garnicht erst gedanken machen - oder hattest du da was andere im sinn?
wie könnte ich mit em zb. einen container von exakt (!) 35 x 00 px realisieren? mit em hab ich kaum erfahrungen, da ich spätestens bei grafiken damit probleme bekommen hab. nicht der best weg, ich weiß - für meine zwecke aber bisher immer ausreichend...
grüße, sph
Hi,
das menü da, da ist ja nur ein haupt-menü. durch untermenüs gibts noch zwei drei weitere seiten, die man besuchen kann und drum würd ich den link schon lassen. damit kommt man quasi immer wieder zur haupt-kategorie (wenn man so will, aber ich erklär besser nichts mehr, versteht eh niemand).
ich verstehe das schon... nur ändert das nichts daran, dass die aktuell angezeigte Seite nicht verlinkt werden sollte. Siehe z.B. http://1ngo.de/web/tips.html -> nicht verlinkt und http://1ngo.de/web/captcha-spam.html und alle weiteren Unterseiten -> verlinkt.
das mit den em kapier ich gerade nicht - da das menü aus grafiken besteht brauch ich mir über skalierbarkeit garnicht erst gedanken machen - oder hattest du da was andere im sinn?
HTML hat einen Sinn - oder sollte es zumindest haben. Wenn Du die Listenpunkte bereits mit CSS formatierst und einen weiteren Selektor für die Inhalte, also normalerweise die <a> brauchst, dann fehlt Dir bei Nicht-Verlinkung ein Element.
Soll der aktuelle Menüpunkt nun semantisch hervorgehoben - also (für Screenreader) betont - werden, dann bietet sich <em> an - ansonsten <span>. Es geht hier - wie generell bei sinnvoller HTML-Auszeichnung - nicht um das Aussehen, sondern die Semantik und damit auch um Barrierefreiheit.
freundliche Grüße
Ingo
Hi Ingo,
ich verstehe das schon... nur ändert das nichts daran, dass die aktuell angezeigte Seite nicht verlinkt werden sollte. Siehe z.B. http://1ngo.de/web/tips.html -> nicht verlinkt und http://1ngo.de/web/captcha-spam.html und alle weiteren Unterseiten -> verlinkt.
Dir ist doch aber auch klar, das es sich für einen Anfänger als ziemlich schwer erweisen dürfte,
die Aktuell angezeigte Seite zu entlinken[1].
Grüße aus H im R,
Engin
[1] Wenn wir davon ausgehen, das die Navigation ausgelagert ist und mittels include in die Seite eingebunden wird
Hi,
Dir ist doch aber auch klar, das es sich für einen Anfänger als ziemlich schwer erweisen dürfte,
die Aktuell angezeigte Seite zu entlinken[1].Grüße aus H im R,
Engin
[1] Wenn wir davon ausgehen, das die Navigation ausgelagert ist und mittels include in die Seite eingebunden wird
Nunja, eine unüberwindbare Hürde dürfte dann aber eine regEx wie
$nav = '<ul>
<li><a href="/web/test.php">Testseite</a></li>
</ul>';
$pattern = '#<a href="'.$_SERVER["SCRIPT_NAME"].'">(.+?)</a>#';
echo preg_replace($pattern,'<em>$1</em>',$nav);
aber nicht darstellen.
freundliche Grüße
Ingo
Hi Ingo,
Nunja, eine unüberwindbare Hürde dürfte dann aber eine regEx wie
$nav = '<ul>
<li><a href="/web/test.php">Testseite</a></li>
</ul>';
$pattern = '#<a href="'.$_SERVER["SCRIPT_NAME"].'">(.+?)</a>#';
echo preg_replace($pattern,'<em>$1</em>',$nav);
> aber nicht darstellen.
Für mich tut es das, ich hatte mir bis Dato auch noch nie so recht gedanken darüber gemacht.
Bei mir geschah die kennzeichnung der Aktuellen Seite bisher immer so wie auf der von
mir verlinkten Seite.
Dein bsp. sieht ja interessant aus, werde es Heute Abend mal probieren.
Grüße aus H im R,
Engin
--
[Von wegen "Geld wächst nicht auf Bäumen"!](http://nimmet.de/nimmet-dateien/GeldAufBaum)
![](http://nimmet.de/nimmet-bilder/valigator.gif)[Der Valligator](http://old.atomic-eggs.com/old_forum/messages/237.html#a1)
["Computer sagt Nein"](http://www.comedycentral.de/index.php/Video/Detail/vid/541168/playerMode/fullscreen)
Nunja, eine unüberwindbare Hürde dürfte dann aber eine regEx wie
[...]
aber nicht darstellen.
nein, sicher nicht. regex sind ja auch genau das womit sich der webbastler-einsteiger zu allererst beschäftigt. sind ja auch so leicht zu lernen.
ich hab mir das jetzt bei meinen php-gehversuchen mal angesehen und verstehe genau so viel:
^ = anfang
$ = ende
und womöglich stimmt nichtmal das immer. jedesmal wennich versuche einen regex-ausdruch anzuwenden geht irgendwas schief und ich wälze wieder seitenweise anleitungen und beispiele bis ich dieses eine dämliche sonderzeichen gefunden hab, das mir die funktion versaut.
und solange ich selbst bei regex-tutorials von den jeweiligen autoren vernehme dass sie selbst nicht alles so wirklich richtig verstanden haben und nur einen teil der vielen regeln erklären können - solange sind regex ganz sicher nicht meine erste wahl.
versteh mich nicht falsch, ich rechne dir dein fachwissen hoch an und finde deine einstellung grundsätzlich richtig und gut. aber mir scheint du lässt die umstände in der realität etwas zu sehr ausser acht...
sph
Hi Ingo,
$nav = '<ul>
<li><a href="/web/test.php">Testseite</a></li>
</ul>';
$pattern = '#<a href="'.$_SERVER["SCRIPT_NAME"].'">(.+?)</a>#';
echo preg_replace($pattern,'<em>$1</em>',$nav);
Wie benutzt man das? Ich schaff es wenn überhaupt mit einer if abfrage
~~~php
<?
if ($_SERVER["SCRIPT_NAME"] == '/nispet-dateien/Testseite.php') {
echo '<li><span>unlink</span></li>';
}
else {
echo '<li><a href="../nispet-dateien/Testseite.php">Testseite</a></li>';
}
?>
Grüße aus H im R,
Engin
Hi,
$nav = '<ul>
<li><a href="/web/test.php">Testseite</a></li>
</ul>';
$pattern = '#<a href="'.$_SERVER["SCRIPT_NAME"].'">(.+?)</a>#';
echo preg_replace($pattern,'<em>$1</em>',$nav);
>
>
> Wie benutzt man das? Ich schaff es wenn überhaupt mit einer if abfrage
genauso, wie dort abgegeben: das include liefert die HTML-formatierte Liste $nav und die regEx ersetzt nachträglich die Verlinkung.
freundliche Grüße
Ingo
--
[[barrierefreie Ingo Webdesign](http://www.1ngo.de/web/) » [Suchmaschinenoptimierung](http://www.1ngo.de/web/seo.html) | [em?](http://www.1ngo.de/web/em.html) | [IE7 - Bugs](http://www.1ngo.de/web/ie7.html)]
Hi Ingo,
$nav = '<ul>
<li><a href="/web/test.php">Testseite</a></li>
</ul>';
$pattern = '#<a href="'.$_SERVER["SCRIPT_NAME"].'">(.+?)</a>#';
echo preg_replace($pattern,'<em>$1</em>',$nav);
> genauso, wie dort abgegeben: das include liefert die HTML-formatierte Liste $nav und die regEx ersetzt nachträglich die Verlinkung.
Tatsächlich, ich hatte den fehler gemacht, das meine internen Links mit
../web/test.php, daher hatte es nicht funktioniert.
^^
Danke, jetzt kann ich endlich die Aktuellen Seiten entlinken. :)
Grüße aus H im R,
Engin
--
[Von wegen "Geld wächst nicht auf Bäumen"!](http://nimmet.de/nimmet-dateien/GeldAufBaum)
![](http://nimmet.de/nimmet-bilder/valigator.gif)[Der Valligator](http://old.atomic-eggs.com/old_forum/messages/237.html#a1)
["Computer sagt Nein"](http://www.comedycentral.de/index.php/Video/Detail/vid/541168/playerMode/fullscreen)
ich verstehe das schon... nur ändert das nichts daran, dass die aktuell angezeigte Seite nicht verlinkt werden sollte.
ich verstehe schon warum du diese meinung vertrittst - allerdings ist das ein punkt der für mich wirklich keine bedeutung hat, da ich diese einstellung/auffassung nicht teilen kann.
ich sehe weder eine schwierigkeit noch ein problem darin die aktuell angezeigte seite zu verlinken. vor allem dann nicht wenn man von vornherein ausschließen kann dass das publikum der webseite schwerfälligere, womöglich noch ältere menschen sind, für deren navigation durch die webseite sowas vielleicht wirklich sinnvoll wäre.
ich werds mir merken für den fall dass ich jemals eine webseite für ein seniorenstift gestalten sollte. aber diese navigation soll in die webseite einer punkband - damit hat sich das thema für mich dann erledigt.
HTML hat einen Sinn - oder sollte es zumindest haben. Wenn Du die Listenpunkte bereits mit CSS formatierst und einen weiteren Selektor für die Inhalte, also normalerweise die <a> brauchst, dann fehlt Dir bei Nicht-Verlinkung ein Element.
ah - ich hab dich da eben total falsch verstanden, dachte du wolltest mir em statt px nahelegen - aber du meintest ja was ganz anderes. ja, wenn man denn auf links verzichtet könnte man das alternativ und als platzhalter verwenden. mir wär jedoch 'span' schneller in den sinn gekommen, würde wohl auch gehen...
btw, screenreader...
ich weiß dass ich gleich gesteinigt werde, aber: die untermenüs sind imagemaps mit mouseover-javascripts.
screenreader? oder: die aktuelle seite ent-linken?
ja, das ist nicht schön, nein, das ist sicher auch nicht ganz richtig so, und ja, es gäbe - vielleicht [1] - sogar mittel und wege das anders zu machen. allerdings geht es um die webseite einer band, die sich damit schön zur schau stellen und gefallen will - kein schwein interessiert das "wie".
der mit den imagemaps realisierte effekt gefällt und wird gewünscht, so what.
grüße,
sph
[1]: es gäbe "sicher" andere/schönere/bessere/vernünftigere methoden wenn es sich um einfache menüs handeln würde. da die einzelnen links allerdings nicht linear, sondernd schräg, versetzt, überlagernd angeordnet sind würde mir keine leichte und einfach umzusetzende lösung einfallen. ich müsste quasi wieder herumexperimentieren, hier viele viele fragen stellen - und würde womöglich irgendwann mitte 2009 damit fertig werden -.-
Hi,
http://de.selfhtml.org/css/layouts/navigationsleisten.htm
ja. und genau deswegen hab ich die dort (und auch sonst wirklich überall) zu findenden horizontalen listen-menüs auch wieder verworfen.
Du hast das ganze Kapitel gelesen?
mit 'display:inline' hab ich keine akzeptable lösung gefunden um den gewünschten rollover-effekt zu erzielen. dafür sind angaben zur größe der einzelnen items leider notwendig, das funktioniert dann mit 'inline' nichtmehr so ganz.
Ich hatte dort noch eine Alternative aufgezeigt, wenn Breitenangaben gewünscht sind.
naja, das soll mal eine navigation werden die sich eigentlich nicht wirklich ändert, wie gesagt - ich verzichte meinetwegen auch auf die ganze flexibilität und schieb mir die einzelnen items so zurecht wie ich sie haben will. ich befürchte dass es darauf hinauslaufen wird.
ja. Und as ist dann wirklich nicht kompliziert, sondern erfordert eben Anpassungen der Breite und margins an die jeweiligen Navigationspunkte - und natürlich eine feste Breite der gesamten Liste.
freundliche Grüße
Ingo
ja. und genau deswegen hab ich die dort (und auch sonst wirklich überall) zu findenden horizontalen listen-menüs auch wieder verworfen.
Du hast das ganze Kapitel gelesen?
nein, nur von jedem dritten wort den zweiten buchstaben o_0
mit 'display:inline' hab ich keine akzeptable lösung gefunden um den gewünschten rollover-effekt zu erzielen. dafür sind angaben zur größe der einzelnen items leider notwendig, das funktioniert dann mit 'inline' nichtmehr so ganz.
Ich hatte dort noch eine Alternative aufgezeigt, wenn Breitenangaben gewünscht sind.
ja, aber "float" lässt sich so schlecht zentrieren...
naja, das soll mal eine navigation werden die sich eigentlich nicht wirklich ändert, wie gesagt - ich verzichte meinetwegen auch auf die ganze flexibilität und schieb mir die einzelnen items so zurecht wie ich sie haben will. ich befürchte dass es darauf hinauslaufen wird.
ja. Und as ist dann wirklich nicht kompliziert, sondern erfordert eben Anpassungen der Breite und margins an die jeweiligen Navigationspunkte - und natürlich eine feste Breite der gesamten Liste.
ja, die feste breite hab ich. eigentlich ales kein problem, aber ich bin gut darin probleme zu schaffen - langsam frage ich mich warum ich überhapt auf die überaus geniale idee gekommen bin das so zu machen... achja, richtig: war ne fixe idee in meinem kopf und ich dachte mir: muss gehen, also mach. nur gut dass ich dann einen völlig komplizierten ansatz gewählt hab, mich darauf versteift habe und alles noch weiter ent-ordnet hab - sonst würd das womöglich ja schon reibungslos funktionieren... -.-
grüße,
sph
Hi,
Ich hatte dort noch eine Alternative aufgezeigt, wenn Breitenangaben gewünscht sind.
ja, aber "float" lässt sich so schlecht zentrieren...
geht auch - wenn Du wirklich dazu bereit bist:
schieb mir die einzelnen items so zurecht wie ich sie haben will.
Ein wenig rechnen und die passenden margin eintragen und schon ist es zentriert.
Die Alternative sind nunmal Tabellen oder warten auf die Umsetzung von CSS-Tabelleneigenschaften im IE bzw. bis der IE7 Geschichte wie der Netscape 4 geworden ist.
freundliche Grüße
Ingo
Hi,
ergänzend zu Jürgen - das:
* html .menu {
display: inline-block;
width: 1px;
padding: 0 0 0 0;
}
*:first-child+html .menu {
display: inline-block;
width: 100%;
padding: 0 0 0 0;
}
ist auch unsinnig, da der IE diese Eigenschaft nur auf inline-Elemente anwendet.
freundliche Grüße
Ingo
Hi,
ergänzend zu Jürgen - das:
* html .menu {
display: inline-block;
width: 1px;
padding: 0 0 0 0;
}
*:first-child+html .menu {
display: inline-block;
width: 100%;
padding: 0 0 0 0;
}ist auch unsinnig [...]
du meinst den first-child hack?
naja - wenn ich den weglasse zerhackt mir der ie7 die horizontale zentrierung uns stellt mir die listen-items wieder brav untereinander dar. von daher dachte ich ich bau das mal mit ein...
grüße,
sph
Hi,
Hi,
ergänzend zu Jürgen - das:
* html .menu {
display: inline-block;
width: 1px;
padding: 0 0 0 0;
}
*:first-child+html .menu {
display: inline-block;
width: 100%;
padding: 0 0 0 0;
}ist auch unsinnig [...]
du meinst den first-child hack?
nein - beide; bzw. der Wert inline-block in den Regeln.
freundliche Grüße
Ingo
Hi,
ergänzend zu Jürgen - das:
* html .menu {
display: inline-block;
width: 1px;
padding: 0 0 0 0;
}
*:first-child+html .menu {
display: inline-block;
width: 100%;
padding: 0 0 0 0;
}ist auch unsinnig [...]
NACHTRAG:
das hat mir jetzt keine ruhe gelassen - ich musste das doch noch ausprobieren.
schlag mich meinetwegen tot, aber ich schwöre dir bei allem was mir heilig ist dass ich diesen first-child-hack nicht einfach so zum spaß eingebaut habe.
allerdings ist meine antwort von eben unsinn, der ie7 tut auch ohne diesen eintrag brav was er soll.
ich verstehs nicht.
jedenfalls: DANKE. :)
sph
schlag mich meinetwegen tot
Adresse?
scnr, imho_tep