navi mit 3 bildern

Mahlzeit,

Zitat von cycorps

Das jeder Button einen eignen CSS-Abschnitt hat weiß ich. Du hast aber geschreiben, dass die height: (halbehöhe der Grafik) in Li soll. und da kann ich ja schlecht 100 verschiedene Breiten angeben

wenn ich LI die höhe 32px gebe, presst IE7 die Grafiken von 64px höhe in die 32px große LI.

das von mir eingestellte Beispiel funktioniert einwandfrei im FF, IE 6, IE 7, IE8, Opera und Safari.
Wenn du die angewendeten Techniken nicht verstehst weiss ich auch nicht weiter.
Tips, Links und Beispiele um dir das Verständnis zu erarbeiten habe ich jedenfalls genug an die Hand gegeben.

Hast du eine horizontale navi mit 100 versch. Menüpunkten?? Doch wohl nicht oder.

Gib doch mal einen Link damit man sehen kann, was du bisher versucht hast.

Ansonsten drehen wir uns doch hier nur im Kreis. ;-)

Zitat von cycorps

Link hab ich noch nicht, seite ist noch nicht online:

dann bau einen lauffähigen Testcase und stell den hier rein. ;)

Mit den paar CSS-Anweisungen kann ich nicht soviel anfangen, da fehlt der zugehörige XHTML-Code.

Was ich sehe schaut imho etwas suboptimal aus.

Bin ganz bei Koslowski. Testcase bringts.

Anm. am Rande: Wenn Du gleiche Parameter für unterschiedliche IDs hast, überleg einmal folgendes:

Zitat

#menu img {position: blabla}
ODER
#menu img.fraktion, #menu img termine, #menu bla {position: blabla}
ODER STATT (Pseudo)IDs KLASSEN
#menu img.menuklasse {position: blabla}

Du ersparst Dir so eine Menge unnötigen Code. Was ich übrigens mit Pseudoklassen meine: Du vergibst einmalige Klassen, also für jeden Menüpunkt eine... (hab jetzt nicht alles gelesen). Das entspricht von der Nutzung her IDs. Nur reicht eigentlich eine Klasse für alle Menüpunkte, die gleiches Verhalten haben. Wenn Du trotzdem wie von Koslowski vorgeschlagen IDs verwendest, kannt Du ja auch zusätzlich eine Klasse an die Menüpunkte vergeben, die Du bei allen anhängst aber nur einmal definierst.

Hi,

die Seite kann man im IE 6/7/8, Opera und Safari wohl so nicht verwenden.

float:left und overflow:hidden; für li halte ich für eine ausgesprochen unglückliche Kombination.

Beide erzeugen einen "Block Formatting Kontext", nur sind die darstellerischen Auswirkungen der Overflow-Eigenschaft oft unkalkulierbar, weil sich die Spezifikation auch nicht so eindeutig dazu äußert, wie sich Elemente im Zusammenhang mit dieser Eigenschaft denn nun anordnen sollen.

Wie schon gesagt deine gewählte Methode das Menü darzustellen ist imho unbrauchbar.

Die Menübilder haben im Markup nix zu suchen, wobei ich mich frage wieso du überhaupt ein grafisches Menü brauchst.

Schreib halt Großbuchstaben in den Linktext und mach das mit background-color. Dann legst du Menschen mit körperlichen Einschränkungen auch nicht soviel Steine in den Weg, wie mit deiner Methode. ;)

Ich habe dir jedenfalls alle notwendigen Infos an die Hand gegeben, damit du dein Problem lösen kannst, umsetzen mußt du es schon selber. ;)

Gruß
koslowski

Nachdem sich Koslowski so gut darum gekümmert hat, schreib ich Dir nur noch ein paar Ergänzungen, die mir so aufgefallen sind.

1) Beim Menü würde ich schon alle Link auch als Text einfügen, dafür aber text-intend: -900% und font-size: 0px; vergeben. Somit haben auch Menschen mit Einschränkungen Zugriff darauf.
2) für den div #rahmen würde ich auch 814px; wählen, damit es dem Inhalt gleich ist und die Seite wirklich zentriert sitzt (also statt 802px;)

Solltest vielleicht auch noch die Kleinigkeiten Zwecks Validierung ausbessern (55 Fehlermeldungen): [Invalid] Markup Validation of http://gruene-lindlar.de/page/ - W3C Markup Validator

Dir fehlen zB ein paar /> Endungen (statt nur ">")...

Sonst schaut´s schon ziemlich sauber aus.

Ps.: Koslowski hat in einer Hinsicht schon recht: Der schwarz-transparente Rahmen ist faktisch unsichtbar und kann außerdem über css gelöst werden. Einfacher und zugänglicher wäre es bei dem was Du gerade umsetzen willst auf jeden mit seiner Variante.

Moin,

Zitat von cycorps

Ok, das Float:left kann ich mein ich auch wieder rausnehmen, weil ichs über die margin-left: links orientiert hab.

Häh??? :shock:

Zitat von cycorps

Overflow hidden war im Beispiel bereits eingegeben.

Wenn etwas vorgegeben ist heißt das ja noch lange nicht das es auch gut ist. Wenn ich mir anschaue wie im Theme so rumgecodet wurde ist das imho sowieso nicht so ganz optimal.

Zitat von cycorps

Grafiken brauch ich, weil die Buttons einen 1px breiten transparent schwarzen border haben.

In deinem Fall brauchst du keine und wenn dann als HG-Grafik:

Zitat von koslowski

Die Grafiken haben ja keinen Bezug zum Inhalt und gehören deshalb nicht ins Markup.

[ot]Irgendwie klasse wenn man sich selbst recyceln kann. :mrgreen: [/ot]

Zitat von cycorps

ohne float:left werden die Buttons untereinander angzeigt. Ohne overflow:hidden die volle grafik und nicht nur der jeweils aktive ausschnitt.

Natürlich werden sie das.
li ist ein Blockelement und das macht einen eigenen Absatz. Du kennst doch den Unterschied zwischen Block,- und Inline-Element, bzw. was sie im Einzelnen bewirken, oder?

Auf jeden Fall ignorierst du die Tips und Links die man dir gibt, bzw. setzt dich offensichtlich damit nicht auseinander, um sie zu verstehen.
Entweder kannst du es nicht weil dir die Grundlagen fehlen oder du willst nicht weil du beratungsresistent bist.

Im ersteren Fall solltest du das unbedingt nachholen, bevor du dich in Webdesign versuchst.
Nur weil WP vieles für dich automatisch erledigt kommt man um grundlegende XHTML/CSS-Kenntnisse trotzdem nicht herum. ;-)

Im zweiteren Fall, naja, kann man halt nix machen. :-|

Hi,

<div id="navigation">
 <ul id="menu">
<li id="navi01"><a href="#"><span></span></a></li>
<li id="navi02"><a href="#"><span></span></a></li>
<li id="navi03"><a href="#"><span></span></a></li>
<li id="navi04"><a href="#"><span></span></a></li>
<li id="navi05"><a href="#"><span></span></a></li>
<li id="navi06"><a href="#"><span></span></a></li>
<li id="navi07"><a href="#"><span></span></a></li>
</ul>
</div>

Das steht bei dir im Quelltext. Der Linktext fehlt noch.
Dann sähe es so aus:

<div id="navigation">
 <ul id="menu">
<li id="navi01"><a href="#"><span></span>Home</a></li>
<li id="navi02"><a href="#"><span></span>Linktext</a></li>
<li id="navi03"><a href="#"><span></span>Linktext</a></li>
<li id="navi04"><a href="#"><span></span>Linktext</a></li>
<li id="navi05"><a href="#"><span></span>Linktext</a></li>
<li id="navi06"><a href="#"><span></span>Linktext</a></li>
<li id="navi07"><a href="#"><span></span>Linktext</a></li>
</ul>
</div>

Für li schreibst du erstmal ganz allgemein:

#navigation li  {
    float:left;
    list-style-type:none;
}

dann das Spezielle für jeden li extra:

#navigation #navi01  {
    width: 60px;
}
#navigation #navi02  {
    width: 80px;
}
#navigation #navi03  {
    width: 90px;
}

Da du für jedes li eine id vergeben hast kannst du die auch extra ansprechen, um deine individuelle Breite zu vergeben. Da ich deine Breiten nicht kenne habe ich einfach beispielhafte Zahlen genommen.

Für das span wird dann einfach width:100% und die exakte Höhe genommen, halt wie in meinem Beispiel. ;-)

Gruß
koslowski

Hi,

Zitat von cycorps

Allerdings sieht man druch den 2px transparenten border der Grafiken die Linktexte.

den Rahmen sieht man eh nicht, wenn man nicht drauf hingewiesen wird, das da einer ist.
Das Beste wäre imho auf Transparenz im Rahmen zu verzichten. ;-)