28220 sujets

CSS et mise en forme, CSS3

[Résolu] Colonne centrale en taille auto

Bonjour,

Je possède un blog 3 colonnes et j'essaye d'optimiser sa présentation pour que la colonne centrale se re-dimensionne en automatique en fonction de la résolution des visiteurs.

J'ai un peu tout essayé (width: auto; fixer un max-width: 509px;) ben pas moyen ... si on réduit la fenêtre la colonne centrale ... passe dessous.

Un expert peut-il me donner un coup de main, pour info je début mais j'apprend vite ... quand ça marche Smiley cligne .
Modifié par Nam (18 Jan 2006 - 15:53)
Merci j'ai déjà pas mal regardé et la structure est la suivante :

#container {
	width: auto;
}

#left {
	width: fixe en px;
}

#right {
	width: fixe en px;
}

#center {
	width: auto;
}

.content {
	float: left;
	overflow: visible;
	width: auto;
}


Voilà de quoi creuser le truc Smiley langue
Modifié par Nam (21 Dec 2005 - 18:38)
Bonjour Nam.

Est-ce que tu pourrais baliser ton code avec le BBCode [ code][/code ] (sans les espaces) comme spécifié dans les règles du forum* ?

Ça le rendra plus lisible.

Merci.

* que tu as lues et approuvées en t'inscrivant.
Bonsoir,
La solution la plus simple est de procéder comme suit (aller, cadeau Smiley cligne ) :
#left{
width:200px;
float:left;
}
#center{
width:auto;
}
#right{
width:150px;
float:right;
}

avec 
<body>
<div id="center">
<div id="left">
Contenu de ta div gauche Lorem ipsum dolor sit amet, et blablabla
</div>

<div id="right">
Contenu de ta div droite Lorem ipsum dolor sit amet, et encore bla
</div>

Texte central

</div>
</body>


Note bien que #left et #right sont dans #center (qui débute juste après le body, dans cet exemple). Après si tu veux tu peux virer #container qui ne sert plus à rien (sauf si ta mise en page l'exige pour d'autres éléments).
Voilà !
Jihel a écrit :
Note bien que #left et #right sont dans #center (qui débute juste après le body, dans cet exemple). Après si tu veux tu peux virer #container qui ne sert plus à rien (sauf si ta mise en page l'exige pour d'autres éléments).


Merci de ta réponse mais je dois composer avec la structure existante à savoir que container contient 3 colonnes left + center + right comme indiqué ici http://technoblog.blogspirit.com/archive/1999/09/30/la-carte-css-de-votre-blog.html
Modérateur
bonjour,
pour regle ce probleme (faut vraiment vouloir retrecir un max la largeur de la fenetre pour faire tomber le contenu centrale), il te faut plutot chercher a imposé une largeur minimale a ta page.
Largeur qui laissera encore lisible confortablement le contenu , j'imagine qu'une largeur minimale de 800px, devrait etre bonne.
Voici un lien avec differentes methodes (quirks et standard) ou tu peut appliquer une largeur minimale a IE. http://www.cssplay.co.uk/boxes/minwidth.html
a plus
Nam a écrit :


Merci de ta réponse mais je dois composer avec la structure existante à savoir que container contient 3 colonnes left + center + right


Ce qui ne change rien au principe, sinon que tu changes les id et ajoute une div autour du texte central, de cette façon :

<body>

<div id="container">
<div id="left">
Contenu de ta div gauche Lorem ipsum dolor sit amet, et blablabla
</div>

<div id="right">
Contenu de ta div droite Lorem ipsum dolor sit amet, et encore bla
</div>

<div id="center">
Texte central
</div>

</div>
</body>

et pour la css 
#left{
width: /*taille fixe */;
float:left;
}
#container{
width:auto;
}
#right{
width:/* taille fixe */;
float:right;
}
#center{
/* ce que tu veux, mais pas de float */
}

De cette façon, tu éviteras également l'espace vide qui s'installe entre #center et #right avec un résolution d'écran supérieure à 1024 Smiley cligne
Ensuite, comme le dit gcyrillus, tu pourras définir une largeur minimale pour ta fenêtre, ce qui te permettra d'afficher des scrollbars si l'utilisateur la réduit en dessous de 1011px (taille pour laquelle ta colonne "saute").
Merci pour votre aide, j'en bave ... pour limiter les dégats j'ai prise 2 décisions :
1. dans l'urgence j'optimise pour le 1024 histoire que ce soit lisible
2. je vrai prendre la CSS de http://www.philippepinault.com qui à l'air de faire ce que je veux et je vais la mettre à ma sauce.

A bientôt,

PS : le pb actuel c'est que les lien 'précédent / accueil / suivant' en haut d'article sont cachés et je ne m'explique par pourquoi !
J'ai constaté que 20% de mes visiteurs possèdent une résolution < 1024, j'ai donc pris le taureau par les cornes ... et en suivant "texto" le tutorial le résultat est pas mal !
Sujet clos
Aller à