Avatar billede eikhorsholm Nybegynder
19. februar 2005 - 17:54 Der er 8 kommentarer og
1 løsning

div's med position: absolute ved siden af hinanden.

Jeg har en tabel med en række, bestående af en masse celler.
I nogle af disse celler, befinder der sig lag (div) med position: absolute.
Mit problem er nu, at hvis jeg har to celler ved siden af hinanden, hver indeholdene et lag med position: absolute, så lægger de sig ovenpå hinanden, i stedet for ved siden af hinanden som celler normalt gør.

Jeg er nødt til, at have position: absolute, da jeg bruger det til noget andet. Nogen der har en idé til hvorledes jeg for mine lag til, at ligge ved siden af hinanden, i stedet for ovenpå hinanden?
Avatar billede olebole Juniormester
19. februar 2005 - 21:55 #1
<ole>

Husker du at sætte dimensioner på dine tabelceller?
Et absolut postioneret element optager ikke plads i forhold til de andre elmenter - hvorfor dine celler 'kollapser'  ;o)

/mvh
</bole>
Avatar billede roenving Novice
20. februar 2005 - 01:30 #2
Hvis du skal gøre noget sådant (og det skal du i mange browsere !-), skal du sætte et lag inde i cellen, som omkranser andet indhold og er positioneret relativt !o]
Avatar billede eikhorsholm Nybegynder
20. februar 2005 - 12:16 #3
Jeg prøver lige roenvig's forslag.
Avatar billede eikhorsholm Nybegynder
20. februar 2005 - 14:24 #4
Ser ikke rigtig ud til, at løse mit problem. Hvis jeg laver en div med position: relative og i den har min anden div med position: absolute, så overlapper de stadig hinanden.
Jeg skal have den ene div med position: absolute, da den skal kunne overlappe min tabel.
Avatar billede roenving Novice
20. februar 2005 - 14:34 #5
F.eks.

<table>
  <tr>
    <td style="width:200px;">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque lectus elit, sagittis at, accumsan id, dictum et, erat. Etiam non sapien. Quisque aliquet gravida mi. Integer vitae tortor quis wisi scelerisque vestibulum. Duis pulvinar magna non mauris laoreet volutpat. Aenean et purus. Cras accumsan justo sed arcu. Quisque urna. Sed mi. Ut sed nunc at lorem aliquet vulputate. Proin quis nibh. Proin ut dui vitae urna lacinia posuere. Ut vulputate purus facilisis nunc. Morbi ultrices euismod leo. Integer dui tellus, dictum in, viverra at, sagittis id, sem. Donec nonummy, sem eu hendrerit vulputate, nunc urna molestie eros, et semper nunc mi at ipsum. Praesent tempus malesuada felis. </td>
    <td>
      <div style="position:relative;width:300px;height:200px;">
        <div style="position:relative">
          Vestibulum iaculis mattis sem. Suspendisse hendrerit, justo nec scelerisque mattis, ipsum lacus rutrum nibh, ac sollicitudin tellus felis eu ligula. Aliquam erat volutpat. Curabitur id magna. Aliquam eu magna id pede viverra varius. Nunc eu augue. Nulla quis ligula ac purus commodo vestibulum. Suspendisse adipiscing. Nullam velit. Integer nibh dolor, euismod non, blandit sed, ultricies vel, velit. Nulla posuere metus vel libero. Vestibulum elementum. Cras at nunc eget turpis tristique ullamcorper. In eget mi. Aliquam quis pede. Curabitur tincidunt est quis quam. Nunc elit nulla, ornare a, tristique eu, imperdiet in, eros.</div>
        <div style="position:absolute;top:-50px;left:-75px;height:250px;width:350px;color:green;background:#eee">
          Vestibulum iaculis mattis sem. Suspendisse hendrerit, justo nec scelerisque mattis, ipsum lacus rutrum nibh, ac sollicitudin tellus felis eu ligula. Aliquam erat volutpat. Curabitur id magna. Aliquam eu magna id pede viverra varius. Nunc eu augue. Nulla quis ligula ac purus commodo vestibulum. Suspendisse adipiscing. Nullam velit. Integer nibh dolor, euismod non, blandit sed, ultricies vel, velit. Nulla posuere metus vel libero. Vestibulum elementum. Cras at nunc eget turpis tristique ullamcorper. In eget mi. Aliquam quis pede. Curabitur tincidunt est quis quam. Nunc elit nulla, ornare a, tristique eu, imperdiet in, eros.</div>
       
      </div></td>
  </tr>
  <tr>
    <td style="width:200px;">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque lectus elit, sagittis at, accumsan id, dictum et, erat. Etiam non sapien. Quisque aliquet gravida mi. Integer vitae tortor quis wisi scelerisque vestibulum. Duis pulvinar magna non mauris laoreet volutpat. Aenean et purus. Cras accumsan justo sed arcu. Quisque urna. Sed mi. Ut sed nunc at lorem aliquet vulputate. Proin quis nibh. Proin ut dui vitae urna lacinia posuere. Ut vulputate purus facilisis nunc. Morbi ultrices euismod leo. Integer dui tellus, dictum in, viverra at, sagittis id, sem. Donec nonummy, sem eu hendrerit vulputate, nunc urna molestie eros, et semper nunc mi at ipsum. Praesent tempus malesuada felis. </td>
    <td style="width:300px;">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque lectus elit, sagittis at, accumsan id, dictum et, erat. Etiam non sapien. Quisque aliquet gravida mi. Integer vitae tortor quis wisi scelerisque vestibulum. Duis pulvinar magna non mauris laoreet volutpat. Aenean et purus. Cras accumsan justo sed arcu. Quisque urna. Sed mi. Ut sed nunc at lorem aliquet vulputate. Proin quis nibh. Proin ut dui vitae urna lacinia posuere. Ut vulputate purus facilisis nunc. Morbi ultrices euismod leo. Integer dui tellus, dictum in, viverra at, sagittis id, sem. Donec nonummy, sem eu hendrerit vulputate, nunc urna molestie eros, et semper nunc mi at ipsum. Praesent tempus malesuada felis. </td>
  </tr>
</table>
Avatar billede eikhorsholm Nybegynder
20. februar 2005 - 15:50 #6
Ja, der kan man bare se :-)
Det virker. Ved ikke lige hvad det var, jeg prøvede så. Men utrolig mange gange tak for din hjælp og specielt den tålmodighed. Hvis du laver et svar, så er der point på vej til dig ;-)
Avatar billede roenving Novice
20. februar 2005 - 15:55 #7
Velbekomme '-)
Avatar billede eikhorsholm Nybegynder
20. februar 2005 - 16:00 #8
Jeg har lige givet dig noget karma. Tak igen for din tålmodighed og hjælp :-)
Avatar billede roenving Novice
20. februar 2005 - 16:04 #9
Tak for point ;~}
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