---

Hejsa

Jeg vil gerne at min side indeholder en div i toppen på 15px høj og en div i
bunden 15px høj. Det i midten skal så variere i størrelse alt efter hvor
stort vinduet er. Hvordan får jeg div'en i bunden helt ned hver gang.

Hvad skal jeg skrive istedet for ????

<div style="width: 100%; height: 15px;">top</div>
<div style="width: 100%; height: ????;">Indhold</div>
<div style="width: 100%; height: 15px;">bund</div>

Jeg har prøvet at sjusse mig med nogle procentsatser men virker kun
tilnærmelsesvis.
--
Med venlig hilsen

Michael Jensen
Michael[SNABEL]ogj[PRIK]DK

---

"Michael Jensen" <michael@ogjFJERN.dk> skrev :

>Jeg vil gerne at min side indeholder en div i toppen på 15px høj og en div i
>bunden 15px høj. Det i midten skal så variere i størrelse alt efter hvor
>stort vinduet er. Hvordan får jeg div'en i bunden helt ned hver gang.

<div style="width: 100%; height: 100%">
<div style="position: absolute; top: 0; height: 15px; width:
100%">
Indhold i toppen
</div>
<div style="position: absolute; bottom: 15px; height: 15px;
width: 100%">
Indhold nederst
</div>
Indhold i midten
</div>
--
Knud

---

Knud Gert Ellentoft wrote:

> <div style="width: 100%; height: 100%">
> <div style="position: absolute; top: 0; height: 15px; width:
> 100%">
> Indhold i toppen
> </div>
> <div style="position: absolute; bottom: 15px; height: 15px;
> width: 100%">
> Indhold nederst
> </div>
> Indhold i midten
> </div>

Opstår der så ikke et problem hvis 'Indhold i midten' bliver højere end
skærmhøjden? (jeg har prøvet at lave noget der ligner, og det så ret
noller ud ).

Jeg prøver lige at lave en testside med det:
http://www.garion.dk/webdesign/test/

Det lærte mig så at der skal en smule margin på for at der ikke kommer
overlap i toppen. I bunden får jeg netop det problem som jeg frygtede.

Er der nogen der har en god løsning på det? (jeg har nemlig samme
problem på http://folkclubfyn.dk, hvor jeg egl gerne vil have en sidefod
på)

mvh

Jesper Brunholm

--
Phønix - dansk folk-musik i front - <http://www.phonixfolk.dk/>
H.C. Andersen-Centret: <http://www.andersen.sdu.dk/>
Vi har killinger på Garion.dk: <http://garion.dk/>

---

"Knud Gert Ellentoft" <knudgert@mail.tele.dk> skrev
>
> <div style="width: 100%; height: 100%">
> <div style="position: absolute; top: 0; height: 15px; width:
> 100%">
> Indhold i toppen
> </div>
> <div style="position: absolute; bottom: 15px; height: 15px;
> width: 100%">
> Indhold nederst
> </div>
> Indhold i midten
> </div>

Når du indsætter top- og bunddiv med absolut positionering, er du nødt til
tildele indholdet en top- og bundmargin på samme størrelse som højden på
top- og bunddiv'erne + lidt mere. Ellers vil sidens indhold komme til at stå
ind over de to div'er:

<div style="width: 100%; height: 100%">
<div style="position: absolute; top: 0; height: 15px; width:
100%">
Indhold i toppen
</div>
<div style="position: absolute; bottom: 15px; height: 15px;
width: 100%">
Indhold nederst
</div>
<div style="margin-top:25px;margin-bottom:25px;">
Indhold i midten
</div>
</div>

--
Med venlig hilsen
Erik Ginnerskov
http://www.hjemmesideskolen.dk - http://www.html-faq.dk
http://hjem.get2net.dk/egin

---

Erik Ginnerskov wrote:

> Når du indsætter top- og bunddiv med absolut positionering, er du nødt til
> tildele indholdet en top- og bundmargin på samme størrelse som højden på
> top- og bunddiv'erne + lidt mere. Ellers vil sidens indhold komme til at stå
> ind over de to div'er:

Kan du se mit indlæg fra 13:58 idag? (hvor jeg omtalte at ja, der er
nødt til at margin på).

Det løser ikke overlapningsproblemet i bunden, selvom der bliver sat
margin på (jeg har sat det op som du skrev på
http://www.garion.dk/webdesign/test/)

mvh

Jesper Brunholm

--
Phønix - dansk folk-musik i front - <http://www.phonixfolk.dk/>
H.C. Andersen-Centret: <http://www.andersen.sdu.dk/>
Vi har killinger på Garion.dk: <http://garion.dk/>

---

"Jesper Brunholm" <nospam@brunholm-scharff.dk> skrev
>
> Kan du se mit indlæg fra 13:58 idag? (hvor jeg omtalte at ja, der er
> nødt til at margin på).

Næh, jeg kan nu se, at du sendte noget kl. 10:15, men jeg var gået ind på
gruppen ved titiden og havde ikke fået opdateret listen.

--
Med venlig hilsen
Erik Ginnerskov
http://www.hjemmesideskolen.dk - http://www.html-faq.dk
http://hjem.get2net.dk/egin

---

Erik Ginnerskov wrote:

> "Jesper Brunholm" <nospam@brunholm-scharff.dk> skrev
>
>>Kan du se mit indlæg fra 13:58 idag? (hvor jeg omtalte at ja, der er
>>nødt til at margin på).
>
> Næh, jeg kan nu se, at du sendte noget kl. 10:15, men jeg var gået ind på
> gruppen ved titiden og havde ikke fået opdateret listen.

Det var også det jeg mente , og alt ok, jeg ville bare høre om det
var bevidst fravalg

mvh

Jesper Brunholm

---

Jesper Brunholm skrev:

> Det løser ikke overlapningsproblemet i bunden, selvom der
> bliver sat margin på (jeg har sat det op som du skrev på
> http://www.garion.dk/webdesign/test/)

Det kan klares med position: fixed (til bundrammen) + bundmargen.

Jeg har tilrettet din eksempelside her:

<http://damu.dk/jc/usenet/fixed.shtml>

Den virker ikke med IE (eksperimenter evt. med et position-fixed-
hack til IE - det bør kunne virke).

Mozilla og Opera viser begge siden med fast bund uden overlab -
desværre er de ikke helt enige om hvor meget luft der skal være
mellem de faste elementer (top og bund) og indholdet. Man er
velkommen til at forbedre siden så den ser mere ensartet ud i
Opera, Mozilla og IE.
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

---

Jens Gyldenkærne Clausen wrote:

> Jesper Brunholm skrev:
>
>
>>Det løser ikke overlapningsproblemet i bunden, selvom der
>>bliver sat margin på (jeg har sat det op som du skrev på
>>http://www.garion.dk/webdesign/test/)
>
>
> Det kan klares med position: fixed (til bundrammen) + bundmargen.
>
> Jeg har tilrettet din eksempelside her:
>
> <http://damu.dk/jc/usenet/fixed.shtml>
>
> Den virker ikke med IE (eksperimenter evt. med et position-fixed-
> hack til IE - det bør kunne virke).

spændende - og lækkert - jeg takker!

> Mozilla og Opera viser begge siden med fast bund uden overlab -
> desværre er de ikke helt enige om hvor meget luft der skal være
> mellem de faste elementer (top og bund) og indholdet. Man er
> velkommen til at forbedre siden så den ser mere ensartet ud i
> Opera, Mozilla og IE.

Noget af det der mangler (også i min) er et ensartet forhold til
element-bredden uden vandret scroll, det er ikke lykkedes mig at finde
et konsistent forhold i mozillas og explorers relation til hinanden og
begrebet '100% width'. Er der nogen der har gode tips hører jeg gerne om
det...

mvh

Jesper Brunholm

---

Jesper Brunholm wrote:
> Noget af det der mangler (også i min) er et ensartet forhold til
> element-bredden uden vandret scroll, det er ikke lykkedes mig at finde
> et konsistent forhold i mozillas og explorers relation til hinanden og
> begrebet '100% width'. Er der nogen der har gode tips hører jeg gerne om
> det...

En start er tilsyneladende at indføre
html, body{
margin: 0;
}

for at man bagefter kan arbejde med width: 100%;

Selv om jeg gør det, og fjerner 'overflødige' borders, får jeg stadig
vandret scroll i mozilla (1.4) - tilsyneladende er det min 1 px border
som lægges oveni de width: 100%. Kan det løses fikst (width: 99% er ikke
en løsning aht. explorer (5.5) og opera) ?



mvh

Jesper Brunholm

---

Jesper Brunholm <nospam@brunholm-scharff.dk> wrote in
news:bjmifc$jgd$1@sunsite.dk:

> Selv om jeg gør det, og fjerner 'overflødige' borders, får jeg stadig
> vandret scroll i mozilla (1.4) - tilsyneladende er det min 1 px border
> som lægges oveni de width: 100%. Kan det løses fikst (width: 99% er
> ikke en løsning aht. explorer (5.5) og opera) ?

Mozilla opfører sig korrekt da bredden er lig width+borders+padding.

I ni ud af ti tilfælde er hvad du leder efter width:auto; og ikke width:100%;

Der er hygge læsning (et af de mere kryptiske afsnit i CSS) på:
<http://www.w3.org/TR/REC-CSS2/visudet.html#the-width-property>

Især hele afsnittet 10.3 er interessant i denne sammenhæng.

--
Personal: <http://www.solitude.dk>
File Thingie - PHP File Manager <http://www.solitude.dk/filethingie/>