Notifikationer

Markér alle som læst Log ud

cyberesben Nybegynder

10. november 2004 - 17:56 Der er 12 kommentarer og
1 løsning

Layout på en side via CSS i stedet for tabeller

Hej

jeg har siddet og rodet en del rundt med følgende layout:

http://www.fucked-up.dk/layout.PNG

min idé er at lave et site, hvor alle elementer har 10px afstand fra browserens kant, og 5px margen fra hinanden.

toppen er ca 60px høj og 100% bred, bunden er 30px høj og 100% bred, og de 2 sidepaneler med menuer osv. er 140px brede, og indholdet i midten skal helst tilpasse sig browserens bredde (ellers skal det bare være 600 px)

da jeg gerne vil kunne udskifte de designet fuldstændig, via CSS, vil jeg med vilje ikke bruge tabeller

det ville selvfølgelig være piece of cake at lave dette layout med tabeller, men det virker som om det et et helvede at få det til at virke med CSS...

jeg søger et svar eller et eksempel jeg kan arbejde videre på, som i hvert fald overholder CSS2, og ser korrekt ud i Firefox og helst også IE6...

På forhånd tak.

Synes godt om

popsy Novice

10. november 2004 - 18:05 #1

Jamen så er den her artikel da lige dig :) http://www.html.dk/artikler/00043/

Synes godt om

cyberesben Nybegynder

10. november 2004 - 19:07 #2

kigger på den, det ligner meget det jeg vil lave :-)

Synes godt om

dan_n Nybegynder

10. november 2004 - 19:08 #3

Du kan forsøge dig med nogle af disse:

En side med nogle eksampler med css layout:
http://www.webdesign101.dk/xhtml/css/csslayout/index.php
http://www.positioniseverything.net/thr.col.stretch.html
http://www.pixy.cz/blogg/clanky/css-3col-layout/
http://www.glish.com/css/

Så burde du have noget at arbejde med :-)

Synes godt om

dan_n Nybegynder

10. november 2004 - 19:14 #4

Bruger du løsningen fra html.dk

Skal du lige huske at tage højde for at IE browserne fortolker box modellen anderledes end alle andre browsere fx firefox, opera !

Tag et kig her:
http://www.webdesign101.dk/xhtml/css/hacks/hack_1.php

Synes godt om

olebole Juniormester

11. november 2004 - 08:43 #5

<ole>

Hvorfor ikke bruge en tabel til at skabe kolonnerne? Det er et af de eksempler, som W3C anbefaler, man laver som en kombination af en tabel - og en række containere.

En anden ting er, at CSS og tabeller absolut ikke er hinandens modsætninger ... tværtimod :)

/mvh
</bole>

Synes godt om

dan_n Nybegynder

16. november 2004 - 19:37 #6

>> cyberesben
Hvor langt er du kommet, var det du skulle bruge

Synes godt om

cyberesben Nybegynder

20. november 2004 - 02:15 #7

hej

undskyld det sene svar, jeg har rodet en del med det, og det driller stadig som bare fanden :-(

se på http://www.fucked-up.dk/css/

i IE6 passer margernerne mellem boxene (5px) nogenlunde...
i firefox er de yderste kolonner kun 3 px fra toppen - hvad er der galt?

og hvordan får jeg den nederste bar( i bunden) til at holde sig for neden, så den altid er lavere placeret end den længste af de 3 kolonner?

og til sidst, hvad er der galt, siden menuerne i siderne ændrer størrelse i IE6 når musen køres over dem?

Synes godt om

olebole Juniormester

20. november 2004 - 02:54 #8

Punkt ét er, at du bruger en DTD, der sikrer, at IE overholder standarderne. I øjeblikket bruger du:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
som sætter IE i quirks-mode (den opfører sig, som IE altid har gjort).

Prøv i stedet:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
URL'en i DTD'en gør, at IE går i standard-complient-mode og overholder standarderne. Specielt CSS-box-modellen går helt i ged, hvis ikke URL'en er present.

Du kan teste, om en browser er i standard-complient-mode med:
alert(document.compatMode)
som bør returnere 'CSS1Compat'. Returneres derimod 'backCompat' eller 'QuirksMode' (i Opera), er browseren gået i quirks-mode - og W3C-standarderne overholdes ikke.

Synes godt om

olebole Juniormester

20. november 2004 - 02:56 #9

PS: Med den DTD, du har nu, er det FireFox, der renderer siden i henhold til din kode ... ikke IE.
Hvordan renderingen så forholder sig til dine ønsker, er måske en anden sag :)

Synes godt om

olebole Juniormester

20. november 2004 - 03:10 #10

... dér var linket :)
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie60/html/cssenhancements.asp

Synes godt om

cyberesben Nybegynder

27. november 2004 - 04:28 #11

ang. det med at min menu står og hopper i IE når jeg bruger display: block, fandt jeg ud af at IE åbenbart har en fejl, så den ik kan finde ud af det hvis man har margin-bottom på et element som der også køres en hover på...

dan_n:

jeg lavede det om og baserede på http://www.pixy.cz/blogg/clanky/css-3col-layout/

nu ser det ud til at virke som jeg vil have det!

Synes godt om

cyberesben Nybegynder

27. november 2004 - 04:46 #12

har lige et sidste problem, som jeg håber i kan hjælpe med - når det er løst skal jeg nok smide nogle point til dem der lægger svar :-)

følgende viser en boks med felter over hinanden - det øverste felt viser dato og overskrift, det nederste viser så selve teksten - problemet er bare at jeg ikke ved hvordan jeg får "contentboxdate" til at stå i højre side, altså højrejusteret, men på samme linje som overskriften...

det ville være nemt nok med en tabel, med 2 tabelceller og hver deres align=left og right, men hvordan med CSS?

<div class="contentbox">
<div class="contentboxheader">matica, li pronunciation e li plu c - <span class="contentboxdate">2003-4-30</span></div>
<div class="contentboxtext">s del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al </div>
</div>

Synes godt om

cyberesben Nybegynder

25. januar 2005 - 14:42 #13

well jeg har fået det til at virke... tak for de links der er blevet sendt, olebole send et svar hvis du vil...

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

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.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS