Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Ramka menu
Pozycjonowanie i Optymalizacja > Projektowanie stron > HTML i CSS
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ćwink.gif

Mam kod:
CODE
/* 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ć
CODE
-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ćsmile.gif
zielony_gremlinek
http://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:
http://www.bestinclass.com/blog/2008/css3-...nded-corners-ie

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

tu coś podobnego, też box http://www.456bereastreet.com/lab/teaser/one_image.html
http://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
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2012 Invision Power Services, Inc.