Avatar billede heaven Nybegynder
27. august 2009 - 21:32 Der er 32 kommentarer

Layers i firefox

Hej

Har disse 2 layers som er centreret i explorer, men i firefox er det kun det øverste. Nogle der kan hjælpe med hvorfor.

Koden:

<div style="position: absolute; width: 200px; height: 96px; left: center; top: 0px; width: 100%; text-align: center" id="layer1">
<a target="mainmenu" href="slideshow1.htm">
<img border="0" src="images/logo.png" width="300" height="112"></a></div>


<div style="position: absolute; width: 900px; height: 100px; left: center; top: 515px; width: 100%; text-align: center" id="layer2">
    <table border="0" width="900" cellspacing="0" cellpadding="0">
<tr>
</tr>
    </table>
</div>

Desuden er der links under det første layer. I explorer virker de fint, men i firefox kan man ikke klikke på dem.
Skal jeg have en plugin i firefox før layers fungerer?

Tak
Avatar billede olebole Juniormester
27. august 2009 - 21:56 #1
<ole>

left: center; giver ikke mening. Hvorfor positionerer du elementerne absolute? Med mindre der er en helt speciel grund - og det virker ikke sådan - er det en rigtig skidt idé  =)

/mvh
</bole>
Avatar billede heaven Nybegynder
27. august 2009 - 22:06 #2
Hvordan skal koden se ud? Skal have billederne i layer placeret midt på skærmen uanset skærmstørrelse.

Og det virker i explorer.
Avatar billede olebole Juniormester
27. august 2009 - 22:11 #3
Det beror på en fejl i Explorer, at det virker. Det ikke virke  =)

Jeg kan ikke fortælle dig, hvordan koden skal se ud, da jeg ikke kan se den kode, det skal virke i. Prøv at lægge et link til siden
Avatar billede heaven Nybegynder
27. august 2009 - 22:21 #4
Her er hele body koden:

<body topmargin="0" leftmargin="0" bgcolor="black">

<div align="center">
    <table border="0" width="950" cellspacing="0" cellpadding="0">
        <tr>
            <td colspan="2" height="25">
            &nbsp;</td>
        </tr>
        <tr>
            <td style="padding-left: 10px; padding-bottom:5px">
              <a class="top" target="mainmenu" href="slideshow1.htm">Forside</a><img border="0" src="images/sdiv2.gif" width="14" height="8"><a class="top" target="mainmenu" href="Mainpages/CTC.htm">CTC - info</a><img border="0" src="images/sdiv2.gif" width="14" height="8">
              <a class="top" target="mainmenu" href="Mainpages/panoramatour.htm">
            Nyheder</a><img border="0" src="images/sdiv2.gif" width="14" height="8"><a class="top" target="mainmenu" href="Mainpages/panoramatour.htm">Panorama tour</a> </td>
            <td width="50%" style="padding-right: 10px; padding-bottom:5px">
            <p align="right">
              <a class="top" target="mainmenu" href="Mainpages/tnp.htm">Team NP</a><img border="0" src="images/sdiv2.gif" width="14" height="8"><a class="top" target="mainmenu" href="Mainpages/eventkalender.htm">Events</a><img border="0" src="images/sdiv2.gif" width="14" height="8">
            <a class="top" href="file:///G:/Backup%20aug%2009/Dokumenter/Mine%20Web-steder/CTC1/Hovedsider/onlinebook.htm">
            Online booking</a><img border="0" src="images/sdiv2.gif" width="14" height="8">
            <a class="top" target="mainmenu" href="Mainpages/kontakt.htm">Kontakt</a></td>
        </tr>
        <tr>
        <td colspan="2" style="border: 2px solid white; padding: 5px">
        <iframe name="mainmenu" src="slideshow1.htm" width="950" height="500" scrolling=no frameborder="0"></iframe>
            </td>
        </tr>
    </table>
</div>

<div style="position: absolute; width: 200px; height: 96px; left: center; top: 0px; width: 100%; text-align: center" id="layer1">
<a target="mainmenu" href="slideshow1.htm">
<img border="0" src="images/logo.png" width="300" height="112"></a></div>

<div style="position: absolute; width: 900px; height: 100px; left: center; top: 515px; width: 100%; text-align: center" id="layer2">
    <table border="0" width="900" cellspacing="0" cellpadding="0">
        <tr>
            <td style="border: 6px solid white; padding: 0" width="200" bgcolor="#FF0000" height="75">
            <p align="center">
            <a class="knap1" target="mainmenu" href="Mainpages/trailer.htm" id="id5">INTRO-TRAILER</font></a></p></td>
            <td width="33">&nbsp;</td>
            <td style="border: 6px solid white; padding: 0" width="200" bgcolor="#FF0000" height="75">
            <p align="center">
            <a class="knap1" target="mainmenu" href="Mainpages/training.htm">TRÆNING</a></font></p></td>
            <td width="33">&nbsp;</td>
            <td style="border: 6px solid white; padding: 0" width="200" bgcolor="#FF0000" height="75">
            <p align="center">
            <a class="knap1" href="java script: void(0)"onclick="window.open('http://eclub.procard.dk/crossfit_training_center/createperson_mbship_select.php', 'window1', 'width=750, height=750'); return false;">MEDLEMSKAB</a></font></p></td>
            <td width="33">&nbsp;</td>
            <td style="border: 6px solid white; padding: 0" width="200" bgcolor="#FF0000" height="75">
            <p align="center">
            <a class="knap1" target="mainmenu" href="Mainpages/kontakt.htm">FORUM</a></font></p></td>
        </tr>
    </table>
</div>

</body>
Avatar billede olebole Juniormester
27. august 2009 - 22:27 #5
Det kan jeg ikke bruge. Jeg skal bruge hele koden - og derfor beder jeg om et link
Avatar billede heaven Nybegynder
27. august 2009 - 22:33 #6
Ok - det får du her :o)

http://kvc.dk/CTC7/index.htm
Avatar billede olebole Juniormester
27. august 2009 - 22:42 #7
Du skal først og fremmest påbegynde dit dokument med en DTD - og udfra din kode at dømme bør du bruge:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
... osv ...

Ellers virker de vigtigste områder af CSS ikke i IE
Avatar billede olebole Juniormester
27. august 2009 - 22:44 #8
- og dernæst bør du validere koden og rette fejlene:
    http://validator.w3.org/check?uri=http%3A%2F%2Fkvc.dk%2FCTC7%2Findex.htm&charset=(detect+automatically)&doctype=Inline&group=0&ss=1&verbose=1

- før giver det ikke mening at rette i koden
Avatar billede heaven Nybegynder
27. august 2009 - 23:05 #9
okay - der er jeg stået af.

fx i linje 22:

<style>

Et ganske almindeligt style hvor den skriver er fejl

og i linje 52:

<body topmargin="0" leftmargin="0" bgcolor="black">

Skriver den der er fejl. Siden er lavet i frontpage, så den har genreret en forkert kode eller hvordan skal det forståes?

Bare det at jeg sætter:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

ind gør at hele siden er forskudt nu.
Avatar billede olebole Juniormester
27. august 2009 - 23:17 #10
Ja, type attributten er påkrævet i et style-tag:
    <style type="text/css">

Ja, der er næppe en editor, der skriver så ringe og sumpet kode som Frontpage. Der findes hverken en topmargin eller leftmargin attribut i HTML.

Ja, når du sætter DTD'en ind, viser browserne siden, som den skal vises i forhold til koden. Ser siden ikke ud, som du gerne vil have, er HTML-koden forkert.

Patienten har hele tiden været syg. Nu har du blot fået termometret op af lommen  ;o)
Avatar billede heaven Nybegynder
27. august 2009 - 23:25 #11
Ok, så skal hele koden vel skrives om. Det er jeg desværre ikke hård nok til i HTML. Så jeg må nok lade den stå som frontpage har programmeret den til :o(
Avatar billede olebole Juniormester
27. august 2009 - 23:37 #12
Ja, men så må du også finde dig i, udseendet er op til tilfældigheder - og aldrig bliver ens i forskellige browsere
Avatar billede heaven Nybegynder
27. august 2009 - 23:45 #13
Ja.

Nu har jeg prøvet og ændre i body taggen:

<body marginwidth="0" marginheight="0" bgcolor="black">

Som den foreslog. Når jeg så kører igennem igen kommer denne:

Line 54, Column 19: Attribute "MARGINWIDTH" is not a valid attribute. Did you mean "marginwidth"?

Øhh ja, det har jeg lige skrevet.

Nå, men problemet er ikke så stort. Siden bliver stort set vist korrekt i firefox. Som sagt var der kun problemet med at det nederste layer ikke blev centreret og man ikke kunne trykke på links under det første layer. Om det så er i firefox man ikke kan trykke på links under layer ved jeg ikke.

Men tak for hjælpen :o)
Avatar billede olebole Juniormester
28. august 2009 - 00:04 #14
"Som den foreslog." >> Det har validatoren aldrig foreslået. Da du ikke med DTD'en fortalte den hvilken HTML version, du brugte, kunne det jo være, det var marginwidth eller marginheight, du mente. De var valide i HTML 3.2 men ikke i HTML 4.01.

Nej, det er ikke ligemeget. Du har ingen anelse om, hvordan siden ser ud i morgen. Og hvordan ser den i dag ud i IE6, IE7, IE8, Safari, Opera, osv.

Du kan også sagtens køre i venstre side af landevejen. Måske går det endda godt i lang tid ... måske ikke!  =)
Avatar billede heaven Nybegynder
28. august 2009 - 19:24 #15
Hej igen,

Så har jeg fået den igennem validatoren uden der er fejl:

http://validator.w3.org/check?uri=http%3A%2F%2Fkvc.dk%2FCTC7%2F2.htm&charset=%28detect+automatically%29&doctype=Inline&group=0

Nu skal jeg så have lagene på plads igen. Lige nu kan de ikke ses?

Desuden kan jeg ikke styre mine øverste links.

http://kvc.dk/CTC7/2.htm
Avatar billede olebole Juniormester
28. august 2009 - 23:58 #16
Prøv noget i stil med:

<div style="width: 900px; height: 100px; text-align: center; margin: 0 auto" id="layer2">

Avatar billede heaven Nybegynder
29. august 2009 - 00:06 #17
Hej igen

Nu har jeg fået positioneret mine layers.

Nu er problemet bare at jeg ikke kan se dem, når jeg sætter iframe ind i programmeringen igen. 

http://kvc.dk/CTC7/2.htm

Har prøvet at sætte den ind i sit eget layer, men det fungerer ikke.

Hvad gør jeg?
Avatar billede olebole Juniormester
29. august 2009 - 00:38 #18
Gør, som jeg skrev ovenfor - indsæt den rigtige DTD:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">[/div]

Derefter validerer du og retter fejlene, så virker det  ;o)
Avatar billede olebole Juniormester
29. august 2009 - 00:39 #19
Hmmm ... hvad skete lige med formateringen dér?  =)
Avatar billede heaven Nybegynder
29. august 2009 - 00:57 #20
Ingen fejl, men lagene er ikke ovenpå iframe.

sku ikke let det her....

http://kvc.dk/CTC7/2.htm
Avatar billede olebole Juniormester
29. august 2009 - 11:44 #21
Giv det første div position:relative, samt z-index:1.

Dit layer2 giver du position:relative, z-index:2 og margin-top:-200px.

Så burde det spille  =)
Avatar billede heaven Nybegynder
30. august 2009 - 00:27 #22
Stadig samme resultat :o(
Avatar billede olebole Juniormester
30. august 2009 - 13:26 #23
Nej, det virker!  =)
Avatar billede heaven Nybegynder
30. august 2009 - 13:31 #24
Her er den uploadede version

http://kvc.dk/CTC7/2.htm

Hvor i koden har jeg lavet fejl?
Avatar billede olebole Juniormester
30. august 2009 - 13:33 #25
Du kan prøve at sætte det med JavaScript direkte i browseren. Skriv dette i browserens adresselinje og tryk Enter:

java script:var c=document.getElementsByTagName("div")[0].style;c.position="relative";c.zIndex=1;c=document.getElementById("layer2").style;c.position="relative";c.zIndex=2;c.marginTop="-200px";void(0)


Så vil du både i IE og FF se, at laget trækkes op foran iframe'en. Som sagt: Det virker!  ;o)
Avatar billede olebole Juniormester
30. august 2009 - 13:35 #26
Hvor i koden har jeg lavet fejl? >> Du har ikke skrevet noget af det, jeg foreslog  =)
Avatar billede zips Juniormester
30. august 2009 - 13:37 #27
Avatar billede olebole Juniormester
30. august 2009 - 13:38 #28
Jeg har ikke forholdt mig til layer1, da der ikke er noget ordentligt indhold i. Jeg har kun forholdt mig til layer2 - og så må du selv placere layer1 udfra anvisningerne.

Når jeg skriver dit første div, mener jeg dit første div - og det ser sådan ud:

<div align="center">
Avatar billede heaven Nybegynder
30. august 2009 - 13:57 #29
Tak fordi du gider tage dig tid til at hjælpe mig :o)

Nu har jeg opdateret koden og tjekket min css- Nu er der ihvertfald ingen fejl i den.

http://kvc.dk/CTC7/3.htm

Lagene er kommet ovenpå iframe, men jeg kan ikke styre dem selvstændigt. Rykker jeg på det ene rykker det andet også?

Og så kan mit logo ikke vises. Er det fordi det er PNG format? Har ikke flyttet rundt på placering af mapper eller filer.
Avatar billede olebole Juniormester
30. august 2009 - 14:11 #30
Dit logo ligger ikke der, hvor du tror, det ligger:
    http://kvc.dk/CTC7/logo.png

Du har stadig ikke gjort noget ved det første div - og de to layers vil altid være afhængige af hinanden, når du vælger denne opbygning. Ellers skal du skrive hele koden om med en helt ny struktur
Avatar billede heaven Nybegynder
30. august 2009 - 14:19 #31
Så jeg kan ikke skille lagene ad, så logoet kommer øverst og knapperne nederst som mit udgangspunkt?

http://kvc.dk/CTC7/index.htm

Så jeg har brugt tid på en forkert opbygning, eller kan det fixes, uden at skulle starte forfra?

Forstår ikke hvorfor den ikke finder mit logo. Linket ovenover finder det, og min testside som jeg arbejder i nu, ligger samme sted.

Hvad skal der gøres ved det første div?
Avatar billede olebole Juniormester
30. august 2009 - 15:42 #32
Det bliver bare hacks på hacks. Hvis ikke det, vi har lavet indtil nu, virker, vil jeg anbefale dig, du lærer noget mere om, hvordan HTML og CSS virker sammen - og derefter bygger siden op igen helt fra bunden. Alternativt må du sætte dine ønsker i bedre overeensstemmelse med det, du kan  =)

Det kan godt være, du tror, at dit logo ligger ved siden af dokumentet, men hverken min browser, din server eller jeg tror det  =)
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