| Autor |
Nachricht |
KaffeePaule
Threadersteller
Dabei seit: 02.02.2010
Ort: Berlin
Alter: -
Geschlecht: 
|
Verfasst Di 02.02.2010 09:01
Titel CSS-Navi-Link besteht aus mehreren jpgs |
  |
|
Hallo an Forum und User,
Ich wäre Euch sehr dankbar, wenn Ihr mir nen Tip zu meinem Problem geben könntet:
Ich würde gern eine horizontale CSS-Navigation bauen, bei der jeder Link aus 3 Background-jpgs besteht:
Einen jeweils einleitenden und abschließenden schmalen Streifen mit norepeat, dazwischen einen 1px-Streifen, der mittels repeat horizontal auf die Gesamtlänge des Links gestreckt wird.
Auf diese Navigation soll später ein hover-Effekt angewendet werden, aber das nur als Erklärung für die Umstände.
Meine Frage(n) also:
Geht das?
Bzw. wenn ja, wie strukturiere ich das html?
Zu letzterem habe ich die Vermutung, daß ich drei Inline-Elemente im Innern des a-Tags anlegen muß, und die alle mit id-Kennzeichnung.
Bei meinen bisherigen Versuchen ist da allerdings nichts Gutes bei rumgekommen.
Besten Dank vorweg für alle Mühe,
bitte auch für Verständnis, daß ich kein Script poste, denn das macht alles nur noch schlimmer.
|
|
| |
  |
 |
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht:
|
Verfasst Di 02.02.2010 10:35
Titel
|
|
|
zeig mal wie es aussehen soll.
das geht für gewöhnlich auch mit einem bild.
|
|
| |
|
|
|
Anzeige
|
|
|
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Di 02.02.2010 10:39
Titel Re: CSS-Navi-Link besteht aus mehreren jpgs |
|
|
| KaffeePaule hat geschrieben: | Meine Frage(n) also:
Geht das?
Bzw. wenn ja, wie strukturiere ich das html?
|
Ja das geht.
So zB
| Code: |
<ul>
<li><span class="bar1"> </span><a class="bar2" href="#">foo</a><span class="bar3"> </span></li>
<li><span class="bar1"> </span><a class="bar2" href="#">foo2</a><span class="bar3"> </span></li>
</ul> |
Statt <span> nimmt Stu Nicholls immer <b>. Da das nicht so valide ist, habe ich das Bsp mit <span> aufegezeigt.
|
|
| |
|
|
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht:
|
Verfasst Di 02.02.2010 10:57
Titel Re: CSS-Navi-Link besteht aus mehreren jpgs |
|
|
| Kash hat geschrieben: | | KaffeePaule hat geschrieben: | Meine Frage(n) also:
Geht das?
Bzw. wenn ja, wie strukturiere ich das html?
|
Ja das geht.
So zB
| Code: |
<ul>
<li><span class="bar1"> </span><a class="bar2" href="#">foo</a><span class="bar3"> </span></li>
<li><span class="bar1"> </span><a class="bar2" href="#">foo2</a><span class="bar3"> </span></li>
</ul> |
Statt <span> nimmt Stu Nicholls immer <b>. Da das nicht so valide ist, habe ich das Bsp mit <span> aufegezeigt. |
das sieht aber ziemlich bloated aus. je nach aussehen braucht man da für gewöhnlich keine weiteren hilfscontainer.
|
|
| |
|
|
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Di 02.02.2010 11:09
Titel Re: CSS-Navi-Link besteht aus mehreren jpgs |
|
|
| sahnemuh hat geschrieben: | | Kash hat geschrieben: | | KaffeePaule hat geschrieben: | Meine Frage(n) also:
Geht das?
Bzw. wenn ja, wie strukturiere ich das html?
|
Ja das geht.
So zB
| Code: |
<ul>
<li><span class="bar1"> </span><a class="bar2" href="#">foo</a><span class="bar3"> </span></li>
<li><span class="bar1"> </span><a class="bar2" href="#">foo2</a><span class="bar3"> </span></li>
</ul> |
Statt <span> nimmt Stu Nicholls immer <b>. Da das nicht so valide ist, habe ich das Bsp mit <span> aufegezeigt. |
das sieht aber ziemlich bloated aus. je nach aussehen braucht man da für gewöhnlich keine weiteren hilfscontainer. |
Anhand dem was er geschrieben hatte kann es so ja ausreichend sein. Dann wäre es auch nicht arg aufgebläht.
Kommt natürlich an die Anforderung an, am besten wäre wohl der TE zeigt uns einen Screen der Navi.
|
|
| |
|
|
KaffeePaule
Threadersteller
Dabei seit: 02.02.2010
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Di 02.02.2010 13:12
Titel
|
|
|
Die Antworten sind absolut hilfreich, mehr habe ich mir gar nicht erwartet.
Aber ich kann ja trotzdem noch ein Bild hochladen:
Im Endeffekt kann man den Trenner auch als einzelnes jpg machen, aber dann muß der erste und letzte Link in der Reihe ohne Anschnitt bzw. Abschluß auskommen. Und mit hover wär dann auch sone Sache.
Wenn ich allerdings Leerzeilen einbaue, wie lasse ich die nebeneinanderstehenden Links dann paßgenau aneinander abschließen?
Ich denke, spätestens jetzt ist es raus: ich bin totaler Nube, hab mir gerade video2brain für css reingezogen
Dankedanke
|
|
| |
|
|
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Di 02.02.2010 14:12
Titel
|
|
|
Dafür brauchst Du tatsächlich keine Hilfscontainer.
Den Verlauf gibst du bspweise <li> und den 'Trenner' <a>
| Code: |
li {
background:#BDA672 url(verlauf.png) bottom left repeat-x;
}
li a {
background:transparent url(trenner.jpg) top right no-repeat;
}
li a:last-child {
background:none;
}
|
| Code: | <ul>
<li><a href="#">foo</a></li>
<li><a href="#">foo2</a></li>
</ul> |
|
|
| |
|
|
KaffeePaule
Threadersteller
Dabei seit: 02.02.2010
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Di 02.02.2010 20:55
Titel
|
|
|
Da hab ich mich doof ausgedrückt: An sich könnte man das mit a und li machen, allerdings kann man dann keinen hover-Effekt auf die background-jpg erzeugen. Demnach doch mit Containern...
Ich denke aber, daß ich ausreichend Info habe, um das ganze zu reißen.
Deswegen nochmal recht schönen Dank dafür, äußerst lehrreich.
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
automatisch aus mehreren jpgs eine psd erstellen
[Retusche]Besteht da eine Chance?
Safari Browser besteht als erster Acid2 Test
Mein (endlich) fertiges ePUB besteht Validierung nicht
Stapelverarbeitung in Photoshop nur für JPGs
Jpgs schneiden in Illustrator
|
|
Willkommen auf dem Portal für Mediengestalter
