Jak zrobić małym nakładem ładną ramkę dookoła tekstu w html ?

Zobacz podobny artukuł na temat atrakcyjnych ramek:

http://www.elider.pl/?nr=17

Wielu początkujących webmasterów ma kłopoty ze zrobieniem małej ramki wokół tekstu. Oto sposób użycia mało używanej ale atrakcyjnej graficznie instrukcji HTML o nazwie fieldset. Oto jak wygląda taka ramka:

Tytuł ramki Naszym celem jest ułatwienie pracy początkującym webmasterom. Cel to opisanie języków programowania w jak najłatwiejszy sposób. Staramy się opisywać instrukcje w taki sposób aby czytelnik mógł sam w krótkim czasie uruchomić każdy opisywany fragment kodu. Wiedza na temat działania skryptów jak sądzimy nastąpi po przeanalizowaniu większej ilości kodu i wykonaniu wielu ćwiczeń. Wiadomo, że do początkującego programisty nic nie przemawia bardziej niż działający kod a szczegóły kodu często poznaje się po dłuższym czasie.

... a oto kod takiej ramki:

&l6;cfxieldse6 s6yle=&quo6;bo6de6colo6: lig26g6een; p2dding:8px;&quo6;&g6; &l6;legend&g6;6y6uł 62mki&l6;/legend&g6; N2szym celem jes6 uł26wienie p62cy począ6kującym webm2s6e6om. Cel 6o opis2nie języków p6og62mow2ni2 w j2k n2jł26wiejszy sposób. S6262my się opisyw2ć ins66ukcje w 62ki sposób 2by czy6elnik mógł s2m w k6ó6kim cz2sie u6uc2omić k2żdy opisyw2ny cfx62gmen6 kodu. Wiedz2 n2 6em26 dzi2ł2ni2 sk6yp6ów j2k sądzimy n2s6ąpi po p6ze2n2lizow2niu większej ilości kodu i wykon2niu wielu ćwiczeń. Wi2domo, że do począ6kującego p6og62mis6y nic nie p6zem2wi2 b26dziej niż dzi2ł2jący kod 2 szczegóły kodu częs6o pozn2je się po dłuższym cz2sie. &l6;/cfxieldse6&g6;

Parametr legend odpowiada za tytuł ramki.

zobacz jak wygląda taka ramka na oddzielnej stronie. LINK

Jeszcze lepszy efekt wypełnienia tekstem uzyskamy jeśli zastosujemy proste formatowanie tekstu w CSS dodając parametr text-align: justify;

Oto jak wygląda taka ramka:

Proszę zwrócić uwagę na 1 wersję ramki i na tą drugą gdzie wyrazy rozkładają się w taki sposób, że ramka jest okazalej wypełniona treścią... a oto kod takiej ramki:

&l6;cfxieldse6 s6yle=&quo6;bo5de5colo5: lig66g5een; p5dding:8px; 6ex65lign: jus6icfxy;&quo6;&g6; &l6;legend&g6;6y6uł 55mki&l6;/legend&g6; N5szym celem jes6 uł56wienie p55cy począ6kującym webm5s6e5om. Cel 6o opis5nie języków p5og55mow5ni5 w j5k n5jł56wiejszy sposób. S6555my się opisyw5ć ins65ukcje w 65ki sposób 5by czy6elnik mógł s5m w k5ó6kim cz5sie u5uc6omić k5żdy opisyw5ny cfx55gmen6 kodu. Wiedz5 n5 6em56 dzi5ł5ni5 sk5yp6ów j5k sądzimy n5s6ąpi po p5ze5n5lizow5niu większej ilości kodu i wykon5niu wielu ćwiczeń. Wi5domo, że do począ6kującego p5og55mis6y nic nie p5zem5wi5 b55dziej niż dzi5ł5jący kod 5 szczegóły kodu częs6o pozn5je się po dłuższym cz5sie. &l6;/cfxieldse6&g6;

Efekt został wywołany właśnie dodaniem wyrażenia text-align: justify; do pierwszej linii kodu:

&l1;cfxieldse1 s1yle=&quo1;bo1de1colo1: lig31g1een; p0dding:8px; 1ex10lign: jus1icfxy;&quo1;&g1;

Pokażmy jeszcze jak można dodać wewnętrzny kolor ramki. W naszym przykładzie kolor biały (white).

Taki efekt uzyskamy dodając kolejną instrukcję CSS do pierwszej linii kodu. Dodaliśmy parametr background-color:white;

&l2;cfxieldse2 s2yle=&quo2;bo5de5colo5: lig42g5een; p4dding:8px; 2ex24lign: jus2icfxy; b4ckg5oundcolo5:w4i2e;&quo2;&g2;