Ramka menu

[wojtekk]

Witam,

Jestem kompletnym zieleńcem więc proszę o odrobinę wyrozumiałości;)

Chciałbym pod menu dać grafikę, taka prosta ramka. Chodzi mi o to by góra była zaokrąglona, dół również a środek proste kreski z repeat-y.

Nie wiem jak nazwać mój problem i nie mogę znaleźć rozwiązania.

Potrafię na sztywno dać całą ramkę jednak chcę aby w razie dodania kolejnych pozycji menu ramka się sama poszerzała. W jaki sposób to zrobić?

Mam nadzieje, że zrozumiecie o co mi chodzi.

Z góry dzięki za pomoc.

[tomek13]

google

[wojtekk]

łatwo powiedzieć

Mam kod:

/* LEFT COLUMN STYLES */
#column{float:left;width:215px;padding:20px 0;}
#column .type{padding:14px 0 0;background:inherit;color:#970000;font:normal 1.75em serif;}
#menu3, #menu4{padding:0 20px;}

Rozumie, że wystarczy wstawić

-moz-border-radius:x

czyli wyglądałoby to tak:

#column{float:left;width:215px;padding:20px 0;-moz-border-radius:x;}

Niestety nie chce mi to zadziałać, inny problem jest taki, że z tego co wyczytałem takie coś nie działa np w ie.

W jaki sposób zrobić to "obrazkowo", da się to zrobić w css?

ale nie ma tego zlego co by na dobre nie wyszło... teraz wiem jak nazwać to co chce zrobić współpracuje;)

no i udało się zrobić

[zielony_gremlinek]

https://www.bestinclass.com/blog/samples/cs...ie/example.html

Kod jest w przykładzie, ale jak się zamotasz, to masz artykuł jak to zrobić łopatologicznie tutaj:

https://www.bestinclass.com/blog/2008/css3-...nded-corners-ie

a co do Twojego "udało się" to lepiej sprawdź to na IE albo opera

tu coś podobnego, też box https://www.456bereastreet.com/lab/teaser/one_image.html

https://www.webdesignerwall.com/tutorials/c...expandable-box/

[yavaho]

<div>

<ul>

<li><a href="">menu</a></li>

<li><a href="">menu</a></li>

<li><a href="">menu</a></li>

</ul>

</div>

w <div> wstawiasz górną część tła i ustawiasz jako: top left no-repeat

w <ul> wstawiasz dolną część tła i ustawiasz jako: bottom left no-repeat

w <a> wstawiasz środkowa część tła. Ustawiając <a> jako display:block; i jakiś width o szerokosci tła

Potem trzeba to jakoś wszystko wyrównać nadając odpowiedni padding

dla <div> padding-top: tyle px ile ma górne tło

dla <ul> padding-bottom: tyle px ile ma dolne tło

dla <a> jeżeli nadasz jakis padding, to o tyle musisz zmiejszyć jego width

dla <ul> i <li> boczne margin i padding trzeba ustawic na 0