Bug mise en page site internet

Fermé

NoxXx73 - 13 mars 2008 à 14:41
boumbou64 Messages postés 28 Date d'inscription lundi 10 mars 2008 Statut Membre Dernière intervention 13 décembre 2009 - 14 mars 2008 à 11:14

Bonjour à tous,
j'ai une problème avec une page internet que je suis en train de construire, et comme on me l'a conseillé, je n'utilise pas de tableau pour la mise en page, et donc je ne me sers que des "div". Cependant je ne sais pas pourquoi sous Mozilla,il y a une erreur, en-dessous de ce qui est censé être la dernière div (id="bdp"), il met encore un espace d'une quinzaine de pixels.
Et sous internet explorer il y a également un décalage de quelques pixels mais juste avant la div (id="bdp") cette fois ci.
Pouvez vous me dire d'où cela provient, voici le code correspondant de la feuille de style et de la page en elle même.

Style:

*{
padding:0;
margin:0;
}

body{
background-image: url('../images/structure/tramedefond.jpg');
}

#conteneur{
margin-left:auto;
margin-right:auto;
margin-bottom:10px;
padding:0;
align:center;
border-left: solid 1px;
border-right: solid 1px;
border-color:gray;
background-color:black;
width:700px;
height:550px;
text-align:center;
}

#bandeau{
width:700px;
height:85px:
}

#logo{
float:left;
width:200px;
height:85px;
background-color:silver;
}

#bandeaudroit{
float:right;
width:500px;
height:85px;
}

#menufa{
float:left;
width:700px;
height:45px;
}

#menu{
width:700px;
height:30px;
}

#menut{
border:0px;
border-collapse:collapse;
text-align:center;
height:30px;
width:700px;
}

#menut td{
width:140px;
height:30px;
}

#filariane{
float:left;
width:700px;
height:15px;
}

#contenu{
text-align:left;
height:400px;
}

#hautcontenu{
width:700px;
height:80px;
}

#bandeau_gauche{
float:left;
width:160px;
height:320px;
background-color:red;
}

#principal{
float:right;
width:540px;
height:320px;
overflow:auto;
background-color:yellow;
}

#bdp{
width:700px;
height:20px;
background-color:orange;
}

------------------------------------------------------------------------------------------
Le code de la page en elle-même:
<html>
<head>
<style type="text/css">
@import url("../styles/structure.css");
</style>
</head>
<body>
<div id="conteneur">
<div id="bandeau">
<div id="logo">
<a href="../index.html"><img src="../images/logos/logobandeau.jpg" border="0" alt="logotoutedistribe" title="toutedistribe.com"/></a>
</div>
<div id="bandeaudroit">
</div>
</div>
<div id="menufa">
<div id="menu">
<table id="menut">
<tr>
<td id="maccueil"><a href="../index.html"><img src="../images/structure/maccueil.jpg" border="0"/></a></td>
<td id="mprofessionnels"><a href="../index.html"><img src="../images/structure/mprofessionnels.jpg" border="0"/></a></td>
<td id="mparticuliers"><a href="../index.html"><img src="../images/structure/sparticuliers.jpg" border="0"/></a></td>
<td id="mquisn"><a href="../index.html"><img src="../images/structure/mquisommesnous.jpg" border="0"/></a></td>
<td id="mpartenaires"><a href="../index.html"><img src="../images/structure/mpartenaires.jpg" border="0"/></a></td>
</tr>
</table>
</div>
<div id="filariane" style="background-color:#338554;">
</div>
<div id="contenu">
<div id="hautcontenu">
</div>
<div id="bandeau_gauche">
<img src="http://www.toutecom.com/images/pub/empreinte-ecolo.jpg" width="160" height="320"/>
</div>
<div id="principal">

</div>
</div>
<div id="bdp">
</div>
</div>

</div>
</body>
</html>

----------------------------------------------------------------------------------------
Si quelqu'un arrivait à me trouver d'où vient cette erreur, je lui en serais très reconnaissant.

Merci d'avance.

A voir également:

Bug mise en page site internet
Site de telechargement - Accueil - Outils
Bug yahoo mail - Accueil - Mail
Supprimer une page word - Guide
Mise en forme conditionnelle excel - Guide
Site comme coco - Accueil - Réseaux sociaux

2 réponses

Réponse 1 / 2

magichit
13 mars 2008 à 23:33

<quote>et comme on me l'a conseillé, je n'utilise pas de tableau pour la mise en page, et donc je ne me sers que des "div".
</quote>
C'est plutôt le contraire, les <div> c'est la facilité ou la mode mais c'est bête d'en arriver à recréer les cellules d'un tableau avec des <div> imbriqué les uns dans les autre et aussi une source de probléme. <table> est fait pour avoir des cellules à l'intérieur pas les <div>, les <table> dans les <table> poseront pas de probléme à par celui de se perdre dans son code.

Aprés les décalages entre les navigateurs viennent de la différence d'interprétation de certaines balises. Nottament margin, padding, et les positionnement (relative, absolute, float, overflow etc...) .
Pour éviter ça il faut s'en passer au maximun en se contentant de CSS1.
Si on suit les reccomandations W3C il faut pas utiliser de valeur en px pour width et height, mais bon là c'est une autre paire de manchots de tout faire en em(hauteur du texte) ou % .

margin-left:auto;
Il y a une erreur il me sembles pas que auto s'appliques à la valeur margin(en tout cas c'est pas marqué dans mon bouquin de CSS et il est trés complet), soit c'est laissé comme tel donc valeur de base soit tu indiques une valeur dans l'unité de ton choix.

C'est peut être le overflow qui rajoute des pixels en bas de page, essaies de t'en passer.

boumbou64 Messages postés 28 Date d'inscription lundi 10 mars 2008 Statut Membre Dernière intervention 13 décembre 2009 7
14 mars 2008 à 00:07

je t'es prit les script j'y travail et je te l'ai renvoi

Réponse 2 / 2

boumbou64 Messages postés 28 Date d'inscription lundi 10 mars 2008 Statut Membre Dernière intervention 13 décembre 2009 7
14 mars 2008 à 00:47

voilà t'on souci et résolu je l'ai testez moi même sur firefox et IE
Je t'es fait des modif sur les deux page donc prend les deux le html et Css

<html>
<head>
<style type="text/css">
@import url("../styles/structure.css");
</style>
</head>
<body>
<div id="conteneur">
<div id="bandeau">
<div id="logo">
<a href="../index.html"><img src="../images/logos/logobandeau.jpg" border="0" alt="logotoutedistribe" title="toutedistribe.com"></a>
</div>
<div id="bandeaudroit">
</div>
</div>
<div id="menufa">
<div id="menu">
<table id="menut">
<tr>
<td id="maccueil"><a href="../index.html"><img src="../images/structure/maccueil.jpg" border="0"/></a></td>
<td id="mprofessionnels"><a href="../index.html"><img src="../images/structure/mprofessionnels.jpg" border="0"/></a></td>
<td id="mparticuliers"><a href="../index.html"><img src="../images/structure/sparticuliers.jpg" border="0"></a></td>
<td id="mquisn"><a href="../index.html"><img src="../images/structure/mquisommesnous.jpg" border="0"></a></td>
<td id="mpartenaires"><a href="../index.html"><img src="../images/structure/mpartenaires.jpg" border="0"></a></td>
</tr>
</table>
</div>
<div id="filariane" style="background-color:#338554;">
</div>
<div id="contenu">
<div id="hautcontenu">
</div>
<div id="bandeau_gauche">
</div>
<div id="principal">

<form name="form" method="post" action="../php/formulaireparticulier.php">
<table id="tform">
<tr>
<td>Civilité :</td>
<td>
<input type="radio" value="monsieur" name="etatcivil"/>Mr
<input type="radio" value="madame" name="etatcivil"/>Mme
<input type="radio" value="mademoiselle" name="etatcivil"/>Melle</td>
</tr>
<tr>
<td style="height: 26px">Nom :</td>
<td style="height: 26px"><input type="text" name="nom" size="15"/>*</td>
<tr>
<td>Prénom :</td>
<td><input type="text" name="prenom" size="15"/>*</td>
</tr>
<tr>
<td>Date de naissance :</td>
<td><input type="text" name="datedenaissance" size="25">* (ex. 06/10/1988)</td>
</tr>
<tr>
<td>E-mail :</td>
<td><input type="text" name="mail" size="25">*</td>
</tr>
<tr>
<td colspan="2">ADRESSE:</td>
</tr>
<tr>
<td>n°,rue :</td>
<td><textarea name="rue" cols="35" rows="3"></textarea></td>
</tr>
<tr>
<td>Ville :</td>
<td><input type="text" name="ville">*</td>
</tr>
<tr>
<td>Code Postal :</td>
<td><input type="text" name="cp" size="6">*</td>
</tr>
<tr>
<td>Département :</td>
<td>
<select name="departement">
<option value ="isere">Isère (38)</option>
<option value="savoie">Savoie (73)</option>
<option value="htesavoie">Hte-Savoie (74)</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">Service(s) souhaité(s):</td>
</tr>
<tr>
<td><input type="checkbox" name="service" value="livraison">Livraison seule :</td>
</tr>
<tr>
<td><input type="checkbox" name="service" value="livraison-installation">Livraison + installation :</td>
</tr>
<tr>
<td><input type="checkbox" name="service" value="livraison-installation-enlevement">Livraison + installation + enlèvement :</td>
</tr>
<tr>
<td><input type="checkbox" name="service" value="enlevement">Enlèvement :</td>
</tr>
</table>

<hr width="90%">
Informations complémentaires :
<br/>
Vous habitez :
<input type="radio" value="maison" name="residence"> En maison <input type="radio" name="residence" value="appartement"> Appartement
<br/>
Au
<select name="etage">
<option value="rez-de-chaussée" select="selected">Rez-de-chaussée</option>
<option value="1er-etage">1er Etage</option>
<option value="2eme-etage">2eme Etage</option>
<option value="3eme-etage">3eme Etage</option>
<option value="4eme-etage">4eme Etage</option>
<option value="etagesuperieur">+ haut que 4<sup>ème</sup> Etage</option>
</select>
<select name="ascenceur">
<option value="sans">avec ascenceur</option>
<option value="avec">sans ascenceur</option>
</select>

</form>

</div>
</div>
<p id="bdp">
</p>
</div>

</div>
</body>
</html>

/**************************************************************************/

*{
padding:0;
margin:0;
}

body{
background-image: url('../images/structure/tramedefond.jpg');
}

#conteneur{
margin-left:auto;
margin-right:auto;
margin-bottom:10px;
padding:0;
align:center;
border-left: solid 1px;
border-right: solid 1px;
border-color:gray;
background-color:black;
width:700px;
height:550px;
text-align:center;
}

#bandeau{
width:700px;
height:85px:
}

#logo{
float:left;
width:200px;
height:85px;
background-color:silver;
}

#bandeaudroit{
float:right;
width:500px;
height:85px;
}

#menufa{
float:left;
width:700px;
height:45px;
}

#menu{
width:700px;
height:30px;
}

#menut{
border:0px;
border-collapse:collapse;
text-align:center;
height:30px;
width:700px;
}

#menut td{
width:140px;
height:30px;
}

#filariane{
float:left;
width:700px;
height:15px;
}

#contenu{
text-align:left;
height:400px;
}

#hautcontenu{
width:700px;
height:80px;
}

#bandeau_gauche{
float:left;
width:160px;
height:320px;
background-color:red; background-image:url('empreinte-ecolo.jpg'); height:320px;width:160px;
}

#principal{
float:right;
width:540px;
height:320px;
overflow:auto;
background-color:yellow;
}

#bdp{
width:700px;
height:35px;
background-color:orange;
padding-top: 20px;
}

Voilà bonne continuation pour t'ont travail

NoxXx73
14 mars 2008 à 10:38

Salut Boumbou64,
je te remercie pour ton aide, pour y avoir passé du temps et pour y avoir porté intérêt.
Si jamais il y a une question ou autre à laquelle je puisse répondre en retour, n'hésite pas, j'y donnerai suite.
Merci

boumbou64 Messages postés 28 Date d'inscription lundi 10 mars 2008 Statut Membre Dernière intervention 13 décembre 2009 7 > NoxXx73
14 mars 2008 à 11:14

Salut Noxxx73

Il n'y a pas de souci j'ai fait les teste sur IE; Firefox ; Netscape donc en principe ces bon si ces bon de ton coté marque résolu inscrit cette conversation comme résolu A+

Discussions similaires

Iptv beug

35 GO à l'étranger