[CSS] 'boczki' po najechaniu w menu

[menfis]

[n0xx]

spakuj mi to menu w paczkę i wyślij na jakiś serwer - ogarnę ci to

[Kartofelek]

Podstawowa technika w cięciu: position:relative + position:absolute + left + right
LI : position:relative;
Jeden bok to span position:absolute + left:0; top:0 + reszta stylowania
Drugi bok to span position:absolute + right:0; top:0 + reszta stylowania

Równie dobrze możesz:
li:before {.....}
li:after {....}

ale tego starsze IE nie łykną.

[n0xx]

przecież to co podałeś jest bez sensu, jemu chodzi o spacery pomiędzy menu a nie lewy i prawy kraniec menu.
Wiem jak to zrobić ale nie chce mi się specjalnie menu robić żeby mu css'a podać.

[menfis]

"ale nie mozna tak zrobic wlasnie o to chodzi
bo tłem musi byc to co jest teraz
a nie mozna dawac 2 teł do jednego diva"

Tak mi powiedział mój magik. Chce mu pomóc, bo menu zupełnie inaczej wygląda z tymi 'boczkami', jednak póki co chyba nie da kodu, bo to spory projekt za który ma dostać wynagrodzenie

Dzięki wam za szybką odpowiedź, której nie dostałem na innym forum, mimo setek wyświetleń. n0xxie jeżeli masz gdzieś kawałek kodu który by udowodnił, że jest to wykonalne byłbym baardzo wdzięczny.

pozdrawiam
menfis

[n0xx]

twojemu koderowi przydała by się odrobina kreatywności i trochę nauki

trzymaj
http://www.speedyshare.com/file/a9VtS/menfis.rar

[menfis]

Wielkie dzięki, dam jutro znać jak to wyszło. Oczywiście + reputacja za pomoc. Myślę, że chociaż w ten sposób mogę podziękować. Koder jest na prawde wporządku i zna się na rzeczy.

@Edit Mam kilka wątpliwości
1. u ciebie tło najechanego fragmentu jest jakby z 2 fragmentów - lewy (długi) hover.jpg i prawy cien_r.jpg

Kod:

}
ul li a:hover{
    background:url(hover.jpg) left top no-repeat;

}
ul li:hover {
    background:url(cien_r.jpg) right top no-repeat;
    padding-right:7px;

mozna zrobic tak aby byl po lewej stronie cien_l, na srodku bg_najechany jak z mojego obrazka, który się 'kopiuje' oraz po prawej stronie cien_r?

Troche przerobiłem kod

Kod:

<style type="text/css">
ul {
    margin:0;
    padding:0;
    list-style:none;
    height:73px;
}
ul li {
    display:block;
    float:left;
    height:73px;
}
ul li a {
    display:block;
    background:url(menu.jpg) left top repeat-x;
    height:43px;
    color:#FFF;
    text-decoration:none;
    padding:33px 20px 0 20px;
}
ul li a:hover{
    background:url(cien_l.jpg) left top no-repeat;

}
ul li a:hover {
    background:url(wyp.jpg) 10 center reapeat-x;
    

}
ul li:hover {
    background:url(cien_r.jpg) right top no-repeat;
    padding-right:7px;

}
ul li:hover a {
    padding-right:13px;    
}
</style>
</head>

Mam teraz po 2 stronach cienie, ale nie pokazuje mi wypełnienia po środku. Oczywiście dorobiłem plik wyp.jpg który powinien na środu się rozchodzić.

[Kartofelek]

n0xx:
"przecież to co podałeś jest bez sensu, jemu chodzi o spacery pomiędzy menu a nie lewy i prawy kraniec menu."
Przeczytaj jeszcze raz mój post ze zrozumieniem i wtedy komentuj. Proszę o rozwagę

Dla nie zorientowanych: 2 linijka mojego kodu. Position:relative spowoduje że boki ustawią się po bokach LI a nie listy.

I jeżeli twoje rozwiązanie działa w tym konkretnym przypadku, moje często uratuje ci tyłek. Zaręczam cię o tym

[n0xx]

ale nadal nie wiem jak chcesz rozwiązać opcję z cieniem w Twoim przypadku Kartofelek.
Chcesz wrzucac divy albo spany do li ?

menfis inaczej tego nie zrobisz, chyba, że chcesz wrzucać divy albo span do menu, jak nie chcesz to to co podalem jest jedynym rozwiazaniem

"mozna zrobic tak aby byl po lewej stronie cien_l, na srodku bg_najechany jak z mojego obrazka, który się 'kopiuje' oraz po prawej stronie cien_r?"
Tak można wciskając divy albo spany do li, ale to takie mało eleganckie

[Kartofelek]

li:before {.....}
li:after {....}

rozumiesz już?

LI {position:relative;}
LI:before {content:''; width:....px; height:...px; display:block; background:url(lewy_cien.png) no-repeat; position:Absolute; top:0; left:0;}

itp.