Seite 1 von 1

w3c splitted navi buttons CSS-frage

Verfasst: Di 13. Dez 2005, 22:04
von mvf
hallo community

backrgoundimages mit css für die splitted navi zu generieren ist generell kein problem, für die veritkale mit fixer breite kann ich einen 'Button' mit z.b. abgeflachten kanten erstellen und einbinden. sofar so good

für die horizontale wird es aber komplizierter, da die breited es buttons dynamisch ist / abhängig vom kategorienamen. jetzt kann ich einen button in ps erstellen mit abgeflachten Kanten und dessen position mit top left no-repeat im css definieren bisi padding noch und dann passt es LINKS aber wie bekomme ich bei der dynamischen breite die rechte seite hin, also auch abgeflachte kante?

hoffe mich verständlich ausgedrückt zu haben?!

kann ich hier irgendwie auch 3 bildchen nebeneinander in einem css hinterlegen:
background:url(../upload/test/img1.jpg) no-repeat top left <und dann eines in der mitte und eines rechts>;
:?: :roll:

Verfasst: Di 13. Dez 2005, 22:15
von i-fekt
1. es geht nur ein Bild pro HTML Tag.

2. Poste den Quelltextausschnitt, anders kann man dir nicht helfen.

Verfasst: Di 13. Dez 2005, 22:29
von mvf
i-fekt hat geschrieben:1. es geht nur ein Bild pro HTML Tag.
merci wollte es einfach nur nicht wahr haben :(
i-fekt hat geschrieben:... anders kann man dir nicht helfen.
kk sorry dachte schon das ich mich wieder schwierig ausdrücke.
beispiel die besagte w3c spiltted navi
die erste ebene eins menüs wird horizontal ausgegeben
die zweite vertikal, hier kann ich aufgrund dessen das die breite immer gleich ist ein image einbinden:

Code: Alles auswählen

background:url(../upload/test/img1.jpg) no-repeat top left
dies ist ein button mit abgeflachten kanten.

back zur ersten ebene, diese wird horizontal dargestellt mitteld html template:

Code: Alles auswählen

<!-- BEGIN:BLOCK -->
	<a href="{HREF}" class="navitop_passive" title="{NAME}">{NAME}</a>
<!-- END:BLOCK -->
die klasse dazu:

Code: Alles auswählen

a.navitop_passive {
	padding-top:3px;
	padding-bottom:3px;
	padding-right:8px;
	padding-left:8px;
        font-size: 16px;
        background-color: white;
        color: #1E671E;
} 
der button hat also abhängig von der textlänge des kategorienamen
HOME vs ONLINESHOP eine 'dynamische' breite
solange ich eine frabe definiere ist alle ok denn das padding macht daraus feine rechteckige hintergründe.
ich kann auch ein bg-image einfügen was z.b. einen farbverlauf von oben nach unten hat.

möchte ich hier aber auch einen 'Button' mit 4 abgeflachten kanten, dann scheint mir dies problematisch

besipiel

die 'buttonleiste' hat ein(1) relativ grosse bg image, dass aufgrund der dynamischen breite eben nicht immer voll angezeigt wird, sozusagen abgeschnitten.

möchte ich nun aber wie gesagt je button 4 abgeflachte kanten, steh ich wie ochs vorm tor :(

nachtrag:

was ich benötige ist sozusagen ein bg image dass sich zusammensetzt aus z.b.

seiteLI(5px) mitte(repeat x) seiteRE(5px)

und das auch als bg damit hover, und anchor auf den ganzen 'button' greifen

Verfasst: Mi 14. Dez 2005, 08:41
von Dodger77
mvf hat geschrieben:was ich benötige ist sozusagen ein bg image dass sich zusammensetzt aus z.b.

seiteLI(5px) mitte(repeat x) seiteRE(5px)

und das auch als bg damit hover, und anchor auf den ganzen 'button' greifen
Das sieht sehr nach einem Einsatzgebiet von "Sliding doors" aus. Im Original auf alistapart.com, in deutscher Sprache gibt's das auch z.B. hier:

http://www.andreas-kalt.de/webdesign/tu ... unde-ecken