Nola lerrokatu eta mugitu elementuak web orri batean

Web orri bateko elementuak jartzea funtsezkoa da diseinu orokorrarekin. Diseinua eragiteko beste modu batzuk ere badira (taulak erabiltzea ( guk ez gomendatzen ditugunak ), CSS erabiltzea onena da .

Jarraian, CSS estiloko lineako propietate sinple bat nola erabili jakingo dugu irudiak, taulak, paragrafoak eta gehiago lerrokatzeko.

Oharra: metodo berberak estiloaren kanpoko estiloetan ere erabil daitezke, baina banakako elementuei aplikatzen zaizkie eta beharbada modu horretan egon beharra dago. Horrela, azpian azaltzen denaren antzekoa da estetika lineala erabiltzea.

Lerrokatu testu paragrafoak

Paragrafoen etiketa zure webgunea prestatzen hasteko lehen tokia da. Etiketak irekitzea eta itxi bezalakoak dira:

Paragrafo batean testuaren lerrokatze lehenetsia orriaren ezkerraldean dago, baina paragrafoak eskuinean eta erdian lerrokatu ditzakezu.

Mugikorreko propietatearen bidez elementu gurasoaren eskuinean edo ezkerrean lerrokatzen uzten dizu. Elementu nagusi horren barruan dauden beste elementu batzuk mugikorreko elementuen inguruan igaroko dira.

Paragrafo batekin efektu onena lortzeko, hobe da edukiontzi (gurasoa) elementua baino txikiagoa den paragrafoan zehaztea.

Lerrokatu testu barruan paragrafoak

Laburbilduz, paragrafoen testuinguruen arteko lerrokadura interesgarriena "justifikatu" da, eta nabigatzaileari testua lerrokatzea, funtsean, leihoko eskuineko eta ezkerreko aldeetara erakusteko esaten dio.

Paragrafo batean testua justifikatzeko, testua lerrokatzeko propietatea erabili beharko zenuke.

Parametro baten barruan testu guztia lerrokatu dezakezu eskuinera edo ezkerrera (lehenetsia), testua lerrokatzeko propietatearekin.

Testu lerrokatzeko propietateak elementuaren barruan testua lerrokatuko du. Teknikoki, ez da iruditzen paragrafoaren edo beste elementu baten barruan dauden irudiak lerrokatzea, baina nabigatzaile gehienek irudiak jabetza honetarako inline moduan tratatzen dituzte.

Irudien lerrokatzea

Mugikorreko propietateak irudi-etiketan erabiltzea orriaren irudiak kokatzeko eta testua haien inguruan biltzeko moduan definituko duzu.

Goiko paragrafoetan bezala, irudiaren etiketen flotaren estiloaren propietateak zure irudia orrian kokatuko du eta nabigatzaileari irudi horren inguruan testua eta beste elementu batzuk nola mugitzen diren azaltzen dio.

Goiko irudien etiketa jarraituz, irudiaren eskuin aldeko irudia pantailaren ezkerraldean erakutsiko da.

Testua irudiaren inguruan biltzeko gelditu nahi badut, propietate argia erabiltzen dut:


style = "clear: left">

Paragrafo gehiago baino gehiago lerrokatzea

Hala ere, paragrafo bat edo irudi bat baino gehiago lerrokatu nahi baduzu? Estilo-propietate bat besterik ez duzu egin paragrafo bakoitzean, baina eraginkortasun handiagoa duen etiketa bat dago:

Besterik gabe, testua eta irudiak ( HTML etiketak barne) etiketa eta estiloko propietatearekin (flota edo testu-lerrokatzea) eta zatiketa horretan dena lerrokatuko da nola nahi duzun.

Gogoan izan paragrafoan edo irudietan gehitzen diren lerrokatzeak zintzilikatu egingo direla, etiketa gainidatziz.