Hvordan lage kolonner Float Bruke CSS

Hvordan lage kolonner Float Bruke CSS


Kolonner presentere en utfordring for webdesignere som ønsker å unngå datert, clunky table-koding teknikker. Det er ingen måte å blokkere ut deler av websiden for deler av innhold eller kolonner, delvis for å unngå å blande stil kode med struktur kode. Designere bruker vanskelige flytende teknikker for å plassere kolonner på websider. Du kan lage en kolonne "flyte" til venstre eller høyre for dets naboland innhold ved å legge til "flyte" eiendom i CSS.

Bruksanvisning

1 Åpne HTML-fil på websiden i en kode editor som jEdit, Notepad ++ eller BBEdit. Du kan også bruke Microsoft Notepad eller en annen ren tekst editor, men forstår de mangler nyttig kode farge som gjør lesing HTML enklere.

2 Finn den kolonnen du ønsker å flyte i HTML-koden. Dette er vanligvis innpakket i en "<div>" eller "<avsnitt>" tag, selv om noen programmerere bruke "<bortsett>" koder for sidefelt. Legg et ID-attributt til koden for kolonnen og gi den et unikt navn for sin valuta, for eksempel "kolonnen" eller "leftside."

3 Finn "<link>" koder på toppen av HTML-filen og finne en som inneholder en CSS-fil. Åpne denne filen i koden editor. Du kan også sette inn CSS mellom "<style>" koder, men du bør sette "<style>" tags mellom "<head>" koder i HTML-filen.

4 Still inn kolonne til en bestemt eller relative bredden ved hjelp av CSS. Bruk pikselverdier for bestemte bredder eller prosentverdier for relative bredder. Skriv inn koden som dette:

kolonne {width: 200px;}

Her er en kolonne med en bredde på 20 prosent, i forhold til bredden av hva HTML-element du nestet kolonnen innsiden av:

kolonne {width: 20%;}

5 Legg til "flyte" egenskapen til kolonnen og sett den til høyre eller venstre, som så:

kolonne {width: 200px; float: right;}

Når "flyte" er satt til høyre, justerer kolonnen til høyre for en tilstøtende innhold. Den tilstøtende innhold, for eksempel tekst, brytes rundt bunnen av kolonnen. Legg til "flyte" eiendom til innhold delen av nettstedet ditt i CSS for å hindre at innpakning.

Hint

  • Bruk et bakgrunnsbilde for å lage en "falsk kolonnen" hvis du ønsker å gi din kolonne utseendet strekker seg ned til bunnteksten på ditt nettsted. Lag en en-pixel høy bilde like bred som hele nettsiden og bruke den til et "<div>" som flyter rundt både innholdet og kolonnen.
  • Kolonner ikke strekke ned til bunntekst på en webside når du bruker flytende teknikk. Bruk en "falsk kolonnen" bakgrunn eller Javascript for å løse problemet hvis det bryter med utformingen av nettstedet ditt.