28172 sujets

CSS et mise en forme, CSS3

Div float et height à 100%

Bonjour à tous !

A moi de poster une question bête Smiley lol !

Je suis en train de me faire un organigramme horizontal avec des familles et des sous familles et des sous sous familles et des .... Je descend jusqu'à 5 niveaux.

J'ai galérer mais j'ai réussi à placer mes blocs comme je voulais, seulement voilà Smiley decu je suis pas contente parce que mon div 'item' il se met pas à 100% de la hauteur du bloc parent ...

Alors oui je sais il faut référencer son papa et lui donner un auto et un 100% mais moi çà veut pas Smiley decu !

Structure HTML : 

<div class='niveau1'>
   <div class='item'>nom</div>
   <div class='sous_item'>
      <div class='niveau2'>
         <div class='item'>nom</div>
         <div class='sous_item'>
            etc ...
         </div>
      </div>
   </div>
</div>


CSS : 

.item, .sous_item{float:left;}

.item{
    margin-right: 1%;
    width : 19%;
    height: auto;
}

.niveau1>.sous_item, .niveau2>.sous_item, .niveau3>.sous_item, .niveau4>.sous_item{
    width :78%;
}

.niveau1{
    height: 100%;
    width: 100%;
    position: relative;
}

.niveau2, .niveau3, .niveau4, .niveau5{
    height : 100%;
    position: relative;
}


Et donc voila ce que cela donne : (les rectangle noir c'est la taille que je voudrais obtenir Smiley cligne )
... ok je n'arrive pas à joindre une image Smiley decu bah va falloir faire sans désolé


Merci à tous !
salut,
pas très bien compris mais il ne s'agirait pas d'un simple dépassement de flottants dont tu parles ? Une image aurait été mieux.
Là, le tout premier parent n'a pas de taille concrète, avec ou sans height:100%, sa taille serait la même. Les autres éléments adoptent donc tous un comportement naturel qu'est celui de s'adapter à leur contenu.
Par contre je le redis, une image serait peut être plus claire.
Pour les tableaux c'est grillé car c'est du dynamique et je ne veux pas utiliser la solution vertical car je vais obtenir un organigramme beaucoup trop large et donc illisible alors que le but initial est de gagner en visibilité sur l'arborescence. Sinon je me serais pas embêter autant j'aurais directement pris "SlickMapCSS" Smiley smile

Je vais regarder l'histoires des colonnes factices je l'ai déjà vu plusieurs fois mais je n'y comprend rien.
Comme je l'ai dis, tout dépendra de la hauteur du tout premier parent. Si tu ne la connais pas, tu devras te rabattre sur les tableaux css ou colonnes factrices si tu la connais, voici un exemple simple.
Hélas je ne connais pas la hauteur de mes blocs elles sont variantes car j'alimente mes listes avec une base de données et le secteur Jardin / Bricolage est une catégorie de niveau 1 et il en existe encore beaucoup d'autres ... qui ont plus ou moins de sous catégories ... donc hauteur aléatoire selon les résultats.

Pour moi le factice ne va pas convenir par rapport au css mise en place j'abandonne cette idée et je vais réfléchir à un autre organigramme possible Smiley decu
Modérateur
mini-truc a écrit :
Pour les tableaux c'est grillé car c'est du dynamique

Là la logique m'échappe. Au contraire pour ce genre de trucs ce sont les tableaux qui résistent le mieux au contenus dynamiques.
a écrit :
Oui sauf que comment je calcule mon rowspan ?

???
Je ne pense pas en effet que les colonnes factrices répondent à ce cas précis mais pourquoi non à la mise en page tableau ?
Modifié par Zelalsan (14 Jun 2013 - 21:13)
Administrateur
Bonjour,

il s'agit d'une arborescence qui n'a toutefois pas le style habituel que l'on a l'habitude de voir dans un Plan du site ou une arborescence de fichiers puisque un item de liste n'est pas sous un item parent avec une indentation à gauche mais à sa droite...

arborescence : la liste imbriquée est idéale, si on arrive à la styler. Une liste de paragraphes dans la démo ci-dessous.

CSS : en faisant flotter les paragraphes, la liste adjacente vient à sa droite. Clearfix pour tous les items de liste !
Dans une précédente version, j'avais besoin d'un clear: left sur les second item de chaque liste (et 3e s'il y en avait eu 3, etc) mais soit le clearfix sur les li plutôt que ul et/ou p, soit d'autres instructions enlevées entre temps fait qu'il n'y en a plus besoin.

Attention, le margin-left de 20% ne fait pas 20%... Au 2e niveau, c'est en réalité 20% des 80% restants soit 16% puis 20% des (80-16)% restants, etc
Il faudrait soit utiliser des pixels si le reste du design est de toute façon en pixels, soit rajouter une classe .fractal-lvlN avec N de 1 à 5 sur les différents niveaux de profondeur et faire le calcul :
- 20%
- 25% car 25% de 80% font 20%
- 33% car 33% de 60% font 20%
- 50% car 50% de 40% font 20%

Démo : http://codepen.io/anon/pen/gIpxw

<div class="fractal">
	<ul>
		<li>
			<p>Jardin /Bricolage</p>
			<ul>
				<li>
					<p>Cabanes</p>
					<ul>
						<li>
							<p>Abri</p>
							<ul>
								<li>
									<p>Bois</p>
									<ul>
										<li>
											<p>19 mm</p>
										</li>
										<li>
											<p>44 mm</p>
										</li>
									</ul>
								</li>
								<li>
									<p>Métal</p>
								</li>
							</ul>
						</li>
						<li>
							<p>Garage</p>
						</li>
					</ul>
				</li>
				<li>
					<p>Mobilier</p>
					<ul>
						<li>
							<p>Parasol</p>
						</li>
						<li>
							<p>Salon</p>
						</li>
					</ul>
				</li>
			</ul>
		</li>
	</ul>
</div>


/* clearfix */
.fractal li:after {
  content: "";
  display: table;
  clear: both;
}

.fractal ul {
  margin: 0 0 0 20%;
  padding: 0;
  list-style-type: none;
  background-color: hsla(210, 100%, 40%, 0.5);
}
.fractal > ul { /* first level is pulled to left */
  margin-left: 0;
}

.fractal li {    
  padding: 2px 0 4px 0;
  border: 1px solid #777;
}
.fractal li + li { /* second item (and following, if any) are separated from previous one(s) */
  margin: 8px 0 6px 0;
}

.fractal p {
  float: left;  
  margin: 6px 8px;
  padding: 3px 20px 3px 12px;
  background-color: #ccc;
  border-radius: 4px;
}
Perso j'aurais pensé à une mise en page en tableau css. Genre ça. C'est un peu brouillon pour le HTML mais le principe est là ou alors je n'ai rien compris à ce que tu cherches.
Sujet clos
Aller à