Avatar billede lsskaarup Nybegynder
08. juni 2009 - 20:31 Der er 7 kommentarer og
1 løsning

div i div

Et meget nemt spørgsmål, men kan bare ikke se skoven for bare træer.

Sidder og roder med en ny hjemmeside, hvor jeg godt vil prøve at lave layouttet via css og ikke via tabeller, som jeg ellers har brugt.

Men jeg kan ikke rigtigt få kringlet opsætningen.

Jeg har et billede, der skal bruges som baggrundsbillede. Det vil jeg gerne have centeret horisontalt men kan indstilling i top.

Derudover vil jeg gerne have nogle indholdsområder til at ligger henover billedet. Men hvordan sikre jeg mig dette, og især hvordan sikre jeg mig at det ligger de rigtige steder, udanset hvilken oplysningen brugeren har?
Avatar billede roenving Novice
09. juni 2009 - 04:38 #1
Du laver en master-div, som indeholder resten af siden (uddrag !-)

...
<body>
  <div id="site">
    <!-- dit indhold, f.eks. sat op med floating divs -->
  </div>
</body>

-- og den tilhørende css ser så således ud:

html,body{margin:0;padding:0;}
#site{width:960px;margin:0 auto;background-image:url(ditBaggrundsbillede.gif);}

Floating divs kan du bruge til at lave kolonnelignende strukturer, de skal så have en defineret bredde og float:left; i deres css-regler !o]
Avatar billede lsskaarup Nybegynder
10. juni 2009 - 11:04 #2
Ja, det ser ud til at virke, har bare lige lavet en hurtigt html fil på arbejde og testet på den.

Men lige et spørgsmål til css'en, "margin:0 auto;" på #site, hvordan birker det lige, skal der ikke bare stå auto eller hvad?
Avatar billede roenving Novice
10. juni 2009 - 14:12 #3
Da auto-margen slet ikke virker vertikalt kunne man ligesågodt skrive det, men jeg ynder at understrege det ved at sætte vertikal margen til 0, så det tydeligt fremgår ved en tilfældig gennemlæsning af koden !o]

-- men ellers så er det sådan at box-properties (som gælder for en eller flere af de 4 sider på en boks !-) kan noteres som 1 til 4 værdier:

margin:1px; /*Gælder for alle 4 sider*/
margin:2px 3px; /*2px i top og bund, 3px i begge sider*/
margin:4px 5px 6px; /*4px i toppen, 5px i begge sider og 6px i bunden*/
margin:7px 8px 9px 10px; /*7px i toppen, 8px i højre side, 9px i bunden og 10px i venstre side*/

De 4 sider har en rækkefølge du kan se på som uret, starter i toppen og følger viserens vej rundt ...
Avatar billede lsskaarup Nybegynder
10. juni 2009 - 16:56 #4
Okay, tak for hjælpen, det vil jeg kigger nærmere på når jeg kommer hjem
Avatar billede roenving Novice
10. juni 2009 - 17:07 #5
-- og tak for point ;~}
Avatar billede lsskaarup Nybegynder
10. juni 2009 - 23:43 #6
Velbekomme, men lige et spørgsmål mere. Jeg kan ikke få den til at vise billedet i site div'en, men en baggrundsfarve har jeg ingen problemer med. Hvad kan det skyldes?
Avatar billede roenving Novice
11. juni 2009 - 11:49 #7
Det typiske problem i den situation er sti-problemer, at du bruger flere forskellige mapper, test igennem med alle filer i samme mappe, og gå så retur !-)
Avatar billede lsskaarup Nybegynder
11. juni 2009 - 12:10 #8
Naa, det var en ren og sker fejl 40, i form af et forkert bogstav i filnavnet. Kunne bare ikke se den i går...
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