Slik bruker du Float til stilformularer for HTML5 og CSS3 Programmering - dummier

Mange sidelayoutproblemer ser ut til å kreve tabeller. Noen smart bruk av CSS3-flyten kan hjelpe elementer med flere kolonner uten bordets overhead. Skjemaer forårsaker en bestemt hodepine fordi et skjema ofte involverer etiketter i en venstre kolonne etterfulgt av inndataelementer i den høyre kolonnen.

Du vil nok være fristet til å sette et slikt skjema i et bord. Hvis du legger til tabellord, blir HTML mye mer komplekst og er ikke nødvendig. Det er mye bedre å bruke CSS til å administrere oppsettet.

Du kan flyte elementer for å lage attraktive skjemaer uten å kreve tabeller.

Siden sidedesign blir mer involvert, er det mer fornuftig å tenke på HTML og CSS separat. HTML-en gir deg en følelse av den overordnede hensikten med siden, og CSS kan endres separat. Bruk av ekstern CSS er en naturlig forlengelse av denne filosofien. Begynn med å se på floatForm. html og konsentrere deg om HTML-strukturen før du bekymrer deg for stil:

floatForm. html Navn Adresse Telefon Send forespørsel

Mens du ser over denne koden, merk deg flere interessante ting om hvordan siden er utformet:

• CSS er ekstern. CSS er definert i et eksternt dokument. Dette gjør det enkelt å endre stilen og hjelper deg med å fokusere på HTML-dokumentet i isolasjon.

• HTML-koden er minimal. Koden er veldig rent. Den inneholder et skjema med a. Den inneholder etiketter, elementer og a.

• Det er ikke et bord. Det er ikke nødvendig å legge til et bord som en kunstig organisasjonsordning. Et bord vil ikke legge til klarheten på siden. Skjemaelementene selv gir nok struktur for å tillate all formatering du trenger.

• Etiketter er en del av designen. Du kan bruke etikettelementet i hele skjemaet, og gir deg et element som kan styles, men du ønsker det.

• Alt er valgbart. Du vil bruke en CSS-stil til etiketter, en annen til input-elementer og en tredje stil til knappen. Du kan sette opp HTML-en slik at du kan bruke CSS-seleksorer uten å kreve id eller klassegenskaper.

• Det er en knapp . Du kan bruke et knappelement i stedet for med vilje. På denne måten kan du bruke en stil på alle knappelementene og en annen stil til elementet.

Utforming av en side som denne, slik at den interne strukturen gir alle de valgene du trenger er fantastisk. Dette holder siden veldig rent og lett å lese. Fortsatt, vær ikke redd for å legge til klasser eller IDer hvis du trenger dem.

Det er ofte en god ide å se på siden din med rett HTML før du begynner å rote rundt med CSS.

Hvis du har en side med stiler, og du vil se hvordan den ser ut uten stilregler, bruker du Chrome-utviklerverktøy eller Firebug. Du kan midlertidig deaktivere noen eller alle CSS-stilregler for å se standardinnholdet under. Dette kan noen ganger være svært nyttig.