Zaokrąglone rogi Opcje

[webdice]

Witam,

na początek troszkę objaśnienia. Chce zrobić menu które składa się z 3 obrazków, lewy, środkowy (który będzie powielany X razy) oraz prawy.

Niby nic trudnego przy zastosowaniu trzech divów, ale takie podejście przynajmniej jak dla mnie jest dość nieestetyczne. Najlepiej byłby zrobić to w znacznikch LI, ale tu pojawia się problem, jak nadać jednej klasie w CSS trzy różne tła. Można by nadać lewe tło w klasie LI, a prawe dla elementów A (linków), ale takie rozwiązanie również nie jest zbyt estetyczne, a poza tym co gdy w takim menu ma być tylko tekst, a nie link? Można również skorzystać z JavaScript, ale jak dla mnie jest to przerost formy nad treścią.

I tu moje pytanie, jak najprościej rozwiązać taki problem? Chyba najlepszym wyjściem byłby coś w stylu (background-left, background-right, ale tego nie ma).

P.S. Tekst w menu musi mieć zmienną szerokość.

Ten post edytował webdicepl 1.10.2007, 20:04:53

[Kreton]

Myślisz może o stałej wysokości czy zmiennej wysokości, ze stałą wysokością i płynną szerokościa nie ma problemów ( problemem jest brak elastycznosci przy zmianie rozmiaru czcionki przez użytkownika. Generalnie możesz wrzucić to w <span> jeżeli nie używasz linków.

W twoim wypadku nie trzeba ustawiać aż 3 teł, wystarczą tylko 2.

[mike]

Nifty Corners Cube i po sprawie.

[Kreton]

Podobno nie chce JavaScriptu, osobiście też poszedłbym na Nifty.

[mike]

JavaScript ma wyłączone max 5% użytkowników Internetu z czego większość z tych 5% to użytkownicy posiadający przeglądarki tekstowe, które i tak nie wyświetlą grafiki.
Jest to tak mała ilość że ie przekracza błędu statystycznego. Olej to.

[nevt]

A moze tak:
CSS:

Kod

ul.left {background: transparent url('left.png') no-repeat left;}
li.middle {background: transparent url('middle.png') repeat-x;}
  div.right {background: transparent url('right.png') no-repeat right;}

PHP:

[PHP] pobierz, plaintext 
<?php
echo '<div class="right"><ul class="left"><li class="middle"> .... </li></ul></div>';
?>
[PHP] pobierz, plaintext 

Oczywiście style jeszcze trzeba obudować odpowiednimi ustawieniami, żeby elementy <li> układały sie w poziomie, i zostały odpowiednie odstępy na początku i na końcu menu.

powinno zadziałać, pisałem z głowy, więc wybacz jeśli znajdziesz jakiegoś krzaka... chodziło mi o przekazanie idei.


pozdrawiam.

[Kreton]

Wcale nie musi stosować 3 obrazków.
Wystarczy, że zrobi pierwszy z lewą zaokrągloną storną i dużym środkiem, powiedzy obrazek ma 300px; drugi obrazek do prawe zaokrąglenie.
Obrazek 1 nie bedzie powtarzany albo będzie się coraz bardziej odkrywał w zależności od długości zawartośći elementu z tym tłem.

[webdice]

Nie do końca jestem przekonany do korzystania z JavaScript, ale jest to jak na dzień dzisiejszy najlepsze rozwiązanie, dzięki za propozycje.

Pozdrawiam.