Avatar billede nph12 Nybegynder
10. juni 2006 - 20:26 Der er 30 kommentarer og
1 løsning

Hvordan laver jeg hjemmeside med CSS?

Hej
Hvordan laver man strukturen på en hjemmeside? Ifølge denne artikel så skal man ikke bruge tabel

http://www.html.dk/artikler/00043/default.asp

Jeg kunne godt tænke mig, at lave en hjemmeside som ikke går helt ud til siderne. Det skal være noget i stil med eksperten.dk, hvor der er en ramme om selve hjemmesiden og en baggrundsfarve. Derudover skal skal hjemmeside havde følgende:

En banner
En navigationsbjælke
En dropdown menu

Tre kolonner - venstre kolonne med menu og informationskasser, kolonne til indhold, højre konlonne med informationskasser.

En footer med adresseoplysninger

Kan man lave nogle af tingene sådan, at man kan rette det et centralt sted?

Da jeg lige er startet med at lave hjemmesider, så har jeg ikke overblink over, hvordan man laver en hjemmeside som kan køre under alle browsere. Hvad er den bedste måde, at lave en hjemmeside på, så den kan køre under alle browsere? 

Er der nogen som kan anbefale nogle gode bøger om, hvordan man laver hjemmeside design?
Avatar billede mclemens Nybegynder
10. juni 2006 - 20:40 #1
[ Kan man lave nogle af tingene sådan, at man kan rette det et centralt sted? ]
Jeg sammensætter de fleste af mine ting i hver sin php fil, der includes på kryds og tværs afhængig, af hvilken section folk er under... Det gør at du kun skal rette i f.eks. footer.php eller header.php eller menu.php for at rette det på alle sider...

[ Hvad er den bedste måde, at lave en hjemmeside på, så den kan køre under alle browsere? ] - Kør windows, (hvis du kører unix bør du have en pc der kører win så du kan teste med den PC) installer: IE (den har du nok i forvejen ... ) , FF (Firefox) og en god koder tester sin side i Opera og Netscape for at være på den sikre side.

- En decideret garanti for at den virker crossbrowser er svær at give... men hvis du ikke tester i alle browsere - så sørg for ikke at have en xml deklaration eller noget andet før din doctype definering ... så er du på en mere stabil crossbrowser vej ...

[ Er der nogen som kan anbefale nogle gode bøger om, hvordan man laver hjemmeside design? ]
- Jeg kan "desværre" ikke anbefale nogle bøger da jeg ikke føler at der er nogen der lever op til hvad jeg føler de skal indeholde ... det er dog også meget lang tid siden jeg har haft en html / xhtml bog imellem hænderne ... ca. 6½-7 år snart... Jeg vil dog anbefale php 5 fra IDG den bør lette kodningen lidt for dig (m.h.t. at undgå frames/iframes og stadig kun skulle ændre et sted - php's include)

... må hellere huske at sige at asp også kan håndtere
det - dog kender jeg ikke det kodnings sprog...
Avatar billede mclemens Nybegynder
10. juni 2006 - 20:43 #2
Kig evt. her: (gratis bøger til download - kender ikke kvaliteten)
http://www.libris.dk/Vis_artikel.asp?ArticleID=1444
- kig evt. Web-programmering og Hjemmesider - lær det selv
Avatar billede mclemens Nybegynder
10. juni 2006 - 20:52 #3
Her er de to mest relevante sektioner med bøger
- der er både nogle javascript,html,php og asp bøger ...
http://www.libris.dk/default.asp?loadside=/soeg.asp?kategori=26[]Besked=<h3><br>Titler%20om%20web-konstruktion</h3>[]extrainfo=1
http://www.libris.dk/default.asp?loadside=/soeg.asp?kategori=8[]Besked=<h3><BR>Titler%20om%20programmering</h3>[]extrainfo=1

... Jeg har læst Start på JavaScript 1.5, Start på PHP 5
og start på mysql(den står vist ikke derinde mere...)
Avatar billede nph12 Nybegynder
10. juni 2006 - 21:03 #4
Mange tak. Jeg tror, at jeg låner/køber nogle bøger om CSS, DHTML, ASP og PHP. Håber det kan hjælpe mig lidt på vej:-)

Jeg tror, at jeg holder mig til det simple her i starten. Jeg kører selv IE, så må jeg lære at understøtte andre browsere senere. Hvad er xml deklaration?
Avatar billede mclemens Nybegynder
10. juni 2006 - 21:10 #5
xml deklarationen er sådan en tingest her:
<?xml version="1.0" encoding="iso-8859-1"?>

... den står p.t. lige før min doctype:
<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /><meta http-equiv="Content-Style-Type" content="text/css" />

... det er xhtml og endnu ikke understøtter ordentligt af IE, så det anbefales at man holder sig til html i starten indtil man føler sig "meget" hjemme i kodning eller indtil IE understøtter xhtml fuldt ud ... xhtml sider kan sagtens vises - der kommer bare problemer hvis der står noget før doctypen det gælder også ved almindelig html...

- det her er mit standard dokument jeg bruger når jeg laver kodning som jeg poster herinde...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">

</style>

<script type="text/javascript">

</script>

</head><body>

</body></html>


... Det er ikke sikkert at du behøver købe nogle bøger (jeg har dog været glad nok for min godnat læsning i bøgerne) - tag en surfer ind forbi artikel sektionen i topppen f.eks.:

php:
http://www.eksperten.dk/artikler/Programmering/Script/PHP/
eller hvis du vælger asp:
http://www.eksperten.dk/artikler/Programmering/Script/ASP/
html/css
http://www.eksperten.dk/artikler/Programmering/DHTML/
design
http://www.eksperten.dk/artikler/Design/

... bemærk jeg har ikke gennemgået den ...
men der er sikkert lidt at starte på...
Avatar billede mclemens Nybegynder
10. juni 2006 - 21:13 #6
Avatar billede mclemens Nybegynder
10. juni 2006 - 21:14 #7
... til når du får lyst til at kigge på dem ...
Avatar billede mclemens Nybegynder
10. juni 2006 - 21:23 #8
Her er lige et link til download af en apache/php pakke
så du har en lille test server på din maskine...
http://www.appservnetwork.com/

(kaster lige et svar hvis nu du kunne bruge inputtet)
Avatar billede nph12 Nybegynder
10. juni 2006 - 21:37 #9
Jeg har fundet lidt her, som jeg måske kan bruge:

http://webdesign101.dk/csslayout/
Avatar billede mclemens Nybegynder
10. juni 2006 - 21:48 #10
Det kan laves på mange, mange måder ...
her er også et eksempel med %:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">

html{margin:0px;padding:0px;border:0px;background:#fff;}
body{margin:10px;padding:1px;border:1px solid #888;background:#aaa;}
#outer{border:1px solid #888;background:#fff;padding:10px;}

#top{height:75px;background:#aaa;}

#left, #middle, #right{float:left;width:30%;background:#bbb;}
#middle{width:40%;background:#ddd;}
.clearer{background:#f00;clear:both;height:0px;overflow:hidden;}

</style>

</head><body><div id="outer">

<div id="top">Top bar</div>

<div id="left">Left bar</div>
<div id="middle">Middle bar</div>
<div id="right">Right bar</div>
<div class="clearer">&nbsp;a</div>

</div></body></html>
Avatar billede nph12 Nybegynder
10. juni 2006 - 22:08 #11
Jeg har lige prøvet dit CSS foreslag. Jeg har ikke helt forstået det endnu. Kan vi ikke starte med rammen og så bygge de andre ting på senere?
Avatar billede mclemens Nybegynder
10. juni 2006 - 22:15 #12
Hvis du vil have en ramme rundt om det hele kan du jo prøve denne:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">

html{margin:0px;padding:0px;border:0px;background:#fff;}
body{margin:10px;padding:1px;border:1px solid #000;background:#888;}
#outer{border:1px solid #000;background:#fff;padding:10px;}

</style>

</head><body><div id="outer">
Siden
</div></body></html>



eller mere simpel ramme:



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">

html,body{margin:0px;padding:0px;border:0px;background:#fff;}
body{margin:10px;border:1px solid #000;}

</style>

</head><body>

Siden

</body></html>
Avatar billede nph12 Nybegynder
10. juni 2006 - 22:39 #13
Lads os kører videre med dit 2. eksempel

Jeg forstår ikke helt denne sætning:
html,body{margin:0px;padding:0px;border:0px;background:#fff;}

Hvad er html i denne forbindelse?
Avatar billede mclemens Nybegynder
10. juni 2006 - 22:47 #14
html er <html> i javascript vil betegnelsen for den være document.documentElement mens betegnelsen for body ( <body> ) ville være document.body og i denne sammenhæng har jeg defineret en css regel der gælder for begge ... derfor er de adskilt af html,body{css} ... Jeg vælger at definere margin,padding og border til 0px da det er sådan en ting browsere ikke er helt enige om ... og så kaster jeg lige en baggrundsfarve på ... nogle bruger også background-color:#ffffff; istedet...

- I næste linje begynder jeg så at manipulere i documentets body - nu da jeg ved
at det ydre er indstillet/nulstillet ... og kaster så en border på body'en ...

Du henviser forresten i starten af dit indlæg til html...
- har du læst de artikler der står derinde?
http://www.html.dk/tutorials/css/
Avatar billede nph12 Nybegynder
10. juni 2006 - 23:08 #15
"html er <html> i javascript vil betegnelsen for den være document.documentElement mens betegnelsen for body ( <body> ) ville være document.body og i denne sammenhæng har jeg defineret en css regel der gælder for begge ... derfor er de adskilt af html,body{css} ... Jeg vælger at definere margin,padding og border til 0px da det er sådan en ting browsere ikke er helt enige om ... og så kaster jeg lige en baggrundsfarve på ... nogle bruger også background-color:#ffffff; istedet..."

Det er bare sådan man skal vide eller hvad?

Kan man sætte højde på rammen?

Lad os tilføje nogle elementer. Lad os starte med banneren.

Skal vi ikke sætte <div id=""> på elementerne? Skal selve rammen ikke have et <div id="">?

Jeg har læst http://www.html.dk/tutorials/css/, men har lidt svært ved at se, hvordan man skal bruge det til at lave strukturen på en hjemmeside (derfor dette spørgsmål på eksperten).
Avatar billede mclemens Nybegynder
10. juni 2006 - 23:44 #16
[ Det er bare sådan man skal vide eller hvad? ]
Ikke forstået? Det står i de forskellige tutorials også... eller rettere ville jeg tro - dog skal min lillebror starte på multimedia linjen her i år og han var på helt bar bund for 2uger siden ... og jeg føler også at det er svært at henvise ham til et "rigtigt" godt sted eller en "rigtig" god tutorial... da de fleste tutorials mangler et eller andet ...



[ Kan man sætte højde på rammen? ]
... nu surfede jeg lige ind på html.dk ... der er denne artikel:
http://www.html.dk/tutorials/css/lektion11.asp

- men, ja du kan sætte top right bottom og left width på borderen:
body{margin:10px;border:1px solid #000;border-width:10px 5px 3px 11px;}

eller blot top/bottom og left/right:
body{margin:10px;border:1px solid #000;border-width:10px 5px;}

... og hvis du tænkte på en decideret højde af rammen så udvider den sig normalt så den passer med relative eller floatede elementer der ligger inden i den - måske skal man lige cleare engang imellem for at få den til at køre igennem...



[ Skal vi ikke sætte <div id=""> på elementerne? Skal selve rammen ikke have et <div id="">? ] - Et element skal have en id hvis du vil manipulere den med dine styles eller en class definering ... du kan dog også tildele css selvom den ikke har en id eller en class ... Du kan f.eks. bruge html til at vælge alle html elementer ... ok, der er selvfølgelig kun en ... eller f.eks. a{css} til at manipulere alle a'tags ... Hvis der er et ydre element rundt om et andet kan du også vælge ud fra det ydre element via det her:

#outer div{css} ... det vil så tilføje css'en til alle div's der ligger inden i elementet med id="outer" ... tilsvarende
.outer div{css} ... det vil så tilføje css'en til alle div's der ligger inden i elementet med class="outer" ...

- Du må kun have 1 ens id på hver side ... d.v.s. du må ikke have to elementer der har samme id , dog må flere elementer godt have samme class...



[ Lad os tilføje nogle elementer. Lad os starte med banneren.  ]
- Jeg bruger mest min tid herinde på eksperten til at udfordre mig selv, og evt. hjælpe andre med lidt start hjælp - jeg har selv været ude i tables i tables i tables siden '99 indtil sidste år hvor jeg læste om css og xhtml inde hos w3c.org

... men jeg hjælper dig ikke ved at lave hele din internet side - hvis du ikke forstår css tutorial'en inde hos html.dk så kast dig igang med html tutorial'en først og lær lidt basis...

Min lillebror gik sådan set selv igang med html.dk og læste lidt derinde og han havde lavet en xhtml startup side ugen efter ... d.v.s. det var kun menu og top banner - men han skal jo også spille wow så det går jo ikke helt så hurtigt...
(han havde dog fået lidt startup markup kode fra min webshop)

- Jeg summerer det lige op: Jeg har ikke selv skrevet en tutorial til start af webmarkup endnu den mangler måske i ekspertens artikler men... jeg håber en anden tager slæbet og skriver den - jeg er ikke specielt sprogligt engageret (Er god til sprog men ikke god til artikler om webviden) og driver en internet forretning så tiden til ting, jeg ikke får nogen personlig udvikling ved at foretage mig, er lettere begrænset...


... og hvis html's artikler ikke hjælper dig igang skal du måske have gang i microsoft frontpage eller et andet værktøj til begyndere indenfor kodning... Jeg koder selv direkte i notesblok ...


[ Hvordan laver man strukturen på en hjemmeside? ]
[ Kan man lave nogle af tingene sådan, at man kan rette det et centralt sted? ]
^ - Regnede med at de to henviste til hvordan man gjorde kodningen nemmere for sig selv... PHP vs. ASP

[ Hvad er den bedste måde, at lave en hjemmeside på, så den kan køre under alle browsere? ]
^ Flere browsere...

[ Er der nogen som kan anbefale nogle gode bøger om, hvordan man laver hjemmeside design? ]
^ Der er jeg så kommet med et par bud... Har du egentlig læst bøgerne?
( 10/06-2006 20:43:49 ) http://www.libris.dk/Vis_artikel.asp?ArticleID=1444
- kig evt. Web-programmering og Hjemmesider - lær det selv





... Men ok, her er en banner:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">

html,body{margin:0px;padding:0px;border:0px;background:#fff;}
body{margin:10px;border:1px solid #000;}
.banner{float:right;width:468px;height:60px;border:1px dashed #000;}

</style>

</head><body>

<div class="banner">Top banner</div>

</body></html>
Avatar billede rynke10 Novice
11. juni 2006 - 05:13 #17
Hvis du skal igang, så start med noget nemt. Du behøver ikke kaste dig ud i 5 sprog på en gang, så er forvirringen vist først total :-)
En god lille tutorial finder du her
http://css.maxdesign.com.au/selectutorial/tutorial_step1.htm
Her får du hurtigt opbygget din side og du kan rette tingene et sted.
En dropdown menu behøver du ikke selv lave, der findes et hav af færdige scripts som du kan bruge. På http://www.dhtmlcentral.com/projects/coolmenus/ finder du en masse menuer.
Avatar billede nph12 Nybegynder
11. juni 2006 - 12:59 #18
Jeg skal bare forstå denne linie som, at man starter med at definere margin,padding og border til 0px, da alle browsere ikke er enig om dette?
html,body{margin:0px;padding:0px;border:0px;background:#fff;}

Når man har gjort dette, kan man starte med at bygge sin side op, rigtigt forstået?

"... og jeg føler også at det er svært at henvise ham til et "rigtigt" godt sted eller en "rigtig" god tutorial... da de fleste tutorials mangler et eller andet ..."

Jeg synes også, at det er svært at finde en "rigtig" god tutorial eller en "rigtig" god bog, da de tutorial og bøger jeg har læst/kigget i mangler at samle tingene og give et overblik over, hvordan man laver en hjemmeside fra a-z. Jeg lærer bedst af, at se nogle gode eksempler, hvilket jeg synes er en mangelvare i de tutorial og bøger som jeg kender.

Jeg har kastet mig ud i CSS-kodningen og prøvet, at lave de ting som jeg godt vil have med på min hjemmeside. Jeg har desværre ikke helt styr på det endnu, så lidt hjælp vil være dejligt:-) Jeg vil bare have strukturen på plads, så skal jeg nok prøve at sætte mig en i de andre ting selv. Jeg beder ikke om hjælp til at lave en hel hjemmeside, men bare hjælp til strukturen, da det er der jeg er gået i stå flere gange. Jeg tager gerne imod kritik, da det er en god måde at lære på.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">

html,body{margin:0px;padding:0px;border:0px;background:#fff;}
body{margin:10px;border:1px solid #000;}

#banner {
  background-color:white;
  border-style:solid;
  border-color:black;
  border-width:1px 1px 1px 1px;
  padding-left:200px;
  padding-top:10px;
  padding-bottom:10px;
}

#dropdownmenu {
  background-color:white;
  border-style:solid;
  border-color:black;
  border-width:1px 1px 1px 1px;
  padding-left:200px;
  padding-top:10px;
  padding-bottom:10px;
}

#leftcol {
  width:170px;
  float:left;
}

#leftcol p {
  margin:0 10px .5em 10px
}

.leftbox {
  width:170px;
  float:left;
  background:white;
  border-style:solid;
  border-color:black;
  border-width:1px 1px 1px 1px;
  margin:0 0 10px 0;
}

.leftbox p {
  font-size:85%;
  margin:10px;
}


#contentscol {
  margin:0px 190px 10px 190px;
  border-style:solid;
  border-color:black;
  border-width:1px 1px 1px 1px;
  background:white;
  min-width:500px;
  font-size:90%;
}

#rightcol {
  position:absolute;
  right:10px;
  width:170px;
  top:85px
}
.rightbox {
  width:150px;
  background:white;
  border-style:solid;
  border-color:black;
  border-width:1px 1px 1px 1px;
}
.rightbox p {
  font-size:90%;
  margin:10px;
}

#footer {
  background-color:white;
  border-style:solid;
  border-color:black;
  border-width:1px 1px 1px 1px;
  padding-left:200px;
  padding-top:10px;
  padding-bottom:10px;
}

h4 {
  font-size:90%;
  margin:0;
  padding:5px 10px;
  background-color:#f90;
  border-bottom:1px solid black;
}

</style>

</head>
<body>

<div id="banner">
    <h3>Banner</h3>
</div>

<div id="dropdownmenu">
    <h3>Dropdownmenu</h3>
    [ Dropdownmenu ]
</div>

<div id="leftcol">
    <div class="leftbox">
        <h4>Menu</h4>
        [ Menu ]
    </div>
    <div class="leftbox">
        <h4>Nyhedstekst</h4>
        [ Nyhedstekst ]
    </div>
</div>

<div id="contentscol">
    <div class="navigation">
    <h3>Navigation</h3>
    [ Navigation ]
    </div>
    <div class="indhold">
    <h3>Indhold</h3>
    [ Indhold]
    </div>
</div>
<div class="rightcol">
    <div class="rightbox">
    <h4>Højreboks</h4>
    [ Højreboks ]
    </div>
</div>
<div class="footer">
    <h1>Footer</h1>
    [ Footer ]
</div>

</body>
</html>


Jeg har taget lidt udgangspunkt i http://www.webdesign101.dk/csslayout/eksempler/layout4a.html

så noget af koden har jeg lånt fra dette eksempel.
Avatar billede mclemens Nybegynder
11. juni 2006 - 13:08 #19
[ html,body{margin:0px;padding:0px;border:0px;background:#fff;} Når man har gjort dette, kan man starte med at bygge sin side op, rigtigt forstået? ]
- Der er desværre mange ting browserne ikke er enige om, en anden ting er at h1... elementer heller ikke har ens padding og margin ... og ydre elementer udvider sig ikke i forhold til indre floatede elementer i FF mens de gør det i IE (der skal køres en css clear:left / right eller both;... Men, når man støder ind problemerne er det godt med et spørsmål til det enkelte problem...

- kigger lige på din kode...
Avatar billede nph12 Nybegynder
11. juni 2006 - 13:15 #20
OK. Jeg ved godt, at der er flere ting i koden som ikke er helt på plads endnu. Jeg kigger lige på det selv og vender tilbage, hvis jeg ikke kan finde ud af det. Vi kan tage et "problem" af gangen, hvorved lærer jeg af mine fejl .
Avatar billede mclemens Nybegynder
11. juni 2006 - 13:18 #21
Strukturen er fin ... men som sagt man kan lave strukturen på mange måder
- css kan også skrives på flere måder ... i korte defineringer eller længere defineringer ... men det kommer an på hvad der passer en bedst :)

- For at sige hvordan en side skal se ud er der sommetider bedst at have en skitse over det i hovedet /paint eller på papiret hvor man har skitseret de forskellige elementer op og den ønskede placering ... og så starte fra toppen og arbejde sig ned efter...

- Så, det ser fint ud ;)
Avatar billede nph12 Nybegynder
11. juni 2006 - 16:20 #22
Jeg er gået lidt i stå...

Hvordan får jeg flyttet Højreboks ud i højrekolonne?

Hvordan får jeg lavet omriset til footer (ligesom banner og dropdownmenu)?



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <title>Ingen titel</title>
    <style type="text/css">

html,body {
  margin:0px;
  padding:0px;
  border:0px;
  background:#fff;
}

body {
  margin-top: 10px;
  margin-left: 40px;
  margin-right: 40px;
  margin-bottom: 10px;
  border:1px solid #000;
}

#banner {
  height: 50px; 
  background-color:white;
  border-style:solid;
  border-color:black;
  border-width:1px 1px 1px 1px;
}

#dropdownmenu {
  height: 10px; 
  background-color:white;
  border-style:solid;
  border-color:black;
  border-width:1px 1px 1px 1px;
}

#leftcol {
  width:150px;
  float:left;
}

#leftcol p {
  margin:0 10px .5em 10px
}

.leftbox {
  width:150px;
  float:left;
  background:white;
  border-style:solid;
  border-color:black;
  border-width:1px 1px 1px 1px;
  margin:0 0 10px 0;
}

.leftbox p {
  font-size:85%;
  margin:10px;
}

#contentscol {
  margin:0px 175px 0px 175px;
  border-style:solid;
  border-color:black;
  border-width:1px 1px 1px 1px;
  background:white;
  min-width:500px;
  font-size:90%;
}

.navigation {
  height: 10px;
  background:white;
  border-style:solid;
  border-color:black;
  border-width:1px 1px 1px 1px;


.indhold {
  height: 500px;
  background:white;
  border-style:solid;
  border-color:black;
  border-width:1px 1px 1px 1px;
}

#rightcol {
  position:absolute;
  right:10px;
  width:170px;
  top:85px
}
.rightbox {
  width:150px;
  background:white;
  border-style:solid;
  border-color:black;
  border-width:1px 1px 1px 1px;
}
.rightbox p {
  font-size:90%;
  margin:10px;
}

#footer {
  height: 500px;
  background-color:white;
  border-style:solid;
  border-color:black;
  border-width:1px 1px 1px 1px;
}

h4 {
  font-size:90%;
  margin:0;
  padding:5px 10px;
  background-color:#9999ff;
  border-bottom:1px solid black;
}

</style>
</head>
<body>
    <div id="banner">
        [ Banner ]
    </div>
    <div id="dropdownmenu">
        [ Dropdownmenu ]
    </div>
    <div id="leftcol">
        <div class="leftbox">
            <h4>Menu</h4>
            [ Menu ]
        </div>
        <div class="leftbox">
            <h4>
                Nyhedstekst</h4>
            [ Nyhedstekst ]
        </div>
    </div>
    <div id="contentscol">
        <div class="navigation">
            [ Navigation ]
        </div>
        <div class="indhold">
            [ Indhold]
        </div>
    </div>
    <div class="rightcol">
        <div class="rightbox">
            <h4>Højreboks</h4>
            [ Højreboks ]
        </div>
    </div>
    <div class="footer">
        [ Footer ]
    </div>
</body>
</html>
Avatar billede mclemens Nybegynder
11. juni 2006 - 18:28 #23
[ Hvordan får jeg flyttet Højreboks ud i højrekolonne? ]
- Når du kommer til de tre kolonner plejer jeg (alt kan gøres på flere måder) at splitte dem ud ... normalt gør jeg ikke selv da jeg kun bruger 2 kolonner ... men jeg ville sige left kolonne : float:left; og placere content og right i en wrapper div med float:right; og inden i den wrapper div ville jeg så floate content til left og den anden til right ... og så en width på 100% på footeren til sidst...

[ Hvordan får jeg lavet omriset til footer (ligesom banner og dropdownmenu)? ]
- Bemærk du bruger en id forbindelse(#footer {) og da du har givet footer en class betegnelse istedet for en id så skal du bruge en class forbindelse (.footer {)
Avatar billede nph12 Nybegynder
11. juni 2006 - 20:25 #24
Jeg har fået footer'en på plads. Jeg mangler stadigvæk, at få flyttet Højreboks ud i højrekolonne. Hvad skal jeg gøre helt præcis?

Hvad er en wrapper div?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <title>Ingen titel</title>
    <style type="text/css">

html,body {
  margin:0px;
  padding:0px;
  border:0px;
  background:#fff;
}

body {
  margin-top: 10px;
  margin-left: 40px;
  margin-right: 40px;
  margin-bottom: 10px;
  border-style:solid;
  border-color:black;
  border-width:1px 1px 1px 1px; 
}

#banner {
  height: 100px; 
  background-color:white;
  border-style:solid;
  border-color:black;
  border-width:1px 1px 1px 1px;
}

#dropdownmenu {
  height: 25px; 
  background-color:white;
  border-style:solid;
  border-color:black;
  border-width:1px 1px 1px 1px;
}

#leftcol {
  width:150px;
  height: 395px;
  float:left;
  background-color: white;
  border-style:solid;
  border-color:black;
  border-width:1px 1px 1px 1px;
}

#leftcol p {
  margin:0 10px .5em 10px
}

.leftbox {
  width:150px;
  float:left;
  background:white;
  border-style:solid;
  border-color:black;
  border-width:1px 1px 1px 1px;
  margin:0px 0px 10px 0px;
}

.leftbox p {
  font-size:85%;
  margin:10px;
}

#contentscol {
  margin:0px 175px 0px 175px;
  border-style:solid;
  border-color:black;
  border-width:1px 1px 1px 1px;
  background:white;
  min-width:500px;
  font-size:90%;
}

.navigation {
  height: 10px;
  background:white;
  border-style:solid;
  border-color:black;
  border-width:1px 1px 1px 1px;


.indhold {
  height: 500px;
  background:white;
  border-style:solid;
  border-color:black;
  border-width:1px 1px 1px 1px;
}

#rightcol {
  width:150px;
  height: 500px;
  float:right;
  background-color: white;
  border-style:solid;
  border-color:black;
  border-width:1px 1px 1px 1px;
}
.rightbox {
  width:150px;
  float:right;
  background:white;
  border-style:solid;
  border-color:black;
  border-width:1px 1px 1px 1px;
  margin:0px 0px 10px 0px;
}
.rightbox p {
  font-size:90%;
  margin:10px;
}

#footer {
  height: 50px;
  background-color:white;
  border-style:solid;
  border-color:black;
  border-width:1px 1px 1px 1px;
}

h4 {
  font-size:90%;
  margin:0;
  padding:5px 10px;
  background-color:#9999ff;
  border-bottom:1px solid black;
}

</style>
</head>
<body>
    <div id="banner">
        [ Banner ]
    </div>
    <div id="dropdownmenu">
        [ Dropdownmenu ]
    </div>
    <div id="leftcol">
        <div class="leftbox">
            <h4>Menu</h4>
            [ Menu ]
        </div>
        <div class="leftbox">
            <h4>
                Nyhedstekst</h4>
            [ Nyhedstekst ]
        </div>
    </div>
    <div id="contentscol">
        <div class="navigation">
            [ Navigation ]
        </div>
        <div class="indhold">
            [ Indhold]
        </div>
    </div>
    <div class="rightcol">
        <div class="rightbox">
            <h4>Højreboks</h4>
            [ Højreboks ]
        </div>
    </div>
    <div id="footer">
        [ Footer ]
    </div>
</body>
</html>
Avatar billede mclemens Nybegynder
11. juni 2006 - 20:32 #25
[ Jeg har fået footer'en på plads. Jeg mangler stadigvæk, at få flyttet Højreboks ud i højrekolonne. Hvad skal jeg gøre helt præcis? ]
- du skal have højre og content divs lagt ind i en wrapper div der er floatet right

[ Hvad er en wrapper div? ]
- En wrapper div er måske et lidt dumt ord ... jeg mener en omsluttende/omkransende/ydre div hvori man ligger de andre divs ... kigger lige på et eksempel...
Avatar billede mclemens Nybegynder
11. juni 2006 - 20:41 #26
Her er lidt, jeg har nu ændret bodyen css delen til en div med id="outer" (har også defineret en fast størrelse og tilføjet denne div , samt lagt de andre ind i en wrapper div ...


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <title>Ingen titel</title>
    <style type="text/css">

html,body {
  margin:0px;
  padding:0px;
  border:0px;
  background:#fff;
}








#outer{
  width: 840px;
  margin-top: 10px;
  margin-left: 40px;
  margin-right: 40px;
  margin-bottom: 10px;
  border-style:solid;
  border-color:black;
  border-width:1px 1px 1px 1px;
}









#banner {
  height: 100px;
  background-color:white;
  border-style:solid;
  border-color:black;
  border-width:1px 1px 1px 1px;
}

#dropdownmenu {
  height: 25px;
  background-color:white;
  border-style:solid;
  border-color:black;
  border-width:1px 1px 1px 1px;
}

#leftcol {
  width:150px;
  height: 395px;
  float:left;
  background-color: white;
  border-style:solid;
  border-color:black;
  border-width:1px 1px 1px 1px;
}

#leftcol p {
  margin:0 10px .5em 10px
}

.leftbox {
  width:150px;
  float:left;
  background:white;
  border-style:solid;
  border-color:black;
  border-width:1px 1px 1px 1px;
  margin:0px 0px 10px 0px;
}

.leftbox p {
  font-size:85%;
  margin:10px;
}

#contentscol {




float:left;





  border-style:solid;
  border-color:black;
  border-width:1px 1px 1px 1px;
  background:white;





  width:500px;





  font-size:90%;
}

.navigation {
  height: 10px;
  background:white;
  border-style:solid;
  border-color:black;
  border-width:1px 1px 1px 1px;
}

.indhold {
  height: 500px;
  background:white;
  border-style:solid;
  border-color:black;
  border-width:1px 1px 1px 1px;
}

#rightcol {
  width:150px;
  height: 500px;
  float:right;
  background-color: white;
  border-style:solid;
  border-color:black;
  border-width:1px 1px 1px 1px;
}
.rightbox {
  width:150px;
  float:right;
  background:white;
  border-style:solid;
  border-color:black;
  border-width:1px 1px 1px 1px;
  margin:0px 0px 10px 0px;
}
.rightbox p {
  font-size:90%;
  margin:10px;
}

#footer {width:100%;
  height: 50px;
  background-color:white;
  border-style:solid;
  border-color:black;
  border-width:1px 1px 1px 1px;
}

h4 {
  font-size:90%;
  margin:0;
  padding:5px 10px;
  background-color:#9999ff;
  border-bottom:1px solid black;
}






#wrapper{

float:right;
width:670px;}





</style>
</head>
<body>

<div id="outer">


    <div id="banner">
        [ Banner ]
    </div>
    <div id="dropdownmenu">
        [ Dropdownmenu ]
    </div>
    <div id="leftcol">
        <div class="leftbox">
            <h4>Menu</h4>
            [ Menu ]
        </div>
        <div class="leftbox">
            <h4>
                Nyhedstekst</h4>
            [ Nyhedstekst ]
        </div>
    </div>





<div id="wrapper">

    <div id="contentscol">
        <div class="navigation">
            [ Navigation ]
        </div>
        <div class="indhold">
            [ Indhold]
        </div>
    </div>
    <div class="rightcol">
        <div class="rightbox">
            <h4>Højreboks</h4>
            [ Højreboks ]
        </div>
    </div>

</div>




    <div id="footer">
        [ Footer ]
    </div>


</div>

</body>
</html>
Avatar billede nph12 Nybegynder
13. juni 2006 - 13:56 #27
Jeg har reseveret nogen bøger om CSS på biblioteket og håber det kan give mig en lidt større forståelse af brugen af CSS.

Jeg prøver lige, at lege lidt mere med koden. Det er vel skabelonen til hjemmesiden jeg har lavet nu (næsten), hvordan får jeg noget indhold på siden?
Avatar billede mclemens Nybegynder
13. juni 2006 - 16:56 #28
[ Det er vel skabelonen til hjemmesiden jeg har lavet nu (næsten), ]
Tjoh, det er det vel ... du skal nok overveje at undlade at definere en height på elementer der skal kunne ændres i højden... Nu har du selv lavet grund strukturen og så er det vel at arbejde videre med css håndtering og element placering til du får det resultat du ønsker...

[ hvordan får jeg noget indhold på siden? ]
... regner ikke med at det er en joke? ... Du skal lære om html før du lærer om css eller også skal du lære om begge dele samtidig ... du skrev i starten af dit spørgsmål at du kendte html - så du putter vel bare nogle html tags ind i dit indholds div element? ... Kan dog godt ske at jeg har misforstået spørgsmålet om hvordan du laver indhold på siden ...

- Jeg kan desværre ikke lære dig alt jeg ved om kodning og opbygning af sider (det sidder lidt på rygraden) ... Den bedste måde at lære det på er at starte fra bunden af og tage hvert element opefter og så når man kender det hele (alle basis html elementer og css) kan man selv sammensætte et design ... Jeg tror blot du mangler at læse nogle bøger om html og evt. dem du har reserveret om css
... du har taget dit design i tråden med inspiration fra

[ Jeg har taget lidt udgangspunkt i http://www.webdesign101.dk/csslayout/eksempler/layout4a.html

så noget af koden har jeg lånt fra dette eksempel. ]

- men når man kigger på andres koder er det vigtigt at man ved hvad de har lavet ... det bedste er derfor at læse om tingene først ... Så prøv at læse de bøger du har reserveret ;o)
Avatar billede mclemens Nybegynder
13. juni 2006 - 17:19 #29
[ du skrev i starten af dit spørgsmål at du kendte html ]
Hov nej huskede forkert, du har jo aldrig skrevet om hvorvidt du kendte html ... gik bare automatisk ud fra at du kendte html ... min fejl - du skal nok læse lidt om html elementer før du går igang med at lægge indhold på siden ... (lån evt. en bog om det også ... kan ikke anbefale nogen da jeg sidst læste i en bog engang i '98-'99 om html elementer ... brugte w3c.org fornylig og så lidt w3schools.com også ...
Avatar billede nph12 Nybegynder
14. juni 2006 - 20:20 #30
Takker rigtigt mange gange for hjælpen:-)
Avatar billede mclemens Nybegynder
14. juni 2006 - 20:23 #31
Velbekom, og tak for point ;o)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester