28172 sujets

CSS et mise en forme, CSS3

Bonjour, voici le message modifié
(note pour le modérateur: les boutons "Code" et autre n'apparaissent pas sur Safari dans la partie Editer du forum).
Donc le problème consiste simplement à placer un bloc à droite du bloc qui s'appelle ".prodcadreimage" sur IE7.

Un grand merci d'avance pour votre aide précieuse!

Voici le code:

Dans le CSS:

.prodcadregris-out {
	padding-top: 180px;	/* c'est le min-height (180px) */
	min-height: 1px;	/* pour Opera */
	border: solid 3px #e1e2dc;
}

.prodcadregris-in {
	margin-top: -180px;	/* compense le padding-top) */
}

.prodcadreimage {
	float: left;
	margin-right: 10px;
}

.prodcadreimage img {
    border: 1px solid #e1e2dc;
    padding: 2px;
	margin: 2px;
}

.petitesimages {
	clear: both;
}
.prodcontenu {
	padding: 3px;	
}


Dans la page:


<div class="prodcadregris-out">
		<div class="prodcadregris-in">
			<div class="prodcadreimage">
					<a href="img-produit/lich.jpg" rel="lightbox[roadtrip]" title="Livre Switzerland en 3 langues 
					et accompagné d'un CD-Rom contenant 700 photos et un livre interactif en 6 langues">
					<img src="img-produit/lich.jpg" alt="image" width="110" height="110" /></a>
				<div class="petitesimages">
					<a href="img-produit/lich2.jpg" rel="lightbox[roadtrip]" title="Livre Switzerland - exemple intérieur">
					<img src="img-produit/lich2.jpg" alt="Livre Switzerland - exemple intérieur" width="25" height="25" /></a>
					<a href="img-produit/lich3.jpg" rel="lightbox[roadtrip]" title="Livre Switzerland - exemple intérieur">
					<img src="img-produit/lich3.jpg" alt="Livre Switzerland - exemple intérieur" width="25" height="25" /></a>								<a href="img-produit/lich4.jpg" rel="lightbox[roadtrip]" title="Livre Switzerland - exemple intérieur">
					<img src="img-produit/lich4.jpg" alt="Livre Switzerland - exemple intérieur" width="25" height="25" /></a>		
				</div>				
			</div>
			<div class="prodcontenu">
				<span class="livretitre">Livre "Switzerland"</span><br />
				<span class="livretexte">Ce livre vous propose une petite balade en Suisse en trois langues
				 (FR/D/EN) à travers ses paysages et son histoire. Sur le CD-ROM: 700 images, une vidéo, un livre 
				 interactif en 6 langues (FR/D/EN/IT/CHIN/JAP), utilitaires: ExtensisPortofolio, Acrobat Reader, QuickTime.
				 </span><br />
				<span class="livredescription">(128 pages) dos collé, couv. souple</span> <span class="livreprix">Fr. 29.-
				</span><br />
				<span class="livretexte">Supplément pour couverture cartonnée rigide. Fr. 20.-</span><br />
				<span class="livretexte">Rabais de quantité sur demande.</span><br />
				<a href="form-commandeproduit.php" title="Commander"><img src="img/bt-commande.gif"></a>
				<a href="form-plusdinfoproduit.php" title="Plus d'infos"><img src="img/bt-plusdinfo.gif"></a>
				<a href="actualite.php" title="En promo"><img src="img/bt-promo-20.gif"></a>
			</div>
		</div>	
</div>



Merci d'avance
Modifié par no-vice (12 Sep 2008 - 09:38)
Bonjour à toi aussi Smiley smile

Le code entre balises [ code ] please... (désolé d'usurper la mission salvatrice des mods mais entre midi et deux ils aussi ont le droit de pauser)
Modifié par Arsene (10 Sep 2008 - 13:24)
Hello et bienvenue sur le forum Smiley cligne ,

si ce que te dit Arsene est un peu ésotérique voici le "message type" pour clarifier cela :

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 qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait donc courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile
Merci pour la remarque, et désolé...
C'est vrai que j'ai lu les règles en version rapide.
Je vais modifier mon message.

Cependant je ne vois pas les boutons dont vous me parlez.
Je suis sur Safari. Et en plus j'ai cherché à me connecter depuis firefox mais je ne trouve pas comment me connecter par mon identifiant (pour modifier ma mise avec Firefox).

Désolé de vous prendre la tête. Merci de votre patience.
Heyoan a écrit :
Ben ça dépend du rendu souhaité mais je verrais bien un margin-left sur div.prodcontenu


Oui, c'est une bonne idée. En fait j'ai résolu le problème qui provenait d'un float: right qui traînait dans le code du contenu de la page. ça rendait tout opération de float impossible.

Merci pour votre coup de main, problème résolu et le site est en ligne.