Avatar billede flashback83 Nybegynder
25. juli 2007 - 20:37 Der er 5 kommentarer og
1 løsning

relativ + absolut positionering

Jeg har nedenstående forsøg med nested positionering.
Det virker dog ikke i IE. (De grønne DIV'er hopper en plads til højre) Er der nogen, der har nok styr på IE's særheder til at kunne skrive en hack, der får det til at virke i både IE og firefox?
Jeg har desværre ikke adgang til en server, så for at se eksemplet er I nødt til at gemme lokalt.

<head>
  <style type="text/css">
    .contain{
        position: relative;
        border: blue 1px solid;
        height: 100px;
        width: 200px;
        float: left;
        }
    .billede{
        border: red 1px solid;
        height: 60px;
        width: 60px;
        float: left;
        }
    .biglink{
        position: absolute;
        bottom: 0px;
        width: 100px;
        border: green 1px solid;
        }

  </style>
</head>

<body>
  <div class="contain">
    <div class="billede"></div>
    Her er en masse tekst
    <div class="biglink">Mennesker</div>
  </div>
  <div class="contain">
    <div class="billede"></div>
    Her er en masse tekst
    <div class="biglink">Mennesker</div>
  </div>
  <div class="contain">
    <div class="billede"></div>
    Her er en masse tekst
    <div class="biglink">Mennesker</div>
  </div>
</body>

</html>
Avatar billede w13 Novice
25. juli 2007 - 20:55 #1
Hvad hvis du sætter .biglink til position:relative; i stedet for absolute?
Avatar billede flashback83 Nybegynder
25. juli 2007 - 22:37 #2
Ideen er at biglink altid skal stå samme sted i forhold til billed-div'en - uanset hvor lidt eller meget tekst der er ved siden af. Hvis man sætter biglink til relative ville den flytte sig efter indholdet ovenover, og det skal den ikke.
Avatar billede flashback83 Nybegynder
25. juli 2007 - 22:39 #3
Ideen er at man har et element som er absolut positioneret inden i et relativt positioneret element. (F.eks. at biglink altid vil være i nederste venstre hjørne af contain-div'en - uanset hvor contain-div'en er placeret på siden.
Avatar billede kinderaeg Nybegynder
26. juli 2007 - 08:55 #4
Prøv at sætte left: 0; på .biglink, hvis du altså vil ha' den grønne kasse til at stå i venstre side, ellers kan du jo sætte den et andet sted, men positioner den, så går det nok ;)
Avatar billede flashback83 Nybegynder
26. juli 2007 - 13:40 #5
kinderaeg  >> Nogle gange er svarene bare så simple at man stirrer sig blind på dem. Tak for hjælpen. Og smid et svar for pointene
Avatar billede kinderaeg Nybegynder
26. juli 2007 - 15:31 #6
Grib ;)
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