28173 sujets

CSS et mise en forme, CSS3

bonjours a tous,

je soumets a votre reflexion un cas de positionnement css qui me fais faire des cheveux blanc ( à 25 ans c'est un peu tot).
je dois redesigner le site de mon etablissement et pour se faire j'ai choisis le schema de blocs suivant : upload/14366-bloq.jpg

le bloc en bleu est bien positionné dans son conteneur
mais impossible dy rajouter les bloc en gris sans tout decaler vers le bas....

quelqu'un aurait il une idée ?

merci d'avance
En te lisant je dirais qu'il s'agit certainement d'un problème de flottants ou de largeur de bloc trop grande.
Avec un peu de code ça nous aiderait.
oups exact j'ai omis ce detail au combien important , voici le code :


/* le conteneur */
#conteneur #contenu {
	float: left;
	width: 763px;
	height: 557px;
 background-image: url('images/article.png'); 
 
}
/* bloc gris haut */

#contenu #outilsadm
{
float: left;
	width: 363px;
	height: 557px;
	padding-top: 50px;

}

/* bloc bleu */
.liste-articles { float:right;margin-left: 370px; padding-top:50px;margin-right: 50px;padding: 0; list-style: none; }


voila , j'ai pas encore mis le code du bloc gris du bas car je n'arrive déja pas a placer celui du haut Smiley langue [code]
Modifié par karlito (10 Oct 2007 - 19:27)
Bonjour et bienvenue parmi nous,

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Plop,

Essaie de faire deux colonnes déjà, en utilisant float:left et en spécifiant des largeurs à chacune, des marges pour bien les décaler, et des couleurs de fond pour bien les identifier.

Ensuite, à l'intérieur de la premiere colonne, rajoute deux éléments, qui seront tes deux blocs gris, en leur mettant aussi une couleur de fond, des marges pour les voir facilement.

Ca devrait déjà t'orienter dans la bonne direction, sinon montre nous le bout de code html qui va avec ton css Smiley cligne