Avatar billede nph12 Nybegynder
05. juni 2007 - 15:40 Der er 28 kommentarer og
1 løsning

Hvordan bygger jeg en hjemmeside op i CSS?

Hej
Hvordan bygger jeg en hjemmeside op i CSS? Meget gerne element for element.

Hvordan laver man sin CSS-kode, så den vises korrekt i alle browsere?
Avatar billede superwulff Nybegynder
05. juni 2007 - 17:17 #1
Avatar billede nph12 Nybegynder
05. juni 2007 - 17:17 #2
Jeg skal vel starte med body-elementet. Hvad skal der være i body-elementet? 

body
{

}

I body-elementet skal jeg vel vælge baggrundsfarve, men skal jeg vælge andet?

I mit html-dokument skal jeg lave selve strukturen på hjemmeside vha. <div id="element">. I første omgang skal jeg definere det område, hvor selve hjemmesiden skal vises. Hvad navngiver man typisk dette element?
Avatar billede nph12 Nybegynder
05. juni 2007 - 17:40 #3
Det er body-elementet og elementet til indholdsrammen jeg har svært ved, at få til at virke som jeg vil.
Avatar billede nph12 Nybegynder
05. juni 2007 - 19:02 #4
Jeg vil godt lave en hjemmeside, som har en baggrundsfarve rundt om selve siden. Jeg er startet på at skrive koden, men det virker ikke helt som jeg vil. Hvad gør jeg forkert?

html dokument

<body>
<div id="container">
    <div id="indhold">
    </div>
</div>
</body>

CSS dokument

body
{
    margin: 0;
    padding: 0;
    font: Arial, Helvetica, sans-serif;
    background: #0066CC;
    height: 100%;
}


#container
{
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 10%;
    margin-bottom: 10%;
    padding: 0;
    background: #FFFFFF;
}

#indhold
{
   

}
Avatar billede nph12 Nybegynder
05. juni 2007 - 20:37 #5
Jeg har ændret mit CSS dokumentet til dette:

body
{
    padding: 0;
    font: Arial, Helvetica, sans-serif;
    background: #0066CC;
    height: 100%;
}


#container
{
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    background: #FFFFFF;

}

#indhold
{
   

}

men hvorfor er marginen i top og bund vist forkert? Der skal jo ikke være nogen margin.
Avatar billede Slettet bruger
05. juni 2007 - 22:21 #6
Jeg har lagt et eksempel her - hvor du blot kan >View Source< og gemme koden og bruge dette som udgangspunkt - eller under filer >Gem side som...

ibbo dot dk
Avatar billede nph12 Nybegynder
05. juni 2007 - 22:43 #7
Hvor er eksemplet???
Avatar billede Slettet bruger
05. juni 2007 - 23:06 #8
Linket (siden) er eksemplet
Avatar billede nph12 Nybegynder
05. juni 2007 - 23:26 #9
OK. Så er jeg med;-)

Ja, det er noget af det, som jeg er ude efter.
Avatar billede nph12 Nybegynder
06. juni 2007 - 00:37 #10
Nu kører det næsten som jeg vil have det, men margin i bunden er der ikke. Det går fint nok med at styre de andre marginer.


body
{
    margin: 0;
    padding: 0;
    font: Arial, Helvetica, sans-serif;
    background-color: #0066CC;
    height: 100%;
}


#container
{
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 5%;
    margin-bottom: 5%;
    padding: 0;
    background-color: #FFFFFF;
    height: 100%;
}

#indhold
{
   

}
Avatar billede roenving Novice
06. juni 2007 - 00:41 #11
>>ibtage

-- er du bange for at blive indekseret ?-)

-- for det er da godt nok nemmest at lægge links, der indledes med http:// eller www. for så vil de være klikbare ...

I øvrigt er det byens dårligste råd at henvise til html.dk, da de ikke har fattet ¼ millimeter af hverken css eller html, og desværre udstiller det på det groveste ,-(

-- og det kan så tilføjes at overskriftens begreb: 'opbygge en side i css' er en gang avanceret vrøvl, da man kun kan opbygge en side af html-elementer, men den opbygning kan så suppleres med en solid gang css, som kan give en lige præcis det personlige eller layout-mæssige præg. man ønsker !-)
Avatar billede Slettet bruger
06. juni 2007 - 09:10 #12
--->roenving... Kan du ikke finde på andet en at 'lege skolelærer' - for mit vedkommende er jeg for gammel til, at den slags bemærkninger har effekt, jeg har min måde at gøre tingene på og du må gerne have din uden at jeg skal blande/irettesætte.

...men for at svare dig med hensyn til linket, er det ganske kort tid til rådighed, og vil blive fjernet meget snart, derfor syntes jeg (i dette tilfælde) ikke der skal være et klikbart link, der kun fører til en 'Not Found-side' - der er masser af 'døde' link på eksperten og til ingen verdens nytte, nærmest en irritation for brugerne der efter meget besvær (grundet en elendig søgefunktion på eksp.)har fundet frem til det spørgsmål der måske kan løse hans problem, og hvor linket så er 'dødt'

....med hensyn til html.dk (du mangler lige www) er vi helt enige.

....det sidste afsnit 'opbygge en side i css' - vil jeg bare se som en 'formuleringsfejl' hvis nu vi retter l bogstav
oprindelig:Hvordan bygger jeg en hjemmeside op i CSS?
og udskifter 'i' med 'med' - så der kommer til at stå
Hvordan bygger jeg en hjemmeside op med CSS?

:-) .... ja så var der vist ikke mere (denne gang)
Avatar billede nph12 Nybegynder
06. juni 2007 - 10:13 #13
Det væsentlige er ikke overskriften eller hvordan der bliver linket til forskellige hjemmesider.

>>roenving: hvordan bygger jeg en hjemmeside op med html/css?
Avatar billede olebole Juniormester
06. juni 2007 - 14:27 #14
<ole>

"Hvordan bygger jeg en sportsvogn?" ... fint og forståeligt spørgsmål - men komplet urealistisk.

Det er spørgsmålet her i tråden også. Svaret er:
1) Sæt dig ind i reglerne for CSS
2) Leg med CSS
3) Stil et spørgsmål (f.eks. på E), hvis du stadig har problemer

Du kan ikke forvente en komplet, lang CSS-tutorial som svar på et E-spørgsmål ... og det er, hvad dit spørgsmål kræver  =)

/mvh
</bole>
Avatar billede nph12 Nybegynder
06. juni 2007 - 14:31 #15
Nu er jeg kommet tættere en løsning. Hvordan laver jeg siden sådan, at der ikke skal scrolles. Det hjælper ikke, at ændre height til 98%.

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

body {
  margin-top: 1%;
  margin-left: 10%;
  margin-right: 10%;
  margin-bottom: 1%;
  background: #FFFFFF;
  height: 100%;
}
Avatar billede olebole Juniormester
06. juni 2007 - 14:42 #16
Før du overhovedet kan kaste dig ud i at bruge CSS, er det som sagt helt nødvendigt, du først forstår de mest basale CSS-regler. En folkeskoleelev kan således heller ikke regne med Heisenbergs usikkerhedsrelationer uden en god, matematisk indsigt  =)
Avatar billede nph12 Nybegynder
06. juni 2007 - 15:15 #17
Forståelsen kommer også, når man sidder og leger med html/css. Jeg har kun et hæfte om css og den henviste tutorial på html.dk at holde mig til, og et sted skal man jo starte. Det gør det heller ikke lettere, at browsere fortolker css-koden forskelligt.

Hvis der er bøger eller andre tutorials som I kan anbefale, så hører jeg meget gerne fra jer.
Avatar billede nph12 Nybegynder
06. juni 2007 - 21:33 #18
Jeg forstår stadigvæk ikke, hvordan height 98% (eller 100%) + margin-top 1% + margin-bottom 1% fylder mere end 100% af skærmens højde, så man bliver nød til at scrolle?
Avatar billede roenving Novice
06. juni 2007 - 23:59 #19
Prøv at sætte de 100% også i html:

html,body {
  margin:0px;
  padding:0px;
  border:0px;
  background: #6699FF;
  height:100%;
}

-- så kan du altid lave den anderledes på specielt body-tagget ...

-- og husk i øvrigt en fuldt kvalificeret doctype, f.eks.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

...
Avatar billede roenving Novice
07. juni 2007 - 00:01 #20
Og så kan det anbefales, at du laver dit design i en bestemt bredde ved at sætte alt indhold ind i en overordnet div:

<body>
  <div id="site">

    <!-- Dit indhold -->

  </div>
</body>

-- med f.eks. dette i stylesheet:

#site{
  width:764px;
  margin:0 auto;
  height:100%;
}
Avatar billede nph12 Nybegynder
07. juni 2007 - 17:19 #21
roenving>> Jeg har prøvet det du har beskrevet, men jeg synes stadig ikke det virker efter hensigten. Margin bliver vist som den skal, men højden på hele siden bliver stadig for høj, så jeg skal scrolle (hvilket jeg godt vil undgå).

Jeg har prøvet at sætte top og bund margin til 1% og height til 96%, så behøver jeg ikke at scrolle på vinduet. Jeg synes bare ikke, at det giver nogen mening, da det vel skal give 100%.
Avatar billede nph12 Nybegynder
09. juni 2007 - 12:35 #22
Jeg har prøvet, at lege lidt med roenvings løsning, men det driller stadig. Jeg vil godt have, at det også er en margin i top og bund af siden uden at man skal scrolle siden. Hvad skal jeg ændre/tilføje for at kunne gøre dette?

Html dokument:

<!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>Hjemmeside</title>
<link rel="stylesheet" type="text/css" href="style/style.css">

</head>

<body>
  <div id="site">

    <!-- Dit indhold -->

  </div>
</body>
</html>

CSS dokument:
html,body {
  margin:0px;
  padding:0px;
  border:0px;
  background: #6699FF;
  height:100%;
}

#site{
  width:764px;
  margin: 0 auto;
  background: #FFFFFF;
  height: 100%;
}
Avatar billede roenving Novice
09. juni 2007 - 16:04 #23
Prøv med:

#site{
  width:764px;
  margin: 2% auto;
  background: #FFFFFF;
  height: 96%;
}
Avatar billede nph12 Nybegynder
10. juni 2007 - 21:29 #24
Der er forskel på højden af top margin og bund margin - det er det, som hele tiden har drillet mig.
Avatar billede nph12 Nybegynder
12. juni 2007 - 12:39 #25
Hvorfor er top margin og bund margin ikke lige store?
Avatar billede roenving Novice
12. juni 2007 - 12:50 #26
Hrm, det ved jeg zq ik' ...

-- prøv at lege med dette, men hvis du så bruger forskellige browsere, bliver det alligevel ikke helt ens:

#site{
  width:764px;
  margin: 1.5% auto 2%;/* top sider bund med 3 parametre !-) */
  background: #FFFFFF;
  height: 96.5%;
}
Avatar billede nph12 Nybegynder
12. juni 2007 - 14:25 #27
Det bliver vist ikke bedre i min IE6.

Mange tak for hjælpen.

roenving>> Hvis du vil have point, så opret lige et svar.
Avatar billede roenving Novice
13. juni 2007 - 00:37 #28
Oki '-)
Avatar billede roenving Novice
13. juni 2007 - 12:43 #29
-- og tak for point ;~}
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