Avatar billede ngr Praktikant
25. oktober 2009 - 18:07 Der er 8 kommentarer og
1 løsning

Savner en CSS skabelon

Jeg skal i gang med at lave en hjemmeside og ville gerne bruge css til opbygningen af den.

Jeg har arbejdet lidt med CSS, men ikke nok til at jeg kan finde ud af at bygge den op fra grunden - så derfor vil jeg høre, om nogen har kendskab til et sted, hvor man kan finde sådan en "skabelon".

Strukturen skal være således:

En vandret bjælke øverst, 1000 px bred, med titel mv. og derunder:

3 kolonner:
En til menuen, en til indholdet og en i samme bredde som menuen. Og den venstre og den højre kolonne skal flugte med bjælken - altså passe i bredeen.

Og så skal det hele naturligvis centreres.

Nogen der ved, hvor/om man kan finde ccs koden til sådan en ting?
Avatar billede zips Juniormester
25. oktober 2009 - 18:20 #1
Avatar billede ngr Praktikant
25. oktober 2009 - 18:41 #2
Ja, men slet ikke noget, jeg kan finde ud af.
Avatar billede Slettet bruger
25. oktober 2009 - 19:51 #3
CSS er svært "i sig selv" - men også fordi de forskellige browsere tolker det forskelligt - Kan være MEGET frustrerende (og tidskrævende).
Gammeldaws tabeller er meget lettere at have med at gøre...
- MEN det var jo ikke dét du bad om : )

Voilá:

<html><head><style>
.body {
    text-align:center;
    }
#overligger {
    width:1000px;
    background-color:yellow;
    margin:0px auto;
    }
#pakke {
    width:1000px;
    text-align:left;
    margin:0px auto;
    }
#venstre {
    float:left;
    width:20%;
    background-color:red;
    }
#indhold {
    float:left;
    width:60%;
    background-color:white;
    }
#hojre {
    float:left;
    width:20%;
    background-color:green;
    }
</style></head><body>

<div id='overligger'> Topbar </div>

<div id='pakke'>
    <div id='venstre'> Venstremenu </div>
    <div id='indhold'> The indhold </div>
    <div id='hojre'> Contextmenuen </div>
</div>

</body></html>
Avatar billede ngr Praktikant
25. oktober 2009 - 20:32 #4
Tuuuuuuusind tak skal du have. Kigger på det i aften og ser, om jeg kan få det til at virke.
Ville du selv have lave det i tables?
Venlig hilsen
Avatar billede zips Juniormester
25. oktober 2009 - 20:44 #5
Ja det er jo flot at lære en ny at der ikke skal doctype på så man slår det meste css fra ved at køre i quirks modus :-)
Avatar billede Slettet bruger
25. oktober 2009 - 20:57 #6
Kører vi ikke alle i quirks-mode når det kommer til stykket : )

Nej.
Det var derfor jeg foreslog tabeller i stedet for...
Det "moderne internet" er bare ikke så "amatørvenligt" som i gamle dage.


Jeg ville bruge CSS - men jeg har 25 års erfaring...

Doctypen fortæller browseren hvilken variant af HTML den kan forvente.
- og Content-type, hvilket tegnsæt. Så din "skabelon" bliver:


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

<html><head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<style>
.body {
    text-align:center;
    }
#overligger {
    width:1000px;
    background-color:yellow;
    margin:0px auto;
    }
#pakke {
    width:1000px;
    text-align:left;
    margin:0px auto;
    }
#venstre {
    float:left;
    width:20%;
    background-color:red;
    }
#indhold {
    float:left;
    width:60%;
    background-color:white;
    }
#hojre {
    float:left;
    width:20%;
    background-color:green;
    }
</style></head><body>

<div id='overligger'> Topbar </div>

<div id='pakke'>
    <div id='venstre'> Venstremenu </div>
    <div id='indhold'> The indhold </div>
    <div id='hojre'> Contextmenuen </div>
</div>

</body></html>
Avatar billede ngr Praktikant
25. oktober 2009 - 22:17 #7
Det er jo bare super.

Jeg har bare et par spørgsmål:

Der er en blank "margin" mellem topbar og overkanten af skærmen. Kan den ikke fjernes?

Ville det ikke være mere sikkert - og "korrekt" - at placere topbar i "pakken"?

Er det tilfældigt, at du angiver de 3 kolonners bredde i procent og ikke i pixel?

Mvh
Avatar billede Slettet bruger
25. oktober 2009 - 22:45 #8
: )
- Ja, der dukker mange spørgsmål op ikk'

Den margin du ser øverst er body's default margin (på 2 pixels)

fjern den med:

body {
    margin:0;
    }



NB: den ".body" som var med i første skud havde ingen effekt.


% fordi det så er lettere at lave om på senere uden at skulle ligge og pille ved en masse "hardcodede" tal.

Jeg foretrækker "liquid" designs. Dvs. at siden fylder hele browservinduet
- og selv finder ud af at tilpasse sig. Synes det er mere brugervenligt.
F.eks:

<html><head><style>
body {
    margin:0;
    }

#overligger {
    width:100%;
    background-color:yellow;
    margin:0px auto;
    }
#pakke {
    width:100%;
    text-align:left;
    margin:0px auto;
    }
#venstre {
    float:left;
    width:20%;
    background-color:red;
    }
#indhold {
    float:left;
    width:60%;
    background-color:white;
    }
#hojre {
    float:left;
    width:20%;
    background-color:green;
    }
</style></head><body>

<div id='overligger'> Topbar </div>

<div id='pakke'>
    <div id='venstre'> Venstremenu </div>
    <div id='indhold'> The indhold </div>
    <div id='hojre'> Contextmenuen </div>
</div>

</body></html>
Avatar billede ngr Praktikant
25. oktober 2009 - 23:25 #9
Jo  :-)
Men du siger vel til, når du ikke gider mere :-)

Jeg har osse mange gange overvejet, om jeg skulle bruge liquid eller den anden løsning (hvad den så hedder) - jeg er ikke helt grøn inden for det her, men har bare aldrig haft tid til at sætte mig ordentlig ind i CSS.

Men jeg synes, jeg har meget mere styr på layoutet, når jeg ikke bruger liquid.

Kommer til at tænke på, at jeg vel egentlig burde stille mine supplerende spørgsmål ved at oprette et nyt spm., som du kunne svare på og så få points for det ..............
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