Sådan bruger du Float til stilformularer til HTML5 og CSS3 Programmering - dummier

Mange side layout problemer synes at kræve tabeller. Nogle klog brug af CSS3-float kan hjælpe elementer med flere kolonner uden bordets overhead. Former forårsager en bestemt hovedpine, fordi en form ofte involverer etiketter i en venstre kolonne efterfulgt af inputelementer i den højre kolonne.

Du vil nok være fristet til at sætte en sådan formular i et bord. Tilføjelse af tabelmærker gør HTML meget mere komplekst og kræves ikke. Det er meget bedre at bruge CSS til at styre layoutet.

Du kan flyde elementer for at skabe attraktive former uden at kræve tabeller.

Da sidedesign bliver mere involveret, giver det mere mening at tænke på HTML og CSS separat. HTML'en giver dig en følelse af den overordnede hensigt på siden, og CSS'en kan ændres separat. Brug af ekstern CSS er en naturlig forlængelse af denne filosofi. Begynd med at se på floatForm. html og koncentrere dig om HTML-strukturen, før du bekymrer dig om stil:

floatForm. html Navn Adresse Telefon Send forespørgsel

Mens du kigger over denne kode, bemærk flere interessante ting om, hvordan siden er designet:

• CSS'en er ekstern. CSS er defineret i et eksternt dokument. Dette gør det nemt at ændre stilen og hjælper dig med at fokusere på HTML-dokumentet i isolation.

• HTML-koden er minimal. Koden er meget ren. Den indeholder en formular med a. Den indeholder etiketter, elementer og a.

• Der er ikke et bord. Der er ikke behov for at tilføje et bord som en kunstig organisationsordning. En tabel ville ikke tilføje til sidernes klarhed. Formelementerne selv giver tilstrækkelig struktur til at tillade al den formatering, du har brug for.

• Etiketter er en del af designet. Du kan bruge etiketelementet i hele formularen, hvilket giver dig et element, der kan styles, men du ønsker det.

• Alt kan vælges. Du vil anvende en CSS-stil til etiketter, en anden til inputelementer og en tredje stil til knappen. Du kan konfigurere HTML'en, så du kan bruge CSS-selektorer uden at kræve id eller klassegenskaber.

• Der er en knap . Du kan bruge et knapelement i stedet for uden formål. På denne måde kan du anvende en stil på alle knapelementerne og en anden stil til elementet.

Design af en side som denne, så dens interne struktur giver alle de selektorer, du har brug for, er vidunderligt. Dette holder siden meget ren og nem at læse. Du skal dog ikke være bange for at tilføje klasser eller id'er, hvis du har brug for dem.

Det er ofte en god ide at se på din side med lige HTML, før du begynder at kaste rundt med CSS.

Hvis du har en side med stilarter, og du vil se, hvordan den vil se uden stilreglerne, skal du bruge Chrome-udviklerværktøjer eller Firebug. Du kan midlertidigt deaktivere nogle eller alle CSS-stilregler for at se standardindholdet nedenfor. Dette kan nogle gange være yderst praktisk.