Avatar billede jps6kb Novice
22. januar 2004 - 11:43 Der er 17 kommentarer og
1 løsning

div layer eller hvad det hedder

Newbie layer ting...

Jeg har lavet en side med en menu øverst og en iframe lige under... ovenpå (lag 2) vil jeg gerne have et banner som dækker lidt af menuen og lidt af IFRAMEN... banneret er ikke firkantet, men lidt ovalt og gennemsigtig /(altså uden om ovalen)/ hvordan gør man det ???
Avatar billede keysersoze Ekspert
22. januar 2004 - 11:50 #1
Det kan ikke lade sig gøre vha et layer - det er to selvstændige sider og et element kan kun vises i én side.

Eneste mulighed er at lave det der hedder et chromeless-vindue som faktisk er et normalt popup-vindue men uden kanter, top og bund så man selv kan designe det 100%. Det betyder dog at du vil få en hvid firkant og ikke noget ovalt - og samtidig vil det kun virke i IE indtil MS også engang får lukket for den fejl.
Avatar billede mik789 Nybegynder
22. januar 2004 - 11:57 #2
keysersoze har ret: man kan i princippet ikke lægge indhold fra én ramme ned over en anden (f.eks. en iframe), da de hver er deres eget vindue. Men man kan snyde ;-) I IE kan man gøre det alligevel hvis <div>'en får egenskaben position: absolute og et z-index højere end resten. I Netscape og Mozilla gøres det ved i stedet at have position sat til "fixed" og igen med et højere z-index.
Avatar billede jps6kb Novice
22. januar 2004 - 11:58 #3
Wow... kan I give et ex ?
Avatar billede mik789 Nybegynder
22. januar 2004 - 12:01 #4
Der er lige én hage til: i IE version 5.5- (dvs. lavere end 5.5) går den ikke. Der skal man i stedet lave laget som et "x-scriptlet" <object>.

I kan se en demonstration på: http://e-tidsskrift.dk/dev/Lag_over_iframe/

Der er der både almindelige lag og et eks. på dette <object>
Avatar billede jps6kb Novice
22. januar 2004 - 12:10 #5
Har lige lavet en hurtig skitse i Paint... gudeprogrammet *LOL*

Det er lidt svært at forklare hvad jeg mener... såeh...

exp.kbang.dk/455308.bmp

Har I forslag til hvordan man kan lave det ???
Avatar billede jps6kb Novice
22. januar 2004 - 12:10 #6
Avatar billede mik789 Nybegynder
22. januar 2004 - 12:16 #7
hmmn, du kan jo alligevel ikke få teksten til at scrolle op under ovalen sådan at den følger ovalens runding (altså at man godt kan se de yderste til venstre og højre af linje 3, men ikke midten, og tilsvarende mere af siderne for linje 4 osv.). Du kan ikke have runde lag, kun firkantede, så teksten forsvinder alligevel så snart der scrolles op til det nederste punkt af ovalen. Derfor kan du ligeså godt lægge iframen UNDER ovealen, så der slet ikke er noget der skal lægges ned over iframen, hvis du forstår hvad jeg mener...
Avatar billede jps6kb Novice
22. januar 2004 - 12:24 #8
Jamen jeg kan jo godt bruge gennemsigtige billeder i layers og så bare lade være at angive en baggrund for layeret... og der kommer teksten da godt nok med...
Det behøver heller ikke være en IFRAME... bare en eller anden måde at scrolle på ???
Avatar billede mik789 Nybegynder
22. januar 2004 - 12:32 #9
OK... Hvis det er meningen at teksten skal scrolle op under ovalen, men forsvinde ved det punkt hvor ovalen er breddest (sådan forstår jeg dig), så kunne det gøre det sådan:

Den øverste halvdel af ovalen tegnes som del af topdelen af siden (den med menuen).
Under denne lægges boksen hvor teksten skal scrolle. Lav den ikke som iframe med i stedet bare som almindeligt lag, dvs. <div> med egenskaben overflow: auto. Det forudsætter at du angiver højde og bredde for denne <div>. Oven på denne div lægger du så en anden <div> med den nederste halvdel af ovalen, og denne <div> har egenskaben z-index: 2 (hvis der ikke er z-index på andet). Ovalen her er så netop lavet som et billede med transparent baggrund. Detta andet lag skal have egenskaben position: absolute og angivelse af top, left, widht, og height (samt z-index).

Noget i den stil....
Avatar billede jps6kb Novice
22. januar 2004 - 12:35 #10
Hmm... okay... jeg prøver det...
Avatar billede mik789 Nybegynder
22. januar 2004 - 12:36 #11
skal også have med at det lag der har den nederste del af ovalen med den transparente baggrund også skal have egenskaben background-color: transparent;
Avatar billede mik789 Nybegynder
22. januar 2004 - 12:37 #12
... for et lag har som udgangspunkt ikke en gennemsigtig baggrund, men baggrundsfarven hvid
Avatar billede mik789 Nybegynder
22. januar 2004 - 12:39 #13
índen du går i sort: du er med på at når jeg taler om egenskaber, mener jeg style egenskaber. F.eks. egenskaben z-index: 2, skrive i din div:

<div style=z-index:2; position:absolute; [osv med flere egenskaber];">indhold</div>
Avatar billede mik789 Nybegynder
22. januar 2004 - 12:45 #14
mangler lige et ":
<div style="z-index:2; [osv]
Avatar billede jps6kb Novice
22. januar 2004 - 12:49 #15
Hmm... kan ikke prøve at skitse koden ud for mig ?? Tror jeg er faret vild i "100 meter kode"skoven ...
Avatar billede mik789 Nybegynder
22. januar 2004 - 13:11 #16
Det nemmeste er måske at gå ud fra en tabel struktur:

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

<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>

<body>
<table cellpaddin="0" cellspacing="0" border="0">
  <tr>
    <td><img src="navnPåFilMedØversteDelAfOvalen.jpg" heigth="xxx" width="xxx" alt=""></td>
    <td>Resten af øverste del af siden</td>
  </tr>
  <tr>
    <td colspan="2">
    <div style="width:100%; height:[tal]px; overflow:auto;">
    <div style="position:absolute; top:[punkt fra vinduets øverste kant]px; left:[punkt fra vinduets venstre kant]px; width:[ovalbilledets bredde]px; heigth:[ovalbilledets højde]px; z-index:100; background-color:transparent;"><img src="navnPåNedersteHalvdelAfOvalenMedTransparentBaggrund.jpg" height="xxx" width="xxx" alt=""></div></div></td>
  </tr>
</table>
</body>
</html>
Avatar billede mik789 Nybegynder
22. januar 2004 - 13:16 #17
Vi mangler lige teksten:
" alt=""></div></div></td> " skal være:

alt=""></div>Tekst...Tekst....Tekst</div></td>
Avatar billede keysersoze Ekspert
12. marts 2004 - 15:26 #18
lukketid?
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