Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Zaokrąglone rogi
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
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ść.
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:
  1. <?php
  2. echo '<div class="right"><ul class="left"><li class="middle"> .... </li></ul></div>';
  3. ?>


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.
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-2025 Invision Power Services, Inc.