CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

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?

Synes godt om

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.

Synes godt om

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.

Synes godt om

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>

Synes godt om

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 =)

Synes godt om

olebole Juniormester

17. marts 2011 - 17:44 #5

- og float på menuen behøver du heller ikke

Synes godt om

doncarnage Nybegynder

19. august 2011 - 13:36 #6

Lukker igen, takker :) - ved at olebole ikke samler på point..

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

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.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS