Positionnement et tailles des blocs

Bonjour,

suite à notre discussion, j'ai commencé à découvrir le fabuleux monde des CSS et tout ce qui s'en suit. Après quelques heures de prises en main j'ai tenté de faire une page à peu près potable mais plusieurs points me bloquent

D'une part je n'arrive pas à faire un bloc dont la taille s'adapte à son environnement. Je m'explique, je souhaite que la taille d'un bloc varie en fonction qu'il y ait un bloc ou non dans le meme conteneur. Ainsi, un bloc seul prendra toute la largeur de la page. A l'inverse deux blocs se partageront la moitié de la page. Je n'ai pas réussi à réaliser cette étape.

De plus, quand je visualise le résultat, il y a de l'espace vide (non occupé par les blocs) alors que les blocs devraient prendre toute la page!!

Pouvez vous m'aider.

Merci

un petit lien

http://www.sroche.fr/itp/test_calibrage.html
le CSS
http://www.sroche.fr/itp/itp_admin.css

Cette page est une oeuvre d'art adminez le contraste des couleurs !
Modifié par CrazySeb (27 Apr 2007 - 22:31)

essaie de mettre tes marges a zero avec le selecteur universel *

*{margin:0; padding: 0;}

overflow a écrit :
essaie de mettre tes marges a zero avec le selecteur universel *

À mon sens, c'est une solution de facilité qui peut se retourner contre celui qui l'utilise. C'est le meilleur moyen d'obtenir des choses illisibles pour peu que l'on oublie de rétablir tel ou tel style par défaut.

CrazySeb a écrit :
D'une part je n'arrive pas à faire un bloc dont la taille s'adapte à son environnement. Je m'explique, je souhaite que la taille d'un bloc varie en fonction qu'il y ait un bloc ou non dans le meme conteneur. Ainsi, un bloc seul prendra toute la largeur de la page. A l'inverse deux blocs se partageront la moitié de la page. Je n'ai pas réussi à réaliser cette étape.

C'est quelque chose qui peut se faire de deux manières :
- soit côté serveur, si les pages sont générées dynamiquement : on devrait avoir le moyen de savoir combien de blocs sont générés, et on peut donc attribuer un style différent au bloc en fonction ;
- soit côté client, en CSS. Si on a deux blocs, dont un est « permanent » et l'autre est « occasionnel », on place le bloc occasionnel en premier, en lui donnant une largeur fixe (par exemple : 50%) et en le faisant flotter à droite ou à gauche. Pour que le deuxième bloc s'adapte à l'espace restant, il faudra utiliser un contexte de formatage, avec par exemple un overflow: hidden (et, pour Internet Explorer 6, émuler un contexte de formatage avec une propriété CSS conférant le layout au bloc).

La solution CSS demande une bonne connaissance, voire une bonne maitrise, des CSS. Je ne connais pas de tutoriel la présentant étape par étape, il faut donc faire soi-même ses recherches à partir des pistes que je donne...

CrazySeb a écrit :
De plus, quand je visualise le résultat, il y a de l'espace vide (non occupé par les blocs) alors que les blocs devraient prendre toute la page!!

Là, c'est une méconnaissance du comportement des flottants. Un élément flottant n'ayant pas de largeur spécifiée (c'est à dire qu'il est en width: auto, ce qui est la valeur par défaut pour la plupart des éléments) prendra uniquement la largeur nécessaire à son contenu.

Tu as :

.bloc {
	float: left;
	width: auto;
}

et il te faudrait :

.bloc {
	float: left;
	width: 50%;
}

(À noter qu'un certain bug de calcul des arrondis avec les largeurs en pourcentages dans Internet Explorer peut poser quelques soucis quand on a des flottants censés occuper 100% (50+50) de la largeur disponible. Utiliser un width: 49,9% serait peut-être plus prudent.