[HTML][CSS]jak uzyskać taki efekt bez tabel Opcje

[john_doe]

Witam,

np. na stronie http://webmail.home.pl/webmail widzimy ramki z zaokrąglonymi rogami.
Teraz home to zmieniło ale poprzednio identiko efekt zrobili na tabelach.
Poproszę o jakieś wskazówki jak teraz robi się takie rzeczy ?

pozdro

[Poker]

Ja osobiście robię to tak: top + treść + stopka

top i stopka width i height stałe

w treści powtarzam tło osią-y


i mam prostą budowe

Kod

<div class="top"></div>
<div class="tresc"></div>
<div class="stopka"></div>

[john_doe]

no dobrze. Powiedzmy, że robię podobnie jednak jak załatwić na div`ach tą rameczkę z zaokrąglonymi rogami. Potem w to pakować treść czy cokolwiek innego to już luzik (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

[sadistic_son]

Musisz mieć 4 jpgi, każdy na narożnik.

[HTML] pobierz, plaintext 
<div id=calosc>
 
<div id=gora>
<img id=lewy_gorny src=lewy_gorny.jpg><img id=prawy_gorny src=prawy_gorny.jpg>
</div>
 
<div id=srodek>TRESC</div>
 
<div id=dol>
<img id=lewy_dolny src=lewy_dolny.jpg><img id=prawy_dolny src=prawy_dolny.jpg>
</div>
 
</div>
[HTML] pobierz, plaintext 

A w CSSie ustawiasz float:right; i float:left dla id=lewy_gorny,prawy,dolny itp.

Ten post edytował sadistic_son 12.07.2009, 21:49:24

[robos85]

http://www.methvin.com/jquery/jq-corner-demo.html

Jak dla mnie rozwiązanie szybkie i przyjemne:) I możesz to na 1 divie zrobić.

[Kildyt]

Ja osobiście robię to tak: top + treść + stopka

top i stopka width i height stałe

w treści powtarzam tło osią-y
i mam prostą budowe

Kod

<div class="top"></div>
<div class="tresc"></div>
<div class="stopka"></div>

Puste div-y nie są zbyt ładne.
Devnul (wielki szacun (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg) ) kiedyś podesłał mi ciekawe rozwiązanie problemu. Wystarczy wszystkie div-y ułożyć w postaci drzewa, czyli najpierw lewy-górny, później (w nim) prawy-górny, później lewy-dolny, później prawy-dolny i na końcu treść. Później w css wystarczy tylko poustawiać marginesy i właściwości dla tła. Wszystko wychodzi na prawdę dobrze. Wiem bo tak pociąłem mój ostatni design.

Kolejna możliwość to :before i :after, ale nie próbowałem tego w praktyce, no i kochane IE nie obsługuje tego.

Ostatnio zacząłem używać border-radius. Może źle robię, bo to jeszcze nie jest standard i w IE nie działa, ale kiedyś musi wejść ta bardzo pożyteczna rzecz (chyba wszystkie najpopularniejsze przeglądarki już to obsługują, tylko nie IE i Opera).

[Gryf]

Kod

no dobrze. Powiedzmy, że robię podobnie jednak jak załatwić na div`ach tą rameczkę z zaokrąglonymi rogami. Potem w to pakować treść czy cokolwiek innego to już luzik

wiele osób rozwiązuje ten problem przez pocięcie grafiki ramki na trzy części
- górne rogi
- środek boki
- dolne rogi
całość pakujesz do jednego pojemnika, środkowemu dajesz

Kod

background-repeat: repeat-y

i w nim umieszczasz treść.

[sadistic_son]

http://www.methvin.com/jquery/jq-corner-demo.html

Jak dla mnie rozwiązanie szybkie i przyjemne:) I możesz to na 1 divie zrobić.

efekty są fajne ale ogólnie wyglądają biedne. Nie da się tego zastosować do grafiki, żadnych gradientów itp.

[john_doe]

Gryf czy możesz zapodać zupełnie przykładowy kod?

[Poker]

ale niektórzy głupoty piszą dzielicie 1 boxa na 4 divy rogami i piszecie w 1 divie razem macie 5 divów? :|


jak Ci napisałem robisz tak :

Kod

<div class="top">tekst</div>
<div class="tresc">tekst</div>
<div class="stopka"></div>

i efekt masz taki : Tabelka z zaokrąglonymi rogami


Zobacz źródło masz tam cały css potrzebujesz tylko jpg w topie , w tresci który powtarzasz osią-y , i w stopce.



dla swojej strony robisz według własnych ustaleń w topie nie musi znajdować się tekst możesz ustawić np top wielkości 5px który zawiera oba górne rogi tak samo ze stopką.

Ten post edytował Poker 12.07.2009, 22:13:52

[Kildyt]

ale niektórzy głupoty piszą dzielicie 1 boxa na 4 divy rogami i piszecie w 1 divie razem macie 5 divów? :|
jak Ci napisałem robisz tak :

Kod

<div class="top">tekst</div>
<div class="tresc">tekst</div>
<div class="stopka"></div>

i efekt masz taki : Tabelka z zaokrąglonymi rogami
Zobacz źródło masz tam cały css potrzebujesz tylko jpg w topie , w tresci który powtarzasz osią-y , i w stopce.
dla swojej strony robisz według własnych ustaleń w topie nie musi znajdować się tekst możesz ustawić np top wielkości 5px który zawiera oba górne rogi tak samo ze stopką.

Nie skazuj użytkowników i serwera na ściąganie niepotrzebnych plików. Takie rozwiązania to chyba z tych kursów z logiem IE. Poza tym ostatni div jest pusty, a nie jest to zbyt ładne.

Ten post edytował Kildyt 12.07.2009, 22:32:38

[Poker]

Nie skazuj użytkowników i serwera na ściąganie niepotrzebnych plików. Takie rozwiązania to chyba z tych kursów z logiem IE. Poza tym ostatni div jest pusty, a nie jest to zbyt ładne.

No tak twoje rozwiązanie i ładowanie 4 plików img do każdego rogu napewno jest lepsze...

Może zamiast "NARAŻAĆ SERWER NA TAK OGROMNE OBCIĄŻENIA" niech każdy zrobi 1 iMG i wrzuci go w tło diva ;> ...

Zamiast ułatwić sobie pracę tylko ją sobie komplikujecie stopka jest pusta? to jest przykład używać możesz jak chcesz... chcesz to wypełnij tekstem nie chcesz? to zostaw tak jak podałem...

[Kildyt]

No tak twoje rozwiązanie i ładowanie 4 plików img do każdego rogu napewno jest lepsze...

A zakład, że jest lepsze? Nie dość, że możesz w szybki sposób zmienić rozmiar bloku, bez zbędnego manipulowania plikami to do tego takie rozwiązanie waży o wiele mniej niż twój plik.

[sadistic_son]

A zakład, że jest lepsze? Nie dość, że możesz w szybki sposób zmienić rozmiar bloku, bez zbędnego manipulowania plikami to do tego takie rozwiązanie waży o wiele mniej niż twój plik.

Pewnie, że tak. Narożniki maja klika pikseli w pionie i poziomie a caly obrazek kilkadziesiąt. No a co się stanie Poker jeśli jako tło ustawisz cały obrazek i dopiszesz więcej treści? Poker wstaw do TEGO ciąg np. 50 znaków bez spacji i bedzie overflow. A przy naszym rozwiązaniu cały box się po prostu powiększy.

Ten post edytował sadistic_son 12.07.2009, 22:53:10

[Poker]

to nie temat do pogawędek co lepsze co nie, ani do sprzeczania się.


Ja napisałem swój sposób Ty swój i po problemie.

Koniec off-topicu.

[sadistic_son]

To po co to napisałeś?!?

ale niektórzy głupoty piszą dzielicie 1 boxa na 4 divy rogami i piszecie w 1 divie razem macie 5 divów? :|

[Kildyt]

to nie temat do pogawędek co lepsze co nie, ani do sprzeczania się.
Ja napisałem swój sposób Ty swój i po problemie.

Koniec off-topicu.

Trzeba znaleźć tą granicę gdzie rozmowa staje się off-topem. IMHO tej granicy jeszcze nie przekroczyliśmy. Sprzeczamy się bo chcemy dosć do jak najlepszego rozwiązania problemu, a to jest sensowne dążenie do zakończenia topica.
A tak poza tym to sam zacząłem tą dyskusję. Jeżeli wiem, że moje rozwiązanie jest lepsze to walczę o nie.

A tak poza tym, to jeżeli ktoś uwielbia Microsoft zawsze może wykorzystać ich sposób. Tabelki i luz. (IMG:http://forum.php.pl/style_emoticons/default/biggrin.gif) I pomyśleć, że napisali to na oficjalnej stronie. Eh...

Edit: Sądzę również, że rozwiązywanie problemów na img-ach nie jest zbyt dobre, bo strona nie wygląda estetycznie podczas zaznaczania wszystkiego i roboty (np. Google bot images) musi niepotrzebnie ssać obrazki, które do niczego mu się nie przyda.

Ten post edytował Kildyt 12.07.2009, 22:58:41