28220 sujets

CSS et mise en forme, CSS3

Problème de marge de débutant.

Bonjour,

Je débute les css et j'ai déjà un problème de marge.
Donc dans un bloc A j'ai un autre bloc B qui contient une image et un texte. Je souhaite que le tout soit a une marge de 10 px des bords du bloc B.
Or je me rend compte que le texte et l'image ne sont pas à la même hauteur. Le texte est plus bas. Je note que IE accentue cette différence, mais qu'elle est visible aussi sous Firefox.

Voici un lien ou le problème est visible :

Smiley url http://sunshine.33.free.fr/test/sources/menu/SF.htm[/url]

Voici le code html et celui de la feuille de style :


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Gallerie : Science-Fiction</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="../CSS/gallerie.css" rel="stylesheet" type="text/css">
</head>
<body>

<div class="conteneur">
<!--Début d'un élément de la gallerie-->
<div class="bloc">

	<img class="vignette" src="../../images/galerie/yoda/Yoda_petit.jpg" width="150" height="121"  />
	<div class="texte">
	  <p>Yoda "Un grand guerrier ? Personne par la guerre ne devient grand !" </p>
	<p>Juin 2005 <br>
  		Gamme: Andrea <br>
  		Echelle: 30 mm (Yoda en mesure 20)</p>
	<p>Cette petite figurine sculpt&eacute;e par Joaquin Palacios, de chez Andrea, n'est disponible qu'en Espagne dans des kiosques &agrave; journaux. Cette figurine est pourtant une petite merveille, que je m'empressais de mettre en sc&egrave;ne d&egrave;s son acquisition. </p>
	</div>
</div>
<!--Fin d'un élément de la gallerie-->
</div>

</body>
</html>



La feuille de style :

.conteneur { font-family: 
  Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px; text-align:justify; 
  color: #000000; 
  text-decoration:none;
  width:800px;
 } 
 
.bloc {
 
 border-top-color:#669900;
 border-bottom-color:#669900;
 border-left-color:#669900;
 border-right-color:#669900;
 
 padding-top: 10px;
 padding-left: 10px;
 padding-right: 10px;
}

.bloc:hover{
 background-color:#FF9933;
 
 border-top-style: solid;
 border-bottom-style: solid;
 border-left-style: solid;
 border-right-style: solid;
 
 border-top-width:thin;
 border-bottom-width:thin;
 border-left-width:thin;
 border-right-width:thin;
}

.vignette {
float: left;
}

.texte {
margin-top: 0px;
margin-left: 200px;
}


Merci à tout ceux qui me liront et encore plus a ceux qui pourrait m'apporter une réponse

PS : pour ceux qui peuvent faire letest, vous verrez que sous firefox il y a un effet de hover directement sur un block, mais que cet effet n'est pas visible sous IE. Donc si en plus au passage vous avez un réponse pour ca, c'est du bonus Smiley cligne Smiley biggrin
Bonjour,

Ben pour l'alignement je ne suis pas sur. En effet, mon image et mon texte sont aligné et l'image est bien a gauche comme je le souhaite. C'est plutot le systeme de marge qui m'ettone car l'image et le texte qui ont finalement un meme statue par rapport au block ne sont pas aligné en hauteur.

Pour le systeme de hover je ne suis pas persuadé non plus. Dans mon cas il n'y a pas forcement un lien. Je souhaite que le hover puisse se faire sur un div sans qu'il n'y ait un lien dedans. Dans le lien donné c'est un exemple ou il faut un lien.

Je peux trés bien avoir mal compris, et peut etre que c'est lien répondent à mes problèmes. Mais avec mon niveau actuel je n'arrive pas a y voir mes réponses. C'est donc avec beaucoup d'humilité que je sollicite encore votre aide.

Merci
pour ce qui est du hover, je pense que sous IE cela ne fonctionne uniquement avec des liens (malheureusement...)
Ta marge vient de l'élément p, tu peux la mettre à zéro en rajoutant le code suivant
p {padding: 0; margin: 0;}

Modifié par hannah (23 Nov 2005 - 09:27)
Une derniere question svp :

Je fais apparaitre le contour du bloc qui contient l'image et le texte :
Probleme, le bloc n'encadre pas l'image. Ce n'est pas normal non ?
je pense que c'est du au float, le bloc n'utilise que le texte pour définir la hauteur et ton image est plus haute que le bloc de texte. Cela ne se voyait pas tant qu'il y avait les marges. Tu peux contourner cela en définissant une hauteur du bloc ou en mettant ton .bloc en float

.bloc {height: 130px;}


ou

.bloc {float: left;}
Heu je n'y arrive pas.

Voila j'ai un peu modifié le code.
J'ai donc mon bloc avec la precision float, j'indique des marges pour le contenu de 10px et je met les contours en solide.

Ensuite pour l'image et le texte je met position en absolue pour pouvoir les poisitionner par rapport au block ( je fais ca par défaut car j'arrive pas encore a positionner le texte par rapport à l'image).

Voici un lien vers le visuel et les codes sources :


http://sunshine.33.free.fr/test/sources/menu/SF.htm

Css : 

.conteneur { 
  font-family: 
  Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px; text-align:justify; 
  color: #000000; 
  text-decoration:none;
  width:800px;
 } 
 
.bloc {
 float: left;  
 
 padding-top: 10px;
 padding-left: 10px;
 padding-right: 10px;
 padding-bottom: 10px;
 
 border-top-style: solid;
 border-bottom-style: solid;
 border-left-style: solid;
 border-right-style: solid;
 
 
}


.vignette {
	position: absolute;
	float: left;
}

.texte {
 position: absolute;
 margin-left:200px;
}

p {
 padding: 0;
 margin: 0;
}


Html :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Gallerie : Science-Fiction</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="../CSS/gallerie.css" rel="stylesheet" type="text/css">
</head>
<body>

<div class="conteneur">
<!--Début d'un élément de la gallerie-->
<div class="bloc">

	<img class="vignette" src="../../images/galerie/yoda/Yoda_petit.jpg" width="150" height="121"  />
	<div class="texte">
	  <p>Yoda "Un grand guerrier ? Personne par la guerre ne devient grand !" </p>
	<p>Juin 2005 <br>
  		Gamme: Andrea <br>
  		Echelle: 30 mm (Yoda en mesure 20)</p>
	<p>Cette petite figurine sculpt&eacute;e par Joaquin Palacios, de chez Andrea, n'est disponible qu'en Espagne dans des kiosques &agrave; journaux. Cette figurine est pourtant une petite merveille, que je m'empressais de mettre en sc&egrave;ne d&egrave;s son acquisition. </p>
	</div>
</div>
<!--Fin d'un élément de la gallerie-->
</div>

</body>
</html>


Si vous m'expliquez ca je fait l'effort de plus vous embeter pedant au moins ... 10 minutes Smiley cligne
Merci
chez moi ceci fonctionne:

p {margin: 0;
	padding: 0;
}
.conteneur { font-family: 
  Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px; text-align:justify; 
  color: #000000; 
  text-decoration:none;
  width:800px;
 } 

 

.bloc {
 float: left;
 border-top-color:#669900;
 border-bottom-color:#669900;
 border-left-color:#669900;
 border-right-color:#669900;
 padding-top: 10px;
 padding-left: 10px;
 padding-right: 10px;
}



.bloc:hover{
 background-color:#FF9933;
 border-top-style: solid;
 border-bottom-style: solid;
 border-left-style: solid;
 border-right-style: solid;
 border-top-width:thin;
 border-bottom-width:thin;
 border-left-width:thin;
 border-right-width:thin;
}


.vignette {
float: left;
}


.texte {
margin-top: 0px;
margin-left: 200px;
}

Modifié par hannah (23 Nov 2005 - 10:51)
Ben chez moi, si dans le block je rajoute les contours en solide (pas dans le hover, mais directement au block) ben les contours n'englobent pas l'image.

Chez toi c'est le cas ?

Merci
quand je remplace dans le code que j'ai mis plus haut .bloc par ce qui suit cela fonctionne. Mais je n'ai pas donné une position absolue au texte.

.bloc {

 float: left;

border: 1px solid #669900;

 padding-top: 10px;

 padding-left: 10px;

 padding-right: 10px;

}
Salut,

Bon ca fonctionne mais j'aimerai bien que tu m'éclaire sur un ou deux points stp Smiley cligne

Sous IE et FierFox mon image est bien dans le cadre. Par contre sous IE elle touche le cadre et pas sous Firefox, comme s'il y avait une marge 10px pour bottom qui n'est pourtant pas préciser. SI j'ajoute dans le bloc le padding-bottom 10px alors sous IE nickel, j'ai bien un espace entre le bloc et contenu de 10px partout avec l'image et le texte, par contre sous firefox ca aggrandit l'espace qui était déja présent.
Comment cela se fait il ?

PS : quesiton bonus : le positionnement du texte peut il se faire par rapport a l'image ? j'ai esayé différent truc donc relative, absolute etc ... mais non ! Smiley decu

En tout cas merci de ton aide et du temps que tu m'as consacré Smiley smile
Apparement chez FF les marges ne s'unissent pas, et sous IE bien.
Ce que tu peux faire, c'est annuler la marge dans le bloc et mettre un padding sur l'image et sur le bloc texte, cela donne un css suivant:
body {behavior:url(".csshover.htc"); }

p {
 margin: 0;
 padding: 0px;
}

.titre {
margin: 0;
padding: 0;
font-weight : bold ;
}

.conteneur { 
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px; 
  text-align:justify; 
  color: #000000; 
  text-decoration:none;
  width:800px;
 } 

.bloc {
 float: left;
 padding: 0;
 border: 1px solid #fff;
}

.bloc:hover{
 background-color:#66FF99;
 border: 1px solid #66CC33;
 border-width:thin;
}

.vignette {
float: left;
padding: 10px 0 10px 10px;
}

.texte {
padding: 10px 10px 10px 0;
margin-left: 200px;
}

Le problème de la hauteur du box et de l'image, c'est que comme l'image est en float elle sort du flux normal de la page. Une solution est de définir le box parent en float (un élément flottant prend les dimensions de ses descendants).
Salut à toi,

déjà, je pense que tu surcharge ton code en balises DIV. Les div c'est bien, mais faut pas en abuser. exemple

<div class="bloc">



	<img class="vignette" src="../../images/galerie/yoda/Yoda_petit.jpg" width="150" height="121"  />

	<div class="texte"> <!--balise en trop-->

	  <p>Yoda "Un grand guerrier ? Personne par la guerre ne devient grand !" </p>

	<p>Juin 2005 <br>

  		Gamme: Andrea <br>

  		Echelle: 30 mm (Yoda en mesure 20)</p>

	<p>Cette petite figurine sculpt&eacute;e par Joaquin Palacios, de chez Andrea, n'est disponible qu'en Espagne dans des kiosques &agrave; journaux. Cette figurine est pourtant une petite merveille, que je m'empressais de mettre en sc&egrave;ne d&egrave;s son acquisition. </p>

	</div><!--balise en trop-->

</div>



Pourquoi remetre une div texte alors que tu peux appliquer un style à ta balise p. Ton float sera d'autant meilleur et tu n'aura pas ce problème de déqualage avec l'image. Je serai toi, j'enleverai le padding de la vignette.

Utilise le moins possible les padding qui sont interprété différement sous ie et firefox.

pour ton code html, je mettrai :




	<img class="vignette" src="../../images/galerie/yoda/Yoda_petit.jpg" width="150" height="121"  />

	  <p>Yoda "Un grand guerrier ? Personne par la guerre ne devient grand !" </p>

	<p>Juin 2005 <br>

  		Gamme: Andrea <br>

  		Echelle: 30 mm (Yoda en mesure 20)</p>

	<p>Cette petite figurine sculpt&eacute;e par Joaquin Palacios, de chez Andrea, n'est disponible qu'en Espagne dans des kiosques &agrave; journaux. Cette figurine est pourtant une petite merveille, que je m'empressais de mettre en sc&egrave;ne d&egrave;s son acquisition. </p>


pour les css : 


.vignette {

float: left;

margin: 0 10px 10px 10px;

}


J'appliquerai ensuite un padding:10px à ta div "bloc" pour pas que le texte et l'image soient au bord de la div.

Au passage, le bloc:hover ne fonctionnera que sous FF.

Je sais pas si je suis clair, c'est ma première intervention ici en tant qu'apporteur de solution.
Sujet clos
Aller à