wie stylt man ein horizontales Menü mit Bildern oben und zentriert text?

Unter Berücksichtigung der folgenden Abbildung, die die 3 Staaten dieser Menü-Interaktion:

Wissen, dass:

1) Wir nicht ein Bild für alle horizontalen Menü, jedes Element (also jedes ul li a) sollen Ihre eigenen Bild;

2)
Hintergrundbild Positionierung begünstigt werden, da wird es besser sein, in Bezug auf cross-browser-Probleme;

3)
Der text auf diese Tasten (sollte) text und kein Bild;

Was wäre der beste Weg, dies zu erreichen ?
Ich brauche nur ein Auftakt hier.

Dank.

Update:

Hier ist ein test ohne swapping Bilder:
http://jsfiddle.net/Cq5JY/

Nur eine Seite anfordern... Wo bekomme ich die CSS für das Menü oben? Danke.
Schau mal hier: jsfiddle.net/bbjYC
Danke. Aber die genauen CSS/HTML für das Thema. Ich war auf der Suche durch und es sieht aus wie es ist ein kostenpflichtiges Menü-system.
Dieser war eine Sonderanfertigung. Kein Thema. 😉
Jede chance, Sie zu teilen? 🙂

InformationsquelleAutor MEM | 2011-12-27

1

Ganz einfach, Sie haben eine Art Dinkel Ihre Lösung selbst, denke ich.

Jedes Element in der navigation braucht 1 Bild mit drei Status für das rollover und die aktiven Staaten. Dann würden Sie verschieben, das Hintergrundbild mit CSS wie Sie bereits erwähnt abhängig von der Art und Weise Sie das layout der Bilder.

Die Sache, die macht das css ein bisschen schwierig (gut, Sie werden schriftlich eine angemessene Menge) ist der text Positionierung auf Tasten, fängt der text an vielen verschiedenen y-Koordinaten, dann Sie natürlich schreiben jedes von diesen in der CSS.

Ich würde das setup der nav mithilfe von code ähnlich der folgenden (ungetesteten) basiert auf einem separaten Bild für jeden button, der hat in der regular Status der Schaltfläche, unter dem überschlag und unter, dass der active-Status der Schaltfläche.
```
/* set up the button based on a width of 150px and 100px height */
ul li, ul li a{

    display:block;
    width:150px;
    height:100px;
    text-align:center;
    background-position:0 0;
}

ul li{

    float:left;
}

/* roll over - move the background image by the height of the button (100px) */
ul li a:hover{ background-position:0 -100px; }

/* active state - move the background image by twice height of the button (200px) */
ul li a.active, ul li a.active:hover{ background-position:0 -200px; }

/* define each button (background image and text position) */
ul li a.dashboard
{
    background-image:url(images/dashboard.png); /* define image url */
    padding-top:40px; /* position the text using a combination of padding /height) */
    height: 60px;

}
ul li a.products
{
    background-image:url(images/products.png); /* define image url */
    padding-top:30px; /* position the text using a combination of padding /height) */
    height: 70px;

}
...
```
Und dann hätte ich die html-ganz einfach:
```
<ul>
    <li><a href="dashboard.html" class="dashboard active">Dashboard</a></li>
    <li><a href="products.html" class="products">Products &amp; Services</a></li>
    ...
</ul>
```
Lassen Sie mich wissen, wenn Sie irgendwelche Fragen haben, habe ich nicht wirklich getestet, der code aber das ist meine Allgemeine Herangehensweise an die meisten html - /css-basierte Navigations-ob horizontal oder vertikal (obwohl ich würde 1 großes Bild für alle rollover-Zustände für alle Tasten).
- Vielen Dank! Ich werde versuchen, ihm zu Folgen, aber bevor ich das Tue, lassen Sie mich bitten, etwas über die position von text: text wird in der Länge variieren, weil wir zulassen, mehrere übersetzungen. Indem dieser berücksichtigt, wie die padding-und margin-Arbeit zu diesem Fall ?
- Frage Nummer 2: 🙂 Sie sagte, dass: "obwohl ich würde 1 großes Bild für alle rollover-Zustände für alle Tasten" - wie soll das funktionieren, wenn der Benutzer wählt eine größere Schrift-Größe ist/Ihr browser ?
- Hmmm naja es ist ein bisschen schwieriger dann. Wenn Sie brauchen, dynamischer text, dann denke ich, würde sich die position von dem Bild? Wenn das der Fall ist, dann hätte ich nicht die Bilder als hintergrund Bilder als Sie sich nicht mehr bewegen können, die nach text-Größe/Länge....
- Die Bilder werden immer auf Mitte in Bezug auf eine gleiche Breite definiert. Nur der text soll sich ändern, wir müssen daher die Verwendung von text-align-center irgendwie... ich werde versuchen, etwas aus hier und Sie wissen lassen, wenn ich etwas gefunden nützlich. 🙂
- Wir verwenden eine leere Spanne für die Bilder, sondern, trotz, von, dass, sollte ziemlich gut funktionieren. Die Tatsache, dass wir die Verwendung von einem oder mehreren Bildern ist wirklich kein Problem hier, da sollten beide funktionieren gleichermaßen mit Flüssigkeit schwebte layouts. jsfiddle.net/bbjYC - ich habe diese css -, aber die meisten Kredite für diese Lösung gehen sollte, um Paul O 'B'.
- Hey wurden AWOL da das neue Jahr, wie Sie sind, Sie immer auf mit diesem, wird in der Lage sein, um eine ordnungsgemäße Aussehen morgen?
InformationsquelleAutor acSlater

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.