Autor |
Nachricht |
killy
Threadersteller
Dabei seit: 03.08.2006
Ort: HH
Alter: -
Geschlecht:
|
Verfasst Mi 04.06.2008 16:20
Titel dynamischer aufbau einer navigation..help wanted |
|
|
hi,
ich möchte mir eine horizontale navigation aufbauen mit folgender grafik für die einzelnen
menüpunkte:
+++++++++++++++++++++++++++
+ +
+ Kontakt +
+ +
+ +
+++++++++++++++++++++++++++
also vorne einen halbkreis in der mitte der text und am ende nochmal nen halbkreis.
das ganze soll so dynamisch aufgebaut sein, dass sich die grösse automatisch an den text anpasst.
und natürlich bei :hover soll sich die farbe des rahmens ändern.
bis jetzt hab ich im td ne background-image eingefügt der den halbkreis links und dann die fläche.
teil zwei ist eine grafik mit dem halbkreis rechts und zwar bei a rein.
nur td:hover klappt ja nicht bei ie6 und momentan weiss ich nichtmehr weiter. danke für hilfe!
|
|
|
|
|
choise
Dabei seit: 01.02.2007
Ort: Würzburg
Alter: 35
Geschlecht:
|
Verfasst Mi 04.06.2008 16:27
Titel
|
|
|
ich versteh zwar überhaupt nicht was du meinst,
aber dennoch glaube ich, dass es die lösung all deiner
probleme wäre, wenn du deine navigation mit undefinierten
listen aufbauen würdest.
|
|
|
|
|
Anzeige
|
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mi 04.06.2008 16:50
Titel
|
|
|
Code: | <ul>
<li><a href="#">Link</a></li>
</ul> |
Code: |
li {
background: url(deinKreis.gif) no-repeat;
}
li a {
background: url(x.gif) no-repeat;
padding-right: breite der grafik(x.gif) px;
}
li a:hover {
border eigenschaften oder was auch immer
} |
|
|
|
|
|
killy
Threadersteller
Dabei seit: 03.08.2006
Ort: HH
Alter: -
Geschlecht:
|
Verfasst Mi 04.06.2008 17:30
Titel
|
|
|
mal ein bild zur besseren veranschauung.
das sind die zwei grafiken um die es sich dreht.
die länge soll sich nach dem link anpassen, der darin verankert wird.
sprich menuepunkt 'kurzversion' ist kürzer als 'dasistdielangeversion'
vielleicht konnte ich damit weiterhelfen ^^
|
|
|
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mi 04.06.2008 18:46
Titel
|
|
|
Du teilst dass in zwei Grafiken, links den Teil mit dem Kreis und das Ende.
Code: | <a href="#"><span>Dein Link</span></a> |
Code: | a {
background: #eee url(grafik1);
padding-left: ...;
}
a:hover {
background: #333 / hintergrundposition ändern oder andere grafik laden, hover zustand;
}
a span {
background: url(grafik2);
}
a: hover span {
background: hintergrundposition ändern oder andere grafik laden, hover zustand;
} |
Was den Hover Effekt der Grafiken betrifft such mal nach CSS Sprites (hintergrundgrafik position verschieben).
Zuletzt bearbeitet von m am Mi 04.06.2008 18:50, insgesamt 1-mal bearbeitet
|
|
|
|
|
killy
Threadersteller
Dabei seit: 03.08.2006
Ort: HH
Alter: -
Geschlecht:
|
Verfasst Do 05.06.2008 11:40
Titel
|
|
|
danke m für die hilfe,
das klappt so nicht, oder ich verstehe etwas falsch!
grafik 1:
mit dem span lege ich ja grafik 2:
und setze diese grafik auf repeat.
dadurch lege ich ja diese grafik2 über die grafik1 und der halbkreis verschwindet.
irgendwie haut das nicht hin.
jemand nen tip?
|
|
|
|
|
killy
Threadersteller
Dabei seit: 03.08.2006
Ort: HH
Alter: -
Geschlecht:
|
Verfasst Do 05.06.2008 15:29
Titel
|
|
|
k, das ding ist durch.
das klappt nun soweit.
im a-tag den kreis rein
und im span dann einen laaaaangen part mit dem halbkreis.
background-position: right;
danke m!
|
|
|
|
|
|
|
|
Ähnliche Themen |
dynamische breite für navigation - aufbau tip?
dynamischer div-tag...
dynamischer Div mit Adminoberfläche in PHP
dynamischer bildbalken?
Dynamischer Mp3 Player
Dynamischer Hintergrund
|
|