[html] Tabel uitlijnen aan onderkant (absoluut)

Door Kevin Zegikniet op 30-11-2012 22:52 gewijzigd op 30-11-2012 23:32

2.694 views

Hallo mensen,

Ik wil op mijn index.html een tabel uitlijnen op rechtsonder, dus dat deze (zonder gebruik van enters) in elke browser aan de onderkant staat.

Ik heb van alles geprobeerd, met tabel en div, valign en vertical-align, position: absolute en ga maar door.
Het werkt niet.

Wat werkt wel?
Script:

<?php
session_start();
?>

<html>
<head>
<title>Forever Alone Dating - Home</title>
<link rel="icon" type="image/ico" href="favicon.ico"> </link>
</head>
<body bgcolor="#00BFFF">
<center><a href="index.html"><img border="0" src="Forever_Alone_Dating.png" alt="Forever Alone Dating" width="428" height="263"></a></center> <br />

<div style="text-align: center;"><big style="font-weight;">
Welkom op onze hoofdpagina!<br />
U kunt hieronder inloggen of registreren:
</big> <br /> <br />

<table align="center">
<form action="inlog.php" method="post">
	<tr><td width="114">
	<div style="text-align: right;"><style="font-weight;">Gebruikersnaam:</td>
	<td width="200"><input type="text" size="30" name="username">
	</div></style></td></tr>
	
	<tr><td>
	<div style="text-align: right;"><style="font-weight;">Wachtwoord:</td><td> <input type="password" size="30" name="password">
	</div></style></td></tr>
	<tr><td width="114"></td> <td width="200"><input type="submit" value="Inloggen!">
</form></td></tr>
</table> <br />
Heb je nog geen account?
<form action="registratie.php" method="post">
<input type="hidden" name="controle" value="FALSE">
<input type="submit" value="Registreren!">
</form>

<!-- DIT MOET DUS RECHTSONDER STAAN -->
</div>
<div align="right">
<small><small><small> (C) naam van Partner & Kevin Zegikniet 2012 </small></small></small>
</div>
<!-- TOT HIER -->

</body>
</html>

https://www.dropbox.com/s/rbtw88ybj5ols19/tabel%20rechtts.png

patrick vollenbroek

01-12-2012 07:14 gewijzigd op 01-12-2012 07:15

Ik denk dat het zo goed is:


<?php
session_start();
?>

<html>
<head>
<title>Forever Alone Dating - Home</title>
<link rel="icon" type="image/ico" href="favicon.ico"> </link>
<style type="text/css">
{
  margin: 0;
}

html, body 
{
  height: 100%;
}

#contentwrapper {
   min-height: 100%;
   height: auto !important;
   height: 100%;
   margin: 0 auto -25px;
}

#footer, .push 
{
  height: 20px;
  clear: both;
  text-align: right;
}
</style>
</head>
<body bgcolor="#00BFFF">
<div id="contentwrapper">
<center><a href="index.html"><img border="0" src="Forever_Alone_Dating.png" alt="Forever Alone Dating" width="428" height="263"></a></center> <br />

<div style="text-align: center;"><big style="font-weight;">
Welkom op onze hoofdpagina!<br />
U kunt hieronder inloggen of registreren:
</big> <br /> <br />

<table align="center">
<form action="inlog.php" method="post">
    <tr><td width="114">
    <div style="text-align: right;"><style="font-weight;">Gebruikersnaam:</td>
    <td width="200"><input type="text" size="30" name="username">
    </div></style></td></tr>
    
    <tr><td>
    <div style="text-align: right;"><style="font-weight;">Wachtwoord:</td><td> <input type="password" size="30" name="password">
    </div></style></td></tr>
    <tr><td width="114"></td> <td width="200"><input type="submit" value="Inloggen!">
</form></td></tr>
</table> <br />
Heb je nog geen account?
<form action="registratie.php" method="post">
<input type="hidden" name="controle" value="FALSE">
<input type="submit" value="Registreren!">
</form>
</div>
<div class="push"></div></div>
<div id="footer">
<!-- DIT MOET DUS RECHTSONDER STAAN -->
<small><small><small> (C) naam van Partner & Kevin Zegikniet 2012 </small></small></small>
</div>
<!-- TOT HIER -->

</body>
</html>

Eddy E

01-12-2012 09:44

Allereerst zou je hiervoor geen tabel moeten gebruiken, maar gewoon en ander element als <span> of <div>.
Of <footer> als het daar om gaat.
Gebruik je CSS zoals het hoort (3x <small> achter elkaar???).

Met position: fixed; kan je die altijd onderaan zetten (en daar houden).
Dat geeft wat jij wilt, denk ik: http://jsfiddle.net/tyKb2/

Let op dat je ene hele hoop onnodige HTML gebruikt.
Gebruik daarvoor CSS.

Ik heb dezelfde code als jou gebruikt, maar dan korter (en even het formulier eruit gehaald).

Kevin Zegikniet

01-12-2012 15:17 gewijzigd op 01-12-2012 15:17

Hallo mensen,

Ik heb het via answers.yahoo ook ff gevraagd, daar kwam de tip binnen om het met CSS te doen. Dat werkt nu.

Ivo Breeden

01-12-2012 18:54

Kevin, dat is ook niet aardig om yahoo te vermelden als oplossing.
Eddy had je om 09:44 hetzelfde verteld. Hem mag je ook wel bedanken.

Reageren

Inloggen om te reageren