Brugernavn:



Kodeord: Husk
Forside Forum Artikler Downloads Søg
 

Opsætning af div i html via css

Forord

Jeg vil i denne artikel vise hvordan man laver et design opsætning i html med divs via CSS.
Dette kræver at du allerede kender lidt til HTML, og eller XHTML og lidt CSS.

Vi starter med at oprette et html dokument i din html editor, fx notepad eller intype.
Her starter du med at skrive:
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
Men hvis du vil lave det til HTML5 som er godt på vej ind i de forskællige browser, så kan du nøjes med at skrive:
  • <!DOCTYPE html>

Der næst skal vi jo selvfølige skrive resten af vores head i dokumentet
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Fyhring4's Design Opsætning</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
  6. <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
  7. </head>
Jeg har valgt tegnsætning windows-1252 men man kan også godt bruge andre, det er ikke så vigtigt ang. design

Så har vi en anden linje
  • <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
Som er vores stylesheet fil som vi henter eksternt man kan også godt have den til at ligge inde i html filen men skal man have flere sider som de fleste hjemmesider har er det her det nemmeste.
Jeg har kaldt css filen style.css, du kan kalde den lige hvad du vil bare husk at den skal hedde .css
Man kan dog godt lave en css fil gennem php, men det er der ingen grund til her.

Så kan vi komme over til vores div tags
  1. <body>
  2. <div id="wrapper">
  3. <div id="left">
  4. <h2>Venstre kolone</h2>
  5. </div>
  6. <div id="center">
  7. <h2>Midten :D</h2>
  8. </div>
  9. <div id="right">
  10. <h2>Højre Kolone</h2>
  11. </div>
  12. <div id="footer">
  13. &amp;copy; 2009 Fyhring4
  14. </div>
  15. </div>
  16. </body>
  17. </html>
Her har jeg valgt at lave 3 koloner, en i venstre side og en bred i midten og en i højre side som har samme størrelse som venstre.
Dette her er bare almindelig xhtml, så det er der ikke så mange ben i, men en kort forklaring er at vi laver en boks (div) som vi giver et id som står inde i " ".

Gem dette dokument og kald det hvad du vil bare husk at den skal ligge i samme mappe som din css fil kommer til.

Så går vi over til css'en.
  1. body {
  2. background-color: #FFFFFF;
  3. margin: 0px;
  4. padding: 0px;
  5. }
  6. /* Sætter baggrundsfarven hvid og sætter maring og padding til 0 for en sikkerheds skyld */

  8. /* Nu laver vi så vores css data til id'et wrapper */
  9. #wrapper {
  10. margin: 0 auto; /* sætter wrapper i midten */
  11. width: 950px; /* sætter breden 950 pixel */
  12. }
Først siger vi at body (altså hele dokumentet) skal have en hvid baggrund, margin og padding sætter vi til 0px.

# betyder id, altså når jeg så skriver #wrapper betyder det at det html element som har id wrapper skal have de instillingere kan man kalde det.

Så vi siger altså at id wrapper skal have 0 margin men vi skriver også auto?, det betyder at den centrere vores boks, og eftersom alt vores kode sidder inde i wrapper betyder det at vi har centreret det. Og vi sætter også bredde på.

Nu går vi så frem til venstre kolone:
  1. #left {
  2. float: left;
  3. width: 22%;
  4. border: 1px solid #000000;
  5. }
Vi starter med at sige at vi snakker om id left.
Så sætter vi float til left, det betyder at vi sætter den i venstre side i forhold til det div vi er i (wrapper). Og så sætter vi bare en bredde på men i %, af den grund at desiget (næsten) altid vil passe til skærmen.
Til sidst har jeg sat en border (kant) på, 1px tyk og solid og sort.

Så til den kolone vi har i midten.
  1. #center {
  2. float: left;
  3. margin-left: 5%;
  4. width: 45%;
  5. border: 1px solid #000000;
  6. }
Igen float til venstre, hvorfor det? den sidder jo ikke i venstre side?, nej men den sidder i venstre side i forhold til højre kolone, du kan prøve at lege lidt med fgloat, og evt. sætte den til right og se hvad der skere.
Så skriver vi margin-left til 5%, igen % af samme grund som før, vi sætter den på for at denne kolone ikke skal sidde helt oven i venstre kolone.

  1. #right {
  2. float: left;
  3. margin-left: 5%;
  4. width: 22%;
  5. border: 1px solid #000000;
  6. }
Igen float til venstre selvom den sidder i højre side, prøv at sætte den til right og se hvad der skere.
Og igen margin-left for at højre kolone ikke skal sidde helt oppe i den midterste kolone.
Der skal jo også være en bredde så den sætter vi til det samme som venstre.

  1. #footer {
  2. float: left;
  3. width: 100%;
  4. margin-top: 25px;
  5. text-align: center;
  6. border-top: 1px solid #000000;
  7. }
Vi laver nu en footer, som igen indeholder float left, denne gang sætter vi bredden til 100%, og afstanden til resten af siden 25 px, vi sætter også teksten til at sidde i midten og en sort kant i toppen.

Du skulle gerne hvae lært noget om CSS og HTML nu, så nu kan du bare gå ud og "lege" med det.
Hvis det ikke ser helt korrekt ud kan du lige se hvordan det kommer til at se ud her

Det var alt for denne gang :D
Sidst redigeret 11:23 04/01/2010
Oprettet af:
fyhring4

CSS

Point modtaget: 250

Rate:
15:48 24/10/2009

Kommentarer

Giv din mening tilkende om denne artikel, eller læs andres.
Har du spørgsmål eller brug for hjælp til denne artikel henvises du til forummet.
Hvilket charset du vælger har da intet at gøre med om du bruger html5 eller ej?
Oprettet af:
__ak
  Mail
20:35 26/10/2009
jo den windows-1252 har jeg læst på nettet (kan desværre ikk huske hvor), skulle kun virke i HTML5, men det kan da godt være at det er min fejl..
Oprettet af:
fyhring4
  Mail
18:07 28/10/2009
Du skal være oprettet og logget ind for at kommentere en artikel
Copyright © Rowl.dk v/ Michael Raagaard | 2005-12 | Alle rettigheder forbeholdes