Menue mit (2) Hintergrundbilder

Wie verwendet man Templates oder erstellt Navigationen und passt diese an.

Menue mit (2) Hintergrundbilder

Beitragvon stuttgarter » 20. Mär 2010, 16:56

[quote="stuttgarter"]Hallo

Frage zum Menue, Button sollte bei hover und bei active wie in dem Bild ersichtlich aussehen... ( tut er aber nicht mit meinem Code )
Da der Button links und rechts abgerundete "ecken" hat, und sich aber bei einem langen link in der Breite anpassen sollte, müsste der Button aus 2 .gif bestehen... ? oder ??

Bild

wie muss ich meinen Code anpassen?

..........................

#navigation {

float: left;
width:100%;
}
#navigation ul.rex-navi1 {
margin: 0px;
padding:0px;
}
#navigation ul.rex-navi1 li {
display: inline;
}

#navigation ul.rex-navi1 a,
#navigation ul.rex-navi1 a:link,
#navigation ul.rex-navi1 a:visited {
float: left;
color: #fff;
padding: 5px 20px 5px 30px;
text-decoration: none;
text-align: center;
font-weight:normal;
background:transparent url(_button_links.gif) no-repeat top left ;
border:none;
}
#navigation ul.rex-navi1 a:hover {
color: #666;
background:transparent url(_button_rechts.gif) no-repeat scroll top right ;
}

#navigation ul.rex-navi1 li a.active,
#navigation ul.rex-navi1 li a.active:link {
color: #666;
background:transparent url(_button_rechts.gif) no-repeat scroll top right ;
}

#navigation ul.rex-navi1 li a.rex-active {
color: #666;
background:transparent url(_button_rechts.gif) no-repeat scroll top right ;
}

#navigation ul.rex-navi1 li a.rex-current {
color: #666;
background:transparent url(_button_rechts.gif) no-repeat scroll top right ;
}

..........................
stuttgarter
 
Beiträge: 224
Registriert: 18. Feb 2005, 14:00
Wohnort: stuttgart

Beitragvon anita » 21. Mär 2010, 12:17

hallo,

ich würde die runden Ecken mit JQuery machen. Das passt sich dann automatisch der Breite an und Du brauchst nicht mehrere Grafiken.
Gruß Anita

javanita engineering, immer eine zündende Idee
http://www.javanita.com
Benutzeravatar
anita
 
Beiträge: 578
Registriert: 25. Jan 2007, 10:25
Wohnort: Finsterwalde

Beitragvon Richard.Laing » 21. Mär 2010, 12:22

dazu gibt es auch schon ein addon von xong...

http://www.redaxo.de/180-0-addon-details.html?addon_id=574

gruß richy
REXvideo Videotutorials für Redaxo www.REXvideo.de
Webseite www.on-laing.de smokezig.de www.smokezig.de
Benutzeravatar
Richard.Laing
 
Beiträge: 2119
Registriert: 28. Aug 2005, 00:55
Wohnort: Brühl / Rheinland

Beitragvon stuttgarter » 21. Mär 2010, 14:25

Vielen Dank für die Antworten!

Link zu mehr Infos im Forum ausserdem hier:
http://forum.redaxo.de/ftopic12830.html


Habe mal das Addons installiert und lediglich in meine css des Menues folgendes eingebunden...

/* Do rounding (native in Firefox and Safari) */
-webkit-border-radius: 1px;
-moz-border-radius: 5px;
background-color:#cc0000;


Funktioniert ! jedoch benötige ich es nicht soo...


Ich dachte da eher an runde Ecken nur oben in dem button, ausserdem an einen Verlauf ( wie das obige Bild...)

Das geht dann wohl eher nicht ?
stuttgarter
 
Beiträge: 224
Registriert: 18. Feb 2005, 14:00
Wohnort: stuttgart

Beitragvon Richard.Laing » 21. Mär 2010, 14:44

hi doch sollte gehen...
schau mal hier:

http://www.css3.info/preview/rounded-border/

und den verlauf dann in den hintergrund

gruß richy

PS: wenn du das ohne jquerry machst geht es nicht im ie soweit ich das weiss
REXvideo Videotutorials für Redaxo www.REXvideo.de
Webseite www.on-laing.de smokezig.de www.smokezig.de
Benutzeravatar
Richard.Laing
 
Beiträge: 2119
Registriert: 28. Aug 2005, 00:55
Wohnort: Brühl / Rheinland

Abgerundetes Menue / box

Beitragvon stuttgarter » 21. Mär 2010, 18:22

Hi danke auch für den link,,, geht allerdings nich im IE.. und was ich da mit j querry anpassen muss weiss ich so nich auf anhieb...

Bin langsam soweit das ich gifs mache, sind dann halt nicht in der breite"dynamisch"
stuttgarter
 
Beiträge: 224
Registriert: 18. Feb 2005, 14:00
Wohnort: stuttgart

Beitragvon anita » 21. Mär 2010, 19:00

hallo,

mit JQuery ist das garnicht so schwer; runde Echen nur oben und Verlauf kannst Du damit machen.

Hast Du schon mal gegoogelt? Es gibt jede Menge Beispiele im web

http://www.google.de/search?q=jquery+roundcorner+gradient&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:de:official&client=firefox-a

der IE 8 hat Probleme damit, aber im Kompatibilitätsmodus klappt's.
Gruß Anita

javanita engineering, immer eine zündende Idee
http://www.javanita.com
Benutzeravatar
anita
 
Beiträge: 578
Registriert: 25. Jan 2007, 10:25
Wohnort: Finsterwalde

Funzt nur bei Forefox

Beitragvon Andreas E » 25. Jul 2010, 14:27

stuttgarter hat geschrieben:Vielen Dank für die Antworten!

Link zu mehr Infos im Forum ausserdem hier:
http://forum.redaxo.de/ftopic12830.html


Habe mal das Addons installiert und lediglich in meine css des Menues folgendes eingebunden...

/* Do rounding (native in Firefox and Safari) */
-webkit-border-radius: 1px;
-moz-border-radius: 5px;
background-color:#cc0000;


Funktioniert ! jedoch benötige ich es nicht soo...


Ich dachte da eher an runde Ecken nur oben in dem button, ausserdem an einen Verlauf ( wie das obige Bild...)

Das geht dann wohl eher nicht ?


Hallo zusammen,
genauso habe ich es auch gemacht. Es werden allerdings nur im Firefox runde Ecken angezeigt. Base Tag ( wie in der Hilfe des Addon beschrieben ) ist eingebunden. Was fehlt mir da noch ?

Danke!

Grüße,
Andreas
Andreas E
 
Beiträge: 1
Registriert: 25. Jul 2010, 14:24


Zurück zu Templates/Navigationen [R4]

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast