28221 sujets

CSS et mise en forme, CSS3

[Resolu] Cherche astuce pour obtenir 100%-200px

J'ai mis au point un layout que je trouve très pratique, a savoir qu'il me suffir de changer les float right et left pour basculer la colonne du menu d'un côté. De plus l'ordre des divs dans la source me permet une bonne accessibilité dans les navigateurs textuels.

Pour des raisons esthétiques j'ai choisit de donner une largeur fixe au site. Mais je souhaiterais donner la possibilité de basculer sur une autre feuille de style identique avec pour seule différence une largeur de 100%.

Le hic est de taille. Pour garder la flexibilité de design (j'aime changer de design et de style souvent) je souhaiterais garder mes blocs de contenu et de navigation flotants. Hors dans ce cas la taille du bloc de contenu serrait de 100%-200px (200px correspond à la taille de la navigation).

Une solution envisageable est de fixer la taille du menu de navigation en % également, mais avant d'en arriver là je voudrais avoir s'il n'existait pas une autre solution me permettant de "calculer" 100%-200px (mais j'ai peur que non).
Modifié le 04 Jan 2005 - 14:24
Mmmm, cela ne réponds pas exactement puisque dans mon cas le problème se situe en largeur. Et après bidouilles je me rends compte que combiner ce genre de trucs avec des floats est soit impossible soit au delà des mes compétences Smiley confus

J'ai croisé un site qui propose le même principe d'étirer ou non le site sur 100% de largeur (www.simplebits.com). Ils ont optés pour des tailles totallement en %. Je me demande finalement si c'est bien utile de chercher des heures à avoir un menu en px au lieu de le définir en %...
Administrateur
Autant pour moi, je n'avais pas vu qu'il s'agissait de largeur car en général la question ne se pose pas :
Il suffit effectivement d'avoir un seul des blocs en flottant (largeur fixe) et l'autre prendra par défaut la largeur restante (le reste) : c'est le comportement par défaut des éléments de type bloc.

Exemple :
[b]HTML :[/b]
<div id="bloc1">
	<p>Bloc1 (200px)</p>
	<p>Bloc1</p>
	<p>Bloc1</p>
</div>
<div id="bloc2">
	<p>Bloc2 (reste de page = 100%-200px)</p>
	<p>Bloc2</p>
	<p>Bloc2</p>
</div>

[b]CSS :[/b] 
html, body {
margin:0;
padding:0;
}
#bloc1 {
float: left;
width: 200px;
background: blue;
}
#bloc2 {
background: yellow;
}
p {margin:0}
Je dis p-e une bêtise mais si le contenu de la boite bloc2 est plus grand le texte va se placer en dessous du bloc flottant avec le menu. L'effet de "fausses colonnes" ne marchera donc plus.
Administrateur
littlesam a écrit :
Je dis p-e une bêtise mais si le contenu de la boite bloc2 est plus grand le texte va se placer en dessous du bloc flottant avec le menu. L'effet de "fausses colonnes" ne marchera donc plus.

Dans ce cas, un margin-left: 200px; sur le bloc2 suffit.
J'avais testé cette solution mais comme elle générait un espèce bug sous IE, j'avais fini par mettre les 2 en floats.
La ou les deux blocs sont cote à cote dans celui de droite on a une espèce de padding de quelques pixels qu'il est impossible d'enlever avec des margin: 0px; et padding 0px; J'ai lu un article la dessus, il faut y aller à grand coup de hack pour IE (et encore pas la version mac). C'est assez pénible...
Mais je vais p-e retourner en effet à cette solution car elle résouds le pb de la taille des blocs.

Merci pour tout.
Administrateur
littlesam a écrit :
J'avais testé cette solution mais comme elle générait un espèce bug sous IE, j'avais fini par mettre les 2 en floats.
La ou les deux blocs sont cote à cote dans celui de droite on a une espèce de padding de quelques pixels qu'il est impossible d'enlever avec des margin: 0px; et padding 0px; J'ai lu un article la dessus, il faut y aller à grand coup de hack pour IE (et encore pas la version mac). C'est assez pénible...
Mais je vais p-e retourner en effet à cette solution car elle résouds le pb de la taille des blocs.

Merci pour tout.

Le bug que tu évoques est celui des "3 pixel gap"

Et le grand coup de hack est simplement un 'height: 1%' à appliquer pour IE / Win. L'article explique également comment faire pour IE Mac... c'est effectivement plus complexe pour ce dernier, mais la question est "en vaut-il bien la peine ?"

Bonne chance !
Sujet clos
Aller à