5568 sujets

Sémantique web et HTML

Bon, ya un joli tutorial ici, mais c'est pas exactement ce que j'ai de besoin.

http://css.alsacreations.com/Tutoriels-et-articles-divers/Des-blocs-de-meme-hauteur-sans-tableaux

Mon problème, c'est que parfois, c'est la collone gauche qui va devoir étirer, parfois c'est la droite. En principe, je ne peux pas prévoire laquelle devra étirer. J'ai essayé différentes idées sans succès.

À prendre note, chaque collone dois prendre 50% de la largeur disponible pour le contenu. Un 280 px est réservé à gauche pour le menu (lui même dans une div).

Voici mon code css présentement:

#content {
margin-left: 280px;
min-height: 380px;
}
.section {
width: 100%;
}
.links{
margin-right: 50%;
width: 50%;
}
.resources {
position: absolute;
right:0px;
width: 50%;
}


Et voici le xhtml

<div id="content">
	<h1>Links</h1>
	<h2 class="sidebar-title">General Links</h2>
	<div class="section">
		<div class="links">
			<ul>
				<li><a href="http://librairyrat.blogspot.com/atom.xml" title="Atom Feed"><img alt="Atom Feed" src="http://img.photobucket.com/albums/v168/joalang/Blog/atom.jpg" /></a></li>
 	 			<li><a href="http://google.com" title="Search Engine">Google</a></li>
 	 			<li><a href="http://gmail.com" title="Mail Service">Gmail</a></li>
 	 			<li><a href="http://www.mmogchart.com/" title="Massive Multiplayer Online Role Playing Game Chart">mmorpg chart</a></li>
			</ul>
		</div>
		<div class="resources">
			<p>Ceci est du contenu</p>
		</div>
	</div>
	<h2 class="sidebar-title">Programs</h2>
<!-- Multiples sections en tout point semblable à en haut -->
</div>


Absolu aurait pus fonctionner si j'avais pas le problème de ne pas savoir quel coté dois agrandir. Si sa tombe que c'est l'élément qui est le plus grand, alors le tout embarque par dessus le contenu en dessous. Je l'ai quand même essayé sans succès d'ailleur.

Un autre prolème, mes fameux 50% prennent 50% de la page et non de l'élément parrent <div id="content"> qui prend toute la largeur de la page moin les 280 px du menu.
Modifié par Enalung (30 Oct 2005 - 17:02)
J'ai découvert un tag css que je ne connaissais pas avant. Ce code fait exactement ce que je veux.


.section {
width: 100%;
}
.links{
width: 50%;
min-width: 230px;
display: table-cell;
}
.resources {
width: 50%;
min-width: 230px;
display: table-cell;
}


C'est une solution, seulement ce n'est pas exactement celle que je recherchais. Le fait que je dois afficher mes div comme des cellules de tableau me rappel de ce que j'essaie d'éviter sur ma page. Les tables sont faites pour afficher l'information après tout, pas pour la formater. Si quelqu'un a une meilleur solution, gêner vous surtout pas!
Modifié par Enalung (30 Oct 2005 - 03:30)
Bonjour,

Les propriétés de rendu CSS display:table et consors n'ont aucun rapport avec le formattage à l'aide d'éléments HTML table et Cie.

Il s'agit uniquement d'un mode de formatage visuel CSS qui n'entraîne aucune confusion entre structure et présentation.

display:table-cell est donc une solution tout à fait conforme.