Hvordan lage en Two Column webside

November 17

Webdesignere ofte står overfor problemet med å presentere informasjon på en måte som er visuelt engasjerende. To-kolonne nettsider gir en løsning som skaper lettere innhold lesing og skiller hovedinnhold fra utfyllende informasjon. Ved bruk av to-kolonne-format for å skille innholdet, er det viktig å ha innhold på lik bredde og samme høyde for lettere å lese. Når skille innhold fra ressurser, er det ideelt å ikke ha innhold så lenge at ressurser går tapt. Målet er å lage en nettside som fanger leserens øye.

Bruksanvisning

1 Lag to divisjoner (divs) i kroppen din Hypertext Markup Language (HTML) innhold. Disse divs kan omfatte en inline stil med "float: left". HTML-kode for dette er:

<Div style = "float: left"> innhold </ div>
<Div style = "float: left"> ressurser </ div>.

(Ikke ta den perioden på slutten som en del av den kommandoen eller flere kommandoer.)

Erstatt "innhold" og "ressurser" med nettsidens innhold.

2 Lag en lysning div. Oppgjørs div stopper elementer fra flytende på nettsiden din. Dette er HTML-koden for en div med en \ "klart \" class:

<Div class = "clear"> </ div>.

definere det klart klasse med følgende attributter i stilark,:

font-size: 0px
GÅ
margin: 0
GÅ
padding: 0
GÅ
line-height: 0px
GÅ
klar: begge
GÅ
float: ingen
GÅ
border: none
GÅ

Clearing div kansellerer de flytende elementene fra de to flytende divs opprettet i trinn 1. Hvis vi ikke fjerne flytende divs, så eventuelle etterfølgende innhold fortsetter å "flyte" til venstre for den siste beholderen.

3 Lag en takrenne mellom de to fløt kolonner. En gutter er plassen som brukes for å skille de to kolonnene visuelt. Det er fem måter å lage en takrenne:

1) Legg 20 piksler i høyre polstring til den første flytende div. Den første flytende div ser da slik ut: <div style = "float: left; padding-right: 20px; "> innhold </ div>.

2) Tilsett 20 piksler i venstre padding til andre flytende div: <div style = "float: left; padding-left: 20px; "> ressurser </ div>.

3) Legg 10 piksler fra høyre padding til første flytende div og 10 piksler fra venstre-padding til andre flytende div:

<Div style = "float: left; padding-right: 10px; "> innhold </ div>
<Div style = "float: left; padding-left: 10px; "> ressurser </ div>.

4) Lag en ny div som går mellom den første flytende div og andre flytende div:

<Div style = "float: left;"> innhold </ div>
<Div class = "gutter"> </ div>
<Div style = "float: left;"> ressurser </ div>.

Dette \ "gutter \" klassen bør ha følgende egenskaper:

display: block
GÅ
float: left
GÅ
width: 20px; .

5) I stedet for den andre beholder flytende igjen, kan det flyte riktig. Gi de flytende beholdere lik bredde som ikke er lik den overordnede beholderen. For eksempel, hvis hovedbeholderen har en bredde på 900 piksler, så din flytende containere kan ha en bredde på 440 piksler, noe som gir deg en 20-pixel takrenne automatisk. Her er koden:

<Div style = "float: left; width: 440px; "> innhold </ div>
<Div style = "float: right; width: 440px; "> ressurser </ div>.

4 Lagre filen med .html.

5 Åpne HTML-filen i en nettleser og gå gjennom nettsiden. Gjør endringer i koden som er nødvendig for å få ønskede resultater.

Hint

I stedet for inline stiler, kan du opprette klasser i din flytende beholdere. For eksempel kan en klasse floatLeft bli definert i stilarket som "float: left".
Når separering av innhold fra ressurser, har de divs ikke trenger å være lik bredde. Vanligvis er forholdet mellom innhold og ressurser mellom 2: 1 og 3: 1.
Plasser en tom kommentar inne i clearing div for IE6 formål. Ellers kan du få noen avstandsproblemer mellom Microsoft Internet Explorer versjon 6 (IE6) og andre nettlesere.