28172 sujets

CSS et mise en forme, CSS3

Responsive : Centrer une image

Bonsoir,

J'ai essayé tant bien que mal à centrer mon image quand ma fenêtre passe à 562px de largeur mais rien n'y fait. Elle ne bouge pas. Le texte lui descend bien sous l'image, mais l'image ne réagit absolument pas.

Merci d'avance pour votre aide Smiley cligne 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document sans nom</title>
<link rel="stylesheet" href="style2.css">
</head>

<body>
	<article id="presentation">
    	<div id="chalet-logo"><img src="/images/Logos/Logo-Chalet-Green.png">
		</div>
        
		<div class="Introduction">
        	<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam plopa !</h1>
			<p>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident</p>
        <p>consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem sed quia. </p>
        </div>
	</article>
</body>
</html>



@charset "utf-8";
/* CSS Document */

@media screen AND (max-width: 562px){
#presentation {
	max-width:562px;
	margin-top:-10px;
	overflow:hidden;
}
	
#chalet-logo {
	padding-bottom: 10px;
	text-align: center;
}

div.Introduction {
	max-width:562px;
	float:left;
	text-align:justify;
	padding-right:10px;
	padding-left:10px;

}

}

#chalet-logo {
	width: 250px;
	margin-right: 20px;
	padding-bottom: 10px;
	float: left;
}

h1 {
	font-size:17px;
}


#presentation {
	max-width:960px;
	display:block;
	text-align:justify;
	margin-top:-10px;
	overflow:hidden;
}

div.Introduction {
	max-width:960px;
	text-align:justify;
	margin-top:38px;
	padding-right:10px;
	padding-left:10px;

}
upload/49833-Logo-Chale.png
Modifié par Eatmycut (06 Jul 2013 - 00:36)
Quelles-sont les dimensions de ton image ? Tu peux changer directement la largeur de celle-ci en passant par du CSS mais est-ce souhaité ?
menardany a écrit :
ajouter :

#chalet-logo {
margin:0 auto;
}


là où le centrage est désiré.


J'ai déjà essayé, ça ne fonctionne pas.

Zelalsan a écrit :


Quelles-sont les dimensions de ton image ? Tu peux changer directement la largeur de celle-ci en passant par du CSS mais est-ce souhaité ?



Je ne sais pas si tu as vu mais j'ai upload l'image dans le post. Elle fait 261px x 268px.
Effectivement, je ne souhaite pas modifier la taille de l'image, je voudrais seulement qu'elle soit centrée par rapport à la largeur de la fenêtre.

Ci-dessous le resultat :

upload/49833-demo.png

J'ai aussi fait un petit truc vite fait en svg pour voir :

http://codepen.io/anon/full/Jjuni

J'ai essayé avec une div avant le svg, mais l'image reste inchangée. Il n' a que l'id du svg qui rentre en compte.
Modifié par Eatmycut (06 Jul 2013 - 11:44)
Bonjour,

Il faut être plus rigoureux.
Vous définissez une première fois votre identifiant :
#chalet-logo {
	padding-bottom: 10px;
	text-align: center;
}

À supprimer l'accolade orpheline...
}

Puis une seconde fois...
#chalet-logo {
	width: 250px;
	margin-right: 20px;
	padding-bottom: 10px;
	[b]float: left;[/b]
}

Soit c'est flottant à gauche, soit c'est centré...
Et pour du centrage horizontal, une solution vous à déjà été fournie Smiley cligne
6l20 a écrit :
Bonjour,

Il faut être plus rigoureux.
Vous définissez une première fois votre identifiant :
#chalet-logo {
	padding-bottom: 10px;
	text-align: center;
}

À supprimer l'accolade orpheline...
}

Puis une seconde fois...
#chalet-logo {
	width: 250px;
	margin-right: 20px;
	padding-bottom: 10px;
	[b]float: left;[/b]
}

Soit c'est flottant à gauche, soit c'est centré...
Et pour du centrage horizontal, une solution vous à déjà été fournie Smiley cligne


C'est n'est pas une accolade orpheline, c'est celle de la media queries pour le reponsive design. D'où la répétition de l'id="chalet-logo" car les propriétés ne sont pas les mêmes pour une largeur de 562px.
Modifié par Eatmycut (06 Jul 2013 - 12:29)
Eatmycut a écrit :

C'est n'est pas une accolade orpheline, c'est celle de la media queries pour le reponsive design. D'où la répétition de l'id="chalet-logo" car les propriétés ne sont pas les mêmes pour une largeur de 562px.

Oui, désolé je suis allé "un peu" vite, je regarde de plus près Smiley cligne
Le fait est que le "float:left" prend l'ascendant sur le media queries, ce qui annule les efforts d'alignement Smiley decu

En rajoutant un "float:none;" sur l'id en question dans le Media Queries ça semble fonctionner Smiley confus

J'ai surement raté un truc Smiley sweatdrop
6l20 a écrit :
Le fait est que le &quot;float:left&quot; prend l'ascendant sur le media queries, ce qui annule les efforts d'alignement Smiley decu

En rajoutant un &quot;float:none;&quot; sur l'id en question dans le Media Queries ça semble fonctionner Smiley confus

J'ai surement raté un truc Smiley sweatdrop


C'est exactement à ce que j'ai pensé mais voilà le résultat :

upload/49833-bug2.png

Comme tu dis, il doit y avoir un conflit quelque part mais je ne le trouve pas =/

J'ai essayé avec l'image en svg aussi, même résultat :

http://codepen.io/anon/full/BlpJk
Modifié par Eatmycut (06 Jul 2013 - 13:38)
Sujet clos
Aller à