18041 sujets

Questions générales et questions de débutants

Div qui se "touchent pas"

bsr

je suis novice et j'essai de construire mon site avec les css.

pouvez vous verifié mon code et me dire pourquoi les div ne se "touchent pas, à savoir la div ou il ya le moteur de recherdhe toutche pas celle du menu haut et celles des colonnes droites et gauche touche pas celle ou il y à le moteur de recherche idem pour le pied. (ouf) (je prévisualise sous IE vers 7)

j'espere que je me suis expliqué clairement.
merci de votre réponse

<Edit par Florent V. : voir le code plus bas />
Modifié par Florent V. (23 Jun 2007 - 16:24)
Administrateur
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Bjr

toutes mes excuses, j'ai voulu faire trop vite et j'ai pas regardé.
Ca n'arrivera plus.

Je reposte donc le code

merci à vous


code htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>

<link href="styles/imports/base.css" rel="stylesheet" type="text/css" />
<link href="styles/imports/menu.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="conteneur">
<div id="header">le contenu de id "header"</div>
<div id="header1">le contenu de id "header1"</div>
<div id="menuhaut" class="menuhaut"><!-- #BeginLibraryItem "/Library/navigation.lbi" -->
<ul class="menuhaut">
<li><a href="#">Accueil</a></li>
<li><a href="#">Oriental</a></li>
<li><a href="#">Piano-Bar</a></li>
<li><a href="#">Le Grill</a></li>
<li><a href="#">Vos photos</a></li>
<li><a href="#">Le Forum</a> </li>
<li><a href="http://maps.google.com/maps/ms?ie=UTF8&amp;hl=fr&amp;msa=0 &amp;msid=110752251520389335113.00000111c17810df98411&amp;om=1 &amp;ll=43.448316,3.691224&amp;spn=0.003435,0.007231&amp;z=17">Accès</a></li>
<li>
<script type="text/javascript">
<!--
var monmail="<a href=mailto:";
monmail +="barlepassetemps@";
monmail +="free.fr?subject=j'ai&nbsp;une&nbsp;question?>";
document.write(monmail+"Contact");
//--> 
</script>
</a></li>
</ul>
<!-- #EndLibraryItem --></div>
<div id="rechgoogle"><!-- #BeginLibraryItem "/Library/navigation.lbi" -->
<form method="get" action="http://barlepassetemps.free.fr/google.htm" target="_top">
<table bgcolor="#ffffff">
<tr>
<td nowrap="nowrap" valign="top" align="left" height="32"><a href="http://www.google.com/"> <img src="http://www.google.com/logos/Logo_25wht.gif" border="0" alt="Google" align="middle" /></a>
<label for="sbi" style="display: none">Entrez les termes que vous recherchez.</label>
<input type="text" name="q" size="31" maxlength="255" value="" id="sbi" />
<label for="sbb" style="display: none">Envoyer un formulaire de recherche</label>
<input type="submit" name="sa" value="Rechercher" id="sbb" />
<input type="hidden" name="client" value="pub-4781992190681162" />
<input type="hidden" name="forid" value="1" />
<input type="hidden" name="ie" value="ISO-8859-1" />
<input type="hidden" name="oe" value="ISO-8859-1" />
<input type="hidden" name="cof" value="GALT:#F2984C;GL:1;DIV:#FFFFFF;VLC:ffcc66;AH:center;BGC:FFFFFF;LBGC:336699;ALC:990033;LC:990033;T:000000;GFNT:990033;GIMP:990033;FORID:11" />
<input type="hidden" name="hl" value="fr" /> </td>
</tr>
</table>
</form>
<!-- #EndLibraryItem --></div>

<div id="gauche">le contenu de id "gauche" qui doit pousser le pied vers le bas le contenu de id "gauche" qui doit pousser le pied vers le bas le contenu de id "gauche" qui doit pousser le pied vers le bas</div>

<div id="droite">le contenu de id "droite" qui doit pousser le pied vers le bas le contenu de id "gauche" qui doit pousser le pied vers le bas le contenu de id "gauche" qui doit pousser le pied vers le bas</div>

<div id="pied">le contenu de id "pied"</div>
le contenu de id "conteneur" </div>
</body>
</html>


code css

/* CSS Document */

#conteneur {
position: relative;
width: 960px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
background-color: #CCCCCC;
}
#header {
background-color: #99FF00;
height: 170px;
}
#header1 {
background-color: #99FFCC;
}
#menuhaut {
text-align: center;
}
#rechgoogle {
background-color: #FFFFFF;
text-align: center;
}
#gauche {
float:left;
width: 180px;
background-color: #FFFF99;
}
#droite {
float:right;
width: 180px;
background-color: #FFFF99;
}
#pied {
clear:both;
font-size: 75%;
color: #FFFFFF;
text-align: center;
background-color: #666666;
}
lepassetemps a écrit :
j'ai voulu faire trop vite et j'ai pas regardé

Après quoi tu as voulu faire trop vite et tu n'as pas lu le message de Felipe, qui te demandait de modifier les messages postés et non pas d'en créer de nouveaux pour y mettre ton code bien mis en forme. Smiley ohwell

Mais bon, on va faire comme ça alors.
Je supprime le code des premiers messages, pour qu'on y voie plus clair. Smiley cligne
Modifié par Florent V. (23 Jun 2007 - 16:25)
lepassetemps a écrit :
pouvez vous verifié mon code et me dire pourquoi les div ne se "touchent pas, à savoir la div ou il ya le moteur de recherdhe toutche pas celle du menu haut et celles des colonnes droites et gauche touche pas celle ou il y à le moteur de recherche idem pour le pied

Si on pouvait constater tout ça de visu sur une page en ligne, ça serait tout de même dix fois plus simple. Smiley cligne

lepassetemps a écrit :
(je prévisualise sous IE vers 7)

Sous IE7 uniquement ? Tu n'as pas sous la main un Firefox 2 et un Opera 9 pour voir ce que ça donne ?
Je rappelle au passage que ces deux navigateurs sont gratuits et s'installent en cinq minutes. Smiley smile
Bon, première chose à faire : un coups de validateur HTML sur la page.

Et là... une petite dizaine d'erreurs.
Le plus important : tu as des </div> en trop qui trainent dans ton code. Smiley biggol
Du coup chaque navigateur comprend ce qu'il peut, et apparemment Internet Explorer n'aime pas trop.

Je me suis fait une copie locale de ta page et j'ai supprimé :
- le <div>...</div> superflu qui entoure le formulaire ;
- deux </div> placés avant le pied de page.

Maintenant, ça passe beaucoup mieux. Il n'y a plus qu'un problème de décalage du pied de page, mais j'avoue que là j'ai un peu la flemme de me pencher dessus.

Une remarque méthodologique : il peut être utile d'indiquer quel div on ferme, pour éviter de se retrouver avec des </div> en trop ou manquants. Exemple :
<div id="conteneur">
	<div id="menu">
		...
	</div><!-- fin de div#menu -->
	<div id="contenu">
		...
	</div><!-- fin de div#contenu -->
</div><!-- fin de div#conteneur -->
Sujet clos
Aller à