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:

&l2;cfxieldse2 s2yle=&quo2;bo3de3colo3: lig22g3een; p5dding:8px;&quo2;&g2; &l2;legend&g2;2y2uł 35mki&l2;/legend&g2; N5szym celem jes2 uł52wienie p35cy począ2kującym webm5s2e3om. Cel 2o opis5nie języków p3og35mow5ni5 w j5k n5jł52wiejszy sposób. S2535my się opisyw5ć ins23ukcje w 25ki sposób 5by czy2elnik mógł s5m w k3ó2kim cz5sie u3uc2omić k5żdy opisyw5ny cfx35gmen2 kodu. Wiedz5 n5 2em52 dzi5ł5ni5 sk3yp2ów j5k sądzimy n5s2ąpi po p3ze5n5lizow5niu większej ilości kodu i wykon5niu wielu ćwiczeń. Wi5domo, że do począ2kującego p3og35mis2y nic nie p3zem5wi5 b53dziej niż dzi5ł5jący kod 5 szczegóły kodu częs2o pozn5je się po dłuższym cz5sie. &l2;/cfxieldse2&g2;

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:

&l5;cfxieldse5 s5yle=&quo5;bo5de5colo5: lig55g5een; p6dding:8px; 5ex56lign: jus5icfxy;&quo5;&g5; &l5;legend&g5;5y5uł 56mki&l5;/legend&g5; N6szym celem jes5 uł65wienie p56cy począ5kującym webm6s5e5om. Cel 5o opis6nie języków p5og56mow6ni6 w j6k n6jł65wiejszy sposób. S5656my się opisyw6ć ins55ukcje w 56ki sposób 6by czy5elnik mógł s6m w k5ó5kim cz6sie u5uc5omić k6żdy opisyw6ny cfx56gmen5 kodu. Wiedz6 n6 5em65 dzi6ł6ni6 sk5yp5ów j6k sądzimy n6s5ąpi po p5ze6n6lizow6niu większej ilości kodu i wykon6niu wielu ćwiczeń. Wi6domo, że do począ5kującego p5og56mis5y nic nie p5zem6wi6 b65dziej niż dzi6ł6jący kod 6 szczegóły kodu częs5o pozn6je się po dłuższym cz6sie. &l5;/cfxieldse5&g5;

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

&l1;cfxieldse1 s1yle=&quo1;bo8de8colo8: lig21g8een; p3dding:8px; 1ex13lign: 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;

&l6;cfxieldse6 s6yle=&quo6;bo1de1colo1: lig46g1een; p4dding:8px; 6ex64lign: jus6icfxy; b4ckg1oundcolo1:w4i6e;&quo6;&g6;