28221 sujets

CSS et mise en forme, CSS3

[Résolu]PB avec margin-top dans un bloc DIV sur mozilla

Pages :
Bonjour à tous,

Voilà j’ai un petit PB avec le margin-top qui se trouve dans un autre bloc.
J’ai un bloc que j’ai appeler menu, dans celui ci y a plusieurs bloc dont un qui doit avoir une margin-top de 5px, tout marche bien sauf que sur mozilla il ne me donne pas ce que je veux.
Les 5px me décale tout le bloc menu de 5px au lieu de 5px du bloc4 dans le bloc menu (j’espère que je suis claire dans ce que je dit).
J’ai fait tout le tour de la question mais je n’y arrive pas. Si quelqu’un vois la solution…
Merci par avance de votre aide.

Voici l’url du site en question.
lamounede
Salut,

Tu peux pas mettre le bout de code car même si j'ai vu dans ta source quel était le bloc 4, avec le code conscerné et la CSS ce serait plus simple.
Ok, désoler, autant pour moi.
Voici le code HTMl

<body>
<div class="band">
<div class="band2"></div>
<div class="band4">
<div id="container"> 
      <ul id="list">
        <li><a href="accueil.html">Accueil</a> </li>
        <li><a href="prog.html">Programmation</a></li>
        <li><a href="autoure.html">Autour de la programmation</a></li>
        <li id="active"><a href="#">D'une parole à l'autre</a></li>
        <li><a href="salle.html">La salle</a></li>
        <li><a href="resto.html">Le restaurant</a></li>
        <li><a href="retro.html">Retro 2004</a></li>
      </ul>
</div> 
</div>
</div>

  <div class="conteneur">
    <div class="haut">
	<div class="band3"><h1></h1></div>
	</div> 
      <div class="menu">
	  <div class="bloc4">Rencontre avec :</div>
	  <div class="bloc5">
	  <div class="bloc8"> </div>
     </div>
	  <div class="bloc6"></div>
	  </div>
    <div class="frame">
	 <h1 style="display: none;">La mounède</h1>
	<div class="bloc2"><p class="p1">Présentation</p></div>
	<div class="bloc">
	  <p class="p"> </p>
  </div></div>
  <div class="bas"> 
    <div class="blocbas3">|<a href="index.html" class="lien">Home</a>||<a href="intro.html" class="lien">Revoir 
      l'INTRO</a>||<a href="info.html" class="lien">Infos pratiques</a>||<a href="liens.html" class="lien">Liens</a>||<a href="mailto:lamounede@wanadoo.fr" class="lien">Ecrivez-nous</a>||Tél 
      : 05 34 60 36 49||&copy; 2004 La Moun&egrave;de. Tous droits r&eacute;serv&eacute;s.|</div>
  </div>
</div>
</body>
</html>


Et le CSS
/*code pour le site*/
.conteneur { 
width: 770px;
margin-left: auto;
margin-right: auto;
text-align: left; 

}

.haut {
float: left;
width: 770px;
text-align: left;
background-color : #FEA941; 

}

.band3 {
height: 17px;
float: left;
width: 770px;
text-align: center;
background-color : #FEA941; 
color: #000;
border-bottom : 1px solid white;

}

.menu {
float: left;
width: 200px;
height: 460px;
background-color:#47869A;
background-image: url(images/fondtext-3.jpg);

}

.frame {
	float: left;
	width: 570px;
	height: 460px;
	background-image: url(images/fondtext-2.jpg);
	background-color: #47869A;
	overflow: auto;
}

.bas {
float: left;
width: 770px;
height: 20px;
background-color: #FEA941;
text-align: right; 
border-bottom: 1px solid #fff;
border-top: 1px solid #fff;
color: #000;
}

/*bloc4 et 5*/

.bloc4 {
	width: 190px;
	height: 15px;
	margin-top: 5px;
	margin-bottom: 0px;
	margin-left: 4px;
	background: #346170;
	text-align: center;
	border: 1px solid #d1e1e7;
	color: #fff;
	font-weight: bold;
}
.bloc5 {
	width: 190px;
	height: 420px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 4px;
	text-align: left;
	border-top: none;
	border-left: 1px solid #D1E1E7;
	border-right: 1px solid #D1E1E7;
	border-bottom: 1px solid #D1E1E7;
	color: #fff;
	
}


Voilà, voili
je ne suis pas un expert mais ton code html avec tou ces <div> dans tous les sens me semble difficile à relire. ils seraient alignées que cela serait plus clair.
<div>
<div>
blabla
</div>
</div>
As-tu passé tes fichiers au verificateur du W3C ?
A+ Smiley cligne
@alibaba : tu peux éditer ton post (en haut à droite de ce dernier) et merci d'utiliser [ code][/code ] (sans les espaces) pour que les codes soient plus lisibles.
Administrateur
alibaba a écrit :
Punaise, j'avais mis des decalage devant mon exemple et cela les fait sauter à l'affichage Smiley fache

Oui parce que tu ne l'as pas déclaré en CODE (voir post de Stephan) Smiley cligne
a écrit :
As-tu passé tes fichiers au verificateur du W3C ?

Oui mon site est parfaitement valide chez W3C
Tu pourrais pas faire un screenshot et nous montrer clairement à quel endroit ca merde parceque j'avoue ne pas voir ce qui cloche Smiley ohwell
Ayuget a écrit :
Tu pourrais pas faire un screenshot et nous montrer clairement à quel endroit ca merde parceque j'avoue ne pas voir ce qui cloche Smiley ohwell

Ben ouvre le site sur IE puis sur MOZ et tu verra ce qui cloche.
C'est une capture d'écran. Avec la touche "print screen" ou "impr écran" en haut à droite du clavier après F11, F12
Ensuite tu ouvres un éditeur d'image (photoshop, firework, paint, ...) et tu fais édition> coller ou clique droit > coller et ça fait l'image de ton écran.

Donc en faisant une capture d'écran tu peux nous faire visualiser le problème au cas où ça ne cloche pas chez nous Smiley cligne
Bonjour,

C'est ton margin-top de 5px sur le bloc4 qui fait cela.

Met un padding-top: 5px sur menu et cela devrait aller. Tu vas pousser le contenu sans influencer sur le démarrage du background de fond.

Pffff 20 minutes que j'y suis...

Avec tous ces blocs, tu ne simplifie pas le travail ! Il y a des Calques qui se perdent !

Smiley cligne
juliofromlille a écrit :
Bonjour,
Met un padding-top: 5px sur menu et cela devrait aller. Tu vas pousser le contenu sans influencer sur le démarrage du background de fond.


Bonjour et bon dimanche à toi juliofromlille.
Ben on s'approche un peu Smiley biggrin , c'est régler pour le décalage en haut, mais pas en bas. Mais je vais y bosser dessus cet aprém (y a sûrement des DIV à viré Smiley cligne ).

Pour ce qui est des DIV je sais que j'en ai trop fait, mais ce site a été fait l'an dernier et c'était mon 1er en CSS total. C’est en faisant la mise à jours et en passant mon CSS sur W3C que je me suis rendu conte de ce PB. Et comme c'est écrie sur openweb
a écrit :
Le manque de temps fait aussi que, bien souvent, on ne retire pas les calques inutiles d'une maquette

J’ai quelques sites en attente, une fois terminer, je corrigerais avec les nouvelles armes que j’aurais acquis.

Merci encore.
Re bonjour.

Et pour en bas fais pareil, met un padding-bottom et cela devrait le faire. Ce genre de problème se résolve toujours avec des margin ou padding mal appliqués. A savoir aussi que tu peux y aller à coup de chiffres négatif de temps à autre. Il suffit juste de savoir lequel est conscerné.

Pour la sur-multiplication des calques, ca viendra, au fur et à mesure tu les élimineras.

Bon dimanche.

Et oubli pas le [résolu] dans le titre de ton message Smiley langue
Modifié le 28 Nov 2004 - 11:42
Pages :
Sujet clos
Aller à