28172 sujets

CSS et mise en forme, CSS3

Bonjour à toutes et à tous,
Une image vaux mieux qu'un long discours, l'espace indésirable est indiqué par la flèche rouge sur l'images.
upload/23311-Capture01.jpg
Voilà le code HTML

  <div id="Contenu_Droite">
    <div id="Balade_du_mois_Header"><img src="images/balade_du_mois_header.gif" width="228" height="20"></div>
    <div id="Balade_du_mois_Bloc">
    <span class="Balade_du_mois_Titre">BLANZY</span><br>
    <span class="Balade_du_mois_Boucle">“Blanzy-Le Plessis” - 12,6 Km<br>
 “Blanzy-Montchevrier” - 7,5 Km</span>
    <p class="Balade_du_mois_Texte">Bienvenue à Blanzy ! Baignée par le Canal du Centre, la ville possède une histoire longue et riche. Déjà, l’homme de Néanderthal y vivait. Au XIXème siècle, la cité a connu un formidable essor industriel et démographique. Aujourd’hui encore, on peut voir les vestiges de ce glorieux passé : mines, verreries ou fours à chaux.</p>
    <img src="images/bateau_blanzy.jpg" alt="Blanzy" width="140" height="105" hspace="4" vspace="4">
    <p class="Balade_du_mois_Texte">Des espaces culturel et nautique.
Allez admirer le château privé du Plessis, datant du XIIIème siècle où la résistante Lucie Aubrac vécut durant son enfance. Le Musée de la Mine (voir p. 8) où vous pourrez également vous familiariser avec l’art contemporain, en allant jeter un œil au travail d’Ambroise Monod. Enfin, quoi de plus agréable que d’aller se promener le long du Canal du Centre ou de pêcher au Barrage de la Sorme ? Profitez de ces lieux calmes, reposants et pleins de charme !<br>
<a href="BALADE DU MOIS BLANZY.pdf">Téléchargez la balade</a>.</p><br>
    </div><!-- End Balade_du_mois_Bloc -->
    <div id="Balade_du_mois_Bottom"><img src="images/balade_du_mois_bottom.gif" width="228" height="9"></div>
  </div><!-- End Contenu_Droite -->



#Balade_du_mois_Header {
	height: 20px;
	width: 228px;
	margin-right: auto;
	margin-left: auto;
}
#Balade_du_mois_Bloc {
	height: 200px;
	width: 220px;
	margin-right: auto;
	margin-left: auto;
	background-color: #CCC;
	overflow: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-right: 4px;
	padding-left: 4px;
}
#Balade_du_mois_Bottom {
	width: 228px;
	margin-right: auto;
	margin-left: auto;
	height: 9px;
	margin-top: 0px;
	margin-bottom: 0px;
}
.Balade_du_mois_Titre {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 0.8em;
	font-weight: bold;
	color: #Eb6a0a;
}
.Balade_du_mois_Boucle {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 0.7em;
	color: #eb6a0a;
}
.Balade_du_mois_Texte {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 0.7em;
	color: #000;
	padding: 0px;
	margin: 0px;
	text-align: left;
}


Merci d'avance.
Salut,

Essaie de mettre un display: block; dans #Balade_du_mois_Bottom, si ça marche toujours pas essaie un margin: 0px et/ou padding: 0px.
Salut,
le 'display: block' n'apporte rien, ni le padding à zéro et le margin à zéro.
C'est vraiment bizarre, car j'utilise la même construction ailleurs dans le site et je n'ai pas de problèmes.
Plutôt que d'inclure ton image dans le code XHTML, pourquoi ne pas la mettre en arrière-plan de ton bloc dans ta CSS ? ça pourrait te permettre de positionner cette image en top center par exemple.

Je te conseille de mettre des bordures sur tes blocs, histoire de voir si ça vient de l'image ou des blocs en eux-mêmes.

Ou sinon bug connu sous IE 6, il faut que tu spécifies la hauteur du texte (qui donc doit être inférieure à 9px) dans ton #Balade_du_mois_Bottom , sinon IE met automatiquement une hauteur de la taille du texte... même s'il n'y a pas de texte. Smiley biggol
Problème résolu en mettant l'image en background dans le div associé.
Merci.
Modifié par luxojr (20 Apr 2010 - 11:10)