Søg
Avatar billede moejensen Nybegynder
07. september 2003 - 17:18 Der er 19 kommentarer og
1 løsning

opbygning af hjemmeside i css

Hej med jer,

Jeg har nu sat mig for at jeg skal have styr på at lave layout i CSS, men synes ikke det er helt let.

Jeg har lavet en skitse af det layout jeg forsøger at lave herunder:

http://www.keka.dk/moe-jensen.dk/site/design.jpg

Jeg har følgende problemer:
- Hvordan får jeg  det hele centreret på midten, så selve siden ex. er 750 px bred, og altid står i midten, uanset hvor bred skærmen er.
- Hvordan får jeg adresse baren til altid at være ex. 10 px under nederste linie af main, uanset hvor høj den er.

Håber i kan hjælpe.
Avatar billede foxy_lady Nybegynder
07. september 2003 - 17:24 #1
du får det til at være på midten ved at sætte højre og venstre margin til auto;
For at justere boksene i forhold til hinanden sætter du position til absolute (position:absolute;)
Avatar billede lordhead Nybegynder
07. september 2003 - 17:25 #2
Hej.

1- Jeg mener det har noget med position at gøre, men er ikke sikker.

2- der skal du bruge margin. feks.
#adresse {
margin-top: 10px;
}

Du kan også lede efter layout modeller og koder på www.webdesign101.dk de har mange artikler lige netop om det emne..!

/lordhead
Avatar billede lordhead Nybegynder
07. september 2003 - 17:28 #3
denne artikel kan måske have din interesse?
http://www.webdesign101.dk/css/csslayout/auto-centering.php
Avatar billede moejensen Nybegynder
07. september 2003 - 17:28 #4
--> foxy_lady : Kan du skrive det i css?

--> lordhead : det du skriver vil da bare sætte adressebaren 10 px fra toppen af siden? Det skal være i forhold til bunden af main, som jeg ikke ved hvor høj er.
Avatar billede foxy_lady Nybegynder
07. september 2003 - 17:34 #5
har du lavet bokse med div? (f.eks. div class="boks".

I hver div i dit stylesheet skriver du

. boks {
position: absolute;
}

og de bokse der skal være i midten af siden skriver du

. boks {
marginright: auto;
marginleft: auto;
}

Håber du forstår den lidt måske forvirrende forklaring.. du kan også kigge på www.html.dk for hjælp
Avatar billede exp Juniormester
07. september 2003 - 17:35 #6
http://www.html.dk/artikler/00043/
Avatar billede foxy_lady Nybegynder
07. september 2003 - 17:36 #7
http://www.html.dk/tutorials/css/lektion9.asp
Avatar billede foxy_lady Nybegynder
07. september 2003 - 17:38 #8
rettelse:

. boks {
margin-right: auto;
margin-left: auto;
}
Avatar billede lordhead Nybegynder
07. september 2003 - 17:42 #9
Jeg må ærgeligtalt indrømme at jeg bedst kan forholde mig til tabel layouts :)

Min komentar mht. margin-top: 10px; plejer at være relevant, med tabel layouts :}
Avatar billede lordhead Nybegynder
07. september 2003 - 17:46 #10
...Nu er jeg (nogen lunde da)sikker i min sag ;)

for at centrere indsæt dette i dit CSS dokument:

body {
    padding:0px;
    text-align:center;
}
Avatar billede foxy_lady Nybegynder
07. september 2003 - 17:59 #11
lordhead -- text-align gør kun teksten centreret, ikke hele boksen.
Avatar billede swuppe Nybegynder
07. september 2003 - 19:12 #12
Der er flere måder at klare det på, men her er i hvert fald én af dem.

<html>
<head>
    <title>Untitled</title>
    <style type="text/css">
    body {text-align: center;}
    #top {border: 1px #333 solid; width: 750px; margin: 0 auto;}
    #main {width: 750px; margin: 10 auto;}
    #menu {float: left; width: 200px; border: 1px #333 solid;}
    #content {width: 546px; border: 1px #333 solid;}
    #bottom {width: 750px; margin: 0 auto; border: 1px #333 solid;}
    </style>
</head>

<body>
<div id=top></div>
<div id=main>
<div id=menu></div>
<div id=content></div>
</div>
<div id=bottom></div>
</body>
</html>
Avatar billede lordhead Nybegynder
08. september 2003 - 15:49 #13
foxy_lady> tag'et <div> er ment som et 'text-tag', så derfor var det vel oplagt at prøve dette af?

<div> og <span> og <p> kan stort set det samme mht. tekst.
Avatar billede foxy_lady Nybegynder
08. september 2003 - 19:06 #14
lordhead>> Jeg forstår ikke helt hvad du mener så.. det er da alle boksene Moejensen vil ha til at være i midten?? Det kan han da i hvert fald ikke med text-align.
Avatar billede lordhead Nybegynder
08. september 2003 - 19:10 #15
Jeg tror sgu heller ikke helt jeg forstår mig selv ;-}

I så fald, har jeg ikke forstand på opbygning i css, men det har webmasteren på www.webdesign101.dk i en vis grad ;)

ellers kunne man jo også prøve at sætte en tabel uden om det hele, og så sætte den til at centrere indholdet ?
Avatar billede moejensen Nybegynder
08. september 2003 - 19:51 #16
swuppe gav mig den rigtige løsning, men kan det ikke gøres så der kun er de fire div'er (logo,menu,main og address)? Er eksemplet anvendeligt i alle browsere, så det tager højde for div bugs?
Avatar billede lordhead Nybegynder
08. september 2003 - 19:57 #17
det lyder godt at du har fundet løsningen ;)
Avatar billede swuppe Nybegynder
08. september 2003 - 20:29 #18
hvis du tilføjer float: right; til "content" ser det nogenlunde ens ud i IE, mozilla, opera og netscape alle PC, der er lidt variation, men det skulle være let at rette til.

Den sidste div er der for at få centreret de to float's menu og content, den kan palceres et par forskellige steder men ikke helt undværes. Hvis du kun vil have de 4 div's så skal du over i noget position:absolute på alle div's. Det frembringer dog helt andre, og større ?o), problemer, som vil kræve både matemtik og javascript.
Avatar billede moejensen Nybegynder
09. september 2003 - 07:11 #19
Okay, tak for det fine svar
Avatar billede swuppe Nybegynder
09. september 2003 - 10:29 #20
Velbekomme, tak for points.
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
I dag 19:20 DVD program Af dcedata1977 i Andet software
I dag 16:09 Bitdefender brokker sig Af FinnRasmussen i Andet sikkerhed
I går 21:00 Libre Office Impress Af Frank i Andre styresystemer
I går 11:47 VB script Af Jenshentze i Word
I går 11:21 Popup ved opstart Af mort1 i Windows
White papers
Flere white papers »