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.