Søg
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
Der da lidt her http://www.dynamicdrive.com/style/layouts/
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
03/0121:50 htaccess virker ikke på Ubuntu Server Af Strawberry i Linux
02/0114:46 Offline opdatering af co-working excell sheet Af morten vestergaard i Excel
27/1222:02 Låse brugt iPad op Af drstein i iOS, iPhone & iPad
27/1219:21 Hvor finder jeg en oversigt over mine spørgsmål Af KurtG i Hjælp og fejl
27/1211:31 TP-Link Wifi extender opsat som accesspoint giver 50% up- og download, Af Uvanga i Wifi
White papers
Flere white papers »