Avatar billede webcreator Nybegynder
23. november 2004 - 17:18 Der er 14 kommentarer og
1 løsning

Skabelon til site - menu til venstre, hoved-side til højre

Hej Eksperter.

Mit CSS driller. Jeg ønsker at min side har den klassiske opdeling med en menu i venstre side, og selve sidens indhold i en "kasse" til højre for menuen.

At lave den slags med tabeller er ingen sag. Men hvordan kan det laves med Div/Span? Uden brug af 'position' vel at mærke.
Avatar billede skovenborg Nybegynder
23. november 2004 - 17:30 #1
her ville float være lige sagen for dig :-)
<div style="float:left;width:100px;height:100px;border:1px solid #000;margin-right:30px">Menu</div>
<div style="float:left;width:500px;height:100px;border:1px solid #000">Indhold</div>
Avatar billede webcreator Nybegynder
23. november 2004 - 17:34 #2
Har forsøgt med float. Det resulterer i at den store kasse lapper ind over menuen
Avatar billede skovenborg Nybegynder
23. november 2004 - 17:34 #3
men for så vidt er der intet i vejen med at lave de to kolonner til menu og indhold med tabeller. Det er mere rent tabel-design, man fraråder mod (hvis man skal tro W3C i hvert fald).
Avatar billede webcreator Nybegynder
23. november 2004 - 17:34 #4
Begge divs skal da ikke have float, skal de ?
Avatar billede skovenborg Nybegynder
23. november 2004 - 17:37 #5
de behøves ikke, men der sker jo ikke noget ved at gøre det alligevel ;-)
Avatar billede webcreator Nybegynder
23. november 2004 - 17:54 #6
Jo, de behøves faktisk. Ellers overlapper kasserne nemlig hinanden. Har lige testet
Avatar billede webcreator Nybegynder
23. november 2004 - 17:56 #7
Nå, hovedsagen er at det virker (endelig!). Tusind tak for hjælpen :)
Svar-tid :)
Avatar billede skovenborg Nybegynder
23. november 2004 - 17:56 #8
ja, mindsandten. Når jeg tænker over det er det heller ikke i dette tilfælde at float:left ikke behøves på det andet element. Der er nemlig en forskel mellem block-elementer og inline-elementer på dette punkt, og det er inline-elementer (som <span>) hvor du ikke behøver float.
Avatar billede skovenborg Nybegynder
23. november 2004 - 17:57 #9
og her er svaret så :-)
Avatar billede webcreator Nybegynder
23. november 2004 - 17:58 #10
Hov, lige et ekstra, lille spørgsmål hvis du tillader.

Hvordan kan jeg placerer indholdet i midten af skærmen ? Kunne det gøres med endnu en boks uden om menuen og hoved-rammen? Hvis ja, hvordan ?
Avatar billede webcreator Nybegynder
23. november 2004 - 17:58 #11
(har afsat flere points :)
Avatar billede skovenborg Nybegynder
23. november 2004 - 18:05 #12
jo, et lille spørgsmål kan man vel altid klare ;-)

Du kan prøve:
#container {width:734px;margin:0px auto;padding:0px;position:relative;}
  #menu, #content {border:1px solid #000;float:left;}
  #menu {width:200px;margin-right:30px;}
  #content {width:500px;}

<div id="container">
<div id="menu">Menu</div>
<div id="content">Indhold</div>
</div>

Det er margin:0px auto; som er et meget fint trick til centrering (og faktisk helt i henhold med standarden). Den kræver dog en bredde og vi her bruger 734 (200+500+30+4*1). Her er de sidste 4px fra borderen.

Husk korrekt doctype forresten.
Avatar billede webcreator Nybegynder
23. november 2004 - 18:20 #13
Fantastisk, Skovenborg. Det har du bare styr på! Mange tak for hjælpen - nu kan jeg endelig vende tilbage til min PHP :D
Avatar billede skovenborg Nybegynder
23. november 2004 - 18:39 #14
jamen, det var så lidt. Og tak for points :-)s
Avatar billede webcreator Nybegynder
23. november 2004 - 18:51 #15
Selv tak :)
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