Footer mee laten scrollen

terroraapje · 14 sep 2010

ey ik heb een website in ASP met een css er om heen.
ik gebruik deze site om database gegevens op te roepen
hier door is mijn lengte van mij pagina altijd anders
daarom wil ik mijn footer me laten scrollen.
dit is mijn css

Code:

body
{
background:#ffffff;
color:black;
font:normal small "Trebuchet MS", Arial, Helvetica, sans-serif;
} 

#header
{
height: 13%;
background-color:#000000;
}

#menu
{
height:5%;
background-color:#ffffff;

#containerbody
{
height: 79%;
background-color:#0000FF;
}

.push {
     height: 2%;

 }

#colOneDB
{
float:left;
width:100%;
height:30%;
background-color:#FFFF00;
}

#colTwoDB
{
float:center;
width:100%;
background-color:#01DF01;
height:auto;
}

#footerDB
{
text-align:center;
font-size: smaller;
color:#D8D8D8;
height: 2%;
background-color:#DF0101;
position: absolute;
bottom:0;
margin-left: auto;
margin-right: auto;
}

csshunter · 15 sep 2010

Hoi terroraapje,
Helpt het als je de:

Code:

#footerDB
{
position: absolute;
bottom:0;
}

er uit verwijdert?

Met vriendelijke groet,
CSShiunter

terroraapje · 15 sep 2010

nee t de tekst schiet wanneer de pagina refreshed naar beneden maar de achtergrond van de footer is helemaal verdwenen.
kan het misschien aan de browser liggen? ik gebruik zelf als standaard Chrome.

csshunter · 15 sep 2010

Hoi terroraapje,
Ik snap de structuur van de pagina niet zo:

Als #colOneDB een kolom moet zijn, waarom heeft deze dan een { float:left;} en een {width: 100%;} ? Dan is het meer een zweverde rij. Is dat de bedoeling?
De #colTwoDB heb je een {float: center;} meegegeven. Nu bestaat er wel een FloatCenter, maar niet in css (dat kent alleen maar een linker en een rechter float)
Zonder opgegeven {height: 100%;} voor de html en de body zie ik de hoogte-percentages niet lukken.
Ik zie geen {overflow: auto;} bij #colOneDB en #colTwoDB, terwijl deze wel een hoogte krijgen. Wat moet er gebeuren als er veel content in zo'n #col komt, en de resolutie van het beeldscherm niet groot genoeg is om alles er in de hoogte op te krijgen?

Ik heb even geprobeerd een testpagina met je css te maken, maar ik loop er tegen op dat ik niet de html-code ken waarin alles gerangschikt is.

Hoe ziet de html er precies uit?
Of, beter, heb je een testpagina met het verschijnsel?

Met vriendelijke groet,
CSShunter

terroraapje · 15 sep 2010

het is asp maar ik zal het tog sturen

het doel van de columen zijn dat ze boven elkaar zitten

Code:

<%@LANGUAGE=VBSCRIPT%>
<html>
<head>
<title>
Prins Database Dräger Medical Netherlands
</title>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
<LINK href="style.css" rel="stylesheet" type="text/css">
</head>


<!--connectie en objecten-->
<%session.lcid=1043%>
<%
Dim strConnection, conn, rs, strSQL

strConnection = "Driver=SQL Server;Server=mtnl12ictdb;" & _
"Database=prins;Uid=ict_odbc_user;Pwd=ict_odbc_user;"

Set conn = Server.CreateObject("ADODB.Connection")
conn.Open strConnection

Set rs = Server.CreateObject("ADODB.recordset")
strSQL = "SELECT DISTINCT Orderbedrag FROM dbo.Project_info ORDER BY Orderbedrag"
rs.open strSQL, conn, 3,3

bedrag=request.form("bedrag")
bedrag1=request.form("bedrag1")
datum1=request.form("datum1")
prnmmr=request.form("prnmmr")
vertw1=request.form("vertw")
bedrijf=request.form("bedrijf")
zoeken=request.form("zoeken")
%>
<body>
<div id="header">
<img src="images/logo.gif"></img>
<center><h2>Database Prins</h2></center>
</div>

<div id="menu">
<a href="index.html">Home</a>
<a href="asp.asp">Asp</a>
<a href="record.asp">Nieuw Record</a>
</div>



<div id="containerbody">

<div id="colOneDB">
<br>
<!-- Form -->
<form method="post">
Laat bedragen zien tussen <input type="text" name="bedrag"> en <input type="text" name="bedrag1">
<input type="submit" value="Laat bedragen zien.">
</form>

<form method="post">
Kies een jaartal
<select name="datum1">
<option value="*" selected="selected">-</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
</select>
<input type="submit" value="Laat jaartallen zien.">
</form>

<form method="post">
Laat project nummer <input type="text" name="prnmmr"> zien.
<input type="submit" value="Laat projectnummers zien.">
</form>

<form method="post"> 
<input type="submit" value="Zet vertegenwoordig op volgorde" name="vertw">
</form>

<form method="post">
Klant<input type="text"name="bedrijf">
<input type="submit" value="Laat klant zien">
</form>

<form method="post">
Zoeken<input type="text" name="zoeken">
<input type="submit" value="GO!">
</form>
</div>

<div id="footer">
Copyright &copy; 2010-2011 Made by Kevin Kamer Draeger Medical Netherlands
</div>

<div id="colTwoDB">

<!--verwerking van bedragen-->

<%
if bedrag<>"" then
   sql="SELECT projnr,Orderbedrag,vertw,datum,PLTXT FROM dbo.Project_info WHERE Orderbedrag BETWEEN'" & bedrag & "' AND'" & bedrag1 & "' ORDER BY Orderbedrag "
   set rs=Server.CreateObject("ADODB.Recordset")
   rs.Open sql,conn
%>
   <table width="100%" cellspacing="0" cellpadding="2" border="1">
   <tr>
     <th>Project nummer</th>
     <th>Orderbedrag</th>
	 <th>Vertegenwoordiger</th>
     <th>Datum</th>
	 <th>Klant</th>
     
   </tr>
<%
do until rs.EOF
   response.write("<tr>")
   response.write("<td>" & rs.fields("projnr") & "</td>")
   response.write("<td>&euro;" & rs.fields("orderbedrag") & "</td>")
   response.write("<td>" & rs.fields("vertw") & "</td>")
   response.write("<td>" & rs.fields("datum") & "</td>")
   response.write("<td>" & rs.fields("PLTXT") & "</td>")
   response.write("</tr>")
   rs.MoveNext
loop
%>
</table>
<%  end if %>

<!--verwerking jaartallen-->
<%
if datum1<>"" then
   sql="SELECT projnr,Orderbedrag,vertw,datum,PLTXT FROM dbo.Project_info WHERE datum LIKE '%" & datum1 & "%' ORDER BY datum "
   set rs=Server.CreateObject("ADODB.Recordset")
   rs.Open sql,conn
%>
   <table width="100%" cellspacing="0" cellpadding="2" border="1">
   <tr>
     <th>Project nummer</th>
     <th>Orderbedrag</th>
	 <th>Vertegenwoordiger</th>
     <th>Datum</th>
	 <th>Klant</th>
     
   </tr>
<%
do until rs.EOF
   response.write("<tr>")
   response.write("<td>" & rs.fields("projnr") & "</td>")
   response.write("<td>&euro;" & rs.fields("orderbedrag") & "</td>")
   response.write("<td>" & rs.fields("vertw") & "</td>")
   response.write("<td>" & rs.fields("datum") & "</td>")
   response.write("<td>" & rs.fields("PLTXT") & "</td>")
   response.write("</tr>")
   rs.MoveNext
loop
%>
</table>
<%  end if %>

<!-- verwerking project nummers-->
<%
if prnmmr<>"" then
   sql="SELECT projnr,Orderbedrag,vertw,datum,PLTXT FROM dbo.Project_info WHERE projnr LIKE '%" & prnmmr & "%' ORDER BY projnr "
   set rs=Server.CreateObject("ADODB.Recordset")
   rs.Open sql,conn
%>
   <table width="100%" cellspacing="0" cellpadding="2" border="1">
   <tr>
     <th>Project nummer</th>
     <th>Orderbedrag</th>
	 <th>Vertegenwoordiger</th>
     <th>Datum</th>
	 <th>Klant</th>
     
   </tr>
<%
do until rs.EOF
   response.write("<tr>")
   response.write("<td>" & rs.fields("projnr") & "</td>")
   response.write("<td>&euro;" & rs.fields("orderbedrag") & "</td>")
   response.write("<td>" & rs.fields("vertw") & "</td>")
   response.write("<td>" & rs.fields("datum") & "</td>")
   response.write("<td>" & rs.fields("PLTXT") & "</td>")
   response.write("</tr>")
   rs.MoveNext
loop
%>
</table>
<%  end if %>

<!--verwerking vertegenwoordiger-->
<%
if vertw1<>"" then
   sql="SELECT projnr,Orderbedrag,vertw,datum,PLTXT FROM dbo.Project_info ORDER BY vertw DESC"
   set rs=Server.CreateObject("ADODB.Recordset")
   rs.Open sql,conn
%>
   <table width="100%" cellspacing="0" cellpadding="2" border="1">
   <tr>
     <th>Project nummer</th>
     <th>Orderbedrag</th>
	 <th>Vertegenwoordiger</th>
     <th>Datum</th>
	 <th>Klant</th>
     
   </tr>
<%
do until rs.EOF
   response.write("<tr>")
   response.write("<td>" & rs.fields("projnr") & "</td>")
   response.write("<td>&euro;" & rs.fields("orderbedrag") & "</td>")
   response.write("<td>" & rs.fields("vertw") & "</td>")
   response.write("<td>" & rs.fields("datum") & "</td>")
   response.write("<td>" & rs.fields("PLTXT") & "</td>")
   response.write("</tr>")
   rs.MoveNext
loop
%>
</table>
<% end if%> 

<!-- verwerking klanten-->
<%
if bedrijf<>"" then
   sql="SELECT projnr,Orderbedrag,vertw,datum,PLTXT FROM dbo.Project_info WHERE PLTXT LIKE '%" & bedrijf & "%' ORDER BY PLTXT "
   set rs=Server.CreateObject("ADODB.Recordset")
   rs.Open sql,conn
%>
   <table width="100%" cellspacing="0" cellpadding="2" border="1">
   <tr>
     <th>Project nummer</th>
     <th>Orderbedrag</th>
	 <th>Vertegenwoordiger</th>
     <th>Datum</th>
	 <th>Klant</th>
     
   </tr>
<%
do until rs.EOF
   response.write("<tr>")
   response.write("<td>" & rs.fields("projnr") & "</td>")
   response.write("<td>&euro;" & rs.fields("orderbedrag") & "</td>")
   response.write("<td>" & rs.fields("vertw") & "</td>")
   response.write("<td>" & rs.fields("datum") & "</td>")
   response.write("<td>" & rs.fields("PLTXT") & "</td>")
   response.write("</tr>")
   rs.MoveNext
loop
%>
</table>
<%  end if %>

<!-- verwerking zoeken -->
<%
if zoeken<>"" then
   sql="SELECT projnr,Orderbedrag,vertw,datum,PLTXT FROM dbo.Project_info WHERE projnr LIKE '%" & zoeken & "%' OR Orderbedrag LIKE '%" & zoeken & "%' OR vertw LIKE '%" & zoeken & "%' OR datum LIKE '%" & zoeken & "%' OR PLTXT LIKE '%" & zoeken & "%'"
   set rs=Server.CreateObject("ADODB.Recordset")
   rs.Open sql,conn
%>
   <table width="100%" cellspacing="0" cellpadding="2" border="1">
   <tr>
     <th>Project nummer</th>
     <th>Orderbedrag</th>
	 <th>Vertegenwoordiger</th>
     <th>Datum</th>
	 <th>Klant</th>
     
   </tr>
<%
do until rs.EOF
   response.write("<tr>")
   response.write("<td>" & rs.fields("projnr") & "</td>")
   response.write("<td>&euro;" & rs.fields("orderbedrag") & "</td>")
   response.write("<td>" & rs.fields("vertw") & "</td>")
   response.write("<td>" & rs.fields("datum") & "</td>")
   response.write("<td>" & rs.fields("PLTXT") & "</td>")
   response.write("</tr>")
   rs.MoveNext
loop
%>
</table>
<%  end if %>
</div>

</div>

</body>
</html>

csshunter · 15 sep 2010

het doel van de columnen zijn dat ze boven elkaar zitten

Juist: rijen dus.

Maar dan kan je met een gerust geweten die {float:..;} 's er uit halen, dan komen ze automatisch onder elkaar.
En ook de opgegeven (%) hoogtes kunnen er gewoon uit, dan zijn er geen problemen te verwachten als iemand de lettergrootte in z'n browser groter zet e.d.; de hoogte van de header, als dat een afbeelding wordt, kan gewoon in px.

Nu de footer. Na de columns die rows zijn, weet ik niet zo zeker of het echt een footer moet zijn.

Zoals ie er nu in staat, is het geen footer, maar zit ie tussen de rijen #colOneDB en #colTwoDB.
Dat komt omdat de footer heet <div id="footer">, maar in de css gerefereerd wordt aan #footerDB (met DB erachteraan). Dan is de footer in de html ook niet gehoorzaam!
En als je de footer gefixeerd wilt hebben onderaan het scherm, moet deze niet een {position: absolute;} krijgen (dan blijft ie altijd absoluut onderaan staan ten opzichte van punt (0,0) > dwars door het beeld als je gaat scrollen), maar ... {position: fixed;}.
Dan kan je scrollen wat je wilt, maar dan blijft de footer altijd tegen de Start-balk aan kleven.

Met vriendelijke groet,
CSShunter

csshunter · 15 sep 2010

O ja, als je de push en de footer niet een hoogte geeft van 2%, maar een hoogte van 1.5em, dan kan fontscaling daar ook geen kwaad. Dan kan de footer-tekst er nooit uit vallen, maar groeit/krimpt de footer lekker mee met z'n inhoud.

terroraapje · 15 sep 2010

oke
want betreft die float die heb ik er al uit.
maar die hoogtes laat ik er in want de #colTwo past zich gewoon aan aan de hoeveelheid tekst.

ik heb mijn footer zn naam verandert naar footer omdat ik er 2 gebruik
daarom zijn me #colOne en #colTwo met DB erachter omdat ik colOne en colTwo ook nog ergens anders gebruik maar als colums.

en omdat mijn footer niet goed werkt heb ik hem dus maar gewoon footer genoemd.

Footer mee laten scrollen

terroraapje

Gebruiker

csshunter

Meubilair

terroraapje

Gebruiker

csshunter

Meubilair

terroraapje

Gebruiker

csshunter

Meubilair

csshunter

Meubilair

terroraapje

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy