/ 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
Footer på en side med fast positionering
Fra : Morten


Dato : 16-05-07 13:01

Jeg er løbet ind i et lille problem.

Jeg har lavet en halv kompleks side der er baseret på et design
hvor forskellige bokse er positioneret med "position:absolute"

Nu har jeg så fået brug at at sætte en footer ind på samtlige
sider.

Derfor tænkte jeg at jeg ville sætte hele den nuværende kode ind
i et div-tag. Nedenunder dette ville jeg så lave endnu et div-tag
til footeren

Altså en struktur som den her:

<div>Alt det nuværende indhold</div>
<div>ny footer</div>

Problemet er at når jeg wrapper en div om alt det nuværende
indhold, så bliver den ikke fyldt ud af indholdet. Den ligger
bare øverst og tager ikke højde efter det indhold den er fyldt
af.

Det betyder at footeren faktisk ligger sig øverst oven i alt det
andet.

Er der nogen der har en ide til hvordan jeg får den første div
til at udvide sig i højde alt efter indholdet?

Eller er der en anden måde at gøre det på?

Håber I kan hjælpe


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

 
 
Peter Vesth (16-05-2007)
Kommentar
Fra : Peter Vesth


Dato : 16-05-07 19:36

Morten wrote in dk.edb.internet.webdesign.html:
> Jeg er løbet ind i et lille problem.
>
> Jeg har lavet en halv kompleks side der er baseret på et design
> hvor forskellige bokse er positioneret med "position:absolute"
>
> Nu har jeg så fået brug at at sætte en footer ind på samtlige
> sider.
>
Hej

Jeg ved ikke om du bruger css til dine positioneringer, men måske
kan du få en ide ved at kikke på

http://www.html.dk/tutorials/css/lektion14.asp

Mvh

Peter
>
>
> --
> 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


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

Erik Ginnerskov (16-05-2007)
Kommentar
Fra : Erik Ginnerskov


Dato : 16-05-07 21:52

Morten wrote:

> Problemet er at når jeg wrapper en div om alt det nuværende
> indhold, så bliver den ikke fyldt ud af indholdet. Den ligger
> bare øverst og tager ikke højde efter det indhold den er fyldt
> af.

Når du positionerer noget absolut, løfter du det ud af sidens flow - det
fylder ikke noget på siden. Derfor skubber det ikke din footer ned. Overvej,
om det er nødvendigt med de absolutte positioneringer. Måske er float
løsningen på dit problem:

http://hjemmesideskolen.dk/html/float.asp?id=flmenu

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk/ - http://ginnerskov.dk/
http://html-faq.dk



Birger Sørensen (17-05-2007)
Kommentar
Fra : Birger Sørensen


Dato : 17-05-07 11:16

Morten wrote in dk.edb.internet.webdesign.html:
> Jeg er løbet ind i et lille problem.
>
> Jeg har lavet en halv kompleks side der er baseret på et design
> hvor forskellige bokse er positioneret med "position:absolute"
>
> Nu har jeg så fået brug at at sætte en footer ind på samtlige
> sider.
>
> Derfor tænkte jeg at jeg ville sætte hele den nuværende kode ind
> i et div-tag. Nedenunder dette ville jeg så lave endnu et div-tag
> til footeren
>
> Altså en struktur som den her:
>
> <div>Alt det nuværende indhold</div>
> <div>ny footer</div>
>
> Problemet er at når jeg wrapper en div om alt det nuværende
> indhold, så bliver den ikke fyldt ud af indholdet. Den ligger
> bare øverst og tager ikke højde efter det indhold den er fyldt
> af.
>
> Det betyder at footeren faktisk ligger sig øverst oven i alt det
> andet.
>
> Er der nogen der har en ide til hvordan jeg får den første div
> til at udvide sig i højde alt efter indholdet?
>
> Eller er der en anden måde at gøre det på?
>
> Håber I kan hjælpe
>
>
> --
> 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

absolut positionerede elementer, fylder kun noget inde i absolut
positionerede elementer.
Så umiddelbart skal din "wrapper" også positioneres absolut.

Du kan også positionere din footer absolut i stedet - så behøver du
ikke wrapperen.
Det kan du gøre ved i CSS at sætte bottom : 100% - så er den altid
for neden i browseren.

Birger

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

Erik Ginnerskov (17-05-2007)
Kommentar
Fra : Erik Ginnerskov


Dato : 17-05-07 16:03

Birger Sørensen wrote:

> absolut positionerede elementer, fylder kun noget inde i absolut
> positionerede elementer.

Nej, heller ikke der fylder absolut positionerede elementer noget:

http://hjemmesideskolen.dk/html/testsider/positest.asp

Efter din påstand skulle den nederste hvide kasse med blå kant trække
bundkanten på den øverste hvide kasse med blå kant. Som du kan se, sker det
ikke.

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk/ - http://ginnerskov.dk/
http://html-faq.dk



Birger Sørensen (17-05-2007)
Kommentar
Fra : Birger Sørensen


Dato : 17-05-07 20:40

Erik Ginnerskov wrote in dk.edb.internet.webdesign.html:
> Birger Sørensen wrote:
>
> > absolut positionerede elementer, fylder kun noget inde i absolut
> > positionerede elementer.
>
> Nej, heller ikke der fylder absolut positionerede elementer noget:
>
> http://hjemmesideskolen.dk/html/testsider/positest.asp
>
> Efter din påstand skulle den nederste hvide kasse med blå kant trække
> bundkanten på den øverste hvide kasse med blå kant. Som du kan se, sker det
> ikke.
>
> --
> Med venlig hilsen
> Erik Ginnerskov
> http://hjemmesideskolen.dk/ - http://ginnerskov.dk/
> http://html-faq.dk
>
>

Det har du da ret i...

Jeg tænkte på selve postioneringen. Hvis et absolut positioneret element er i
et andet element, og skal placeres i forhold til det, så skal dette andet også
være absout positioneret.

Birger

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

Erik Ginnerskov (17-05-2007)
Kommentar
Fra : Erik Ginnerskov


Dato : 17-05-07 23:32

Birger Sørensen wrote:

> Jeg tænkte på selve postioneringen. Hvis et absolut positioneret
> element er i et andet element, og skal placeres i forhold til det, så
> skal dette andet også være absout positioneret.

Ikke nødvendigvis. Det er faktisk bedre at definere relativ position, fordi
det omgivende element så ikke løftes ud af den samlede sides flow.

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk/ - http://ginnerskov.dk/
http://html-faq.dk



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


Dato : 18-05-07 22:21

Erik Ginnerskov wrote in dk.edb.internet.webdesign.html:
> Birger Sørensen wrote:
>
> > Jeg tænkte på selve postioneringen. Hvis et absolut positioneret
> > element er i et andet element, og skal placeres i forhold til det, så
> > skal dette andet også være absout positioneret.
>
> Ikke nødvendigvis. Det er faktisk bedre at definere relativ position, fordi
> det omgivende element så ikke løftes ud af den samlede sides flow.
>
> --
> Med venlig hilsen
> Erik Ginnerskov
> http://hjemmesideskolen.dk/ - http://ginnerskov.dk/
> http://html-faq.dk
>
>

Det kommer vist an på hvordan man arbejder og ser tingene for sig.
Hvis jeg vil placere et element i forhold til et andet, skal de begge være
absolut positionerede. Ellers ved jeg ikke hvor det jeg skal plavere noget i
forhold til er - ud over et eller andet sted i dokumentets flow.


Birger


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

Erik Ginnerskov (19-05-2007)
Kommentar
Fra : Erik Ginnerskov


Dato : 19-05-07 22:36

Birger Sørensen wrote:

> Hvis jeg vil placere et element i forhold til et andet, skal de begge
> være absolut positionerede. Ellers ved jeg ikke hvor det jeg skal
> plavere noget i forhold til er - ud over et eller andet sted i
> dokumentets flow.

Kig en gang på http://hjemmesideskolen.dk/html/position.asp?id=poskreativ -
trekvart nede på siden ser du et lille billede i en lidt større ramme.
Rammen er tildelst "position:relative;top:0;left:0;" og billedet
"position:absolute;top:10px;left:100px;"

Den relative positionering af rammen sætter blot et referencepunkt, som jeg
så kan positionere billedet i forhold til.

Definitionerne top og left kan undværes, når den relative position kun skal
bruges som referencepunkt.

Skulle jeg til at tildele rammen absolut position, ville jeg ryge ud i, at
det ikke er samme højde fra sidetoppen i en 800px bred browser og en 1024px
bred ditto - indholdsmængden over det sted fylder forskelligt i højden
afhængig af linjelængden.

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk/ - http://ginnerskov.dk/
http://html-faq.dk



Morten (18-05-2007)
Kommentar
Fra : Morten


Dato : 18-05-07 13:15

Tak for jeres svar.

Måske skal jeg uddybe problemet lidt.

Årsagen til at jeg har valgt absolut positionering er at det giver
fuldstændig kontrol over designet. Samtidig kan man bytte rundt på
rækkefølgen af indholdet i html koden uden at designet bliver
påvirket.

Det er rigtig smart, når det er vigtigt at siden er optimeret til
søgemaskinerne.

Hvis man eksempelvis laver sit design med float, så vil rækkefølgen
i html koden typisk se sådan her ud

1. header med logo og måske en reklame
2. højre kolonne floatet til højre
3. Menuen floatet til venstre
4. Indholdet
5. Footeren

Det indhold og de søgeord som søgemaskinerne skal indeksere, dukker
altså først op som det næstsidste i koden. Det betyder at indholdet
ikke bliver vægtet lige så højt, som hvis det stod først i koden.

Med absolut positionering kan man flytte det væsentlige, nemlig
indholdet helt frem i koden, så det allerførste søgemaskinerne møder
er den overskrift, som er sigende for hele siden. Det giver en
markant bedre indeksering og placering i søgemaskinerne.

Udfordringen er altså at lave et design hvor indholdet står først og
de mindre relevante elementer, som menu header og reklamer står
længere nede i koden.

Vi taler selvfølgelig CSS og html.

Nogen bud?



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

Jørgen Farum Jensen (24-05-2007)
Kommentar
Fra : Jørgen Farum Jensen


Dato : 24-05-07 16:22

Morten skrev:

> Udfordringen er altså at lave et design hvor indholdet står først og
> de mindre relevante elementer, som menu header og reklamer står
> længere nede i koden.
>
> Vi taler selvfølgelig CSS og html.
>
> Nogen bud?
>

http://webdesign101.dk/csslayout/ex/float_7.html
http://webdesign101.dk/csslayout/ex/float_8.html
som er eksempler til artiklen
http://webdesign101.dk/csslayout/float_layout.php
viser hvordan du kan lave en vilkårlig rækkefølge
på 2 float'ede kolonner.

--

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

Søg
Reklame
Statistik
Spørgsmål : 177558
Tips : 31968
Nyheder : 719565
Indlæg : 6408926
Brugere : 218888

Månedens bedste
Årets bedste
Sidste års bedste