Avatar billede Asger Carlsen Nybegynder
16. august 2011 - 19:50 Der er 11 kommentarer og
1 løsning

Vildfaren <div>

Jeg er støt på et mystisk lille irriterende problem, jeg håber der er nogen der kan hjælpe med. Jeg har et billed, hvor jeg med z-index har placeret et halvgennemsigtigt billed foran i en <div> </div>. Med følgende kode:

  <td valign="top" width="200" height="133" align="center">
  <div style="z-index: 1; position: absolute;"><img src="pic/ref/mini/billed1.jpg" width="200" height="133" border="0"></div>
  <div style="z-index: 2; position: absolute;"><img src="pic/transparent.png" name="transparent"></div>
  </td>

Mit problemer er så at fra tid til anden hopper det halvgennemsigtige billed væk fra den valgte position, og placerer sig et tilfældigt sted på siden, ikke altid det samme sted. Er det bare en browser/graffikfejl, eller er der en fejl i min kode der gør udslaget? Der er ikke noget system i hvornår det sker, i hvert fald ikke noget jeg har kunnet gennemskue.
Avatar billede PacManiac Nybegynder
16. august 2011 - 23:56 #1
Jeg ved ikke lige hvor du har lært det der, men det ser meget forkert ud. CSS skal op imellem <head> og </head> at stå eller i et CSS dokument for sig selv.

At det flytter sig sker sikkert fordi du ikke har angivet en fast position. Så som:

"#div navn" {
position:absolute;
top: 80px;
left: 160px;
}

Jeg vil anbefale dig at give dine div'er et id,
og styrer dem på den måde.
Avatar billede Asger Carlsen Nybegynder
17. august 2011 - 06:56 #2
Det er vil være en skam at give nogen skylden for at have lært mig det. Det er noget hjemmebrygget noget. Har fået rykket rundt på det, og det lader til at virke, men top /left er i forhold til venstre hjørne af skærmen. Er det muligt at placere billederne i forhold til en tabel? Så jeg slipper for at der opstår problemer, ved andre skærmopløsninger?
Avatar billede PacManiac Nybegynder
17. august 2011 - 07:20 #3
Ja.

Så skal du bare bruge:
position:relative;

For at få en dybere forståelse for hvordan det virker bør du læse denne artikel: http://www.html.dk/tutorials/css/lektion14.asp

Den er ikke sygt lang, men giver et utroligt godt overblik over hvad man har med at gøre.

(Husk at du sagtens kan bruge minus. Fx. (left: -180px;), hvis det er nødvendigt).
Avatar billede Asger Carlsen Nybegynder
17. august 2011 - 17:43 #4
Super artikel!! Det var lige hvad der skulle til for ordentligt at forstå det. Smid et svar, og mange tak for hjælpen.
Avatar billede PacManiac Nybegynder
17. august 2011 - 18:35 #5
Mit svar

Der er også andre rigtig gode artikler på Tutorials html.dk
Hvis du ikke allerede har læst dem :)
Avatar billede Asger Carlsen Nybegynder
17. august 2011 - 18:58 #6
Prøv lige at ligge et nyt svar. #5 er bare en kommentar :)
Avatar billede PacManiac Nybegynder
17. august 2011 - 22:02 #7
haha Ja typisk mig bare at oprette en besked og så glemme at lave det til et svar :P

Nu skulle det virke
Avatar billede olebole Juniormester
18. august 2011 - 17:24 #8
<ole>

PacManiac >> "Jeg ved ikke lige hvor du har lært det der, men det ser meget forkert ud. CSS skal op imellem <head> og </head> at stå eller i et CSS dokument for sig selv."

Nej, det er noget vrøvl. Man kan anbringe CSS i HEAD elementet eller i en remote fil. Inline styles er ligeledes del af samtlige versioner af CSS og dermed fuldt ud valid.

Spørg en hvilken somhelst kompetent udvikler på Eksperten, og du vil få at vide, at html.dk er et af nettets mest fejlfyldte sites om webkode.

Hvad angår spørgsmålet, så er reglerne for, hvordan et absolute positioneret element placerer sig, følgende:

*) Når et element positioneres absolute, placerer det sig i forhold til det første, omkransende element, som er positioneret relative, absolute, fixed eller static.

*) Findes et sådan ikke, placerer det sig i forhold til BODY elementet.


Derfor er løsningen - hvis elementerne skal positioneres absolute at skrive:


  <td valign="top" width="200" height="133" align="center">
  <div style="position:relative">
      <div style="z-index: 1; position: absolute;"><img src="pic/ref/mini/billed1.jpg" width="200" height="133" border="0"></div>
      <div style="z-index: 2; position: absolute;"><img src="pic/transparent.png" name="transparent"></div>
  </div>
  </td>



/mvh
</bole>
Avatar billede PacManiac Nybegynder
18. august 2011 - 17:49 #9
#8

Det er noget vrøvl det du siger!
Jeg skrev ikke at man ikke kan gøre det. Det er bare ikke den mest overskuelige måde at gøre det på.

Med "forkert" henleder jeg til de uskrevne regler der findes inde for web programmering. Det er simpelthen ikke den måde det gøres på! Og hvis du, olebole, har bare en brøkdel af en web-integrator i dig, ved du at det er rigtig.

html.dk er ganske udemærket til amatør programmering med simpel forklaring som alle kan forstå. Ja, meget af det derinde er efterhånden ret forældet, men det virker stadig til amatør projekter.

Ikke noget en hurtigt søgning på google ikke kan rette op på.
Avatar billede olebole Juniormester
18. august 2011 - 18:10 #10
Nej, lad nu være med at bortforklare, hvad du skrev! Du skrev helt præcist:

"Jeg ved ikke lige hvor du har lært det der, men det ser meget forkert ud. CSS skal op imellem <head> og </head> at stå eller i et CSS dokument for sig selv.".

Der står eksplicit, at det er forkert at bruge inline styles. Der står eksplicit, at CSS skal i HEAD elementet - eller ligge i et CSS dokument for sig selv. Det er ikke korrekt! Og hvis du mente noget andet, burde du have skrevet det - i stedet for at trække i land bagefter.

"Det er simpelthen ikke den måde det gøres på! Og hvis du, olebole, har bare en brøkdel af en web-integrator i dig, ved du at det er rigtig."

Jo, det er en måde - og en helt valid måde - at gøre mange ting på. Jeg har ikke "bare en brøkdel af en webintegrator i mig"[i]. Jeg har en ret lang karriere bag mig som webudvikler og interface developer på bl.a. nikefootball, nikewomen, hydrotexaco, novo, cocacola, kellogg's danskebank, m. m. fl. - og underviser i dag webintegratorer.

Jeg taler ikke om, at noget på html.dk (selvom det så sandelig også er tilfældet). Jeg taler om, at artiklerne [i]altid
har været fyldt med misforståelser, mangler og seriøse fejl.

Derudover undrer det mig, at du forsøger at belære os udfra en professionel vinkel - for derefter at undskylde din anbefaling af html.dk med, at det er godt nok til amatører. Kan det mon skyldes, at dine påstande og argumenter ikke holder vand? (hint: det var et retorisk spørgsmål)
Avatar billede PacManiac Nybegynder
19. august 2011 - 18:59 #11
#10

Hvor er du langt ude.. Indrøm dog at det bare ikke er den måde det gøres på mere! Ligesom at man nu skriver JavaScript i bunden af body og ikke alle andre steder som man gjorde før, for at gøre det mere overskueligt.

Jeg er selv ved at tage uddannelsen som web-integrator, og min lære og andre elever er sjovt nok enig med mig i, at man bør undgå den måde at bruge CSS på. Ikke mindst for sin egen skyld, men også for andres, der måske skal tilse ens kode.

Jeg prøver at hjælpe coder_carl her, og det lyder som om det virkede.

Jeg mener at din tekst er vildledende i og med at du fejlagtigt prøver at overbevise coder_carl om at hans kode står ganske rigtig.
Selvom den måde er "forældet".

Desuden trækker overhovedet ikke i land. Siden hvornår har "Det SER forkert ud" betydet det samme som "Det ER forkert"? Mærkeligt at du ikke kan se forskellen.

Kom ud over dit eget ego.
Hvis du er en af de udviklere der er fløjtende ligeglad med udviklingen i denne branche, og bare fortsætter som du nu ved bedst, så har jeg ikke nogen respekt tilbage til dig som udvikler.

Jeg håber godt nok ikke du stadig syntes det er ok at bruge tags som <font> og <center> i HTML. Uskrevne regler! Ting man bare ikke gør mere var hvad det her handlede om.
Avatar billede olebole Juniormester
20. august 2011 - 01:18 #12
Årh, Herregud! En elev, der forsøger at uddanne sig til det aller laveste trin på WWW's fødekæde, vil frygtelig gerne dæmpe mit ego - og vil gerne belære mig om professionelle holdninger. Talking about ego ...!?!!??? *ROTFLMAO*

Der er næppe noget, der bekymrer mig mindre end tabet af din respekt. Jeg ville være flov, hvis det ikke forholdt sig anderledes!  :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