/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
Dynamisk div størrelse
Fra : rasmusp


Dato : 18-05-09 12:32

Hey folkens.

Jeg har et problem med et projekt: Jeg har fået et design på en
vis størrelse og sat det
op i div's med en div der så indeholder det hele.

Der er angivet både højde og bredde, position: absolute og
placering til alle divs.

Jeg vil gerne have "content" til ikke at scrolle når indholdet
fylder mere end den div kan
indeholde, men udvidde sig nedad.

Hvordan kan man lave det?

På forhånd tak..


--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

 
 
Birger Sørensen (18-05-2009)
Kommentar
Fra : Birger Sørensen


Dato : 18-05-09 14:38

rasmusp har bragt dette til os:
> Hey folkens.
>
> Jeg har et problem med et projekt: Jeg har fået et design på en
> vis størrelse og sat det
> op i div's med en div der så indeholder det hele.
>
> Der er angivet både højde og bredde, position: absolute og
> placering til alle divs.
>
> Jeg vil gerne have "content" til ikke at scrolle når indholdet
> fylder mere end den div kan
> indeholde, men udvidde sig nedad.
>
> Hvordan kan man lave det?
>
> På forhånd tak..

min-height?

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



rasmusp (19-05-2009)
Kommentar
Fra : rasmusp


Dato : 19-05-09 11:28

Birger Sørensen wrote in dk.edb.internet.webdesign.html:
> rasmusp har bragt dette til os:
> > Hey folkens.
> >
> > Jeg har et problem med et projekt: Jeg har fået et design på en
> > vis størrelse og sat det
> > op i div's med en div der så indeholder det hele.
> >
> > Der er angivet både højde og bredde, position: absolute og
> > placering til alle divs.
> >
> > Jeg vil gerne have "content" til ikke at scrolle når indholdet
> > fylder mere end den div kan
> > indeholde, men udvidde sig nedad.
> >
> > Hvordan kan man lave det?
> >
> > På forhånd tak..
>
> min-height?
>
> Birger
>
> --
> http://varmeretter.dk - billig, sund og hurtig mad
> http://bbsorensen.dk
>
>

Det har jeg prøvet uden held. Jeg har prøvet at lave et lille
eksempel, http://medieweb.dk/test/ og css'en ligger på
http://medieweb.dk/test/test.css

Hvor laver jeg fejlen?


--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Birger Sørensen (19-05-2009)
Kommentar
Fra : Birger Sørensen


Dato : 19-05-09 11:48

rasmusp forklarede:
> Birger Sørensen wrote in dk.edb.internet.webdesign.html:
>> rasmusp har bragt dette til os:
>>> Hey folkens.
>>>
>>> Jeg har et problem med et projekt: Jeg har fået et design på en
>>> vis størrelse og sat det
>>> op i div's med en div der så indeholder det hele.
>>>
>>> Der er angivet både højde og bredde, position: absolute og
>>> placering til alle divs.
>>>
>>> Jeg vil gerne have "content" til ikke at scrolle når indholdet
>>> fylder mere end den div kan
>>> indeholde, men udvidde sig nedad.
>>>
>>> Hvordan kan man lave det?
>>>
>>> På forhånd tak..
>>
>> min-height?
>>
>> Birger
>>
>> --
>> http://varmeretter.dk - billig, sund og hurtig mad
>> http://bbsorensen.dk
>>
>>
>
> Det har jeg prøvet uden held. Jeg har prøvet at lave et lille
> eksempel, http://medieweb.dk/test/ og css'en ligger på
> http://medieweb.dk/test/test.css
>
> Hvor laver jeg fejlen?

I dit hoved... B-)
Det kan ikke lade sig gøre at fylde mere på skærmen, end der er plads
til. Og det er det du forsøger med den absolutte positionering.
Bortset fra det, ved du ikke hvilken vinduesstørrelse brugerens browser
har, så du kan helt fra starten risikere, at der skal scrollbarer til
overhovedet at se hele indholdet - selv når der ikke er noget ;>)

Du kan løse det, ved at sætte min-height på #midt og #bund, og fjerne
position, top og bottom fra dem begge.
Så virker det, og er fikst nok.

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



rasmusp (19-05-2009)
Kommentar
Fra : rasmusp


Dato : 19-05-09 12:39

Birger Sørensen wrote in dk.edb.internet.webdesign.html:
> rasmusp forklarede:
> > Birger Sørensen wrote in dk.edb.internet.webdesign.html:
> >> rasmusp har bragt dette til os:
> >>> Hey folkens.
> >>>
> >>> Jeg har et problem med et projekt: Jeg har fået et design på en
> >>> vis størrelse og sat det
> >>> op i div's med en div der så indeholder det hele.
> >>>
> >>> Der er angivet både højde og bredde, position: absolute og
> >>> placering til alle divs.
> >>>
> >>> Jeg vil gerne have "content" til ikke at scrolle når indholdet
> >>> fylder mere end den div kan
> >>> indeholde, men udvidde sig nedad.
> >>>
> >>> Hvordan kan man lave det?
> >>>
> >>> På forhånd tak..
> >>
> >> min-height?
> >>
> >> Birger
> >>
> >> --
> >> http://varmeretter.dk - billig, sund og hurtig mad
> >> http://bbsorensen.dk
> >>
> >>
> >
> > Det har jeg prøvet uden held. Jeg har prøvet at lave et lille
> > eksempel, http://medieweb.dk/test/ og css'en ligger på
> > http://medieweb.dk/test/test.css
> >
> > Hvor laver jeg fejlen?
>
> I dit hoved... B-)
> Det kan ikke lade sig gøre at fylde mere på skærmen, end der er plads
> til. Og det er det du forsøger med den absolutte positionering.
> Bortset fra det, ved du ikke hvilken vinduesstørrelse brugerens browser
> har, så du kan helt fra starten risikere, at der skal scrollbarer til
> overhovedet at se hele indholdet - selv når der ikke er noget ;>)
>
> Du kan løse det, ved at sætte min-height på #midt og #bund, og fjerne
> position, top og bottom fra dem begge.
> Så virker det, og er fikst nok.
>
> Birger
>
> --
> http://varmeretter.dk - billig, sund og hurtig mad
> http://bbsorensen.dk
>
>
Jeg siger mange tak, men så er jeg stødt på endnu et problem. Hvis jeg har
2 div, der skal være ved siden af hinanden. Altså jeg har en hvor jeg har
sat den til

left: 231px;

Så er det vel nødvendigt at give denne div position til absolute?

Men problemet er bare de så bliver forskudt af hinanden.


--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Birger Sørensen (19-05-2009)
Kommentar
Fra : Birger Sørensen


Dato : 19-05-09 12:45

rasmusp kom med denne ide:
> Birger Sørensen wrote in dk.edb.internet.webdesign.html:
>> rasmusp forklarede:
>>> Birger Sørensen wrote in dk.edb.internet.webdesign.html:
>>>> rasmusp har bragt dette til os:
>>>>> Hey folkens.
>>>>>
>>>>> Jeg har et problem med et projekt: Jeg har fået et design på en
>>>>> vis størrelse og sat det
>>>>> op i div's med en div der så indeholder det hele.
>>>>>
>>>>> Der er angivet både højde og bredde, position: absolute og
>>>>> placering til alle divs.
>>>>>
>>>>> Jeg vil gerne have "content" til ikke at scrolle når indholdet
>>>>> fylder mere end den div kan
>>>>> indeholde, men udvidde sig nedad.
>>>>>
>>>>> Hvordan kan man lave det?
>>>>>
>>>>> På forhånd tak..
>>>>
>>>> min-height?
>>>>
>>>> Birger
>>>>
>>>> --
>>>> http://varmeretter.dk - billig, sund og hurtig mad
>>>> http://bbsorensen.dk
>>>>
>>>>
>>>
>>> Det har jeg prøvet uden held. Jeg har prøvet at lave et lille
>>> eksempel, http://medieweb.dk/test/ og css'en ligger på
>>> http://medieweb.dk/test/test.css
>>>
>>> Hvor laver jeg fejlen?
>>
>> I dit hoved... B-)
>> Det kan ikke lade sig gøre at fylde mere på skærmen, end der er plads
>> til. Og det er det du forsøger med den absolutte positionering.
>> Bortset fra det, ved du ikke hvilken vinduesstørrelse brugerens browser
>> har, så du kan helt fra starten risikere, at der skal scrollbarer til
>> overhovedet at se hele indholdet - selv når der ikke er noget ;>)
>>
>> Du kan løse det, ved at sætte min-height på #midt og #bund, og fjerne
>> position, top og bottom fra dem begge.
>> Så virker det, og er fikst nok.
>>
>> Birger
>>
>> --
>> http://varmeretter.dk - billig, sund og hurtig mad
>> http://bbsorensen.dk
>>
>>
> Jeg siger mange tak, men så er jeg stødt på endnu et problem. Hvis jeg har
> 2 div, der skal være ved siden af hinanden. Altså jeg har en hvor jeg har
> sat den til
>
> left: 231px;
>
> Så er det vel nødvendigt at give denne div position til absolute?
>
> Men problemet er bare de så bliver forskudt af hinanden.

Nej.
Samme width ( 300 - til hver, hvis jeg husker rigtigt.
På den div der skal til venstre sætter du float : left; og den anden
float : right;

Det burde kunne gøre det.
Er ikke lige sikker, men syntes der er noget med at når man floater og
højden.
Men prøv det - det kan ikke gå værre end det ikke kan bruges...

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



Jørgen Farum Jensen (19-05-2009)
Kommentar
Fra : Jørgen Farum Jensen


Dato : 19-05-09 12:59

Birger Sørensen skrev:

> Det burde kunne gøre det.
> Er ikke lige sikker, men syntes der er noget med at når man floater og
> højden.

Et float'et element har ligesom alle andre HTML-elementer
den højde indholdet tilsiger, medmindre elementet gives
en eksplicit højde.

Det sidste er sjældent nogen god idé, eftersom man jo
ikke kan vide på forhånd, hvor meget indholdet fylder.

Det, du tænker på, Birger, er muligvis problemet med
højden på et element, der indeholder float'ede elementer.
Dette ydre element udvider sig /ikke/ i forhold til
de floatede elementers indhold - undtagen i ældre versioner
af IE.

Dette problem har jeg skrevet om i artiklen
http://webdesign101.dk/css/floatcontainer.php

I øvrigt er float jo netop opfundet som et svar
på Rasmus' spørgsmål: Hvordan får men to elementer
til at stå ved siden af hinanden, når man ikke vil
(kan) bruge position-egenskaben.

Artiklen
http://webdesign101.dk/layout/
forklarer yderligere om dette og henviser til et
antal eksempler på brug af float-mekanismen.

--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

Birger Sørensen (19-05-2009)
Kommentar
Fra : Birger Sørensen


Dato : 19-05-09 13:06

Følgende er skrevet af Jørgen Farum Jensen:
8X
> Det, du tænker på, Birger, er muligvis problemet med
> højden på et element, der indeholder float'ede elementer.
> Dette ydre element udvider sig /ikke/ i forhold til
> de floatede elementers indhold - undtagen i ældre versioner
> af IE.
8X

Det er rigtigt!
Så skal man godt kunne bruge min-height sammen med float.
Afsluttet med en clar...

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



rasmusp (19-05-2009)
Kommentar
Fra : rasmusp


Dato : 19-05-09 13:02

Birger Sørensen wrote in dk.edb.internet.webdesign.html:
> rasmusp kom med denne ide:
> > Birger Sørensen wrote in dk.edb.internet.webdesign.html:
> >> rasmusp forklarede:
> >>> Birger Sørensen wrote in dk.edb.internet.webdesign.html:
> >>>> rasmusp har bragt dette til os:
> >>>>> Hey folkens.
> >>>>>
> >>>>> Jeg har et problem med et projekt: Jeg har fået et design på en
> >>>>> vis størrelse og sat det
> >>>>> op i div's med en div der så indeholder det hele.
> >>>>>
> >>>>> Der er angivet både højde og bredde, position: absolute og
> >>>>> placering til alle divs.
> >>>>>
> >>>>> Jeg vil gerne have "content" til ikke at scrolle når indholdet
> >>>>> fylder mere end den div kan
> >>>>> indeholde, men udvidde sig nedad.
> >>>>>
> >>>>> Hvordan kan man lave det?
> >>>>>
> >>>>> På forhånd tak..
> >>>>
> >>>> min-height?
> >>>>
> >>>> Birger
> >>>>
> >>>> --
> >>>> http://varmeretter.dk - billig, sund og hurtig mad
> >>>> http://bbsorensen.dk
> >>>>
> >>>>
> >>>
> >>> Det har jeg prøvet uden held. Jeg har prøvet at lave et lille
> >>> eksempel, http://medieweb.dk/test/ og css'en ligger på
> >>> http://medieweb.dk/test/test.css
> >>>
> >>> Hvor laver jeg fejlen?
> >>
> >> I dit hoved... B-)
> >> Det kan ikke lade sig gøre at fylde mere på skærmen, end der er plads
> >> til. Og det er det du forsøger med den absolutte positionering.
> >> Bortset fra det, ved du ikke hvilken vinduesstørrelse brugerens browser
> >> har, så du kan helt fra starten risikere, at der skal scrollbarer til
> >> overhovedet at se hele indholdet - selv når der ikke er noget ;>)
> >>
> >> Du kan løse det, ved at sætte min-height på #midt og #bund, og fjerne
> >> position, top og bottom fra dem begge.
> >> Så virker det, og er fikst nok.
> >>
> >> Birger
> >>
> >> --
> >> http://varmeretter.dk - billig, sund og hurtig mad
> >> http://bbsorensen.dk
> >>
> >>
> > Jeg siger mange tak, men så er jeg stødt på endnu et problem. Hvis jeg
har
> > 2 div, der skal være ved siden af hinanden. Altså jeg har en hvor jeg har
> > sat den til
> >
> > left: 231px;
> >
> > Så er det vel nødvendigt at give denne div position til absolute?
> >
> > Men problemet er bare de så bliver forskudt af hinanden.
>
> Nej.
> Samme width ( 300 - til hver, hvis jeg husker rigtigt.
> På den div der skal til venstre sætter du float : left; og den anden
> float : right;
>
> Det burde kunne gøre det.
> Er ikke lige sikker, men syntes der er noget med at når man floater og
> højden.
> Men prøv det - det kan ikke gå værre end det ikke kan bruges...
>
> Birger
>
> --
> http://varmeretter.dk - billig, sund og hurtig mad
> http://bbsorensen.dk
>
>
Det er super dejligt med din hjælp :)

Den første jeg viste dig, var bare for at prøve det af. Nu er jeg igang med
et "rigtig" design, og løber ind i et par problemer.

Siden findes her: http://medieweb.dk/billed/index.html
css her: http://medieweb.dk/billed/css/style.css

Som du kan se er det kun den ene div der tilpasser sig efter størrelsen, jeg
vil gerne have haft de begge tilpassede sig. Deruodver har jeg sat en div ind
#bund, jeg kan ikke lige forstå hvorfor den ikke kommer frem, da jeg har
gjort på samme måde, som du viste mig med det første eksempel.

Venter spændt

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Birger Sørensen (19-05-2009)
Kommentar
Fra : Birger Sørensen


Dato : 19-05-09 13:24

Efter mange tanker skrev rasmusp:
> Birger Sørensen wrote in dk.edb.internet.webdesign.html:
>> rasmusp kom med denne ide:
>>> Birger Sørensen wrote in dk.edb.internet.webdesign.html:
>>>> rasmusp forklarede:
>>>>> Birger Sørensen wrote in dk.edb.internet.webdesign.html:
>>>>>> rasmusp har bragt dette til os:
>>>>>>> Hey folkens.
>>>>>>>
>>>>>>> Jeg har et problem med et projekt: Jeg har fået et design på en
>>>>>>> vis størrelse og sat det
>>>>>>> op i div's med en div der så indeholder det hele.
>>>>>>>
>>>>>>> Der er angivet både højde og bredde, position: absolute og
>>>>>>> placering til alle divs.
>>>>>>>
>>>>>>> Jeg vil gerne have "content" til ikke at scrolle når indholdet
>>>>>>> fylder mere end den div kan
>>>>>>> indeholde, men udvidde sig nedad.
>>>>>>>
>>>>>>> Hvordan kan man lave det?
>>>>>>>
>>>>>>> På forhånd tak..
>>>>>>
>>>>>> min-height?
>>>>>>
>>>>>> Birger
>>>>>>
>>>>>> --
>>>>>> http://varmeretter.dk - billig, sund og hurtig mad
>>>>>> http://bbsorensen.dk
>>>>>>
>>>>>>
>>>>>
>>>>> Det har jeg prøvet uden held. Jeg har prøvet at lave et lille
>>>>> eksempel, http://medieweb.dk/test/ og css'en ligger på
>>>>> http://medieweb.dk/test/test.css
>>>>>
>>>>> Hvor laver jeg fejlen?
>>>>
>>>> I dit hoved... B-)
>>>> Det kan ikke lade sig gøre at fylde mere på skærmen, end der er plads
>>>> til. Og det er det du forsøger med den absolutte positionering.
>>>> Bortset fra det, ved du ikke hvilken vinduesstørrelse brugerens browser
>>>> har, så du kan helt fra starten risikere, at der skal scrollbarer til
>>>> overhovedet at se hele indholdet - selv når der ikke er noget ;>)
>>>>
>>>> Du kan løse det, ved at sætte min-height på #midt og #bund, og fjerne
>>>> position, top og bottom fra dem begge.
>>>> Så virker det, og er fikst nok.
>>>>
>>>> Birger
>>>>
>>>> --
>>>> http://varmeretter.dk - billig, sund og hurtig mad
>>>> http://bbsorensen.dk
>>>>
>>>>
>>> Jeg siger mange tak, men så er jeg stødt på endnu et problem. Hvis jeg har
>>> 2 div, der skal være ved siden af hinanden. Altså jeg har en hvor jeg har
>>> sat den til
>>>
>>> left: 231px;
>>>
>>> Så er det vel nødvendigt at give denne div position til absolute?
>>>
>>> Men problemet er bare de så bliver forskudt af hinanden.
>>
>> Nej.
>> Samme width ( 300 - til hver, hvis jeg husker rigtigt.
>> På den div der skal til venstre sætter du float : left; og den anden
>> float : right;
>>
>> Det burde kunne gøre det.
>> Er ikke lige sikker, men syntes der er noget med at når man floater og
>> højden.
>> Men prøv det - det kan ikke gå værre end det ikke kan bruges...
>>
>> Birger
>>
>> --
>> http://varmeretter.dk - billig, sund og hurtig mad
>> http://bbsorensen.dk
>>
>>
> Det er super dejligt med din hjælp :)
>
> Den første jeg viste dig, var bare for at prøve det af. Nu er jeg igang med
> et "rigtig" design, og løber ind i et par problemer.
>
> Siden findes her: http://medieweb.dk/billed/index.html
> css her: http://medieweb.dk/billed/css/style.css
>
> Som du kan se er det kun den ene div der tilpasser sig efter størrelsen, jeg
> vil gerne have haft de begge tilpassede sig. Deruodver har jeg sat en div ind
> #bund, jeg kan ikke lige forstå hvorfor den ikke kommer frem, da jeg har
> gjort på samme måde, som du viste mig med det første eksempel.
>
> Venter spændt

For nu at starte med det sidste.... Sæt en
clear : both;
på #bund - så kommer den ud af skabet...

Det andet med højderne er værre.
Du skal måske læse Jørgens artikler om emnet.
Een mulig løsning, er at lægge et passende baggrundsbillede på #midt
(gråt til venstre, hvidt til højre - ikke så højt, 5-10px så det ikke
bliver for stort, og så repeat i y-retning.)
Det får ikke boksene til at blive lige store (kan man kun via
javascript), men det giver illusionen af at de er det, og med den
rigtige baggrund, kan det blive flot.
(#menu og #tekst skal så være transparante - altså ikke have sat
baggrunden).

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



rasmusp (19-05-2009)
Kommentar
Fra : rasmusp


Dato : 19-05-09 14:13

Jeg siger mange tak for hjælpen, nu virker det perfekt.

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Søg
Reklame
Statistik
Spørgsmål : 177459
Tips : 31964
Nyheder : 719565
Indlæg : 6408193
Brugere : 218881

Månedens bedste
Årets bedste
Sidste års bedste