[Résolu]Blocs, photos, textes qui se chevauchent!

Nogi · le 11 mars 2009

Bonjour,

Lorsque je minimise une page web que je conçois, les éléments finissent par se chevaucher. J'ai remarqué, lorsque qu'on diminue de beaucoup une page internet quelconque, une barre de défilement(horizontale) se forme automatiquement, les empêchant de s'entremêler et les textes de sortir de leurs blocs.

Je ne connais pas encore le JavaScript et le PHP, mais est-ce possible de résoudre le problème avec le XHTML/CSS seulement?

Merci !

Nogi

Modifié le 19 mars 2009 par Nogi

Dylav · le 11 mars 2009

Avec le peu que tu nous dévoiles, il est difficile de se faire une idée de l'origine du comportement de ta page WEB. Il serait pratique que tu nous fournisses,

- soit l'adresse de ta page (si elle est en ligne),

- soit son code (XHTML+CSS).

KewlCat · le 11 mars 2009

En spécifiant un min-width et un min-height sur ton conteneur de plus haut niveau pour l'empêcher de descendre en-dessous d'une certaine taille critique, peut-être ?

Nogi · le 12 mars 2009

Bonjour,

J'ai vu ceci une fois, je l'ai essayé dans le XHTML, mais ça n'avait pas résolu mon problème:

... [<body bottommargin="0" marginheight="0" marginwidth="0" rightmargin="0" topmargin="0" leftmargin="0">]...

Alors voici mes codes XHTML et CSS:

XHTML

<!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" xml:lang="fr">
    <head>
      <title>www.cgtransport.com</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <link rel="stylesheet" media="screen" type="text/css" title="cgtransport.html" 
         href="../cgportfolio.css/001_cgtransport.css" />
    </head>
 <[color="#A0522D"]body[/color]>         

          <h1>CG Transport</h1>

	  <div id="banner_truck">	
            <p id="wheels_truck"></p>		  
	     <p class="text001">CG Transport</p>
	     <p class="text0021"><em>Sur la route depuis 17 ans !</em></p>
                     <p class="text0022"><em>On the road since 17 years !</em></p>

	  </div>

	   <div id="cote_gauche">

	    <h2 class="bienvenue01">Bienvenue</h2>

	     <p class="text003">
		   Sed vel nunc consequat erat. 
		   Aenean a massa. Quisque ultricies, dolor non rutrum ullamcorper,lorem ligula blandit pede, malesuada 
	       volutpat magna dolor et ante. In tellus felis, tincidunt eget, 
	       adipiscing eu, gravida sit amet, lorem. Proin dolor. Proin vel elit. Morbi vel enim.</p>
	    <p class="text004">Quisque accumsan wisi id quam. Integer tortor justo, cursus volutpat, 
	       vehicula ut, pellentesque ultrices, neque. Ut scelerisque. In velit tortor, venenatis eget, ultricies id, 
	       mollis nec, dui. Morbi nec ante vitae libero fermentum aliquam. Aenean sollicitudin turpis sit amet quam. 
	       Quisque lacinia. Proin mollis. Vestibulum dapibus, nulla sit amet lacinia dapibus, est odio 
	       condimentum lorem, id aliquam lorem enim vitae nibh. Duis lorem.</p>    		
	   	<p class="text005">Nulla tortor. Nunc pulvinar. Quisque lacinia. Proin 
	       mollis. Vestibulum dapibus, nulla sit amet lacinia dapibus, est odio condimentum lorem, id aliquam lorem 
	       enim vitae nibh. Nulla tortor. Nunc pulvinar. Donec mi In hac habitasse platea dictumst. Ut at neque 
		   interdum enim</p>	  

           <p class="mailto">
		   Mess.: 514.123.4567<br />
		   Cell.: 514.345.6789<br />
		   <a href="mailto:[email protected]">[email protected]</a>
		</p>

	   </div>

	   <div id="cote_droit">

	    <h2 class="welcome02">Welcome</h2>
	     <p class="text006">
		   Nam vel arcu quis justo condimentum 
		   egestas. Aliquam dictum wisi. Nam lorem. Ut scelerisque. In velit tortor, venenatis eget, 
	       ultricies id, mollis nec, dui. Morbi nec ante vitae libero fermentum aliquam. Ut non quam. Aenean 
		   sollicitudin turpis sit amet quam. Quisque lacinia. Proin mollis</p>		   
	  	<p class="text007">Vestibulum dapibus, nulla sit amet lacinia dapibus, est odio 
	       condimentum lorem, id aliquam lorem enim vitae nibh. Nulla tortor. Nunc pulvinar. Vestibulum 
	       malesuada wisi et urna. Aenean aliquam, odio quis semper cursus, nisl lacus rutrum ipsum, a laoreet 
	       neque ante vitae tortor. In hac habitasse platea dictumst. Ut at neque interdum enim pharetra commodo.</p>
	    <p class="text008">Quisque lacinia. Proin mollis. Praesent bibendum tempor metus. Sed vitae tellus mollis magna luctus 
	       ultrices. Mauris sollicitudin aliquet nunc. Aenean urna. Duis lorem. Proin augue. Quisque interdum 
	       felis eu diam. Etiam pede lectus, facilisis sit amet, varius a, malesuada varius, nisl.</p>
          </div>

	   <div id="copyrights">cgtransport.com © 2009</div>	

	   <div><img src="truck005.png" id="truck005" /></div>

  </body>
</html>

CSS

body
{
  margin-top: 0%;
  margin-bottom: 2%;

  /*  background: #5BFDEF url("road07.png") center -15% fixed no-repeat;  */
}
a
{
  text-decoration: none;

  color: #3B6780;
}
a:hover
{
  font-style: italic;

  color: #800080;
}
h1
{
  text-indent: -50000px;

  color: #000;
} 
h2
{
  font-size: 1.8em;
}
#banner_truck
{
  width: 85%;
  height: 100px;
  margin-left: auto;
  margin-right: auto;

  /*  background: url("banner_truck001.png") top left repeat-x;    */
  border: #3A0768 solid 1px;  /*  none  */
}
.text001
{
  width: 45%;
  text-align: left;
  margin-right: 0%;
  margin-bottom: 0%;

  padding-top: 1.3%;
  padding-left: 7%;  

  font-family: "Times New Roman", Times, Georgia, Verdana, sans-serif;
  font-size: 3.2em;

  color: #3A0768;  /*  #00FFFF  */
  border: none;
}
.text0021
{
  width: 28%;
  height: 20px;
  text-align: left;
  margin-top: 0%;
  margin-left: 10%;
  margin-right: 0%;
  margin-bottom: 0%;
  display: inline;

  font-family: "Times New Roman", Times, Georgia, Verdana, sans-serif;
  font-size: 1.0em;
  font-weight: bold;

  color: #3A0768;  /*  #00FFFF  */
  border: none;
}
.text0022
{
  width: 28%;
  height: 20px;
  text-align: left;
  margin-top: 0%;
  margin-left: 5%;
  margin-right: 0%;
  margin-bottom: 0%;
  display: inline;

  font-family: "Times New Roman", Times, Georgia, Verdana, sans-serif;
  font-size: 1.0em;
  font-weight: bold;

  color: #3A0768;  /*  #00FFFF  */
  border: none;  
}
#wheels_truck
{
  float: right;  
  width: 34%;
  height: 100px;
  margin-top: 0%;
  margin-left:0%;
  margin-right: 0%;
  display: inline;

  padding-right: 0%; 

  /*  background: url("banner_wheels005.png") top right no-repeat;  */
  border: none;
}
.bienvenue01
{
  text-indent: 1%;
  margin-top: 2%;
  margin-left: 7%;
  margin-bottom: 0%; 

  color: #1E7480;  
}
.welcome02
{
  text-indent: 0.8%;
  margin-top: 3%;
  margin-left: 7%;
  margin-bottom: 0%; 

  color: #1E7480;
}
#cote_gauche
{
  float: left;
  width: 34%;
  height: 580px;
  margin-top: 1.7%;
  margin-left: 6%;

  border: none;
}
.text003
{
  width: 70%;
  height: 170px;
  text-align: justify;
  text-indent: 0.6%;
  margin-top: 3%;
  margin-left: 7%;
  margin-bottom: 0%;

  padding-bottom: 0%;

  font-family: "Times New Roman", Times, Georgia, Verdana, sans-serif;
  font-size: 0.8em;

  color: #3B6780; 
  border: none;
}
.text004
{
  width: 70%;
  height: 200px;
  text-align: justify;
  text-indent: 0.6%;
  margin-top: 0%;
  margin-left: 17%;
  margin-bottom: 0%;

  padding-top: 0%;
  padding-bottom: 0%;

  font-family: "Times New Roman", Times, Georgia, Verdana, sans-serif;
  font-size: 0.8em;

  color: #3B6780; 
  border: none;
}
.text005
{
  width: 70%;
  height: 120px;
  text-align: justify;
  text-indent: 0.6%;
  margin-top: 0%;
  margin-left: 11%;
  margin-bottom: 0%;

  padding-top: 0%;
  padding-bottom: 0%;

  font-family: "Times New Roman", Times, Georgia, Verdana, sans-serif;
  font-size: 0.8em;

  color: #3B6780;
  border: none;
}
.mailto
{
  float: left;
  width: 160px;
  height: 55px;
  margin-top: 7%;
  margin-left: 20%;

  padding-top: 6px;
  padding-left: 10px;

  font-family: "Times New Roman", Times, Georgia, Verdana, sans-serif;
  font-size: 0.8em;

  border: aqua outset 1px;  
}
#cote_droit
{ 
  float: right;
  width: 34%;
  height: 550px;
  margin-top: 1.7%;
  margin-right: 6%;
  margin-bottom: 0%;

  border: none;
}
.text006
{
  width: 70%;
  height: 170px;
  text-align: justify;
  text-indent: 0.6%;
  margin-top: 3%;
  margin-left: 7%;
  margin-bottom: 0%;

  padding-top: 0%;
  padding-bottom: 0%;  

  font-family: "Times New Roman", Times, Georgia, Verdana, sans-serif;
  font-size: 0.8em;

  color: #3B6780;
  border: none;
}
.text007
{
  width: 70%;
  height: 180px;
  text-align: justify;
  text-indent: 0.6%;
  margin-top: 0%;
  margin-left: 22%;
  margin-bottom: 0%;

  padding-top: 0%;
  padding-bottom: 0%;

  font-family: "Times New Roman", Times, Georgia, Verdana, sans-serif;
  font-size: 0.8em;

  color: #3B6780; 
  border: none;
}
.text008
{
  width: 70%;
  height: 140px;
  text-align: justify;
  text-indent: 0.6%;
  margin-top: 0%;
  margin-left: 16%;
  margin-bottom: 0%;

  padding-top: 0%;
  padding-bottom: 0%;

  font-family: "Times New Roman", Times, Georgia, Verdana, sans-serif;
  font-size: 0.8em;

  color: #3B6780;
  border: none;
}
#copyrights
{
  position: absolute;
  left: -50%;
  bottom: 0%;

  font-size: 0.5em;
  font-family: Verdana, Arial, sans-serif;
  color: #000; 
}
#truck005
{
  float: right;
  width: 300px;
  height: 175px;
  margin-top: 0%;
  margin-right: 10%;
  margin-bottom: 0%;

  padding-top: 0%;

  border: #3A0768 solid 1px;  /*  photo: 300px X 175px  */
}

Merci de votre aide!

Nogi

Dylav · le 12 mars 2009

Bonjour Nogi,

Ta feuille de style est beaucoup trop “rigide”. Il faut laisser flotter tes blocs, qu'ils puissent occuper l'espace nécessaire sans pour autant défigurer l'idée que tu te fais de ta page. En fait, il faut commencer très soft dans la mise en page, quitte ensuite à ajouter quelques contraintes…

Commence par virer tous les attributs height (et surtout ceux des id cote_gauche et cote_droit, et des classes text003 à text008), et donne à chacune de ces 6 classes l'attribut margin-top:3%. Tu vas voir que tout ira beaucoup mieux, soudain.

Après, tu seras limité par la largeur des titres “Bienvenue” et “Welcome”, mais là il faut être assez vicieux pour descendre la largeur de la fenêtre à moins de 250px ! Ceci dit, tu peux même t'en affranchir en utilisant l'attribut min-width conseillé par KewlCat. Le problème, c'est que ça fait sauter le bloc cote_droit sous le bloc cote_gauche.

À ce sujet, il faudra que tu regardes le comportement de ta page sous Internet Explorer (en IE6 en tout cas, ce n'est pas jojo) : tes deux blocs cote_gauche et cote_droit ne devraient pas être des <div>, mais des <span>, qui sont des blocs inline (c'est-à-dire sans saut à la ligne préalable). Enfin, enlève le float:left de la classe mailto, et là il y aura véritablement du pied dans la chaussette (comme j'aime à dire)…

<body bottommargin="0" marginheight="0" marginwidth="0" rightmargin="0" topmargin="0" leftmargin="0">

Ces attributs de la balise <body> mettent toutes ses marges (basse, hauteur, largeur, droite, haute, gauche) à zéro, c'est-à-dire que la fenêtre de ton navigateur n'aura aucune marge extérieure, et pourra donc être entièrement occupée.

Nogi · le 17 mars 2009

Bonjour,

J'ai fais les modifications et ça fonctionne.

J'avoue que j'utilisais les height parce que, sur une autre page que j'ai fais, IE7 en avait pas besoin, mais le seul moyen pour que ça fonctionne avec Mozilla et Opéra était d'y ajouter des hauteurs en px sur les blocs. Ce pourquoi j'utilisais l'attribut height en permanence. J'imagine alors que c'est dans ma conception de ma feuille de style que j'ai un bug! J'ai même essayé avec height: auto; mais Mozilla et Opéra ne le prennent pas. Il faudra que je revise la feuille de style de cette page en particulier.

Malgré ta réponse Dylav, j'aimerais poussé plus loin le défi. Quand je parle de minimiser une page web (ex.: zebulon.fr), si on réduit à une taille de 6po. X 6po.(12cm X 12cm), à partir d'une certaine largeur, il se forme une barre de défilement automatiquement en bas, ce qui permet à la page de ne pas se répendre seulement en hauteur(comme la mienne). Avec ma page (CG Transport), la largeur en % "demeure" à l'intérieur de la page minimisée et je perd donc les textes et la photo à l'intérieur de mon entête.

La solution est peut-être avec min-width et min-height, comme le suggère KewlCat.

Au fait, je suis avec IE7, quel est le truc pour visualiser avec IE6?

Merci!

Nogi

Dylav · le 17 mars 2009

A priori, si tu ne veux pas d'aberration en minimisant la taille de ta fenêtre, tu dois empêcher chacune de tes colonnes de descendre en-dessous de la largeur de la photo qu'elle contient. Tu peux donc tester la mise en œuvre du min-width, qu'il faudra exprimer en pixels et non en %. Le min-height n'a à mon avis pas d'utilité dans ton cas.

Même si ça ne veut pas dire grand-chose (question de densité de pixels imposée à l'écran), juste pour se faire une idée on peut estimer grosso modo que 6 pouces équivalent à 450px. D'où des colonnes latérales avec un min-width de 150 à 200px (à ajuster).

Quant à Internet Explorer, je crains que sa forte imbrication avec Windows ne permette pas de régresser de IE7 à IE6… sauf à recharger l'OS !

Nogi · le 19 mars 2009

Parfait, je vais essayer ça ce w-e!

Au sujet d'IE7, oui effectivement, j'avais déjà essayé de retélécharger IE6, mais Windows ne voulait pas. Et je ne suis pas intéressé a jouer dans l'OS.

Merci Dylav et KewlCat!

À une prochaine!

Nogi

Connexion

Pas encore inscrit ?

[Résolu]Blocs, photos, textes qui se chevauchent!

Messages recommandés

Nogi

Lien vers le commentaire

Partager sur d’autres sites

Dylav

Lien vers le commentaire

Partager sur d’autres sites

KewlCat

Lien vers le commentaire

Partager sur d’autres sites

Nogi

Lien vers le commentaire

Partager sur d’autres sites

Dylav

Lien vers le commentaire

Partager sur d’autres sites

Nogi

Lien vers le commentaire

Partager sur d’autres sites

Dylav

Lien vers le commentaire

Partager sur d’autres sites

Nogi

Lien vers le commentaire

Partager sur d’autres sites

Rejoindre la conversation

En ligne récemment 0 membre est en ligne

Zebulon

Outils en ligne

Naviguer