28172 sujets

CSS et mise en forme, CSS3

Minimum responsive

Bonjour.

Toujours en test d'un blog Wordpress, j'essaie de rendre "responsive" au minima un thème qui ne l'est pas.

La largeur du wrapper est de 100%, pleine page.
Le main fait 75%.
La sidebar fait 25%.
#main {
	width: 75%; 
	float: left;
	margin: 0;
	padding: 5px 0 20px 0;
	overflow: hidden;
	border-right: 1px solid #CCCCCC;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

#sidebar {
	padding: 0;
	margin: -7px -5px auto 0;
	background-color: #F7F7F7;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    float: right;
    width: 25%;
}

Après m'être un peu familiarisé avec les "nouvelles" instructions media que je découvre petit à petit, j'ai ajouté ceci :
@media only screen and (max-width: 800px) {

	#main {
		border-right: hidden;
		width: 100%;
		float: inherit;
	}
	
	#sidebar {
		width: 100%;
		float: none;
		margin-top: 20px;
		clear:both;
	}

}

A première vue ça fonctionne : à moins du max-width indiqué, la sidebar glisse sous le main mais je voudrais savoir si ce code est correct et si il y a possibilité de l'améliorer de manière simple.

Je profite également de ce sujet pour savoir si il est possible, toujours de manière simple, uniquement avec du CSS, de rendre une (et une seule) image responsive : celle du logo du header. (pour le moment il n'y en a pas, c'est juste un fond coloré dégradé).

Merci. Smiley cligne
Bonjour,

Ta déclaration est correcte, mais j'enlèverai le mot-clé "only" car ici tu souhaites également interagir avec des tablettes / des mobiles, je me trompe ?

Concernant les images responsives, il te suffit de cibler l'image ou le groupe d'images souhaité par une classe ou un id et de leur ajouter un max-width: 100% (ou une valeur plus petite selon le résultat visé).
Salut,

Quelques petits points :

1.Tu n'es pas obligé de définir "screen and", tu peux directement spécifier ton rapport de largeur, comme ça : @media (max-width: ...) { }
2. Tu n'es pas obligé d'utiliser des préfixes avec box-sizing
3. Dans tous les cas, les préfixes doivent être placés AVANT la propriété finale ( http://www.emmanuelbeziat.com/blog/prefixes-css-jusqua-quand/ )
4. Une sidebar ne devrait pas être extensible, ça n'a pas grand intérêt ; seul le contenu devrait l'être ; et sans pourcentages ; ça facilitera grandement ton travail de "responsivisation" (Oui, j'invente des mots). Vois cet exemple : http://www.emmanuelbeziat.com/blog/aligner-trois-colonnes-proprement/


Enfin, pour ton soucis à proprement parler :
* Jamais, jamais, JAMAIS de width: 100%. Si tu veux qu'un bloc prenne toute la taille disponible, c'est width: auto;
* Ce n'est pas float: inherit, mais float: none qu'il faut mettre.
Modifié par Manumanu (06 Oct 2015 - 17:11)
Merci pour ces précisions. Smiley cligne

Reste le cas d'une image qui n'est pas déclarée dans un fichier HTML ou PHP mais dans la feuille de style, du genre :
background: url(adresse);

Si elle est dans le header, comment lui affecter une classe et la rendre responsive ? J'avais trouvé un début de solution ici :

http://www.w3schools.com/css/tryit.asp?filename=tryresponsive_image_background1

Mais au redimensionnement, la hauteur du container garde sa taille définie et affiche donc une "marge blanche" de la dite hauteur entre le header et le content.

Pour le moment, vu que c'est toujours du test, en plaçant l'url de l'image et le style associé directement dans le fichier PHP, ça fonctionne comme il se doit, mais ce n'est pas la bonne méthode et j'aimerais que ça fonctionne en intégrant le lien image dans le CSS.
En utilisant un background-size:cover sur l'exemple ci-dessus, en lieu et place du background-size:contain, cela correspond-il à l'effet désiré ?
Modifié par Nigel (07 Oct 2015 - 11:54)
Non. L'image se rogne et ne se redimensionne pas verticalement.

Ma solution provisoire :
#header {
	background-color: #000000;
	padding: 0;
	margin: 0 0 10px 0;
	position: relative;
	width: 100%;
}

Remplacement de ça :
<div id="header">
	<h3><a href="<?php bloginfo('home'); ?>/"><?php bloginfo('name'); ?></a></h3>
	<h2><?php bloginfo('description'); ?></h2>
</div>

Par ça :
<div id="header">
	<a href='url_page_index'><img src='url_image_header' style='width: 100%; height: auto;'></a>
</div>
Si tu ne rognes pas l'image, ne risque-t-elle pas de s'en retrouver étirée ?

Voici un exemple en combinant un background-size:cover, et background-position:0 50%;
http://codepen.io/anon/pen/vNmbNR

Cependant je ne suis pas certain d'avoir compris ta requête...
Nigel a écrit :
Cependant je ne suis pas certain d'avoir compris ta requête...

Je veux une image dans le header, qui soit responsive, qui se redimensionne proportionnellement en largeur et en hauteur, comme une image classique dans un article de blog, par exemple.

Pour une photo qui figure dans un article, donc dans le HTML ou PHP, on lui donne une class et les propriétés du CSS sont prises en compte.
Mais dans le header, à la base le lien de l'image ne figure pas dans un fichier HTML mais directement dans le CSS. Et là je n'arrive pas grâce aux propriétés à la rendre parfaitement responsive. Normalement y a pas à bricoler le PHP pour ce genre de chose, bien que ça fonctionne.
Ok, cette fois j'ai compris. Smiley jap

La question ne porte pas sur le background mais sur le conteneur qui le contient. Il est je pense un peu tricky de demander à CSS de faire cela à l'heure actuelle, il faut exploiter le comportement du padding en pourcentage (combiné à ce que je t'ai indiqué précédemment)... Ou calculer cela en JS sur l'évènement resize.

http://codepen.io/anon/pen/OymqjN

A ce stade, pourquoi n'utilises-tu pas simplement une balise img avec une hauteur automatique ?
Modifié par Nigel (07 Oct 2015 - 15:40)
Sujet clos
Aller à