CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

coldray Nybegynder

06. august 2008 - 10:33 Der er 20 kommentarer og
1 løsning

Layout problem.

Hej eksperter,

Jeg sidder og arbejder på en html-side, men jeg er rendt ind i problemer med cross-browser layout problemer.

skabelonen kan ses på http://www.coldray.dk/projekt/main.html

siden vises fint i firefox, men i IE (7) er der mellemrum mellem top logo og det billede som giver en fade-effekt mellem grå og hvid.

jeg har forsøgt at indsætte en transparent 1x1 pixel i den table row for at se om det gjorde nogen forskel, men der opstod et helt andet problem uden at løse det pågældende.

håber på lidt hjælp her med det relativt lette spørgsmål - tak.

Synes godt om

w13 Novice

06. august 2008 - 10:39 #1

Hmm. Ok.

For det første har du ingen gyldig doctype, så derfor er det ikke et gyldigt HTML-dokument. Du har heller ikke noget <head>-element, hvilket er obligatorisk.

Derudover afslutter du dine img-tags med " />", hvilket kun hører til under XHTML, men stadig uden en gyldig doctype er det heller ikke et gyldigt XHTML-dokument. =)

Du bruger en del forældede koder, bl.a. <center>, som ikke er gyldigt længere, og attributter såsom leftmargin, topmargin, marginwidth og marginheight.

Prøv at se, hvordan W3C validerer din side: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.coldray.dk%2Fprojekt%2Fmain.html&charset=%28detect+automatically%29&doctype=Inline&group=0

Alt i alt tror jeg, du ville få meget mere ud af at lave det med div-elementer og CSS.

Synes godt om

w13 Novice

06. august 2008 - 10:40 #2

Ligeledes holder bgcolor- og background-attributterne heller ikke i dag.

Synes godt om

gedekid Nybegynder

06. august 2008 - 10:53 #3

Du vil også med fordel kunne opbygge layoutet med <div> istedet for med tabeller... og layoutte med CSS...

og som w13 siger, så skal der en doctype med... Hvis der var en WWW domstol, så var sådan noget nok til noget nær til 3-4 gange livstid :)

http://www.w3schools.com/css/default.asp

Synes godt om

coldray Nybegynder

06. august 2008 - 10:55 #4

Av.. takker for hurtig respons, sidder og retter til så den opfylder standarderne.

Jamen duer de gode tabeller da slet ikke mere? er det ikke uoverskueligt og besværligt at bruge divs til at opsætte layoutet med istedet for tabeller?

Synes godt om

w13 Novice

06. august 2008 - 10:59 #5

coldray>> Nej. :)

Tabeller er jo ment til tabulære data, ikke til design. De virkede måske til design i 90'erne, men i dag er det for besværligt at arbejde med, og når du først lige har vænnet dig til div og CSS, vil du blive rigtig glad for det.

Og det er bestemt ikke uoverskueligt.

I dag gør man det jo sådan, at man lægger alle layoutmæssige informationer i et CSS-dokument, så når noget skal rettes, skal du kun rette der. Det bliver supernemt at arbejde med, og din HTML-kode kommer til at fylde enormt meget mindre. Dette bliver især Google også rigtig glad for, og du vil derfor komme højere på Googles liste. =)

Synes godt om

coldray Nybegynder

06. august 2008 - 11:14 #6

Det lyder meget tiltalende, der er ikke andet for end at jeg må forsøge at kaste mig ud i divs til layoutet - troede dog stadig man primært brugte tabeller til layout?

Synes godt om

coldray Nybegynder

06. august 2008 - 11:16 #7

Noget helt andet - siden er nogenlunde rettet til så den passer til DOCTYPE mv. dog er der nogle tags jeg helst ikke vil undvære fordi jeg ikke kan finde et alternativ til dem.

Men layout problemet er der stadig - nogle forslag?

Synes godt om

w13 Novice

06. august 2008 - 11:46 #8

Nej, langt de fleste bruger i dag divs i stedet for tabeller.

Du kan undgå 4 fejl ved at rette dit body-tag til:

<body style="margin:0">

Så bliver bodys marginer sat til 0px vha. CSS og det er lidt nemmere og pænere end med leftmargin="0px" osv. :)

Synes godt om

w13 Novice

06. august 2008 - 11:48 #9

En af de andre fejl er, at alle <img>-elementer _skal_ have en alt-attribut, som forklarer, hvad billedet forestiller. Nogle snyder lidt og skriver bare alt="" for så godtager validatoren det uden at give fejl.

Den sidste fejl lige nu er, at du afslutter det <center>-element, som du ellers har fjernet. I stedet for center-elementet kan du f.eks. bruge:

<div id="margin:auto;text-align:center">

...

</div>

Det burde gøre tricket.

Synes godt om

w13 Novice

06. august 2008 - 11:49 #10

Hvis du så i øvrigt retter:

<td colspan="2" height="100">
<img src="editor.gif">
</td>

til:

<td colspan="2" height="100"><img src="editor.gif" alt="Logo"></td>

Så tror jeg, du undgår fejlen. Den opstår nemlig på grund af linjeskiftene, som Internet Explorer nogle gange tolker som mellemrum. Og mellemrummet er nok det, som skubber dit fade-billede for langt ned.

Synes godt om

gedekid Nybegynder

06. august 2008 - 12:25 #11

Dit layout kunne sagtens laves med divs på følgende måde

<div id="container">

<div id="topBillede">billede tag her</div>

<div id="fadeBillede">Fade billede her...</div>

<div id="topMenu">Menu her</div>

<div id="

</div>

Synes godt om

gedekid Nybegynder

06. august 2008 - 12:26 #12

Hov...

<div id="container">

<div id="topBillede">billede tag her</div>

<div id="fadeBillede">Fade billede her...</div>

<div id="topMenu">Menu her</div>

<div id="mainContent">Indhold</div>

</div>

Synes godt om

coldray Nybegynder

06. august 2008 - 12:53 #13

Jeg sad faktisk og legede med de div'er.

http://www.coldray.dk/projekt/main.html

Siden er valideret, men alligevel kan firefox og IE ikke vise siden på samme måde.. suk..

Den grå linje som ses under logoet i IE kan ikke vises i firefox.

Synes godt om

w13 Novice

06. august 2008 - 12:55 #14

Se FireFox's fejlkonsol (Funktioner --> Fejlkonsol)

Der er et par fejl i koden.

Synes godt om

w13 Novice

06. august 2008 - 13:01 #15

Dit style-dokument må i øvrigt ikke indeholde:

<style>

</style>

Synes godt om

w13 Novice

06. august 2008 - 13:02 #16

Det er disse, som forårsager fejlene i Fejlkonsollen.

Synes godt om

coldray Nybegynder

06. august 2008 - 13:06 #17

Nu helt uden fejl - men stadig samme output

Synes godt om

coldray Nybegynder

06. august 2008 - 13:07 #18

Jeg forstår ikke hvorfor de skal være så besværlige :)

Synes godt om

w13 Novice

06. august 2008 - 13:20 #19

Hvorfor bruger du ikke bare border i stedet for en div, du kalder "line"?

F.eks. kan du på logoet lægge:

border-top:1px solid gray;
border-bottom:1px solid gray;

Det burde gøre tricket.

Synes godt om

w13 Novice

19. august 2008 - 10:40 #20

? :)

Synes godt om

coldray Nybegynder

07. august 2011 - 16:22 #21

lukker

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
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51
Link fra form input Af jnrmgs i HTML	9	19/09/202319:10	23/09/202313:11
includere i HTML Af slein55 i HTML	3	15/09/202313:47	16/09/202309:40

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