Webmaster Hub > Chevauchement de div

Version complète: sur le forum Webmaster Hub : Chevauchement de div

Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS

Oublieuse

samedi 1 avril 2006 à 15:25

J'imagine que le sujet a déjà été traité, mais je ne trouve pas mon bonheur avec la recherche... En fait, c'est simple, je veux juste aligner horizontalement trois div dans un conteneur. Seulement je ne sais pour quelle raison, les div se chevauchent. J'ai pourtant suivi les indications trouvée sur Pompage.net. Voici le code Css concerné:

CODE

#page {
	background-color: black;
	padding: 0.6em;
	margin-left: 5em;
	margin-top: 5em;
	width: 90%;
	height: 70%;
	-moz-border-radius: 0.8em;
	filter: alpha(opacity=90);  
	-moz-opacity: 0.90;
	opacity: 0.90;
	}
#gauche {
background-color: orange;
width: 17%;
height: 95%;
float: left;
filter:alpha(opacity=90);  
-moz-opacity:0.90;
opacity: 0.90;
padding: 0.6em;
}
.menu {
list-style-type: none;
font-size: 1em;
padding: 0;
margin: 0;
}
#separateur {
width: 5%;
height: 95%;
background-color: green;
float: left;
}
#contenu {
width: 78%;
background-color: orange;
height: 95%;
font-size: 0.8em;
padding: 0.6em;
text-align: justify;
float: left;
filter:alpha(opacity=90);  
-moz-opacity:0.90;
opacity: 0.90;
}

Et le code Html:

CODE

<div id="page">
		  <div id="gauche">
		  <ul class="menu">
		  <li>Linux ha meziantoù frank</li>
		<li>Lennegezh</li>
		</ul>
		  </div>
		  <div id="separateur">BIdule truc</div>	
		<div id="contenu">
		  <h2>Titl</h2>
		  <p>Blablabla</p>
		</div>
	</div>

Oublieuse

samedi 1 avril 2006 à 17:15

Bon après moults essais, ça l'air de provenir des paddings... J'ai ce chevauchement avec les nagigateurs à moteur gecko, sous Linux, mais pas avec opéra (sous linux aussi). Comme j'avais remarqué des différences entre les pages affichées par firefox sous win ou sous Linux, j'aimerais savoir ce que vous vous voyez à cette page: http://giulia.fraboulet.free.fr/Breun_bed/degemer1.php
Les couleurs sont moches, mais c'est justement pour voir tout ce qui se passe.

jeanpierre949

dimanche 2 avril 2006 à 11:19

il n'y a pas de bleme sous FF ni opera pas ouvert IE

Oublieuse

dimanche 2 avril 2006 à 12:44

C'est normal... j'ai changé le code, après avoir trouvé une solution, pour que d'une part la hauteur des div ne dépende pas du texte qu'elles contiennent, et d'autres part qu'elles ne se chevauchent pas. Solution ici. Par contre, paraît que ça ne marche pas avec IE. Mon souci c'est que je n'ai pas IE, étant sous Linux. Si l'un d'entre vous pouvait me dire ce qu'il voit sous IE, ça serait chouette. Merci!

captain_torche

dimanche 2 avril 2006 à 17:48

Bon, comme une image vaut mille mots : Restrictions sur le nom de l'image, donc je la mets en lien.
Mais apparemment, tu es en train de faire des modifs (j'avais eu juste deux mnites avant, les nuages non collés au header).

Oublieuse

dimanche 2 avril 2006 à 22:48

Oui je fais des modifs... d'ailleurs là ça va mieux. Il me reste cependant un prblème, des espaces entre l'image et le cadre du navigateur, puis un espace entre le bloc de texte et l'image de nuages. Et je ne comprends pas où est le souci, mais on verra ça demain.

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.