Hvordan gjøre min DIV og CSS Elements ser ut som en tabellfunksjon

Hvordan gjøre min DIV og CSS Elements ser ut som en tabellfunksjon


Den "HTML Table" element er konstruert for å presentere data i rader og kolonner. Noen web-designere også bruke den for sideoppsett, men det er dårlig egnet til denne funksjonen. Ved hjelp av DIV elementer og CSS til å formatere dem er en enklere, mer fleksibel måte å lage en layout som ville ha krevd tabellfunksjonen i de tidlige dagene av HTML. En DIV-basert layout vises så snart det begynner å laste ned, mens en tabell layout ikke vil vises til nedlastingen er fullført.

Bruksanvisning

1 Lag en blokk skisse av sideoppsettet du ønsker. For eksempel vil du kanskje en horisontal header bar, en smalere horisontal navigasjonsfelt, og en vertikal sidepanelet i tillegg til hovedinnhold området. Bestem akkurat hvor du vil disse delene arrangert. Hver blokk representerer en DIV; du kan bruke usynlige "container" divs å holde ting ordnet på riktig måte.

2 Gi hver del et unikt navn, som vil bli den "id" attributt. Hvis to eller flere seksjoner skal dele samme format, skape et annet unikt navn for dem; Dette vil bli deres "klasse" attributt.

3 Opprett en ny layout fil. Avhengig av dine behov, kan dette bruker statisk kode (HTML eller XHTML) eller dynamisk kode (PHP eller ASP). Legg DIV-koder til kroppen ved hjelp av id og klassenavn fra trinn 1, i rekkefølge fra topp til bunn. Nest divs inni container divs der det passer.

4 Lag et stilark med utvidelsen CSS og lenke til den fra layout fil. Lag en del for hver layout DIV. Bruk id og klassenavn, sammen med enten id velgeren (#) eller klassen velgeren (.) Foran hver.

5 Legg layout attributtene til hver id og klasse delen. Disse kan omfatte polstring, mellomrom, border, stilling, flottør, margin, høyde og bredde.

6 Sjekk oppsettet i flere nettlesere og justere etter behov.

Hint

  • Hvis du allerede har en layout filen ved hjelp av tabellfunksjonen for layout, er det best å starte en ny layout fil fra bunnen av heller enn å prøve å endre den eksisterende filen. Bruk den gamle filen for referanse og kopiere og lime inn innhold som nødvendig. Du kan vanligvis resirkulere den gamle stil.
  • Bruk kommentarer liberalt slik at du ikke glemmer hva en seksjon er for eller gå seg vill prøver å navigere koden din som det vokser. Innrykk og linjeskift i koden også bidra til å holde koden enklere å bruke.
  • Den "flyte" attributt ikke fungerer på akkurat samme måte som høyre og venstre justering i en tabell. Hvis oppsettet er brutt, gjennomgå CSS referrence for å se om du trenger å endre måten du bruker "flyte".
  • Forskjellige nettlesere kan vise din layout annerledes. En layout som er vakkert i Firefox kan bli brutt i Internet Explorer (eller vice versa). Sjekk oppsettet ditt i flere nettlesere.