Brugernavn:



Kodeord: Husk
Forside Forum Artikler Downloads Søg
 

CSS - For Absolut Begyndere!

Forord

Denne guide er kun for absolut begyndere, og indeholder ikke lange tekster eller koder som er overdrevet svære at forstå. Så hvis du aldrig har haft kendskab til CSS er dette et glimrende sted at lære om det grundlæggende.

Vores færdige resultat, skulle gerne komme til at ligne et design der vil minde om det her.


Det første vi skal gøre er at lave en fil kaldet index.html, som du gemmer et sted hvor du kan finde den. Bagefter laver du en mappe og kalder den style. Så skal vi igang med at lave stylesheet filen, og det gør vi ved at gemme en fil som style.css. Opret så en mappe, som du kalder images, hvor du skal have alle dine billeder liggende.

Nu skulle dine filer gerne ligne dette:


Nu skal du linke dem sammen.
For at linke dem sammen skal du bruge en kode, som du indskriver i din index:
  • <link rel="stylesheet" type="text/css" href="style/style.css">

Nu skulle din index.html gerne ligne denne her lidt:

  1. <html>

  3. <head>
  4. <link rel="stylesheet" type="text/css" href="style/style.css">
  5. <title>Din Title</title>
  6. </head>

  8. <body>
  9. <p>Din Tekst.</p>
  10. </body>

  12. </html>


Vi starter med at klippe billederne.
-Put alle billederne ind i images mappen.

Logo.


Linie.


Midten.


Bund.



Nu skal vi så begynde på at lave din Style fil, så der fremkommer en flot side!

En god udskreven regl, er altid er nulstille margin, padding og border. Dette gøres med følgene css kode:

  1. * {
  2. margin: 0px;
  3. padding: 0px;
  4. }

når denne kode er indsat, undgår vi at browseren laver en kant hele vejen rundt, samt <p> tags og andet har margin på sig. (Grunden er at det vil vi gerne selv definere hvis der er brug for det).

Efter vi nu har nulstillet vores html, skal vi lave css for vores body, som bestemmer skrifttype, skriftfarve, baggrundsfarve og lidt til på din side.

(Alt i parentes skal ikke med i stylen).

  1. body {
  2. color: #DE3223; (Skriftfarve).
  3. font-size: 11px; (Skriftstørrelse).
  4. font-family: Verdana; (Skrifttype).
  5. background-color: #000000; (Baggrundsfarve).
  6. }


  1. #container {
  2. width: 745px; (Bredde på div'en).
  3. height: auto; (Højde på div'en, vi sætter den til auto og ikke en fast højre).
  4. margin: 0 auto; (Bruges til at centrere siden)
  5. }

Du undrer dig sikkert over koden "margin: 0 auto;"

Følgende kode gør nøjagtigt det samme, men denne gør det bare på 2 linier istedet.

  1. margin-left: auto;
  2. margin-right: auto;

når man skriver margin: 0 auto; så siger man, at den skal være 0px i toppen og i bunden, men at den i venstre og højre side skal auto justere siden, dvs centere.

Nu har vi lavet vores "boks", som vores side skal være inde i. (husk at vores boks er "usynlig", og kan ikke ses hvis du prøver at se den i browseren nu)

  1. #logo {
  2. background: url("../images/logo.png") no-repeat; (Hvor billedet ligger og om det skal gentages)
  3. width: 745px; (Længde på billedet).
  4. height: 152px; (Højde på billedet).
  5. }

Du gør det samme med Linien, bare husk at udskifte navnet og backgrund. (eller kopiere nedenstående)

  1. #linie {
  2. background: url("../images/linie.png") no-repeat; (Hvor billedet ligger og om det skal gentages)
  3. width: 745px; (Længde på billedet).
  4. height: 31px; (Højde på billedet).
  5. }

Nu til det lidt svære nemlig at få midten ind, så man kan skrive i det.

Width er hvor lang teksten skal være, og den skal gerne være 4 under midten, så den ikke rammer midtens kant. Hvis den bliver længere end midten, vil den bare skrive ud over kanten. Så sørg for at den ligger lige under midtens længde!

Nu skal vi så lave "midten".

  1. #midt {
  2. background: url("../images/midt.png") repeat-y;
  3. width: 745px;
  4. min-height: 500px; (Her bruger vi min-height istedet for kun height. Forskellen ligger i at, height, er en fast højde, hvorimod at min-height, er en minimums højde og kan expandere (blive længere))
  5. }

-repeat-y; betyder at den skal gentages på y aksen, indtil den stoppes.
Nederst placeres bunden:
  1. #bund {
  2. background: url("../images/bund.png") no-repeat;
  3. width: 745px;
  4. height: 4px;
  5. }

Nu skal vi har indsat div'sne i vores HTML.

Som du sikkert har bemærket, har vi skrevet et # (havelåge tegn) foran navnene i vores styke fil (#logo f.eks)

Der findes nemlig 2 forskellige - et ID og en CLASS.

# = id (#logo)
. = class (.logo)

Det # tegn betyder at vi har et ID at gøre, og at vi i vores html skal skrive:

div id="logo"></div>

Havde vi haft med Class at gøre, skulle vi skrive:

div class="logo"></div>

Men vi har med ID's at gøre, og vores html skal derfor se sådan her ud:
(</div> stopper logoet, linien og bunden fordi der ikke skal tekst i dem).

<div id="container">
<div id="logo"> </div>
<div id="linie"></div>
<div id="midt"></div>
<div id="bund"></div>
</div> (Her afslutter vi vores container div, da den skal omfavne / omringe vores side)


Komplet eks:

  1. <html>
  2. <head>
  3.     <link rel="stylesheet" type="text/css" href="style/style.css">
  4.     <title>Din Title</title>
  5. </head>

  7. <body>
  8.     <div id="container">
  9.         <div id="logo"></div>
  10.         <div id="linie"></div>
  11.         <div id="midt">
  12.             <p>Din tekst inde i boksen!</p>
  13.         </div>
  14.         <div id="bund"></div>
  15.     </div>
  16. </body>
  17. </html>

Vores side, som vi nu har lavet den, er centreret i browseren. Nogen gange ønsker man måske ikke at den er det. Hvis du ikke ønsker at have centeret den, skal du i container div'en fjerne linien:

  • margin: 0 auto;

Derefter vil siden placere sig i toppen i venstre hjørne.
Ønsker du derimod at den skal være i midten, men gå lidt ned fra toppen, skal du i 0 tallet i "margin: 0 auto;" Rette det til det antal pixel du gerne vil have den skal gå ned.
F.eks 20px. (margin: 20px auto;)

-Det var alt, håber i finder ud af det! Hvis i følger guiden ordenligt og bruger knolden lidt selv, vil det med garanti lykkes jer! Hvis du er helt begynder med CSS kan jeg anbefale dig at bruge Html.dk -til at lære lidt mere om CSS.
Sidst redigeret 21:47 22/04/2010
Oprettet af:
xDesign

CSS

Point modtaget: 250

Rating: 2.6
11:44 18/04/2010

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.
Når du fortæller hvad hver linje gør, bør du indsætte det som kommentar i stedet for parentes!

  1. body {
  2. color: #DE3223; (Skriftfarve).
  3. font-size: 11px; (Skriftstørrelse).
  4. font-family: Verdana; (Skrifttype).
  5. background-color: #000000; (Baggrundsfarve).
  6. }
Denne kode ^^ burde i stedet for være følgende:
  1. body {
  2. color: #DE3223; /*Skriftfarve*/
  3. font-size: 11px; /*Skriftstørrelse*/
  4. font-family: Verdana; /*Skrifttype*/.
  5. background-color: #000000; /*Baggrundsfarve*/
  6. }

Derudover synes jeg artiklen er lidt tynd - og ikke for absolut begyndere!
- Du fortæller intet generelt, men derimod viser du hvordan man sætter ét design op.
Egentlig er der ikke så meget at lære udfra din artikel, medmindre man har lidt basis viden!
Oprettet af:
Fiskeren
  Mail
20:52 21/04/2010
Ingen Kommentare? ;o.
Oprettet af:
xDesign
  Mail
09:39 22/04/2010
Jeg er så skuffet, ville råde dig til at læse det igennem inden du poster.
Du siger flere gange, at du beskriver noget, som du aldrig kommer til.

1.5/5 herfra
Sidst redigeret 12:32 22/04/2010
Oprettet af:
Nikolaj
  Mail
12:31 22/04/2010
Kan du give et eksempel? (:
Oprettet af:
xDesign
  Mail
17:06 22/04/2010
Du burde måske nævne at IDer er helt unikke, mens klasser ikke er. Altså, at IDer kan bruges på kun et element, og en klasse kan bruges på flere.
Oprettet af:
TheOliver
  Mail
17:40 22/04/2010
Det med at skulle nulstille alle dine styles som du nævner ved kode stykke 3, det er lidt spild af tid at skulle skrive det hver gang.

Du kan i stedet rundt på nettet hente CSS koder som reset alt i din CSS.

http://meyerweb.com/eric/tools/css/reset/index.html
Oprettet af:
Casper
  Mail
20:42 22/04/2010
Den her artikel kan desværre give folk nogle dårlige vaner. Logoet er den samme farve hele tiden, derfor bør du bare have et 1px bredt billede (dog i den højde), eller bare bruge background-color (normalt bruges denne taktik til cross-platform gradients, dvs. det burde bruges til det du kalder "linien").

Der er desuden ingen grund til at have de 2 billeder til midt og bund, der kunne du bare skrive noget i retning af:

  • border: 0 1px 1px 1px solid black;

Der er ret meget mere, må sige at jeg ikke personligt vil anbefale denne artikel til begyndere.
Oprettet af:
Sirupsen
  Mail
21:34 30/04/2010
2 px, ser det der godt nok mere ud som..
og så skal der lige tilføjet en width, for bredde...
Jeg er ked af at sige det, men det her hjælper virkelig ikke nybegyndere..
Oprettet af:
Nicklas.
  Mail
19:33 14/07/2010
@Sirupsen

Forstår ikke rigtigt hvad du mener?
Logoet (.. Tror du mener banneret), har ikke den samme farve? Det ikke en farve, men den er lys øverst, hvorefter den gøres mørkere..
- Ved ikke hvordan du ikke kunne se dette, men.

& Ved godt det med Border, solid black.. Havde bare ikke tænkt over det, på det tidspunkt.
Oprettet af:
xDesign
  Mail
22:20 26/07/2010
Det han mener er at det er den samme farve horisontalt... Så om det er 1pixel bredt, eller 200pixels bredt vil give den samme effekt.
Oprettet af:
Evlebevle
  Mail
15:14 05/08/2010
Du skal være oprettet og logget ind for at kommentere en artikel
Copyright © Rowl.dk v/ Michael Raagaard | 2005-12 | Alle rettigheder forbeholdes