Avatar billede doncarnage Nybegynder
17. marts 2011 - 10:38 Der er 5 kommentarer og
1 løsning

Resizable side med min-width og position absolute?

Hola eksperter...

Jeg kunne godt tænke mig en resizable side med en menu i højre side og det har jeg indtil videre fået til at virke som på dette simple eksempel:

http://pastehtml.com/view/1do8cy9.html


Problemet er bare at position auto og min-width ikke helt reagerer som ønsket.. Hvis man gør browservinduet mindre end 500px (som min-width er sat til), fortsætter den røde sidemenu indover det grønne content..

Hvordan får jeg den til at stoppe efter eksempelvis 500px?
Avatar billede kentora Nybegynder
17. marts 2011 - 11:03 #1
Jeg vil gætte på du skal bruge noget javascript, evt. JQuery, til at evaluere størrelsen efter rezise, og hvis så størrelsen er under 500px skal den sætte width til xxx px og så sætte overflow til scroll.
Avatar billede Druesukker Nybegynder
17. marts 2011 - 14:42 #2
I din style til menuen kan du indsætte:
z-index:-1

Så vil den i den mindste ende bag ved dit content.

Ellers bakker jeg op om kentoras kommentar.
Avatar billede olebole Juniormester
17. marts 2011 - 17:39 #3
<ole>

Der er ikke grund til at blande JavaScript ind i det - og da slet ikke tunge klodser som jQuery. Hvis man er en smule inde i CSS, er der masser af muligheder. Du kan evt. arbejde lidt videre med:


<div style="position:relative;min-width:800px;">
    <div style="margin-left:20px;padding-right:260px;background:green;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non lectus turpis, eu vulputate neque. Integer scelerisque molestie nulla et rhoncus. Proin facilisis scelerisque auctor. Nulla id rhoncus lorem. In tortor sem, lobortis non ullamcorper eu, tempus eu dui. Aenean vitae lacus ac elit accumsan congue. Donec cursus tempor blandit.
    </div>
   
    <div style="float:left;right:0;top:0;width:220px;background:red;position:absolute">
        menu
    </div>
</div>



/mvh
</bole>
Avatar billede olebole Juniormester
17. marts 2011 - 17:43 #4
padding-right:260px var et forsøg på noget andet. Du kan også bruge margin-right:260px - men under alle omstændigheder skal du nok fedte lidt rundt med værdierne, så det kommer til at se ud, som vil  =)
Avatar billede olebole Juniormester
17. marts 2011 - 17:44 #5
- og float på menuen behøver du heller ikke
Avatar billede doncarnage Nybegynder
19. august 2011 - 13:36 #6
Lukker igen, takker :) - ved at olebole ikke samler på 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