28173 sujets

CSS et mise en forme, CSS3

[Résolu] Div qui ne s'englobe pas

Bonjour,

J'ai un petit problème avec mon Css.
Voici le code de ma page :

<div id="Page">
	<div id="Header">
		<div id="Logo"></div>
	</div>
	
	<div id="Menu"><?php include('includes/menu.php'); ?></div>
		<div id="Separateur"><?php include('includes/navigation.php'); ?></div>
		<div id="Contenu">
		  <h3><img src="images/propos.gif" alt="A propos" /> &Agrave; propos </h3>
		  <p>Ce site a &eacute;t&eacute; enti&egrave;rement d&eacute;velopp&eacute; par mes soins.<br />
			Le site est valide aux normes W3C.</p>
		 <h3><img src="images/langages.gif" alt="Langages utilise" /> Technologies utilis&eacute;es </h3>
		  <p>xHtml / Css<br />
			Php / Mysql<br />
			Javascript<br />
			Xml</p>
	  </div>
</div>


Et voici le Css de l'identifiant Page :
#Page
{
width: 720px;
height:  auto;
background: #FFFFFF;
margin: auto;
border: 1px solid #ADABAB;
}


Voici le problème :
http://www.web-documentation.com/Images/bugg.gif

L'exemple de droite est avec Firefox et l'exemple de gauche avec Internet Explorer.

Le résultat souhaité est correct sous Internet Explorer mais pas Firefox.
Firefox ne veut pas encadré le contenu du site, il encore le header et le menu horizontal.

Je cherche depuis un bon bout de temps mais je n'arrive toujours pas à trouver c'est la raison pour lequel je viens vous demander de l'aide Smiley smile

Merci d'avance
Michaël

PS : Félicitation à Raphaël Goetter pour son livre que j'ai beaucoup apprécié
Modifié par Mikiman (20 May 2006 - 20:07)
salut

le css complet serait le bienvenue.là il manque des détails pour ce faire une idée précise.
/* CSS Document */

body
{
background-image: url(images/fond.gif);
background-repeat: repeat-x;
background-color: #F3F3F3;
}

#Page
{
width: 720px;
height:  auto;
background: #FFFFFF;
margin: auto;
border: 1px solid #ADABAB;
}

#Header
{
width: auto;
height: 80px;
background: url(images/head_test.gif) repeat-x;
}

#Logo
{
width: 265px;
height: 80px;
/*background: url(images/logo.gif) no-repeat;*/
}

#Menu
{
width: auto;
height: 23px;
background: url(images/menu.gif);
border-bottom: 1px solid #F4F4F4;
padding-top: 13px;
}

#Menu a
{
font: 14px Arial;
color: #595959;
text-decoration: none;
margin-left: 10px;
margin-right: 10px;
}

#Separateur
{
width: 195px;
float: left;
display: inline;
margin-top: 20px;
}

.Navigation
{
width: 184px;
height: auto;
border-right: 1px solid #E9E9E9;
border-bottom: 1px solid #E9E9E9;
padding-bottom: 5px;
float: left;
display: inline;
margin-right: 10px;
margin-bottom: 15px;
}

.Navigation h3
{
height: 22px;
background: url(images/navigation.gif);
margin: 0;
font: bold 14px Arial;
color: #137EB4;
padding-top: 3px;
padding-left: 5px;
border-top: 1px solid #E9E9E9;
border-bottom: 1px solid #F3F3F3;
}

.Navigation a
{
	margin-left: 5px;
	font: 12px Arial;
	color: #333333;
	text-decoration: none;
}

#Contenu
{
margin-top: 20px;
font: 12px Arial;
color: #595959;
float: left;
display: inline;
width: 525px;
height: auto;
}

#Contenu h3
{
height: 22px;
background: url(images/navigation.gif);
margin: 0;
font: bold 14px Arial;
color: #137EB4;
padding-top: 3px;
padding-left: 5px;
border-top: 1px solid #E9E9E9;
border-bottom: 1px solid #F3F3F3;
border-left: 1px solid #F3F3F3;
}

#Contenu p
{
margin-top: 3px;
border-top: 1px solid #E9E9E9;
border-left: 1px solid #E9E9E9;
border-bottom: 1px solid #E9E9E9;
padding: 5px;
height: auto;
}

form
{
margin-top: 3px;
border-top: 1px solid #E9E9E9;
border-left: 1px solid #E9E9E9;
border-bottom: 1px solid #E9E9E9;
padding: 5px;
}

.formulaire
{
margin-top: 3px;
}

input, textarea
{
border: 1px solid #A5ACB2;
font: 12px Arial;
color: #767676;
}

.bouton
{
background: url(images/bouton.gif);
}

hr
{
border: 0;
padding: 0;
height: 1px;
background: #E9E9E9;
}

a
{
font: 12px Arial;
color: #137EB4;
}

.commentaire
{
margin-left: 350px;
}

#Css
{
	float: right;
	width: auto;
	height: auto;
}


Voilà Smiley smile
Bonjour Mikiman,

Le balisage avec PHP ne nous sert pas pour ce genre de problème. Ce dont on a besoin, c'est du code généré par PHP. Peux-tu nous donner le code source de ta page (ou mieux, une URL où on peut la voir). Ce sera plus pratique pour t'aider.

En attendant :
a écrit :
Firefox ne veut pas encadré le contenu du site, il encore le header et le menu horizontal.
Ce genre de chose, un div#page qui ne veut pas encadrer un contenu, se produit quand le-dit contenu est sorti du flux du document (par exemple en le positionnant en absolu). Pour que le div#page puisse envelopper (encadrer) un contenu, celui-ci doit rester dans le flux.
Voici le code du fichier menu.php
<a href="index.html">Accueil</a>
<a href="presentation.html">Présentation</a>
<a href="contact.html">Me contacter</a>
<a href="a_propos.html">&Agrave; propos </a>


Et voici le code du fichier navigation.php
<div class="Navigation"><h3>Menu principal</h3>
	<a href="index.html">Accueil</a><br />
	<a href="presentation.html">Présentation</a><br />
	<a href="contact.html">Me contacter</a><br />
	<a href="a_propos.html">&Agrave; propos</a>
</div>

<div class="Navigation"><h3>Catégorie(s)</h3>
<?php
$menu_recherche = mysql_query('SELECT * FROM categorie ORDER BY id ASC');
$menu_comptage = mysql_num_rows($menu_recherche);

if($menu_comptage == 0){
	echo 'Aucune cat&eacute;gorie';
}else{
	while($menu_reponse = mysql_fetch_object($menu_recherche)){
		echo '<a href="categorie-id-'.$menu_reponse -> id.'.html" title="'.$menu_reponse -> titre.'">'.$menu_reponse -> titre.' <strong>('.$menu_reponse -> nombre.')</strong></a><br />';
	}
}
?>
</div>

<div class="Navigation"><h3>Liens à visiter</h3><a href="#">Accueil</a><br /><a href="#">Présentation</a><br /><a href="#">Galerie</a></div>


J'éspère ne rien avoir oublié ^^
Je l'ai actuellement que en local désolé, j'ai par contre donné tout le code de la page et de ces composants Smiley smile
Ah super ! Merci, ça fait une journée que j'essais de regler ce problème.
Merci encore beaucoup Smiley smile

Bonne journée
Modifié par Mikiman (20 May 2006 - 20:09)
Sujet clos
Aller à