Heya alle..
Synes lige jeg vil lave min første guide her på Testmax :)
Jeg vil vise jer hvordan man laver et layout til en hjemmeside uden tabeller men derimod i CSS hvor du vil spare en masse liniers kodning bl.a..
Lad os hoppe ud i det!
Vi starter med at lave et html dokument med grundstrukturen.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simpelt design tutorial af Net-Freak</title>
</head>
<body>
</body>
</html>
Vi vil gerne have følgende:
Et logo / topbanner
En menu
Plads til indhold
så i vores body tilføjer vi:
<div id="container">
<div id="logo">
LOGO
</div>
<div id="menu">
MENUEN
</div>
<div id="content">
INDHOLDET
</div>
</div>
Lad os tage den første <div> i vores dokument.
vi har givet den et id som hedder container
<div id="container">
Det bruger vi sådan at den henter de styles vi nu tildeler det ID i vores stylesheet dokument.
Nu skulle du gerne have sat alle vores div's ind i dit <body> tag. Gem vores html dokument og kald det "default.html" og så vi kan nu gå videre.
Som vi har det nu er der ikke meget design over det, og det ville vi jo meget gerne have, så derfor opretter du en ny fil i din editor og kalder den "styles.css". Når det er gjort går du ind i din default.html og indsætter følgende kode i dit <head></head> tag:
<style type="text/css">
@import url("styles.css");
</style>
På den måde importere vi vores stylesheet dokument til vores html dokument.
Vi kunne også bare skrive vores css koder direkte i vores html dokument, men da man sjældent kun har én side på en hjemmeside er det smart at ligge vores css koder i et dokument for sig og så importere det på vores sider så du kun behøver rette css koderne ét sted i stedet for du skal rette ALLE dine sider.
Åben nu din styles.css
vi vil starte med at style BODY, det er vores standard styles som bliver vist for på hele siden.
Jeg vil forklare de forskellige ting i selve css koden, og den måde man laver kommentarer i et css dokument er med /* og slutter det med */ Altså: /* Dette er en kommentar */
Body{
/* vi sætter margin og padding til 0 pixels for at der ikke kommer en kant hele vejen rundt på siden */
margin:0px;
padding:0px;
/* Jeg tror vi laver en baggrundsfarve og den skal være hvid! */
background-color:#FFFFFF;
/* vi vil også gerne have en anden skrifttype i stedet for browseren standard, her vælger vi størrelsen først og bagefter hvilken skrifttype vi vil bruge */
font:9px Verdana;
/* Vores skrifttype skal helt sikkert være sort! */
color:#000000;
}
Vi vil nu style vores container, altså den der skal indeholde vores top banner, menu og side indholdet.
/* vi starter med at tilføje vores id som skal startes med # Skulle vi starte en class skulle det være med et punktum . */
#container{
/* Vi vil gerne have centreret vores side */
margin:0 auto;
/* Og den må gerne være 750 pixels bred */
width:750px;
/* vi vil ingen padding have. Padding er fra kanten af vores div og indtil det næste vi sætter ind, altså hvor langt en tekst skal stå fra kanten f.eks. */
padding:0px;
}
Fint så har vi stylet vores container og nu til vores topbanner
#logo{
/* Højde på 100 pixel */
height:100px;
/* Baggrundsfarve */
background-color: #006699;
}
Nu kommer vi så til vores menu og vores content boks (indholdet).
Vi skal finde ud af hvor bred vores menu og content box skal være. Vores container, hvor alt andet ligger i har en bredde på 750 pixel og det giver sig selv at samlet må menuen og vores content box tilsammen ikke overskride dette tal, dvs. Hvis jeg sætter min menu til at være 100 pixel i bredden så skal content boksen have bredden 650 pixel da vi har trukket 100 pixel fra til menuen. Nu er problemet så bare at vi gerne vil have 5 pixel padding, altså afstand fra alle kanterne i både menuen og i content boksen så det skal vi medregne, altså på højre og venstre side i begge bokse og det vil så sige 5 pixel padding fra venstre, 5 pixel fra højre i begge bokse er 5+5+5+5=20 pixels. Så hvis vores menu er 100 pixel så må vi trække 20 pixels fra vores content box, Det vil sige i stedet for at være 650 pixels nu skal være 530 pixels:
#menu{
width:100px;
float:left;
padding:5px;
background-color: #CCCCCC;
}
#content{
width:630px;
padding:5px;
background-color:#FFFFFF;
float:right;
}
Vi har nu sat bredden og en padding og en baggrundsfarve på begge bokse, men nu har vi også tilføjet
Float i dem begge og hvad er nu det?
Jo float bestemmer hvilken retning vi vil have vores bokse til at "flyde" hen. Altså vil vi gerne have vores menu i venstre side så derfor skriver vi:
float:left;
og vores content boks vil vi så have til højre hvor du så skriver:
float:right;
Det er lidt ligesom hvis vi gerne have en tekst enten i venstre eller højre side, der bruger man bare text-align.
Nu har vi faktisk lavet vores standard design, og man kan altid style videre på det og jeg skal nok smide et kode eksempel på hvis man går lidt videre med det, dog uden kommentarer.
Her får i lige det hele, uden kommentarer.
default.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Simpelt design af Net-Freak</title>
<style type="text/css">
@import url("styles.css");
</style>
</head>
<body>
<div id="container">
<div id="logo">
LOGO
</div>
<div id="menu">
MENUEN
</div>
<div id="content">
INDHOLDET
</div>
</div>
</body>
</html>
styles.css
/* CSS Tutorial af NEt-Freak */
Body{
margin:0px;
padding:0px;
background-color: #333333;
font:9px Verdana;
color:#000000;
}
#container{
width:750px;
margin:0 auto;
padding:0px;
}
#logo{
height:100px;
background-color: #006699;
}
#menu{
width:100px;
float:left;
padding:5px;
background-color: #CCCCCC;
}
#content{
width:630px;
padding:5px;
background-color:#FFFFFF;
float:right;
}
Håber i kunne bruge lidt af det.
Og hvis i føler jer snydt fordi det er alt for simpelt osv. Så husk på dette er en guide til hvordan du meget simpelt kan stable et hurtigt design på benene, og bruger man lidt tid og leger med farver og størrelser osv. osv. Kan man få noget rigtigt godt ud af det, men det her var bare en guide til at hjælpe folk lidt i gang :)
Held og lykke med det!
Gå til PART2: Styling af designet.
http://testmax.dk/Forum/T.....-tables-kun-CSS.aspx /Net-Freak