Avatar billede lsolesen Nybegynder
16. september 2004 - 07:37 Der er 9 kommentarer og
1 løsning

CSS skal optimeres så layoutet når sammen

Jeg er ved at forsøge at stable et layout på benene, men det går ikke helt perfekt. Et ufravigeligt krav er, at layoutet ikke må baseres på tabeller.

Forsiden til layoutet (som hovedsageligt er placering af elementer i øjeblikket) kan ses på:

<http://www.legestue.net/testcenter/aams/>

Jeg vil gerne have have følgende:

- undgå så mange nestede div'er, fx kunne det være fint om man i #extra bare kunne adskille nye punkter med en ny h2
- #content og #extra til at passe i bredden i browsere IE 5.5+ og så i øvrigt Mozilla og Opera.
- #content og #extra til at stoppe på samme tid i højre side, så de flugter med #head og #foot.
- to artikler til at stå ved siden af hinanden i #forsidefeatured, men hele #forsidefeatuered skal stadig have en baggrundsfarve.
- have uddannelse, jobbet og ressourcer til at stå ved siden af hinanden  (og sikre at de altid kommer til at stå ved siden af hinanden (laver man billedet mindre, skal brugeren have vertikal scroll).

Er der nogen, der kan hjælpe med at få det til at se ordentligt ud?
Avatar billede htm Nybegynder
16. september 2004 - 19:47 #1
- Skal den ydre ramme være fast bredde og højde ?
- Den vertikale scroll, hvor er det den skal være ?
Avatar billede htm Nybegynder
16. september 2004 - 22:21 #2
Ja jeg fik ikke lige helt fat i det med vertical scroll, prøv og uddyb det.

Har lige flikket lidt sammen her: http://munchi.dk/exp/540205/ som du nok kan bruge til at arbejde videre med.

Det er ikke optimeret 100% men du kan nok godt se ideen i det og arbejde videre.

Jeg har testet den i Firefox 0.8+ og IE 6.0 hvor det virker fint.
Avatar billede lsolesen Nybegynder
17. september 2004 - 22:36 #3
Jeg har leget lidt med dit eksempel, og det fungerer nogenlunde. Jeg har imidlertid lidt problemer med alle de der højdeangivelser, fordi jeg gerne vil have layoutet til at tilpasse sig indholdet.

http://www.legestue.net/testcenter/aams/
http://www.legestue.net/testcenter/aams/velkommen.php
Avatar billede htm Nybegynder
18. september 2004 - 16:34 #4
Hvordan mener du have layoutet til at tilpasse sig indholdet? - hvilke dele skal være variable? eller skal du have scrolbars eller ??
Avatar billede lsolesen Nybegynder
18. september 2004 - 16:45 #5
Nej, jeg vil ikke have scrollbars. Jeg vil gerne have #maincontent til at tilpasse sig længden af #content og #extra. Lige nu står den til en fast højde, og jeg kan ikke finde ud af at få den til at opføre sig ordentligt i Mozilla. Jeg kan heller ikke får #extra til at fylde hele længden, på fx:

http://www.legestue.net/testcenter/aams/velkommen.php

Altså, kan jeg få #foot til at rykke sig nedenunder #maincontent?

Desuden har jeg lidt problemer med at få smidt nogle paddings på fx #content og #extra. Bliver jeg nødt til at lave en <div class="wrap"> inden i begge, som jeg giver padding, eller kan jeg gøre det mere elegant?
Avatar billede htm Nybegynder
18. september 2004 - 20:10 #6
Så skal du prøve at fjerne højden på #mainframe og #maincontent - så burde den udvide sig automatisk.
Avatar billede lsolesen Nybegynder
20. september 2004 - 09:11 #7
Well, ja, men uden de forskellige højdeangivelser, så får jeg problemer (i Firefox i hvert fald) med at maincontent og forsidefeatured ikke er farvet over det hele. Desuden når extra nu ikke helt til ned til det andet på fx www.legestue.net/testcenter/aams/velkommen.php :(

Der må være et eller andet jeg ikke helt har forstået? Synes mit stylesheet burde virke nogenlunde som det er nu!
Avatar billede htm Nybegynder
20. september 2004 - 18:22 #8
Ja på den måde du vil bygge det op på kan det godt være lidt besværligt - har da hellere ikke lige kunne løse det uden javascript.

Men nu har jeg lavet en løsning til dig der bruger javascript til at sætte højden på boksene.
http://munchi.dk/exp/540205/
http://munchi.dk/exp/540205/velkommen.html

bemærk at der er forskelligt javascript i de to filer.

Mon ikke du kan arbejde videre med det nu ?
Avatar billede lsolesen Nybegynder
10. juni 2006 - 17:34 #9
Svar venligst!
Avatar billede htm Nybegynder
10. juni 2006 - 17:54 #10
svar :-)
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