/ 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
En div med fast højde og en som fylder res~
Fra : Casper


Dato : 12-05-04 13:12

Jeg har brug for et design som består af to div bokse. Den
øverste (box1) har en fast højde, og den nedeste (box2) fylder
resten.
Hvis jeg sætter height på box2 til 100% bliver den for høj.
Hvordan løser jeg det problem???

Her er lidt kode som skulle kunne give en ide om hvad det er jeg
vil lave.

<html>
<head>
<title></title>
<style type="text/css">
body
{
margin: 0;
}

#Box1
{
position: relative;
    width: 100%;
    height: 25px;
    background-color: #EAE8E4;
    border: solid 1px #00FF55;
    z-index: 10;
}

#Box2
{
position: relative;
    width: 100%;
    height: 100%;
    border: solid 1px #FF0006;
    background-color: #8B95AF;
    overflow: scroll;
}

</style>

</head>
<body>
<div id="Box1">box1</div>
<div id="Box2">box2</div>
</body>
</html>


/Casper


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

 
 
Martin Hintzmann And~ (12-05-2004)
Kommentar
Fra : Martin Hintzmann And~


Dato : 12-05-04 13:50

Casper wrote:

> Jeg har brug for et design som består af to div bokse. Den
> øverste (box1) har en fast højde, og den nedeste (box2) fylder
> resten.
> Hvis jeg sætter height på box2 til 100% bliver den for høj.
> Hvordan løser jeg det problem???
>

Brug CSS 2 position:fixed
http://www.w3.org/TR/REC-CSS2/visuren.html#fixed-positioning

Hintzmann c",)

Casper Skovgaard (12-05-2004)
Kommentar
Fra : Casper Skovgaard


Dato : 12-05-04 14:25

Martin Hintzmann Andersen wrote in
dk.edb.internet.webdesign.html:

>
> Brug CSS 2 position:fixed
> http://www.w3.org/TR/REC-CSS2/visuren.html#fixed-positioning
>

Det ser ikke ud til at virke i ie6....

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

Martin Hintzmann And~ (12-05-2004)
Kommentar
Fra : Martin Hintzmann And~


Dato : 12-05-04 14:40

Casper Skovgaard wrote:
>
>
> Det ser ikke ud til at virke i ie6....
>

Næ, det har du ret i. For IE6 er en gammel dinosauer, hvor der ikke er
sket noget ny udvikling siden 2001.
Men position:fixed understøttes fint af nutidens browser såsom
Mozilla/Netscape6+, Opera, Safari og konqueror.

IE6 er dog så fyldt med fejl at man kan udnytte en anden fejl i IE6 til
at imitere position:fixed
http://www.stunicholls.myby.co.uk/layouts/fixed.html

Hintzmann c",)

Casper Skovgaard (12-05-2004)
Kommentar
Fra : Casper Skovgaard


Dato : 12-05-04 15:15

Martin Hintzmann Andersen wrote in dk.edb.internet.webdesign.html:
> IE6 er dog så fyldt med fejl at man kan udnytte en anden fejl i IE6 til
> at imitere position:fixed
> http://www.stunicholls.myby.co.uk/layouts/fixed.html
>

Ikke den mest elegante løsning jeg har set:( så hvis der er andre forslag
er de meget velkommene.

Men det virker og det er jo det vigtigste :) Så tusind tak for hjælpen.



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

Erik Ginnerskov (12-05-2004)
Kommentar
Fra : Erik Ginnerskov


Dato : 12-05-04 22:09

Casper Skovgaard wrote:
>> http://www.stunicholls.myby.co.uk/layouts/fixed.html
>>
>
> Ikke den mest elegante løsning jeg har set:( så hvis der er andre
> forslag er de meget velkommene.

Tildel html og body margin:0;padding:0

Indsæt box1 med absolut position øverst på siden. Indsæt så box2 med en
padding-top på 40 px og en højde på 100 %.

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



Casper Skovgaard (13-05-2004)
Kommentar
Fra : Casper Skovgaard


Dato : 13-05-04 07:52

Erik Ginnerskov wrote in dk.edb.internet.webdesign.html:
> Tildel html og body margin:0;padding:0
>
> Indsæt box1 med absolut position øverst på siden. Indsæt så box2 med en
> padding-top på 40 px og en højde på 100 %.
>

Med en lille tilretning vil denne løsning faktisk virke. Der indsættes en
box3 i box2 som er 100%x100%. Derved vises scrollbar'en rigtigt, og
skjules ikke under box1. Se løsningen nedenfor. Desværre virker det kun i
ie, men da det er et design til en intern applikation er det ok, selvom
det piner mig at lave et design som kun virker i ie :(

<html>
<head>
<title></title>
<style type="text/css">
body
{
margin: 0;
}

#Box1
{
position: absolute;
width: 100%;
height: 25px;
background-color: #EAE8E4;
border: solid 1px #00FF55;
z-index: 10;
}

#Box2
{
position: relative;
width: 100%;
height: 100%;
padding-top: 25px;
border: solid 1px #FF0006;
background-color: #8B95AF;
}

#Box3
{
position: relative;
width: 100%;
height: 100%;
border: solid 1px black;
overflow-y: scroll;
}

</style>

</head>
<body>
<div id="Box1">box1</div>
<div id="Box2">
<div id="Box3">
box3<br>
</div>
</div>
</body>
</html>


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

Erik Ginnerskov (13-05-2004)
Kommentar
Fra : Erik Ginnerskov


Dato : 13-05-04 22:43

Casper Skovgaard wrote:

> <html>
> <head>
> <title></title>
> <style type="text/css">
> body
> {
> margin: 0;
> }
>
> #Box1
> {
> position: absolute;
> width: 100%;
> height: 25px;
> background-color: #EAE8E4;
> border: solid 1px #00FF55;
> z-index: 10;
> }
>
> #Box2
> {
> position: relative;
> width: 100%;
> height: 100%;
> padding-top: 25px;
> border: solid 1px #FF0006;
> background-color: #8B95AF;
> }
>
> #Box3
> {
> position: relative;
> width: 100%;
> height: 100%;
> border: solid 1px black;
> overflow-y: scroll;
> }
>
> </style>
>
> </head>
> <body>
> <div id="Box1">box1</div>
> <div id="Box2">
> <div id="Box3">
> box3<br>
> </div>
> </div>

Jeg kan ikke se, hvorfor du absolut vil indsætte z-index på #box1, den har
du ikke brug for.
Jeg kan heller ikke se hvorfor du sætter en position:relative på #box2, det
er også overflødigt
Endelig kan jeg ikke se meningen med at indsætte box3.

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



Søg
Reklame
Statistik
Spørgsmål : 177503
Tips : 31968
Nyheder : 719565
Indlæg : 6408541
Brugere : 218887

Månedens bedste
Årets bedste
Sidste års bedste