28221 sujets

CSS et mise en forme, CSS3

[resolu] 12 blocs a cote puis un au dessous

Bonjour à tous,

je viens de me mettre au css et je suis confronté à un problème je veux mettre plusieurs blocs à côté (jusqu la pas de probleme) puis en mettre plusieurs blocs sous ces blocs.

J'ai suivi les tuto mais pour que cela fonctionne j'ai du mettre ceci dans ma feuille css

.boxvert {
padding: 3px;
border-width: thin;
height:280px;
width:230px;
margin-top: 20px;
float: left;
}

.boxrouge {
padding: 3px;
border-width: thin;
height:280px;
width:230px;
margin-top: 300px;
margin-left: 0px
float: left;

}

.conteneurvert {
padding: 3px;
border-width: thin;
height:280px;
margin-left:0px;
margin-top: 0px;

}

.conteneurrouge {
padding: 3px;
border-width: thin;
height:280px;
margin-left:240px;
margin-top: 0px;

}

pour que cela fonctionne je dois soit imbriquer les boites verte dans les conteneur verts etles boites rouge dans les conteneur rouge soit enlever le float: left; de ma boite rouge ce qui m'embête car les blocs rouges ne seront plus à cote les uns des autres.

POur faire vite qqu'un sait s'il existe un méthode autre que l'imbrication des DIV car dans les tuto cela est déconseillé.


merci pour votre aide
Modifié le 17 Jan 2005 - 20:46
Bonjour et bienvenue à toi sur ce forum,

Tout d'abord une petite remarque pour mettre du code dans tes messages, il est chaudement recommandé de les encadrer avec les balises code appropriés dans le zone d'édition de ton message ([ code][ /code] sans les espaces). C'est beaucoup plus lisible. Smiley cligne

L'utilisation de float sur tes blocks est approprié, ils se positionneront côte à côte sur une ligne, tant qu'il auront assez d'espace c'est à dire en l'absence de conteneur la largeur d'écran disponible, si tu as par contre plus de blocks que d'espace disponibles ils se placeront à la suite sur une nouvelle ligne.

Si tu n'utilises pas float, tes blocks iront tous à la ligne. C'est normal ce sont des éléments de type block et c'est le comportement à en attendre. A ce sujet je te conseille le tutoriel : La structure des balises : bloc et en-ligne

Si tu souhaites mettre deux séries de blocks différents sur deux lignes distinctes, tu peux par exemple utiliser un élément muni de la propriété clear:

hr{clear:both;}
et
<p class="boxvert">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi non lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam felis metus, aliquam eget, dictum.</p>
  <p class="boxvert">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi non lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam felis metus, aliquam eget, dictum.</p>
  <p class="boxvert">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi non lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam felis metus, aliquam eget, dictum.</p>
  [b]<hr />[/b]
  <p class="boxrouge">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi non lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam felis metus, aliquam eget, dictum.</p>
  <p class="boxrouge">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi non lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam felis metus, aliquam eget, dictum.</p>
  <p class="boxrouge">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi non lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam felis metus, aliquam eget, dictum.</p>


Cette propriété clear imposera la poursuite des blocks float sur une nouvelle ligne.

ps comme c'est ton premier post tu peux également passer par le bar du forum pour les présentations si le cœur t'en dit.
Modifié le 17 Jan 2005 - 14:28
Bonjour

Merci pour ta réponse, j'ai essayé ton code mais cela ne fonctionne pas. J'y retourne et je te dis comment je m'en sort.

Merci
Administrateur
Salut et bienvenue sur le forum.

Pourrais-tu appliquer ce qu'Igor t'a suggéré pour ton code, cela faciliterait beaucoup la lecture :
Igor a écrit :
Tout d'abord une petite remarque pour mettre du code dans tes messages, il est chaudement recommandé de les encadrer avec les balises code appropriés dans le zone d'édition de ton message ([ code][ /code] sans les espaces). C'est beaucoup plus lisible.

Merci d'avance Smiley cligne
Ma feuille Css

.boxvert {
	padding: 3px;
	border-width: thin;
	height:280px;
	width:230px;	
	margin-top: 20px;
	float: left;
}

.boxrouge {
	padding: 3px;
	border-width: thin;
	height:280px;
	width:230px;	
	margin-top: 200px;
	margin-left: 0px
	float: left;
	
}


ma page html

<!-- Crée le premier bloc correspondant à la partie hebdomadaire du chemin de procédure "boxvert" --> 



<div class="boxvert">
<img class="positionvert1" src="1vert.png" width="32" height="255"/>
<ul class="soustraitvert">
<hl><b> Procédures</b>
<li><a href ="">Circuit des opérations de marché</a></li>
<li><a href ="">Contrôle de l'intention de gestion</a></li>
<li><a href ="">Investissement hors BFC dans le cadre d'un mandat de gestion</a></li>
<li><a href ="">Investissements des FI</a></li>
<h1>Contrôles automatiques/manuels</h1>
<li><a href ="">Contrôle de l'intention de gestion</a></li>
<li><a href ="">Contrôles prévisionnelle / investissements</a></li>
</ul>
</div>

<div class="boxvert">
<img class="positionvert1" src="1vert.png" width="32" height="255"/>
<ul class="soustraitvert">
<hl><b> Procédures</b>
<li><a href ="">Traitements des avis d'opérés</a></li>
<h1>Contrôles automatiques/manuels</h1>
<li><a href ="">Contrôle avis d'opérés</a></li>
<li><a href ="">Contrôle des VL communiquées sur les AO</a></li>
<li><a href ="">Contrôle sur les avis d'opérés non traités</a></li>
</ul>
</div>

<div class="boxvert">
<img class="positionvert1" src="1vert.png" width="32" height="255"/>
<ul class="soustraitvert">
<hl><b> Procédures</b>
<li><a href ="">Veille OST</a></li>
<li><a href ="">Traitement des OST OST</a></li>
<li><a href ="">Traitement des échus</a></li>
<h1>Contrôles automatiques/manuels</h1>
<li><a href ="">S'assurer de l'exhaustivité du traitement des échus et des OST</a></li>
<li><a href ="">Effectuer / contrôler les réinvestissements</a></li>
</ul>
</div>

<div class="boxvert">
<img class="positionvert1" src="1vert.png" width="32" height="255"/>
<ul class="soustraitvert">
<hl><b> Procédures</b>
<li><a href ="">Mise à jour des stocks</a></li>
<h1>Contrôles automatiques/manuels</h1>
<li><a href ="">Contrôle de la mise à jour</a></li>
</ul>
</div>

<div class="boxvert">
<img class="positionvert1" src="1vert.png" width="32" height="255"/>
<ul class="soustraitvert">
<hl><b> Procédures</b>
<li><a href ="">Mise à jour comptable</a></li>
<h1>Contrôles automatiques/manuels</h1>
<li><a href ="">Contrôle de la bonne comptabilisation des actifs</a></li>
<li><a href ="">Contrôle des +/- values importantes</a></li>
</ul>
</div>

<div class="boxvert">
<img class="positionvert1" src="1vert.png" width="32" height="255"/>
<ul class="soustraitvert">
<hl><b> Procédures</b>
<li><a href ="">Contrôle de l'ehaustivité de la comptabilisation en J-1</a></li>
<h1>Contrôles automatiques/manuels</h1>
<li><a href ="">Contrôler que l'ensemble des opérations présentes en gestion se retrouvent en comptabilité</a></li>
<li><a href ="">S'assurer que les écarts proviennent uniquement d'opérations comptables</a></li>
</ul>
</div>

<div class="boxvert">
<img class="positionvert1" src="1vert.png" width="32" height="255"/>
<ul class="soustraitvert">
<hl><b> Procédures</b>
<li><a href ="">Clonage des portefeuilles IAS et Fiscaux</a></li>
<h1>Contrôles automatiques/manuels</h1>
<li><a href ="">Contrôle d'égalité des stocks</a></li>
<li><a href ="">S'assurer que les OST et les échus se retrouvent dans les portefeuilles clonés</a></li>
</ul>
</div>

<div class="boxvert">
<img class="positionvert1" src="1vert.png" width="32" height="255"/>
<ul class="soustraitvert">
<hl><b> Procédures</b>
<li><a href ="">Raprochement "à fréquence d'investissement" des stocks</a></li>
<h1>Contrôles automatiques/manuels</h1>
<li><a href ="">Contrôler l'égalité des stocks BOAS et ceux de la compta matière</a></li>
</ul>
</div>

<div class="boxvert">
<img class="positionvert1" src="1vert.png" width="32" height="255"/>
<ul class="soustraitvert">
<hl><b> Procédures</b>
<li><a href ="">Raprochement "à fréquence d'investissement" des espèces</a></li>
<h1>Contrôles automatiques/manuels</h1>
<li><a href ="">Contrôler l'adéquation entre la comptabilité auxiliaire et le relevé bancaire du dépositaire</a></li>
</ul>
</div>

<div class="boxvert">
<img class="positionvert1" src="1vert.png" width="32" height="255"/>
<ul class="soustraitvert">
<hl><b> Procédures</b>
<li><a href ="">Calcul de la valeur liquidative</a></li>
<h1>Contrôles automatiques/manuels</h1>
<li><a href ="">Contrôle des cours, cc, taux, fixing</a></li>
<li><a href ="">Contrôle des OST et traitement des échus</a></li>
<li><a href ="">Rapprochement des stocks</a></li>
<li><a href ="">Rapprochement espèces</a></li>
<li><a href ="">Contrôle de l'exhausitité de la comptabilisation</a></li>
</ul>
</div>

<div class="boxvert">
<img class="positionvert1" src="1vert.png" width="32" height="255"/>
<ul class="soustraitvert">
<hl><b> Procédures</b>
<li><a href ="">Adossement actif/passif sur flux</a></li>
<li><a href ="">Régularisation des écarts</a></li>
<h1>Contrôles automatiques/manuels</h1>
<li><a href ="">Vérifier les adossements</a></li>
<li><a href ="">Vérifier que les écarts sont régularisés</a></li>
</ul>
</div>




<!-- Crée le premier bloc correspondant à la partie mensuel du chemin de procédure "boxrouge" --> 




<div class="boxrouge">
<img class="positionvert1" src="1vert.png" width="32" height="255"/>
<ul class="soustraitvert">
<hl><b> Procédures</b>
<li><a href ="">Adossement actif/passif</a></li>
<li><a href ="">Régularisation des écarts</a></li>
<li><a href ="">Immatriculation</a></li>
<h1>Contrôles automatiques/manuels</h1>
<li><a href ="">Vérifier les adossements</a></li>
<li><a href ="">Vérifier que les écarts sont régularisés</a></li>
</ul>
</div>

<div class="boxrouge">
<img class="positionvert1" src="1vert.png" width="32" height="255"/>
<ul class="soustraitvert">
<hl><b> Procédures</b>
<li><a href ="">Procédure de contrôle des cours, coupons courus, les fixings et les taux</a></li>
<h1>Contrôles automatiques/manuels</h1>
<li><a href ="">Contrôle de présence</a></li>
<li><a href ="">Contrôle de cohérence sur une période donnée</a></li>
<li><a href ="">Contrôle de l'adéquation VL passif / VL actif</a></li>
</ul>
</div>

<div class="boxrouge">
<img class="positionvert1" src="1vert.png" width="32" height="255"/>
</div>

<div class="boxrouge">
<img class="positionvert1" src="1vert.png" width="32" height="255"/>
</div>

<div class="boxrouge">
<img class="positionvert1" src="1vert.png" width="32" height="255"/>
</div>

<div class="boxrouge">
<img class="positionvert1" src="1vert.png" width="32" height="255"/>
</div>

<div class="boxrouge">
<img class="positionvert1" src="1vert.png" width="32" height="255"/>
<ul class="soustraitvert">
<hl><b> Procédures</b>
<li><a href ="">Raprochement des stocks</a></li>
<h1>Contrôles automatiques/manuels</h1>
<li><a href ="">Contrôler l'égalité des stocks BOAS et ceux de la compta matière</a></li>
</ul>
</div>

<div class="boxrouge">
<img class="positionvert1" src="1vert.png" width="32" height="255"/>
<ul class="soustraitvert">
<hl><b> Procédures</b>
<li><a href ="">Raprochement des espèces</a></li>
<h1>Contrôles automatiques/manuels</h1>
<li><a href ="">Contrôler l'adéquation entre la comptabilité auxiliaire et le relevé bancaire du dépositaire</a></li>
</ul>
</div>

<div class="boxrouge">
<img class="positionvert1" src="1vert.png" width="32" height="255"/>
<ul class="soustraitvert">
<hl><b> Procédures</b>
<li><a href ="">Contrôle des cours, cc, taux, fixing</a></li>
<li><a href ="">Contrôle des OST et traitement des échus</a></li>
<li><a href ="">Rapprochement des stocks</a></li>
<li><a href ="">Rapprochement espèces</a></li>
<li><a href ="">Contrôle de l'exhausitité de la comptabilisation</a></li>
</ul>
</div>

<div class="boxrouge">
<img class="positionvert1" src="1vert.png" width="32" height="255"/>
<ul class="soustraitvert">
<hl><b> Procédures</b>
<li><a href ="">traitement des provisions</a></li>
<h1>Contrôles automatiques/manuels</h1>
<li><a href ="">Contrôle des IC pour les TCN, prêts, DAT, emprunts et pensions</a></li>
<li><a href ="">Contrôle globaux de cohérence avec les agrégat de la période précédente</a></li>
<li><a href ="">Contrôles globaux de cohérence sur les taux actuariels</a></li>
<li><a href ="">Contrôles balance / inventaire (social et IAS)</a></li>
<li><a href ="">Justification des comptes de position de change</a></li>

</ul>
</div>

<div class="boxrouge">
<img class="positionvert1" src="1vert.png" width="32" height="255"/>
<ul class="soustraitvert">
<hl><b> Procédures</b>
<li><a href ="">Interface</a></li>
<li><a href ="">Date butée</a></li>
<h1>Contrôles automatiques/manuels</h1>
<li><a href ="">Vérification des soldes interfacés sous OMEGA</a></li>
<li><a href ="">Vérification de l'exactitude entre la comptabilité auxiliaire et la comptabilité générale</a></li>
<li><a href ="">Contrôle de cohérence entre l'EDP et la balance CODA pour l'alimentation de la comptabilité générale</a></li>
<li><a href ="">Contrôle de la présence de la date butée</a></li>

</ul>
</div>

<div class="boxrouge">
<img class="positionvert1" src="1vert.png" width="32" height="255"/>
<ul class="soustraitvert">
<hl><b> Procédures</b>
<li><a href ="">Justification des écarts</a></li>
<h1>Contrôles automatiques/manuels</h1>
<li><a href ="">Contrôle et justification de l'ensemble des écarts</a></li>
</ul>
</div>

<div class="boxrouge">
<img class="positionvert1" src="1vert.png" width="32" height="255"/>
<ul class="soustraitvert">
<hl><b> Procédures</b>
<li><a href ="">Reporting réglementaire</a></li>
<h1>Contrôles automatiques/manuels</h1>
<li><a href ="">Contrôle des chiffres transmis</a></li>
</ul>
</div>

<div class="boxrouge">
<img class="positionvert1" src="1vert.png" width="32" height="255"/>
<ul class="soustraitvert">
<hl><b> Procédures</b>
<li><a href ="">Certification des comptes</a></li>
<h1>Contrôles automatiques/manuels</h1>
<li><a href ="">Contrôle des données transmis</a></li>
<li><a href ="">Contrôle du respect des délais</a></li>

</ul>
</div>

<div class="boxrouge">
<img class="positionvert1" src="1vert.png" width="32" height="255"/>
</div>

<div class="boxrouge">
<img class="positionvert1" src="1vert.png" width="32" height="255"/>
<ul class="soustraitvert">
<hl><b> Procédures</b>
<li><a href ="">Suivi et reporting liés à la charte de qualité</a></li>
<br></br>
<hl><b>Contrôles automatiques/manuels</b>
<li><a href ="">Contrôle du respect des délais</a></li>

</ul>
</div>

<div class="boxrouge">
<img class="positionvert1" src="1vert.png" width="32" height="255"/>
<ul class="soustraitvert">
<hl><b> Procédures</b>
<li><a href ="">Validation des contrôles, engagements</a></li>

</ul>
</div>

<div class="boxrouge">
<img class="positionvert1" src="1vert.png" width="32" height="255"/>
<ul class="soustraitvert">
<hl><b> Procédures</b>
<li><a href ="">Clôture des comptes de +/- values</a></li>
<li><a href ="">Réouverture des comptes d'actif</a></li>
<br></br>
<hl><b>Contrôles automatiques/manuels</b>
<li><a href ="">Contrôle des balances</a></li>


</ul>
</div>


le but est que les boxrouge se retrouvent sous les boxvert. j'ai essayé en plaçant clear entre le début de mes boxvert, la fin se situant avant les boxrouge mais rien n'y

Merci de votre aide
Administrateur
Humm, il suffisait d'éditer ton premier post Smiley cligne

Comme l'a dit Igor, une simple séparation <hr /> à laquelle tu appliques un clear fonctionnera très bien.
j'ai essayé avec (/hr> mais cela ne fonctionne pas je dois être trop novice car toutes mes boxrouge se retrouvent les unes en dessous des autres donc je me retrouve avec des boxvert alignées et des boxrouge empilées les une sous les autres alors que je souhaite avoir une ligne de boxvert et en dessous une ligne de boxrouge

je comprends pas grand chose, le clear annule le float donc comment peux arriver à mon résultat.

Merci je sais je suis lours...
Administrateur
pendemonium a écrit :
lourd avec un d c'est plus lourd

Tu n'as pas de bouton "éditer", pour éviter de créer des posts de ce genre ? Smiley cligne

pendemonium a écrit :
j'ai essayé avec (/hr> mais cela ne fonctionne pas je dois être trop novice car toutes mes boxrouge se retrouvent les unes en dessous des autres donc je me retrouve avec des boxvert alignées et des boxrouge empilées les une sous les autres alors que je souhaite avoir une ligne de boxvert et en dessous une ligne de boxrouge

Peut-être n'as-tu pas suivi le lien ou la méthode :
- tu places un <hr /> entre les boites vertes et les boites rouges (donc un seul <hr />)
- tu appliques à ce <hr /> (via les styles CSS) un simple "clear: left"
- et hop, les boites sont séparées Smiley smile

pendemonium a écrit :
je comprends pas grand chose, le clear annule le float donc comment peux arriver à mon résultat.

Non, clear n'annule pas du tout le float (un élément peut être flottant tout en ayant un clear)
Clear permet de gérer les espaces autour des flottants et donc d'afficher un élément en-dessous des objets flottants.

Voici un exemple :
http://www.openweb.eu.org/articles/initiation_float/annexes/annexe1.html
Désolé je suis sous notepad

mais si mon post vous ennuie je vais ailleurs il n'y a pas de souci, je voulais juste de l'aide je pensais que le la trouverai ici. Si j'avais un manuel je ne vous ennuierai pas avec mes problèmes

merci à ceux qui on prit le temps de me répondre
Administrateur
pendemonium a écrit :
Désolé je suis sous notepad

mais si mon post vous ennuie je vais ailleurs il n'y a pas de souci, je voulais juste de l'aide je pensais que le la trouverai ici. Si j'avais un manuel je ne vous ennuierai pas avec mes problèmes

merci à ceux qui on prit le temps de me répondre

Il n'y a pas d'ennui Smiley smile
Simplement que ce forum dispose de boutons "éditer" (aucun rapport avec notepad) qui permet de modifier tes messages plutôt que de poster pour dire qu'il sont à modifier Smiley smile
Regarde le message ci-dessus (que j'ai édité Smiley smile ) : tu as la solution à ton problème.

Comme il n'est pas exclu qu'il y ait un bug sur le forum, je repose la question : as-tu bien un bouton "éditer" ?
Je suis désolé j'avais pas compris ta question oui j'ai un bouton édité, par contre j'ai bien codé en css hr {clear: left;}

et placé la balise <hr/> entre mes boites mais rien n'y fait
ou que ca m'énerve surtout que cela a l'air simple
Administrateur
C'est très étonnant, il doit y avoir un autre problème qui influence la mise en page.

Je viens de tester le principe général et ça fonctionne parfaitement :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
div {
float: left;
width: 150px;
height: 50px;
margin: 0.5em;
}
.vert {
background: green;
}
.rouge {
background: red;
}
hr {
clear: left;
}
-->
</style>
</head>
<body>
<div class="vert">texte</div>
<div class="vert">texte</div>
<div class="vert">texte</div>
<div class="vert">texte</div>
<div class="vert">texte</div>
<div class="vert">texte</div>
<hr />
<div class="rouge">texte</div>
<div class="rouge">texte</div>
<div class="rouge">texte</div>
</body>
</html>

Tu peux tester également chez toi, pour t'en assurer ?
Oui il manquait un ";" entre deux propriétés:
.boxrouge {
	padding: 3px;
	border-width: thin;
	height:280px;
	width:230px;	
	margin-top: 200px;
	[b]margin-left: 0px
	float: left;[/b]
}


Si ton soucis est résolu il ne manque plus qu'utiliser le bouton éditer Smiley cligne sur ton premier post pour rajouter un tag Résolu (il faut l'écrire, c'est pas automatique) dans ton titre.
Administrateur
pendemonium a écrit :
Merci a vous deux c'était ma définition de boxrouge qui plantait merci beaucoup

Parfait, tout est bien qui finit bien Smiley smile
Puis-je te demander, comme le suggèrent les règles du forum, de rajouter un [Résolu] en éditant le titre de ton sujet ? Cela facilitera les recherches plus tard.
Merci d'avance Smiley cligne

EDIT : grillé Smiley biggol
pendemonium a écrit :
Bonjour à tous,

je viens de me mettre au css et je suis confronté à un problème je veux mettre plusieurs blocs à côté (jusqu la pas de probleme) puis en mettre plusieurs blocs sous ces blocs.

J'ai suivi les tuto mais pour que cela fonctionne j'ai du mettre ceci dans ma feuille css

.boxvert {
padding: 3px;
border-width: thin;
height:280px;
width:230px;
margin-top: 20px;
float: left;
}

.boxrouge {
padding: 3px;
border-width: thin;
height:280px;
width:230px;
margin-top: 300px;
margin-left: 0px
float: left;

}

.conteneurvert {
padding: 3px;
border-width: thin;
height:280px;
margin-left:0px;
margin-top: 0px;

}

.conteneurrouge {
padding: 3px;
border-width: thin;
height:280px;
margin-left:240px;
margin-top: 0px;

}

pour que cela fonctionne je dois soit imbriquer les boites verte dans les conteneur verts etles boites rouge dans les conteneur rouge soit enlever le float: left; de ma boite rouge ce qui m'embête car les blocs rouges ne seront plus à cote les uns des autres.

POur faire vite qqu'un sait s'il existe un méthode autre que l'imbrication des DIV car dans les tuto cela est déconseillé.


merci pour votre aide
Sujet clos
Aller à