18041 sujets

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

3 colones avec un overflow sur le centre : marche pas sur chrome ..

... opéra et safari.
Bonjour,
J'ai lu et utilisé un de vos tutos (http://www.alsacreations.com/xmedia/tuto/exemples/3colonnes/exemple-2.html ) afin de tester la mise ne place d'un site avec trois colonnes? Par contre comma je voulais conserver une taille fixe en hauteur j'ai donc indiquer un height dans ma zone centrale et mis un overflow verticale.
La modification fonctionne très bien sur ie7, 8 et firefox. Par contre sur les autres navigateur c'est la cata ! 



<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>test 3 colonnes</title>
</head>

<body>

   <div id="colonne1" style="float: left;	width: 160px;background: lightblue;">
      <h2>colone 1</h2>
	</div><!-- fin de div#colonne1 -->
	
	<div id="colonne2" style="float: right;width: 300px;padding: 1px 0;background: burlywood;">
    <h2>Colone2</h2>
	</div><!-- fin de div#colonne2 -->
	
	<div id="centre" style="height:600px; margin-left: 170px;margin-right: 310px;background: khaki;overflow:auto;">
    <p>djklfjsfkjdsldkfjskjlkjdfl<br>djklfjsfkjdsldkfjskjlkjdfl<br>djklfjsfkjdsldkfjskjlkjdfl<br>djklfjsfkjdsldkfjskjlkjdfl<br>
    djklfjsfkjdsldkfjskjlkjdfl<br>djklfjsfkjdsldkfjskjlkjdfl<br>djklfjsfkjdsldkfjskjlkjdfl<br>djklfjsfkjdsldkfjskjlkjdfl<br>
    </p>
	</div>	
	</div><!-- fin de div#centre -->
	</body>
</html>

Quelqu'un peut il m'aider ?
Modifié par martinikay (13 Jul 2009 - 10:33)
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).

upload/1-code.gif

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 "Aide" qui apparaît tout en haut du 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
Étant donné que je ne dispose ni de chrome, ni de safari, ni d'opéra sous la souris, je ne pourrais pas beaucoup t'aider, cependant, il y a quelques petites choses à corriger dans ton code.

1. Il te manque un doctype complet et correct

2. Tu semble faire de l'XHTML (de l'HTML 4.01 serait tout aussi bien) mais tu ne respecte pas sa syntaxe complète (<br> au lieu de <br />). Ce n'est pas très grave, et ce n'est pas ce qui te pose problème, mais c'est quand même important de produire un code propre et correct.

3. Tu ferme un </div> de trop en fin de page.

Maintenant une question : Pourquoi vouloir avoir une taille fixe en pixel ? Surtout que sur un écran de faible résolution cela peux être problématique (double scrollbar).
En effet je me suis aperçu de la fermeture de la base div en trop. Tu as raison, ça ne change pas grand chose.
Concernant la syntaxe, j'avoue avoir un peu de mal (je n'ai pas refait d'html et xhtml depuis longtemps et j'écris encore des bêtises).

Pourquoi une hauteur en pixel ? En fait je ne voulais pas utiliser le style blog actuel qui fait que parfois un page peut être très longue. Je souhaitais conserver une zone plus ou moins fixe et donc faire en sorte qu'une scroll bar apparaisse si le texte est trop long. Je pourrais mettre un pourcentage mais est ce que ça changerait quelque chose (je vais tester).
En fait sur chrome, le div du milieu est minuscule, voir il disparait complètement si l'on redimensionne le navigateur. Bizarre quand même !
Sujet clos
Aller à