Mantenere posizione immagini nei div
Ciao a tutti, chiedo aiuto a voi perchè sto letteralmente impazzendo in questo problema.
Allora: ho una pagina che si chiama index.php la quale richiama tramite menù presente nel div menù altre pagine che vengono aperte nel div main. Le pagine html contengono immagini.
Il problema è questo: quando avvio il file index.php l'immagine denominata "titolo" presente nel div header è al suo posto, ma quando clicco alla voce chi, fecente riferimento alla pagina chi.html nella quale ho messo una foto che avevo scattato io, l'immagine "titolo" presente nell'header si sposta di conseguenza. Come posso risolvere questo problema? Grazie.
Di seguito allego sia codice della pagina index.php che le due immagini per farvi capire meglio quel'è il problema ed inoltre il file chi.html e chi.css.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Documento senza titolo</title>
<style type="text/css">
#contenitore {
height: 900px;
width: 1000px;
margin:0px auto;
}
#header {
height: 100px;
width: 1000px;
float: left;
background-color: #FFF;
}
#menu {
float: left;
height: 730px;
width: 150px;
background-color: #CCC;
}
#menu p {
padding: 8px;
margin: 5px;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
}
#cont {
float: right;
height: 400px;
width: 550px;
background-color: #FF0;
}
#footer {
float:left;
height:70px;
width:1000px;
background-color:#F00;
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
#menu p a {
border: 1px solid #009;
padding: 5px;
}
#menu p a:hover {
color: #FFF;
text-decoration: none;
background-color: #009;
}
body {
background-color: #06F;
}
#header img {
padding-left: 100px;
padding-top: 10px;
position: static;
}
</style>
</head>
<body>
<div id="contenitore">
<div id="header">
<img id="titolo" /><img src="fpb.jpg" />
</div>
<div id="menu">
<p><a href="./?pagina=home">HOME</a></p>
<p><a href="./?pagina=chi">CHI SIAMO</a></p>
<p><a href="./?pagina=cosa">COSAFACCIAMO</a></p>
<p><a href="./?pagina=dove">DOVE SIAMO</a></p>
<p><a href="./?pagina=contatti">CONTATTI</a></p>
</div>
<div id="footer">Inserite qui il contenuto per id "footer"</div>
<?php
if(isset($_GET['pagina']) && file_exists($_GET['pagina'].'.html'))
include($_GET['pagina'].'.html');
else
include('home.html');
?>
</div>
</body>
</html>
File chi.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Documento senza titolo</title>
<link href="chi.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>
</head>
<body>
<img src="ah l'amour.jpg" width="307" height="456" id="venezia" />
</body>
</html>
File chi.css:
@charset "UTF-8";
/* CSS Document */
body img#venezia{
margin-top:30px;
margin-left:100px;
}
http://fashionphotobook.altervista.org/imm2/001.jpg questa è quella in cui l'immagine titolo è dove dovrebbe stare;
http://fashionphotobook.altervista.org/imm2/002.jpg
