28112 sujets

CSS et mise en forme, CSS3

Positionner correctement un sprite dans un DIV

Salutations,

Je galère pas mal à essayer de positionner correctement un sprite re-dimensionné (Scale) dans une grille de DIV.

Voila un bout de l'HTML :

(...)
	<div class="bloc">
		<div class="gauche">
               (...)
		</div>
		<div class="droite">
			<!-- Ligne 1 !-->
			<p class="image"><a class="sprite logos wda"></a></p>
			<!-- Ligne 2 !-->
			<p class="ligne alignr">Agent&nbsp;:&nbsp; <?php echo '<select name="' . $tblInfoColum['Ref']['name'] . '">';
			foreach ($tblInfoColum['Ref']['enum'] as $value) {
				$value = htmlspecialchars($value);
				echo '<option value="' . $value . '"'; if($value== "?"){echo' selected="selected"';} echo '>' . $value . '</option>';
			}
			echo '</select>'; ?>
			</p>
			<!-- Ligne 3 !-->
                       (...)
		</div>
	</div>
(...)


Et le CSS correspondant :

(...)
/* Sous-blocs */
.bloc {
	width: 600px; /* Largeur ensemble des cellules du bloc */
	margin: 5px auto 5px auto; /* Centraliser le bloc sur le container */
	position: relative;
}

.ligne {
	display: block;
	line-height: 20px;
	margin: 2px 0px; /* Espacement des lignes */
	font-size: 13px;
}

.image {
	display: block;
	height: 48px; /* Hauteur de la cellule logo */
	margin: 0px;
	padding: 0px;
}

/* Cote gauche */
.gauche {
	float: left;
	width: 300px;
}

/* Cote droit */
.droite {
	float: right;
	width: 300px;
}

.alignl {
	text-align: left;
}
.alignr {
	text-align: right;
}

p {
	margin: 0px;
}

form > div {
	clear: both;
	overflow: hidden;
}

textarea, select, input[type=text] {
	border-radius: 5px;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-right: 1px solid #eee;
	border-bottom: 1px solid #eee;
}

textarea {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
	resize:vertical;

}

/* Definition des sprites */
.sprite {
	background-position: 0 0;
	background : url("http://www.monurl.com/Sprites-1.png");
	background-repeat: no-repeat;
}
/* Decoupe des sprites */
/* Hauteurs */
.logos { height : 125px; }
/* Logos */
.maillage {
	width : 151px;
	background-position : 0px 0px;
	transform:scale(0.5);
}
.wda {
	border: 1px solid #000000 ;
	border-radius: 30px;
	width : 121px;
	background-position : -151px 0px;
	-ms-transform: scale(0.3,0.3); /* IE 9 */
    -webkit-transform: scale(0.3,0.3); /* Safari */
	transform: scale(0.3,0.3);
	position: absolute;
	top: -40px;
	right: -40px;
}
(...)


Je cherche à faire en sorte en fait que la ligne "image" de droite de la grille soit considérée comme une ligne "ligne", afin que je puisse correctement positionner mon "sprite wda" tout en haut à droite du formulaire.

J'ai beaux rajouter des border partout pour debugguer, je ne vois pas comment faire autrement que ma manière, qui, je pense, n'est pas la bonne...

Auriez-vous des idées ? Des conseils ?

Merci de votre aide...
Bonsoir Casio,
j'ai regardé un peu ton pb et il me semble que c'est ta méthode pour réduire l'image que tu veux afficher qui te complique la vie...En testant ton code chez moi j'ai constaté que si ton image est bien divisé d'un facteur trois les dimensions du tag (à l'occurrence "a" une ancre) ne change pas d'où ton utilisation du display absolute et de coordonnées pour placer ton image exactement où tu veux...
Tu peux plus simplement réduire ton image en utilisant le tag "img" de la façon suivante:
<p class="image"><a href=""><img src="http://www.monurl.com/Sprites-1.png" width="40" height="40" class="wda"/></a></p>

J'ai mis 40 car tu fais un scale de 0.3 sur ton image de 121px et j'ai redéfini tes class :

.wda {
	border: 1px solid #000000 ;
	border-radius: 10px;
        float: right;
}


Bonne continuation
Modifié par GJboba (06 Apr 2017 - 00:37)
Bonjour,

merci de ce retour.

Par contre, 2 jours que je tourne le truc dans tous les sens : Impossible de bien découper avec votre méthode mes sprites.
C'est dommage, car l'idée du float: right; semblait mieux rendre que mon histoire d'Absolute/relative, mais mes images ne sont absolument plus découpées correctement, et pourtant, j'ai essayé...
J'ai même testé en rajoutant des object-fit ou object-position ...

Il ne manque rien dans le CSS ?
Je ne sais pas si tu as résolu ton pb mais comme il est jamais trop tard pour bien faire je te post le code complet de la page html comme cela tu pourras peut-être voir ce qui ne va pas car chez moi elle fonctionne correctement,
cordialement,

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            /* Sous-blocs */
.bloc {
	width: 600px; /* Largeur ensemble des cellules du bloc */
	margin: 5px auto 5px auto; /* Centraliser le bloc sur le container */
	position: relative;
}

.ligne {
	display: block;
	line-height: 20px;
	margin: 2px 0px; /* Espacement des lignes */
	font-size: 13px;
        border: solid 1px red;
}

.image {
	display: block;
	height: 48px; /* Hauteur de la cellule logo */
	margin: 0px;
	padding: 0px;
        border: solid 1px cyan;
}

/* Cote gauche */
.gauche {
	float: left;
	width: 300px;
        border:solid 1px yellow;
}

/* Cote droit */
.droite {
	float: right;
	width: 300px;
        border: solid 1px green;
}

.alignl {
	text-align: left;
}
.alignr {
	text-align: right;
}

p {
	margin: 0px;
        vertical-align: top;
}

form > div {
	clear: both;
	overflow: hidden;
}

textarea, select, input[type=text] {
	border-radius: 5px;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-right: 1px solid #eee;
	border-bottom: 1px solid #eee;
}

textarea {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
	resize:vertical;

}

/* Decoupe des sprites */
/* Hauteurs */
.logos { height : 125px; }
/* Logos */
.maillage {
	width : 151px;
	background-position : 0px 0px;
	transform:scale(0.5);
}
.wda {
	border: 1px solid #000000 ;
	border-radius: 10px;
        float: right;
}
        </style>
    </head>
    <body>
        <div class="bloc">
		<div class="gauche">
		</div>
		<div class="droite">
			<!-- Ligne 1 !-->
                        <p class="image"><a href=""><img src="images/tonimage.png" width="40" height="40" class="wda"/></a></p>
			<!-- Ligne 2 !-->
			<p class="ligne alignr">Agent&nbsp;:&nbsp; 
                        <!--?php echo '<select name="' . $tblInfoColum['Ref']['name'] . '">';
			foreach ($tblInfoColum['Ref']['enum'] as $value) {
				$value = htmlspecialchars($value);
				echo '<option value="' . $value . '"'; if($value== "?"){echo' selected="selected"';} echo '>' . $value . '</option>';
			}
			echo '</select>'; ?-->
			</p>
			<!-- Ligne 3 !-->
		</div>
	</div>
    </body>
</html>
Sujet clos
Aller à