Avatar billede theselfimages Nybegynder
21. juli 2004 - 09:31 Der er 22 kommentarer og
1 løsning

Placering af element (Crossbrowser/Scrollable)

Nogen der kan hjælpe mig med at få placeret topsejlet, sammen med resten af skibet her?

http://test2.theselfimages.dk

Topsejlet ligger pt. i øverste venstre hjørne som:
<div id="top"><img border="0" src="images/front/fronttop.jpg"></div>

Men hvordan placerer jeg topsejlet korrekt, henover på tabeller (de røde) og henover en iFrame (den grønne), på en måde så det står helt præcist, men også følger med når/hvis siden scrolles eller window resizes?
Avatar billede theselfimages Nybegynder
21. juli 2004 - 13:00 #1
Har forsøgt med nedenstående, hvis hvordan får man billedet til dynamisk at følge siden?

<style type="text/css">
#page {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}

#img {
    position: relative;
    background: url('images/front/fronttop.jpg') no-repeat top;
    height: 768px;
    width: 530px;   
    z-index: 10;
    left: 200;
    top: -20px;
}

</style>
Avatar billede roenving Novice
21. juli 2004 - 14:38 #2
Ved at binde det til et element med en fast afstand til det punkt, hvor du vil placere topsejlet ...

Du sætter simpelthen billedet inde i, positionerer elementet f.eks. relativt med 0 i afsæt både vandret og lodret, og så gør du næsten det samme med topsejlet !-)

Da det jo skal have en fast placering i forhold frontmain-billedet, kan du med fordel placere det inde i et element sammen med det, og så give det det offset (som også gerne må være negativ !-) du har brug for ...

-- og så studsede jeg over, at du havde dette i keywords:

boats, boatbuilding, boatyards, repairing, wood, fibreglass, aluminium, steel, boat interior, deck hardware, stainless steel, pleasure, spars, masts, shipyards, shipbuilding, ships, sejlbåde, både, bådebygning, bådeværfter, bådebyggerier, bådrenovering, træ, glasfiber, aluminium, stål, aptering, bådebeslag, rustfri, rundholter, master, skibsværfter, skibsbygning, skibsrenovering, thurø 33, hankø 28 classic, walsted 42

Det kan godt være at det er relevante keywords, men det søgemaskinerne bruger disse keywords til idag, er at validere din troværdighed !-)

Så medmindre _alle_ ordene findes i teksten på den aktuelle side, dømmes du utroværdig og kastes nedaf i listen over søgeresultater, og listes overhovedet ikke i de søgninger, hvor ordet ikke findes i teksten ,-(

Så alt andet lige er det faktisk bedre ikke at have dem med !o]

Læs også bufferzones artikler om søgemaskine-optimering ...
Avatar billede roenving Novice
21. juli 2004 - 14:40 #3
Avatar billede theselfimages Nybegynder
21. juli 2004 - 15:03 #4
Tak for dine kommentar!

Er det bedre helt at undlade keywords, eller nøjes med 2-5 stykker?

Vil du kunne vise mig dine tanker omkring placeringen af topsejlet?
Kan godt følge dine principper, men ikke helt se det for mig!
Avatar billede roenving Novice
21. juli 2004 - 15:23 #5
Du sætter frontmain ind i et element og styler det element sådan:

style="position:relative;top:0px;left:0px;"

-- og så inde i det samme element:

<div id="top" style="position:relative;margin-top:-483px;margin-left:183px;"><img border="0" src="images/front/fronttop.jpg"></div>

-- måske er det nødvendigt mad absolute ...

Keywords er gode nok, hvis de afspejler noget væsentligt på siden, så nøjes med nogle, som også findes på fremtrædende pladser i dokumentet, f.eks. i Hx-tags !-)
Avatar billede theselfimages Nybegynder
21. juli 2004 - 15:33 #6
Hmm! Men hvad når frontmain ligger i en Iframe på index siden?
Avatar billede roenving Novice
21. juli 2004 - 15:38 #7
Så lægger du bare div'en ind i samme element, som iframen ligger i !-)
Avatar billede theselfimages Nybegynder
21. juli 2004 - 15:53 #8
Okay! Det forstår jeg ikke lige!

I index filen har jeg et iFrame script (content på 770x465px) der loader siden front.asp (siden med båden uden topsejl) ind.

I front.asp har jeg lavet:

<style type="text/css">
#page {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}
</style>
</head>

<body scroll="no" bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<div id="page"><img border="0" src="../images/front/frontmain.jpg"><div id="top" style="position:relative;margin-top:-540px;margin-left:450px;"><img border="0" src="../images/front/fronttop.jpg"></div></div>

</body>
</html>

og det gir dette resultat:
http://test2.theselfimages.dk

Som du kan se kan topsejlet IKKE lægge sig over den iFrame, der ligger oven over (det grønne outlined område). Hele siden består af index siden + disse 2 iFrames, hvortil alt indhold hentes.
Avatar billede roenving Novice
21. juli 2004 - 16:04 #9
Er den grønne en iframe ?-)

Hvof' det ?o]
Avatar billede theselfimages Nybegynder
21. juli 2004 - 16:51 #10
Fordi den grønne iFrame trækker forskellige submenuer ind.

Selv om den ikke var en iFrame, ville det jo ikke hjælpe på det faktum, at selve content området (det du nu på linket kan ses som den blå outline) er en iFrame, og at DIV placeringer IKKE kan gå ud over eller henover en Iframes afgrænsningsområde. Eller kan den?
Avatar billede roenving Novice
21. juli 2004 - 16:57 #11
Næh, men man kunne placere topsejlet inde i det samme element som iframen er i, men udenfor iframen !-)

Men så har du vel også den umulige opgave, når noget af topsejlet skal inden i submenu-framen ?-)
Avatar billede theselfimages Nybegynder
21. juli 2004 - 17:33 #12
Argh!

Det her forstår jeg ikke helt:
Næh, men man kunne placere topsejlet inde i det samme element som iframen er i, men udenfor iframen !-)

Og ville jeg kunne løse hele problematikken, hvis jeg dropper den submenu iFrame?
Avatar billede roenving Novice
21. juli 2004 - 17:42 #13
f.eks.

<td style="position:relative;top:0px;left:0px;">
  <div id="top" style="position:relative;margin-top:-483px;margin-left:183px;">
    <img border="0" src="images/front/fronttop.jpg">
  </div>
  <iframe src=""></iframe>
</td>

Du kan jo også slice billedet yderligere og smide det ind i iframen ...
Avatar billede theselfimages Nybegynder
21. juli 2004 - 18:10 #14
Hmm.. har prøvet som du sagde.. Det virker fint nok, når man scalerer vinduet left/right men hvorfor et det ikke fast positioneret i højden?

Sr sådan her ud nu:
<td style="position:relative;top:0px;left:0px;"><div id="top" style="position:absolute;margin-top:-99px;margin-left:475px;"><img border="0" src="images/front/fronttop.jpg"></div>

Bemærk det SKAL være absoulte! Eller lægger topsejlet sig ikke over tabeller og iFrame!
Avatar billede theselfimages Nybegynder
21. juli 2004 - 18:26 #15
Topsejlet følger jo egentlig fint nok med, når der scrolles. Det er kun når browser vinduet resizes at der opstår problemer.

Iøvrigt så er det kun i IE, at dit trick virker! :(
Avatar billede theselfimages Nybegynder
21. juli 2004 - 19:41 #16
Så.. mu ser det ud til at virke!

<td style="position:relative;top:0px;left:0px;z-index: 10;"><div id="page" style="position:absolute;margin-top:7px;margin-left:474px;"><img border="0" src="images/front/top1.jpg"></div><div id="page" style="position:absolute;margin-top:131px;margin-left:0px;"><img border="0" src="images/front/main1.jpg"></div></td>

Hvis det virker hos dig også! Så post et svar! :o)
Avatar billede roenving Novice
21. juli 2004 - 20:00 #17
På Mozilla virker det uden reload !-)
Avatar billede roenving Novice
21. juli 2004 - 20:00 #18
Velbekomme '-)
Avatar billede theselfimages Nybegynder
21. juli 2004 - 20:08 #19
Yep! I know, men det gør det ikke i IE!
Mange tak for hjælpen. Det blev godt. Spændt på at se om det fungerer
i IE på MAC også. Der plejer intet som regel at fungerer :|
Avatar billede theselfimages Nybegynder
21. juli 2004 - 20:13 #20
Et lille tillæg: Hvordan laver man smartest en lille funktion, der skjuler ovenstående kode når et menupunkt klikkes?
Avatar billede roenving Novice
21. juli 2004 - 21:53 #21
-- hvad med at skrotte Mac/IE-understøttelse, jeg blev den anden uge fortalt at standard-browseren til Mac er Safari, som på en del punkter opfører sig som Gecko-browserne (bl.a. Mozilla !-)

-- og da jeg _meget_ ofte har hørt udsagnet, at det notorisk er en skod-browser, såeh ...

Hvad er det du vil skjule ?-)

-- og tak for point ;~}
Avatar billede theselfimages Nybegynder
21. juli 2004 - 21:59 #22
Hvis du ser View Source for:
http://test2.theselfimages.dk

Så er nedenstående hvad jeg gerne vil skjule ved klik på et af menupunkterne, ellers kan de andere sider ikke vises...
Jeg har oprettet et seperart spørgsmål til det her:
http://www.eksperten.dk/spm/521988


<!--DIV LAYERS -->
        <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="770">
          <tr>
            <td style='position:relative;top:0px;left:0px;z-index: 10;'><div id='page' style='position:absolute;margin-top:7px;margin-left:474px;'><img border='0' src='images/front/top1.jpg'></div><div id='page' style='position:absolute;margin-top:132px;margin-left:0px;'><img border='0' src='images/front/main1.jpg'></div><div id='page' style='position:absolute;margin-top:200px;margin-left:-215px;'><object classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' codebase='http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0' WIDTH='500' HEIGHT='50'><PARAM NAME=movie VALUE='images/flash/frise.swf'><PARAM NAME=menu VALUE=false><PARAM NAME=quality VALUE=best><PARAM NAME=wmode VALUE=transparent><EMBED SRC='images/flash/frise.swf' MENU=false QUALITY=best WIDTH='500' HEIGHT='50' WMODE=transparent TYPE='application/x-shockwave-flash' PLUGINSPAGE='http://www.macromedia.com/go/getflashplayer'></EMBED></OBJECT><div></td>
          </tr>
        </table>
<!--DIV LAYERS -->
Avatar billede theselfimages Nybegynder
01. august 2004 - 17:00 #23
Roenving =>
Forstår du det her problem:
http://www.eksperten.dk/spm/525276
(set i forhold til denne tråd?)
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