Indsamling af bruger data - design
Efter vi i sidste kapitel ændrede vores HTML struktur er det på tide at vi får lagt noget design på de nye elementer. Vores slutresultat skal gerne bestå af en menu med søgning, en kortvisning samt brugervalg for kortet og adresseoplysninger.
Vores CSS kode, mitlayout.css
Det første vi gør er at sætte dokumentets bredde og højde til 100%, uden margin eller padding.
Kort
I linjerne 83 til 87 sætterr vi kortets bredde og højde til 100%, samt positionerer det relativt. Dermed kan vi placere vores andre elementer ovenpå kortet.
Menu
Selve menuen positionerer vi absolut og placerer i højre side af vinduet. Vores overskrift i menuen er et H1 element som vi angiver en skriftstørrelse for, sammen med noget margin og padding til at give luft.
Indtastningsfelterne er grupperede i LABEL elementer der er samlet i en fælles FIELDSET gruppe.
Som udgangspunkt har fieldset elementer en solid kant som vi fjerner.
Vores label elementer får en pæn musemarkør og bliver vist som et block element, hvormed den er et afgrænset areal. Samtidig positionerer vi dem relativt, så vi kan styre dets elementer i forhold til det afgrænsede areal. Hvis vi støder på et label element i vores menu får de også en smule luft i bunden.
Vi har to forskellige INPUT elementer i vores menu, text til indtastning og submit der vises som en knap til at starte søgningen.
Text elementerne er placerede indeni vores label elementer og bliver vist i højre side af disse ved at angive position:absolute og
right: 0px.
Vi giver dem en farvet kant og en smule luft, samt en fast bredde på 120 pixels.
Vores søgeknap får angivet en fast bredde på 60 pixels, en sort kant samt nogle farver. Da den er på en linje for sig angiver vi en fast venstre margen,
hvormed den også vises i højre side af menuen.
Når vi fører musen henover søgeknappen skifter vi forgrunds- og baggrundsfarverne igennem :hover angivelsen.
Nu er vi næsten færdige med menuen i højre side. Listen af adresser er et OL
element der som udgangspunkt viser en
numereret liste af elementer. For at gøre plads til både numre og adresser sætter vi en smule luft omkring dens indhold.
Hver adresse består af et LI
element der indeholder et link.
Vores link bliver vist som block elementer med en lidt mindre skrift, og når vi bevæger musen henover et link eller tabber igennem ændrer vi farverne.
Brugervalg og oplysninger
Hvert brugervalg er en label der indeholder lidt tekst og en checkbox.
Vi giver dem en fast bredde og bruger float: left så de kan stå på samme linje.
Endeligt giver vi lidt luft omkring vores adresseoplysninger, sammen med en baggrundsfarve og en inverteret kantfarve.
Du kan se hvordan det komplette eksempel til dette kapitel fungerer i koden.