Menü-Liste mit BG-Image, float:left und unterschied. Breiten

[kay]

Guten Abend, hab eine Navigation. Ist eine Liste. Menüpunkte sind Bilder als BG-image. Liste soll nebeneinander angezeigt werden. Beim hover wird das Bild vertikal verschoben und man sieht den entspr. hover-Effekt. Alles ok. Nur ich muss wohl display:block; schreiben, damit ich eine feste Höhe angeben kann. Dann muss ich aber auch eine Breite angeben. Oder?

Problem: Menüeinträge sind unterschiedlich breit. Entweder ist Abstand zwischen Einträgen zu groß. Oder Menüeinträge sind abgeschnitten. Was mach ich?

Danke. Kay.

[ChrisB]

Hi,

Nur ich muss wohl display:block; schreiben, damit ich eine feste Höhe angeben kann. Dann muss ich aber auch eine Breite angeben. Oder?

Du kannst auch float oder display:inline-block verwenden.

Um mehr sagen zu können, ist deine Problembeschreibung viel zu spärlich.
</hilfe/charta.htm#tipps-fuer-fragende>

MfG ChrisB

[kay]

Um mehr sagen zu können, ist deine Problembeschreibung viel zu spärlich.

Ich werde nochmal versuchen.

CSS:
#navcontainer{
list-style-type: none;
clear:both;
}

#navlist li{
float: left;
margin: 0;
padding: 0;
height:25px;
width:136px;
display:inline-block
}

#navlist li a{
height:25px;
width:136px;
display:inline-block
}

#navlist li a:hover, #navlist .current{
height:25px;
width:136px;
background-position: 0 bottom;
}

#menu0, #menu0 a {background:url(/images/menu/0.png);}
#menu1, #menu1 a {background:url(/images/menu/1.png);}
#menu2, #menu2 a {background:url(/images/menu/2.png);}
#menu3, #menu3 a {background:url(/images/menu/3.png);}
#menu4, #menu4 a {background:url(/images/menu/4.png);}
#menu5, #menu5 a {background:url(/images/menu/5.png);}
#menu6, #menu6 a {background:url(/images/menu/6.png);}

HTML
<div id="navcontainer">
      <ul id='navlist'>
 <li id="menu0"><a href="/0.php"></a></li>
 <li id="menu1"><a href="/1.php"></a></li>
 <li id="menu2"><a href="/2.php"></a></li>
 <li id="menu3"><a href="/3.php"></a></li>

<li id="menu4" class='current'></li>
 <li id="menu5"><a href="5.php"></a></li>
 <li id="menu6"><a href="/6.php"></a></li>
 </ul></div>

Problem. Menüeintrag 136px breit. Bilder sind manchmal breiter Manchmal schmaler. Wenn ich width:136px; lösche sind alle Bilder weg. Hoffe Du verstehst nun. Dank.

[fastix®]

Moin!

Problem. Menüeintrag 136px breit. Bilder sind manchmal breiter Manchmal schmaler. Wenn ich width:136px; lösche sind alle Bilder weg. Hoffe Du verstehst nun. Dank.

Dann wirst Du nicht darum herumkommen die notwendige Breite zu berechnen. Und zwar aus den Bildern.
Was haben die Grafiken eigentlich im Hintergrund verloren? Wenn Du diese wie folgt

<li id="menu0"><a href="/0.php"><img src="/images/menu/0.png" alt="Name des Menüpunktes" /></a></li>

verbaust, dann können auch Blinde, Textbrowser und Suchmaschinen Dein Menü lesen. Ich hielte das für vorteilhaft. Und normalerweise bekomme ich für solche Ratschläge viel Geld.

MFFG (Mit freundlich- friedfertigem Grinsen)

fastix

[kay]

Guten Tag.

Was haben die Grafiken eigentlich im Hintergrund verloren?

Hab das auf vielen Seiten so gesehen. Auch Tutorials.

Wenn Du diese wie folgt

<li id="menu0"><a href="/0.php"><img src="/images/menu/0.png" alt="Name des Menüpunktes" /></a></li>

Guter Hinweis. Danke. Wie tauschen ich das Bild bei hover aber aus? Gerne ohen javascript sondern CSS. Das geht dann nicht mehr wie ich es habe.

[fastix®]

Moin!

Wie tauschen ich das Bild bei hover aber aus? Gerne ohen javascript sondern CSS. Das geht dann nicht mehr wie ich es habe.

Nein, dann musst Du da mit JS ran. Aber da es sich ohnehin um ein optisches Gimmik handelt ist Javascript an dieser Stelle auch angebracht, denn ohne den Bildertausch fehlt eben keine wesentliche Funktion.

onmoseover und onmouseout sind dann Deine Freunde.

MFFG (Mit freundlich- friedfertigem Grinsen)

fastix

[kay]

Habe ohne javascript gelöst. CSS ohne width. HTML so wie Du geschrieben. Bild (nicht das BG-image) ist transparent mit Breite wie Menüeintrag. Funktioniert. Dank.

[fastix®]

Moin!

Habe ohne javascript gelöst. CSS ohne width. HTML so wie Du geschrieben. Bild (nicht das BG-image) ist transparent mit Breite wie Menüeintrag. Funktioniert. Dank.

Stimmt. Kann man als "gelöst" verbuchen.

MFFG (Mit freundlich- friedfertigem Grinsen)

fastix

[Gunnar Bittersmann]

@@kay:

nuqneH

Habe ohne javascript gelöst. CSS ohne width. HTML so wie Du geschrieben. Bild (nicht das BG-image) ist transparent mit Breite wie Menüeintrag.

Soll das heißen, du hast noch eine zusätzliche (transparente) Grafik verwendet? Solltest du nicht. [PERFORMANCE-BP1] Brauchst du auch nicht: Wenn  noch

#navlist li { overflow: hidden }

gesetzt wird, dann könnte dieselbe Grafik für Vorder- und Hintergrundbild verwendet werden:

<li id="menu0"><a href="/0.php"><img src="/images/menu/0.png" alt="Name des Menüpunktes" /></a></li>

mit

a:hover img { background: url(/images/menu/0.png) 0 bottom }

Funktioniert.

Was nicht heißt, dass es gut ist.

Denn es sollte nicht für jeden Menüpunkt jeweils eine Grafik verwendet werden, sondern insgesamt nur eine Grafik für alle Menüpunkte.

Qapla'

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

dann könnte dieselbe Grafik für Vorder- und Hintergrundbild verwendet werden:

Das schon, aber nicht doch so

a:hover img { background: url(/images/menu/0.png) 0 bottom }

sondern eher so:

a:hover { background: url(/images/menu/0.png) 0 bottom }  
  
a:hover img { visibility: hidden }

Qapla'

[Gunnar Bittersmann]

@@fastix®:

nuqneH

Aber Vorsicht! Wann immer die Antwort „Nein, dann musst Du da mit JS ran“
ist, könnte es an mangelnden CSS-Kenntnissen liegen.

Qapla'

[ChrisB]

Hi,

Problem. Menüeintrag 136px breit. Bilder sind manchmal breiter Manchmal schmaler. Wenn ich width:136px; lösche sind alle Bilder weg. Hoffe Du verstehst nun.

Nein. Wenn du keine 136px Breite angeben willst - was dann?

MfG ChrisB

[kay]

Guten Tag

Nein. Wenn du keine 136px Breite angeben willst - was dann?

Dachte width:auto; Breit dann wie Breite von BG-image. Funktioniert nicht. Schade.

[ChrisB]

Hi,

Dachte width:auto; Breit dann wie Breite von BG-image. Funktioniert nicht.

Natürlich nicht - ein Hintergrundbild ist kein Inhalt.

MfG ChrisB

[Gunnar Bittersmann]

@@kay:

nuqneH

HTML
<div id="navcontainer">
      <ul id='navlist'>
<li id="menu0"><a href="/0.php"></a></li>
<li id="menu1"><a href="/1.php"></a></li>
<li id="menu2"><a href="/2.php"></a></li>
<li id="menu3"><a href="/3.php"></a></li>

<li id="menu4" class='current'></li>
<li id="menu5"><a href="5.php"></a></li>
<li id="menu6"><a href="/6.php"></a></li>
</ul></div>

CSS:
#navcontainer{
list-style-type: none;
clear:both;
}

Die Eigenschaft 'list-style-type' ist für 'div'-Elemente wirkungslos. Sie wird auch nicht von 'div[@id="navcontainer"]' an 'ul[@id="navlist"]' vererbt. Du wolltest sie für letzteres Element angeben.

Das 'div[@id="navcontainer"]' ist auch völlig überflüssig. Du brauchst für 'ul[@id="navlist"]' keinen zusätzlichen Container.

Und die Klasse "current" brauchst du auch nicht.

Was du allerdings brauchst, sind Linktitel. Etliche Besucher sehen keine Bilder, sondern nur Texte. Unter diesen auch für dich wichtige.

Auf die Linktitel wendest du dann eine geeignete Image-Replacement-Technik an.

#navlist li{
float: left;
margin: 0;
padding: 0;
height:25px;
width:136px;
display:inline-block
}

'display: inline-block' in Kombination mit 'float' ist unsinnig, da durch letzteres 'display' auf "block" gesetzt wird. [CSS21 §9.7] Verwende entweder 'display: inline-block' oder 'float'. (S.a. [INLINE-BLOCK])

#navlist li a{
height:25px;
width:136px;
display:inline-block
}

Wozu nochmals die Größenangabe? Die hat doch schon das 'li'-Elternelement. Und warum "inline-block"?

#navlist li a { display: block } und gut ist.

#navlist li a:hover, #navlist .current{
height:25px;
width:136px;
background-position: 0 bottom;
}

Dito. Wozu nochmals die Größenangabe?

#menu0, #menu0 a {background:url(/images/menu/0.png);}
#menu1, #menu1 a {background:url(/images/menu/1.png);}
#menu2, #menu2 a {background:url(/images/menu/2.png);}
#menu3, #menu3 a {background:url(/images/menu/3.png);}
#menu4, #menu4 a {background:url(/images/menu/4.png);}
#menu5, #menu5 a {background:url(/images/menu/5.png);}
#menu6, #menu6 a {background:url(/images/menu/6.png);}

Warum  haben sowohl die 'li[@id="menu…"]'-Elemente als auch deren 'a'-Elemente das Hintergrundbild?

Und es sollten nicht alle Menüpunkte ihr eigenes Hintergrundbild haben, sondern alle dasselbe Hintergrundbild (mit jeweils anderen 'background-position'-Werten). Das spart Ladezeit und Speicherbedarf. [PERFORMANCE-BP1]

Problem. Menüeintrag 136px breit. Bilder sind manchmal breiter Manchmal schmaler.

Wo ist das Problem, jedem Menüpunkt eine eigene Breite zu geben?

Qapla'

[MudGuard]

Hi,

Die Eigenschaft 'list-style-type' ist für 'div'-Elemente wirkungslos.

falsch - DU solltest das doch besser wissen, Beispiel:
 <div style="list-style-type: square; display:list-item; margin-left:2em;">bla</div>

(margin, um den marker sichtbar zu machen)

list-style-type ist wirkungslos für Elemente, die NICHT display: list-item haben.

Sie wird auch nicht von 'div[@id="navcontainer"]' an 'ul[@id="navlist"]' vererbt.

Das liegt "nur" daran, daß die Browser für ul einen von inherit abweichenden Wert für list-style-type für ul eingestellt haben.
Mit ul { list-style-type:inherit; } würde der Wert vom div auf die li durchschlagen.

cu,
Andreas

[Gunnar Bittersmann]

@@MudGuard:

nuqneH

falsch - DU solltest das doch besser wissen […]
list-style-type ist wirkungslos für Elemente, die NICHT display: list-item haben.

Touché!

Qapla'

[fastix®]

Moin!

Was mach ich?

Die notwendige Breite aus dem längsten anzuzeigenden Menüeintrag (Anzahl der Zeichen/0.7 + padding-left + padding-right) berechnen. Alle Maßangaben in em ...

MFFG (Mit freundlich- friedfertigem Grinsen)

fastix

--
Des fastix kleines CMS

MFFG (Mit freundlich- friedfertigem Grinsen)

fastix

[Gunnar Bittersmann]

@@fastix®:

nuqneH

Die notwendige Breite aus dem längsten anzuzeigenden Menüeintrag (Anzahl der Zeichen/0.7 + padding-left + padding-right) berechnen.

Wie kommst du auf diese Hausnummer?

Aus der Anzahl der Zeichen auf die Breite zu schließen, kann nicht gutgehen.

Qapla'

[fastix®]

Moin!

(Anzahl der Zeichen/0.7 + padding-left + padding-right)
Wie kommst du auf diese Hausnummer?

Ist ein guter Erfahrungswert.

Ich sehe es gerade: Es muss

Breite = Anzahl der Zeichen * 0.7em + padding-left + padding-right

lauten.

MFFG (Mit freundlich- friedfertigem Grinsen)

fastix

[Gunnar Bittersmann]

@@fastix®:

nuqneH

Wie kommst du auf diese Hausnummer?
Ist ein guter Erfahrungswert.

Für welche Sprache?

Der Wert kann eventuell passen, aber auch ziemlich daneben liegen.

Qapla'

[fastix®]

Moin!

Für welche Sprache?

Deutsch, englisch, also alles was eine Mischung lateinischer Buchstaben benutzt.

Für chinesisch, koranisch, japanisch, ... oder Sprachen die ausschließlich 'i' und 'l' oder alternativ 'M' und 'H' verwenden kann man den Wert ja anpassen. Die Sprache ist schließlich bekannt - oder?

Außerdem ist niemand daran gehindert den Faktor an seine Gegebenheiten (z.B. extreme Schriften, fette, kursive Schriften) anzupassen, eventuell auch nachträglich zu optimieren.

Nur ganz gewissenhafte verwenden eine Datenbank in der die relative Breite eines jeden Zeichens in einer jeden Schriftart und Stärke verzeichnet ist, lesen dies für jeden benötigten Buchstabe aus und addieren dann sehr sorgfältig. Zuvor wird natürlich mit Javascript ermittelt welche Schriftarten auf dem Client zur Verfügung stehen und ob es wirklich die originalen sind ... wenn sich dann nach dem 75. hin und her User-Agent und Server über alle Parameter einig sind, der Benutzer seinen Administrator und seinen Budgetverantwortlichen von der Notwendigkeit der Installation weiterer 5 Schriftarten für Betrag € xx.xx überzeugt hat (und dies auch geschehen ist) wird dann neu abgerufen und nach dem Restart des Einigungsprozesses (Cookies inzwischen nicht mehr gültig) wird die Seite auf dem Server tatsächlich erzeugt. Dass das Ausliefern der tatsächlichen Seite dann knappe 200 Sekunden dauert ist ja nicht so schlimm wie wenn rechts neben einem Menüpunkt ein Pixel zu viel Platz ist.

Ohnehin dürfte einer möglichen Überlastung des Servers vorgebeugt werden, weil Benutzer, die diese Seite nicht UNBEDINGT sehen müssen, diese nie wieder abrufen. Das spart Traffic und ist selbstredend sehr viel mehr wirtschaftlich als eine möglichst einfache und brauchbare Lösung zu suchen.

Moral von der Geschicht: Kompromisse lohnen nicht!

MFFG (Mit freundlich- friedfertigem Grinsen)

fastix

[Gunnar Bittersmann]

@@fastix®:

nuqneH

Für welche Sprache?
Deutsch, englisch, also alles was eine Mischung lateinischer Buchstaben benutzt.

Jede der Sprachen dürfte eine andere Mischung der Buchstaben ausweisen. Im Englischen bspw. kommt 'y' weitaus häufiger vor als im Deutschen.

Die Sprache ist schließlich bekannt - oder?

Selbst wenn … Die Wörter "warum" und "eilig" bestehen beide aus 5 Buchstaben; erstes benötigt aber (bei Proportionalschriften) wesentlich mehr Platz als zweites:
[latex]\text{warum}[/latex]
[latex]\text{eilig}[/latex]

Der Schluss von Zeichenanzahl auf Platzbedarf ist ein Trugschluss.

Nur ganz gewissenhafte verwenden eine Datenbank in der die relative Breite eines jeden Zeichens in einer jeden Schriftart und Stärke verzeichnet ist, lesen dies für jeden benötigten Buchstabe aus und addieren dann sehr sorgfältig.

Selbst würde nicht helfen: 'Tiel' benötigt mehr Platz als 'Teil' (wegen Unterschneidung):
[latex]\text{Tiel}[/latex]
[latex]\text{Teil}[/latex]

Qapla'

[JürgenB]

Hallo fastix®,

Nur ganz gewissenhafte ...

nein. Die schreiben den Text in ein unsichtbares Element und ermitteln dann seine Größe.

Gruß, Jürgen