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

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

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

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.

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ć.

Puste div-y nie są zbyt ładne.
Devnul (wielki szacun ) 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).

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

i w nim umieszczasz treść.

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

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

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 :



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.

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...

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.

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.

To po co to napisałeś?!?

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. 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.