Avatar billede jhauge Nybegynder
25. juni 2003 - 00:09 Der er 7 kommentarer

Absolut positionering - 3 px fra højre kant af parent

Jeg roder med at få placeret en to div'er i forhold til hinanden. HTML strukturen er:

<div class="lvl2">
  Noget tekst her
  <div class="lvl3">
    <div>Noget tekst</div>
    <div>Noget tekst</div>
    <div>Noget tekst</div>
    <div>Noget tekst</div>
  </div>
</div>

med følgende foreløbige css:

div.lvl2 {
  border: solid 1px #ccc;
  position: relative;
}

div.lvl3 {
  border: solid 1px #ccc;
  position: absolute
  top: 4px;
}

Det er altsammen meget fint nu placerer lvl3 div'en sig 4 px under overkanten af lvl2 div'en. Problemet er at få lvl3 div'en til at placere sig således at venstre kant er 4 px til venstre for lvl2 div'ens højre kant, uden at kende bredden på lvl2 div'en. Jeg ønsker med andre ord at opbygge en alm kaskade menu i ren CSS.

Er der nogen der kan løse det under følgende betingelser:
- Løsningen må ikke være baseret på javascript.
- Løsningen må ikke gå ud fra at man kender bredden på lvl2 div'en

mvh
.Hauge
Avatar billede roenving Novice
25. juni 2003 - 00:11 #1
Hvis man kan det uden javascript, så er jeg også interesseret !-)
Avatar billede pixeldude Nybegynder
25. juni 2003 - 03:08 #2
Jeg håber jeg har forstået dit spg. korrekt

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Untitled</title>
    <style type="text/css">
        .lvl2 {
            postion:absolute;
            border: solid 1px #ccc;
            margin-right: 4px;
            float: left;
        }
       
        #menu.lvl2 {
            postion:absolute;
            border: solid 1px #ccc;
            margin-top: 4px;
            margin-right: 4px;
            float: left;
        }
    </style>
</head>

<body>
<div class="lvl2">Noget tekst her</div>
<div class="lvl2" id="menu">
    <div class="text">Noget tekst</div>
    <div class="text">Noget tekst</div>
    <div class="text">Noget tekst</div>
    <div class="text">Noget tekst</div>
</div>
</body>
</html>
Avatar billede jhauge Nybegynder
25. juni 2003 - 08:52 #3
Et godt bud pixeldude - specielt hvis man sætter margin-right: -4px på .lvl2, så er id="menu" 4 pixels til venstre for første div's højre kant.

Problemet er at HTML'en har en anden struktur, og man kan ikke længere finde det der skal være undermenuen som et "child" af hovedmenuen, med den nye struktur.

Nogen der har et bud på en løsning som bevarer strukturen i HTML'en?

.Hauge
Avatar billede asger.friis Nybegynder
25. juni 2003 - 14:18 #4
de to class og id klassifikationer skal være således

postion:absolute;
            border: solid 1px #ccc;
            margin-right: 4px;
            float: left;
        }
       
        #menu.lvl2 {
            postion:realitive;
            border: solid 1px #ccc;
            margin-top: 4px;
            margin-right: 4px;
            float: left;
Avatar billede asger.friis Nybegynder
25. juni 2003 - 14:18 #5
ellers er resten rigtigt
Avatar billede jhauge Nybegynder
25. juni 2003 - 20:24 #6
Jeg tror at i har misforstået mig - lvl3 menuen skal overlappe lvl2 menuen en lille smule, men den skal stadig være til højre for lvl2 menuen.

Det skal minde om en tradutionel Win GUI menu
Avatar billede mroderick Nybegynder
17. september 2003 - 10:33 #7
Hvis man antager at man kender width på lvl3, så kan dette fixe det:

div.lvl2 {
  border: solid 1px #ccc;
  position: relative;
  width: 300px;
}
   
div.lvl3 {
  border: solid 1px #ccc;
  position: absolute;
  width: 200px;
  top: 4px;
  right:-196px
}

mvh.
Morgan Roderick
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