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

sunero Nybegynder

17. marts 2004 - 09:09 Der er 10 kommentarer og
1 løsning

Fast placering af feader og footer vha. CSS

Hejsa,

Jeg sidder og roder lidt med layoutet på en hjemmeside, som jeg gerne vil styre vha. CSS. Mit problem er, at jeg gerne vil have en header og en footer til at stå fast på siden (i toppen og i bunden). Indholdet skal placeres imellem og hvis dette fylder mere end siden skal der kun scrolles i dette, således at header og footer altid er synlig. Kan dette lade sig gøre vha. CSS ? eller er jeg nød til at bruge frames eller en kombination ?

Synes godt om

mik789 Nybegynder

17. marts 2004 - 09:14 #1

du kan ikke gøre det med css alene, men med en kombination af css og javascript. Problemet er at css ikke kan vide hvor stort vindue folk har åbnet eller hvor meget indhold du har fyldt ind i midterfeltet. Men det kan javascript.

Synes godt om

sunero Nybegynder

17. marts 2004 - 09:15 #2

Hvilket Javascript skal man bruge. Har du et eksempel ?

Synes godt om

mik789 Nybegynder

17. marts 2004 - 09:17 #3

roenving her på Eksp. havde en løsning på et fuldstændig tilsvarende sp. for ikke så længe siden. Prøv at søg lidt, og ellers, mon ikke han kigger forbi her i løbet af dagen ;-)

Synes godt om

swuppe Nybegynder

17. marts 2004 - 11:12 #4

Følgende virker, som beskrevet, i Mozilla
<html>
<style>
html, body {margin:0; padding:25px 0; overflow:hidden; }
#top {background:#ccc; height:50px; left:0; position:absolute; top:0; width:100%;}
#main {background:#ddd; height:100%; overflow:auto; width:100%; }
#footer {background:#ccc; height:50px; left:0; position:absolute; bottom:0; width:100%;}
</style>
<body>
<div id="top">top</div>
<div id="main">main</div>
<div id="footer">footer</div>
</body>
</html>

I IE6 skal "html, body {margin:0; padding:25px 0; overflow:hidden; }"
udskiftes med "html, body {margin:0; padding:50px 0; overflow:hidden; }" for at give samme resultat. Måske du (eller en anden) kan fifle dig frem til en løsning på baggrund af dette, ellers kan jeg kigge på det igen i aften.

Synes godt om

mik789 Nybegynder

17. marts 2004 - 22:38 #5

swuppe> det er rigtigt, det kommer til at virke som det der ønskes. Men det bygger på at der ikke er angivet nogen doctype, og det kan godt give andre problemer. Man kan sige at ved at undlade doctype erklæringen overlader man alt til den enkelte browser, og det er lidt forskelligt hvordan de viser det. Til gengæld hvis der sættes doctype på siden, dur layoutet ikke efter hensigten.

Synes godt om

sunero Nybegynder

18. marts 2004 - 08:46 #6

Swuppe> din løsning virker ikke helt, da der er noget af teksten i "Main" man ikke kan se selv om man scroll'er helt ned.

Min css fil ser således ud:

body {margin:0px; background-color: #003163; background-image: url('bglogo.gif'); background-repeat: no-repeat; background-attachment: fixed; background-position: 50% 50%; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #FFFFFF;}

#title {background-image: url('TopBar.gif'); background-repeat: repeat-x; position:absolute; left:0px; top:0px; width:100%; height: 90px; z-index: 1; background-color:#00274C; background-position: left bottom;}

#content {padding-top: 100px; margin-left:160px; margin-right:160px; overflow:visible; z-index: 3;}

#footer {position:fixed; width: 100%; height: 30px; top: auto; right: 0; bottom: 0; left: 0; background-color:#00274C;}

#Logo {position:absolute; left:10px; top:14px; height:137px; width:204px; z-index: 2;}

#leftmenu {position:absolute; left:0px; top:150px; width:150px; background-color:none; z-index: 3;}

Jeg er lidt "grøn" mht. css, så det kan godt være at der er noget jeg ikke gør rigtigt, men jeg vil som sagt gerne have Title og Footer til at være faste i top og bund. Derudover skal Content være med eller uden scroll-bar afhængig af dennes længde.

Synes godt om

swuppe Nybegynder

18. marts 2004 - 14:13 #7

mik789-> det er korrekt at det er uden doctype og derfor ikke er anbefalelsesværdigt at benytte, men som jeg også skrev var det et oplæg til at arbejde videre udfra.

sunero-> der er et par ting, som er lidt ud over normalen når man vil lave den slags her. Det ideelle ville være at benytte sig af position:fixed, desværre er IE rigtig dårlig til at håndtere den slags. Derfor bliver man nødt til at lave lidt "quircks" for at gøre det brugbart. Følgende er hvad jeg er kommet frem til indtil nu, jeg har testet det i Mozilla Firefox og IE6.


<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Fixed example</title>
<style type="text/css" media="screen">
body { margin:0; padding:50px 0; }
div.header { background:#ccc; left:0; position:absolute; top:0; width:100%; height:50px; }
div.footer { background:#ccc; bottom:0; left:0; position:absolute; width:100%; height:50px; }
@media screen {
body>div.header { position:fixed; }
body>div.footer { position:fixed; }
}
</style>

</head>
<body>
<div class="header">
[...fixed bar...]
</div>
<div class="footer">
[...fixed bar...]
</div>
<div class="content">
[...content...]
</div>
</body>
</html>

Synes godt om

sunero Nybegynder

19. marts 2004 - 08:29 #8

Det ser jo rigtigt fint ud. Mange tak for hjælpen.

lige et lille sidespørgsmål. Hvad betyder følgende :

@media screen {
body>div.header { position:fixed; }
body>div.footer { position:fixed; }
}

og hvor kan jeg evt. læse mere om det på nettet.

Synes godt om

swuppe Nybegynder

19. marts 2004 - 11:28 #9

@media screen {....} betyder blot at vi benytter disse styles til skærmen, grunden til at det er med, er at IE/mac har en irriterende bug idet den mister evt. cursor styles når man bruger position:fixed, derfor bruger jeg @media da IE/mac ikke forstår dette og derfor blot ignorerer det. body>div.header... betyder "div børnene af body med klassen header", jeg skriver det sådan for at gemme det for IE/win der godt kan forstå @media men ikke "child selectoren" > i body>div.header {...}

Du kan læse om css hacks her: http://css-discuss.incutio.com/?page=CssHack
og om css positionering her: http://www.w3.org/TR/CSS2/visuren.html#positioning-scheme

Håber det hjælper lidt.

Synes godt om

keet Nybegynder

06. maj 2004 - 13:31 #10

Har lige prøvet koden fra swuppe, men når jeg forsøger at scrolle med min mus i IE virker scrollen ikke. Min min mozilla virker fint med scroll-knappen. Ved du hvorfor og hvordan jeg evt. kan løse dette problem?

Synes godt om

swuppe Nybegynder

07. maj 2004 - 10:51 #11

keet -> Det er jeg vist ikke stødt på før, det eneste jeg kan komme i tanke om er at du måske ikke har haft musemarkøren over din .content div? ellers ved jeg det ikke lige umiddelbart.

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
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
Link fra form input Af jnrmgs i HTML	9	19/09/202319:10	23/09/202313:11
includere i HTML Af slein55 i HTML	3	15/09/202313:47	16/09/202309:40

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