azkme
Legacy Member
Hey,
ik heb overlaatst mijn pagina verandert en hem gaan opbouwen volledig css-wise (ipv tables, enz). Nu heb ik hier een probleempke mee. Als den inhoud van mijne #inhoud's-div langer wordt dan 1 pagina, dus verder komt dan de hoogte van de footer, dan weigert hij te scrollen en plaatst hij de footer boven de tekst.
Hieronder een screenshots om dit te verduidelijken:
http://users.telenet.be/azkme/pics/probleemtum.jpg
(Kijk onderaan de pagina, de footer overschrijft mijn button)
Wanneer ik dan de position naar relative verander, dan gaat hij vlak onder de tekst van mijn #inhoud's-div komen, dus dan blijft hij niet steeds onderaan de pagina hangen (dit is de bedoeling, als er zelfs ni opvullende tekst is, dan moet de footer onderaan de pagina blijven!).
ASPX (HTML):
CSS:
Alvast bedankt!
ik heb overlaatst mijn pagina verandert en hem gaan opbouwen volledig css-wise (ipv tables, enz). Nu heb ik hier een probleempke mee. Als den inhoud van mijne #inhoud's-div langer wordt dan 1 pagina, dus verder komt dan de hoogte van de footer, dan weigert hij te scrollen en plaatst hij de footer boven de tekst.
Hieronder een screenshots om dit te verduidelijken:
http://users.telenet.be/azkme/pics/probleemtum.jpg
(Kijk onderaan de pagina, de footer overschrijft mijn button)
Wanneer ik dan de position naar relative verander, dan gaat hij vlak onder de tekst van mijn #inhoud's-div komen, dus dan blijft hij niet steeds onderaan de pagina hangen (dit is de bedoeling, als er zelfs ni opvullende tekst is, dan moet de footer onderaan de pagina blijven!).
ASPX (HTML):
Code:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="default.master.cs" Inherits="_default" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="Opmaak/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript" src="../Opmaak/menu.js"></script>
<title>Tumbador VZW</title>
</head>
<body>
<div id="container">
<div id="header" align="center"><asp:Image ID="imgHeader" runat="server" /></div>
<div id="menu">
<asp:contentplaceholder id="cph2" runat="server"></asp:contentplaceholder>
<asp:Label ID="lblWelkom" runat="server"></asp:Label>
<asp:Label ID="lblLogout" runat="server" ></asp:Label><br />
<asp:Label ID="lblMenu" runat="server"></asp:Label></div>
<div id="inhoud"><asp:contentplaceholder id="cph" runat="server"></asp:contentplaceholder></div>
<div id="footer"></div>
</div>
</body>
</html>CSS:
Code:
html, body
{
height: 100%;
margin: 0;
padding: 0;
font-family: Tahoma;
font-size: 12px;
}
#container {
background: #FFFFFF;
border: 0;
position: relative;
height: auto !important;
height: 100%;
min-height: 100%;
width: 100%;
margin: 0 auto;
}
#header
{
background-image: url('../images/header_background.jpg');
width: 100%;
height: 200px;
}
#menu
{
width: 200px;
position: absolute;
top: 200px;
left: 0px; /* deze is voor IE, FF kan er zonder, maar IE natuurlijk weer niet */
bottom: 0px;
text-align: right;
border-right: dotted;
border-width: 1px;
border-color: gray;
vertical-align: top;
padding: 10px 10px 10px 10px;
}
#inhoud
{
padding: 0 0 50px 0; /* bottom padding voor de footer */
margin: 0 0 0 220px;
padding: 10px 10px 10px 10px;
}
#footer
{
background-image: url('../images/bottom_background.jpg');
height: 50px;
width: 100%;
[COLOR="Red"][SIZE="5"][B]position: absolute;[/B][/SIZE][/COLOR]
bottom: 0;
}Alvast bedankt!