28221 sujets

CSS et mise en forme, CSS3

[Résolu] Problemme de div conteneur

Pages :
Bonjour, j'ai un problemme avec un "conteneur" ca s'affiche bien seulement sous Firefox 1.0, sous la suite mozilla et IE (ya 2 div cote à cote dans le conteneur) en ben lle 2eme div va en dessou de l'autre.

Pour que vous voyez et comprenez mieux Smiley lol
http://e.besson.free.fr/testcss

(ya exactement le meme problemme si on redimentionne la page)
Modifié le 12 Dec 2004 - 19:57
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1... n'est probablement pas le DOCTYPE le mieux adapté à tes besoins.
Lire : http://pompage.net/pompe/doctype/

J'ai compté 12 <div> dans ta page. C'est excessif.
Lire : http://www.alsacreations.com/articles/economie/

Tu devrais utiliser des sélecteurs par "id" au lieu des "class" pour les principales sections de ta page.
Lire : http://www.alsacreations.com/articles/id_class/

As-tu réellement besoin de 4 feuilles de style ? Smiley confus

Ton problème est sans doute un problème de float, mais je te suggère d'épurer ton design avant de poursuivre. Smiley smile
la doctrine je la changerais, je metterai du 1.0 strict (merci pour le lien) ensuite je remplacerais quelque "div" par des "id", mais pour l'instant c'est le problemme qui est le problemme Smiley lol

Je n'y arrive pas, j'ai esayé plein de truc et que ca marche toujour pas Smiley decu
Modifié le 10 Dec 2004 - 23:11
Administrateur
Merci également, s'il te plaît de faire un effort sur l'orthographe.
Tu as le temps pour écrire tes posts. Personnellement, ça ne me donne pas envie de m'y intéresser Smiley ohwell
je pensse que c'est bon pour l'orthographe. pour le problemme je pensse que ca vient de là: j'ai mis la largeur en % avec un min-width, et je crois que IE et la suite mozilla ne prend pas en compte le min-width.

Vous en penssez quoi ?
Sirion a écrit :

mais pour l'instant c'est le problemme qui est le problemme Smiley lol

En ce qui me concerne, c'est le "trop de <div>" qui est le problème. Je pourrais y passer la nuit sans rien trouver, alors je n'ose pas me lancer.

Dommage parce que ton design est plutôt bien jusqu'à maintenant...
Je te propose la structure suivante :

<html>
<head>
<title></title>
</head>
<body>

<div class="conteneur">					<!-- Remplacer par un ID -->

	<div class="header"></div>			<!-- Remplacer par un ID -->
	<div class="header2"></div>			<!-- Supprimer <div> -->

	<div class="menu">				<!-- Remplacer par un ID -->
		<div class="Entete"></div>		<!-- Remplacer par un <h3> ou <h4> -->
	</div>

	<div class="centre">				<!-- Remplacer par un ID -->
		<div class="Entete"></div>		<!-- Remplacer par un <h3> ou <h4> -->
		<div class="TextCentre"></div>		<!-- Remplacer par un <p> -->
		<div class="titre"></div>		<!-- Remplacer par un <h3> ou <h4> -->
		<div class="contenu">			<!-- Laisser tel quel -->
			<div class="TexteDroite"></div>	<!-- Remplacer par un <p> -->
		</div>
	</div>

	<div class="bas"></div>				<!-- Remplacer par un ID -->

</div>

</body>
</html>

Modifié le 11 Dec 2004 - 01:11
j'ai essayer de mettre le conteneur en id, j'ai fait ca dans mp.css:
#conteneur
{
width: 880px;
height: auto;
margin-left: auto;
margin-right: auto;
background:#F5F5F5 ;
}


et ensuite dans le .html j'ai mis ca:
<div id="conteneur">


Et ca marche pas, pourtant c'est bon, nan ?
As-tu tenter de réduire le nombre de divs comme le conseillait Stephan ?
Sinon ce n'est pas modifié en ligne le id="conteneur".
Tu devrais réduire la largeur que tu donnes à ton conteneur, car les résolutions de 800x600 de tes visiteurs auront un scroll désagréable. Tu pourrais tenter :

#conteneur{
   width:760px;
   margin:0 auto;
  }
oui d'accord, mais je que je n'ai pas arrivé a faire, c'est d'apeller le conteneur.
<div id="conteneur"> ne marche pas du tout.
Oui mais si tu ne met pas en ligne, pour que nous puissions voir le résultat, ça va être difficile de voir où tu t'es planté et pourquoi ça ne marche pas.
Bon, j'ai changé des trucs en fonction de ce que m'a dit ElMoustiko et j'ai pas pu faire ca:
a écrit :
<div class="header2"></div> <!-- Supprimer <div> -->

Si je vire le div je met quoi ?

a écrit :
<div class="Entete"></div> <!-- Remplacer par un <h3> ou <h4> -->
ca fait tres moche si je met un h3 ou h4, ca fait super gros.

a écrit :
<div class="titre"></div> <!-- Remplacer par un <h3> ou <h4> -->
pareil que pour mettre un h3 ou h4

J'ai remis en ligne pour que vous voyez: http://e.besson.free.fr/testcss

et pour mieux comprendre ce qu'il y a dans le #centre, j'ai fait une petite image: http://e.besson.free.fr/testcss/mieuxcomprendre.png

(vous remarque que j'ai toujour la meme erreurs.
Sirion a écrit :
ca fait tres moche si je met un h3 ou h4, ca fait super gros.


Euhhh... et tu ne crois pas que ça soit possible de modifier tout ça via CSS ?
Avec font-size par exemple, font-weight, ... Moi je crois bien que si ! Smiley cligne
Modifié le 11 Dec 2004 - 18:45
Sinon, Stephan t'as tout dit, tout corrigé... tu n'as plus qu'à faire le code
Doctype inadapté, nombre de divisions trop important, utilisation des class inadapté
http://forum.alsacreations.com/topic.php?tid=825&fid=4&p=1#p8481

Solution guidée pour corriger ces problèmes :
http://forum.alsacreations.com/topic.php?tid=825&fid=4&p=1#p8513


Grosso modo, tu dois :
Bien construire ta page, utiliser les bonnes balises aux bons endroits.
Le titre d'un site avec un <h1> c'est très adapté, ça fait office de header, h1 étant une balise de type bloc, ensuite pour les titres de page, il faut passer au niveau de titre inférieur, <h2>, puis pour les sous titres, <h3>, et ainsi de suite, pour changer le look, tu fais tout via CSS, font-size, font-weight, ...

Tu n'as pas besoin d'utiliser de div encore par dessus Smiley cligne

Les divs doivent te servir à regrouper des éléments, classiquement, on utiliser une division général qui contient l'ensemble de la page, cette division sera donc unique, il faudrat donc utiliser un ID, <div id="conteneur">
Ensuite tu met ton titre de site (<h1>), ton menu (<ul> se suffit à lui même aussi, pas besoin d'ajouter une division par dessus), il sera à priori unique aussi, donc un ID plutot qu'une class, <ul id="menu">, ensuite le mieux c'est d'utiliser une nouvelle division pour englober tout ce qui est ton contenu, <div id="contenu"> (ID encore puisque ta zone contenu sera elle aussi unique).
Voilà, je pense que là quand même tu as tout ce qu'il te faut.

Penses aussi à changer ton doctype, xhtml1.1 n'est certainement pas adapté. A toi de voir quel doctype te convient le mieux, xhtml1.0 strict, transitionnal, html4.01 strict, transitionnal, ... Pour le choix, Stephan t'as donné un lien assez pratique pour mieux t'y retrouver :
http://pompage.net/pompe/doctype/
Modifié le 11 Dec 2004 - 18:44
J'ai tout fais comme vous m'avais dit, vous en penssez quoi maintenat ?

(le conteneur a une couleur de fond, mais c'est juste pour qu'on le vois)

Et j'ai encore ce problemme, mais seulement avec IE.
Modifié le 11 Dec 2004 - 20:12
Bien Smiley biggrin ça commence à fonctionner sur des navigateurs respectueux des standards, je te conseillerais de réduire la largeur de ton conteneur qui provoque un scroll horizontal en 800x600, ou bien de le mettre en pourcentage.

D'un point de vue pratique et visuel tu devrais (à mon goût) donner un peu d'espace entre les différents éléments.

Pour éviter ton souci avec ton contenu au centre, ne le fait pas flotter, donnes lui une marge externe gauche un peu supérieure à la largeur de ta navigation gauche et tout devrais rentrer dans l'ordre souhaité. Si tu comprends un peu l'anglais vas jeter un oeil sur Floatutorial c'est une mine.

Bien ça prend tournure Smiley lol
je peut pas mettre la largeur du conteneur en 800px, ca ferrai trop petit pour le texte que je voudrais mettre apres (je testerais quand meme voir ce que ca donne) et pareil pour les %, parceque ca sera soit trop grand, soit trop petit.

a écrit :
D'un point de vue pratique et visuel tu devrais (à mon goût) donner un peu d'espace entre les différents éléments.


Tu veut dire agrandire l'espace entre le #centre et les headers et entre les menus ?

et pour le problemme avec le "centre, j'ai trouvé un truc tout bête, c'est de le mettre en float: left et de virer le margin-right, ca marche nickel maintenant (je ne l'ai pas remis en ligne)
Sirion a écrit :
je peut pas mettre la largeur du conteneur en 800px, ca ferrai trop petit pour le texte que je voudrais mettre apres (je testerais quand meme voir ce que ca donne) et pareil pour les %, parceque ca sera soit trop grand, soit trop petit.

Comprends pas Smiley eek . Ton texte va s'inscrire dans la verticalité de ta page, et personnellement quand je suis en 800px de largeur, ça m'embête bien de scroller verticalement et horizontalement. L'objectif c'est satisfaire tes visiteurs par ton contenu et pas les contraindre à s'adapter à la rigidité de ton site Smiley cligne




a écrit :
D'un point de vue pratique et visuel tu devrais (à mon goût) donner un peu d'espace entre les différents éléments.

Tu veut dire agrandire l'espace entre le #centre et les headers et entre les menus ?

Oui mais c'est juste pour faire respirer la page et demeure une question de goût personnel.

a écrit :
et pour le problemme avec le "centre, j'ai trouvé un truc tout bête, c'est de le mettre en float: left et de virer le margin-right, ca marche nickel maintenant (je ne l'ai pas remis en ligne)

Ca peut fonctionner mais tu es obligé de le dimentionner lui aussi et donc de tenir compte très fortement de son conteneur, de son envirronnement et au final cela risque d'influer sur ta méthode de conception.
Conseil, ne pas penser selon les dimensions hypothétiques de tels ou tels contenus que l'on à disposition à un instant t, mais toujours penser à une conception évolutive, ça évite de tout refaire (je l'ai vécu plusieurs fois et c'est ch....)
Modifié le 11 Dec 2004 - 21:22
j'ai fait en sorte que ca fasse pas plus de 800px (j'aurais preferé avec 100 ou 200px de plus mais bon si les 800x600 ca existe toujour)

J'ai espacé un peut, et j'ai reglé le problemme comme je l'ai dit (avec le float: left)

et puis voila, ca doit etre bon maintenant: http://e.besson.free.fr/testcss

Vous en dites quoi ?
Bien ça passe même sur IE Smiley lol
Mais c'est toujours pas "bien" avec 800px de résolution chez ton visiteur, tu indiques pour ton conteneur 800px pour width, la réalité est en deçà: dans l'absolu tous les navigateurs comprennent 800px 'enfin presque tous) mais dans la réalité cette largeur doit aussi tenir compte par exemple de l'apparition du scroll propre au système et au navigateur du visiteur lorsque le contenu est plus haut que la résolution de la fenêtre de ton visiteur. L'idéal serait soit une largeur fixe de disons 760px, soit une dimension de 9x %.
Tu vas dire que je chipote avec la solution de deux block côte à côtes dimensionnés en largeur et "floatant" mais je penses que tu vas vers des déconvenues à l'avenir Smiley cligne .

Bon il manquerait plus qu'un utilisateur de Mac se pointe pour dire que rien ne va plus.

ps:chouette ton avatar Smiley lol
Pages :
Sujet clos
Aller à