CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg
Cookie ikon
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
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
Variabler som ikke virker Af Frits Jensen i HTML 2 30/10/202409:37 30/10/202413:04
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML 2 29/09/202410:58 30/09/202412:04
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
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester



Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
16 min siden Adobe Elements 2019, Organizer Crasher Af mort1 i Billedbehandling
I går 20:49 pop up black friday Af Malm i Virus
I går 18:31 Hvor finder jeg en netværksdriver? Af jcr18 i Wifi
I går 16:49 Identificér og hent del af tekststreng Af TheLibrarian i Excel
I går 16:30 Smart vægt til fitness tracking Af Henrik i Fitness & Smartwatches
White papers
Flere white papers »


Premium
Teaser billede
Vil købe tele-løsninger til det offentlige for 370 millioner kroner
Læs mere »
Efterspørgslen på AI-regnekraft er enorm - og det smitter af på priserne: "Vi kan sælge næsten alt, hvad vi får ind"
Nyt værtøj fra Microsoft: Snart kan du reparere nedbrudte Windows-enheder på distancen
Politiet skriver kontrakt på 75 millioner kroner med dansk it-firma: Medarbejdere skal flytte ind hos politiet
Se alle »
Computerworld
Teaser billede
Microsofts nye pc er ekstrem billig – men kan blive ekstrem sikker og fleksibel
Læs mere »
Test: Prøv kun disse B&O-hovedtelefoner, hvis du har råd
Kæmpe datalæk på hospital: 750.000 patienters fortrolige data lækket
Test: Audi Q6 er en super fed SUV - men gør dig selv en tjeneste og kast flere penge efter den
Se alle »
CIO
Teaser billede
Konsulenthus vil rulle Microsoft 365 Copilot ud til 200.000 ansatte
Læs mere »
Kæmpe-opgave for Danske Bank har banet vej for fuldautomatiseret migrering til cloud: Nu udbredes metoden i hele AWS
Microsofts store årlige event: De tre vigtigste nøglebudskaber fra Satya Nadella om Microsofts fremtid
Stor sag mod Microsoft kan være på vej: Beskyldes for at låse Azure-kunder fast med ulovlige metoder
Se alle »
Job & Karriere
Teaser billede
Microsoft klar med ny direktion for den danske forretning: Her er de nye direktører
Læs mere »
Efter skelsættende møde med sportscoach: Stor dansk it-arbejdsplads indfører fredags-fri og isbade i arbejdstiden
Linus Torvalds giver russiske Linux-udviklere sparket: Vil ikke have noget med dem at gøre
De ansatte elsker det, tech-cheferne hader det – og HP kaster milliarder efter det
Se alle »
White paper
Teaser billede
Er din cybersikkerhed klar til AI-revolutionen?
Læs mere »
Sikkerhed uden grænser: Cisco Hypershield
Sådan får du overblik og beskytter dine cloudapplikationer
Vær proaktiv og prioritér IT-sikkerheden – før det er for sent
Se alle »

Events
Flere events »
White papers
Flere white papers »
IT-Kurser
Se alle vores it-kurser »