CSS Centeren van een image

Status
Niet open voor verdere reacties.
H

Harm133

Gebruiker
Lid geworden
24 jan 2009
Berichten
21
Hallo helpmij,

Ik ben bezig met een website te programmeren voor school maar ik krijg het maar niet voor elkaar om een plaatje dat ik heb goed in het midden te krijgen :(.

Hier is de code.

PHP: 
<html>
<head>

<style type="text/css"> 
#footer
{ 
position: absolute; 
bottom: 0px;
width:800px;
margin:0 auto;
} 
</style>

</head>
<body bgcolor='#398gfu'>
<center>

<table border="0" cellspacing="0" cellpadding="0" align="top" valign="top">
<tr>
<td>
<img src="./design.png">
</td>
</tr>
</table>


<?php
session_start();
if($_SESSION['gebruiker'] != "" && isset($_SESSION['gebruiker']))
  {
    echo "Welkom op deze website ".$_SESSION['gebruiker']."!";
  }else{
   echo "Je bent niet ingelogd dus je bent mag hier niet komen!";
   echo '<meta http-equiv="refresh" content="5; url=index.html" /> ';
  }
?>

<a href="./start.php">Terug naar overzicht</a>
</center>

// Vanaf hier is het probleem

<div id="footer"> 

<img src="./design2.png">

</div> 





</body>
</html>

Het gaat om de div footer aan het einde van de pagina,

Bvd,
Harm133
 
De css voor je footer moet alsvolgt zijn:
#footer {
Code: 
position: absolute;
left: 50%;
margin-left: -400px;
bottom: 0px;
width:800px;
text-align: center;
}

Eerst de footer in het midden zetten.
margin: 0 auto werkt niet in combinatie met position absolute, dus dat kan weg.
In plaats daarvan zet je met left: 50% de footer in het midden van het scherm.
Met margin-left: -400px ga je de helft van de breedte van de footer terug naar links: nu staat hij altijd in het midden, ongeacht de breedte van het scherm.
text-align: center: Een image is 'n inline-element, net als tekst. Dat zet je in het midden met text-align: center.
 
Als ik nu meer info heb dan dat mijn pagina lang is blijft hij in het midden staan en scrolled niet mee ?
 
Ja. Verticaal is er niets gebeurd, dus scrollt 't vrolijk mee. Horizontaal heeft niets met de lengte van de pagina te maken, dus horizontaal blijft-ie netjes in 't midden.
Overigens mist er bovenaan je code 'n doctype. Dat is nodig om de browser te vertellen wat voor html en zo je gebruikt. Zonder is de kans op (grote) verschillen tussen browses erg groot.
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
Dit moet boven de <html> worden gezet. Er mag niets bovenstaan, zelfs geen spatie of lege regel.
't Kan zijn dat je weergave wat verandert als je dit erboven zet, dat moet je dan even corrigeren. Maar 't is nu in principe in alle browsers wel hetzelfde.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan