28173 sujets

CSS et mise en forme, CSS3

Cherche idée pour float + alignement bottom

bonjour,
apres avoir recherché et fouiller la faq, je désepère de trouver une solution autre que de passer par des tableaux...

voila un petit schéma explicatif
et l'adresse de la page de test.

http://arkepolis.org/test/align_bottom.gif


Quand j'applique un float left et un align bottom à ma class post soit les blocs ne sont pas alignés en bas, soit ils sont tous superposés si j'utilise les position:relative... Quelle est la meilleure solution sans passer par des tableaux et qui soit compatible mac et pc ???
j'ai trouvé une solution mais ce ne sont pas des floats...
Tout d'abord il faut adapter le html :
le premier post devient post1, le deuxième post2 etc...
		<div class="post1">
			<div class="contentu-post" lang="fr"><img src="blockbottom_files/img1.jpg" alt=""></div>
			<p class="date">mardi 29 novembre 2005</p>
			<h2 id="bloc1" class="sous-titre"><a href="http://arkepolis.org/bloc1.html" title="Mon premier bloc">Bloc 1</a></h2>
		</div>
		<div class="post2">
			<div class="contentu-post" lang="fr"><img src="blockbottom_files/img2.jpg" alt=""></div>
			<p class="date">mardi 29 novembre 2005</p>
			<h2 id="bloc2" class="sous-titre"><a href="http://arkepolis.org/bloc2.html" title="Mon premier bloc">Bloc 2</a></h2>
		</div>
		<div class="post3">
			<div class="contentu-post" lang="fr"><img src="blockbottom_files/img3.jpg" alt=""></div>
			<p class="date">mardi 29 novembre 2005</p>
			<h2 id="bloc3" class="sous-titre"><a href="http://arkepolis.org/bloc3.html" title="Mon premier bloc">Bloc 2</a></h2>
		</div>
		<div class="post4">

Le css :
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	background-color: #565556;
	background-image: url(body.jpg);
	background-repeat: repeat-x;
	background-position: left top;
	vertical-align: middle;
	margin: 0px;
	padding: 0px;
	width: auto;
}

#container {
position:absolute;
top: 10px;
left: 10px;
padding: 0px;
width:1200px;
border:1px solid white;
height: 100%;
}
#content{
position: absolute;
top: 52px;
left: 0px;
width: 1098px;
margin-left:0px;
border:1px solid yellow;
height:600px;
}
#header {
position:absolute;
top: 0px;
left: 0px;
height: 40px;
font-size: 10px;
margin: 0; padding: 0;
width: 1098px;
}

.post1, .post2, .post3, .post4{
position: absolute;
bottom: 0px;
border:1px solid red;
}

.post1 {
	left: 0px;
	width: 200px;
}
.post2 {
	left: 200px;
	width: 150px;
}
.post3 {
	left: 350px;
	width: 150px;
}
.post4 {
	left: 500px;
	width: 200px;
}

.contenu-post{
width:auto;
}

.date{
font-size: 10px;}

#footer{
position:absolute;
top: 654px;
left: 0px;
}
Humm j'aurais du préciser que les post sont affichés par une boucle en php (dans le content) qui va chercher les x derniers posts... à la manière d'un blog..

Pour une page statique cela fonctionne mais dès que ça devient dynamique tout se complique...

merci quand même hannah pour ta réponse..
je continue de chercher. Smiley confus
J'ai pensé à une fonction en javascript qui récupererait la hauteur de chaque post et qui repercuterait dans une boucle le margin top equivalent à ce qu'il faut pour les aligner tous sur une meme ligne...

Mais si le javascript est désactivé, ca ne marchera pas...

toujours pas d'idée ?
Modifié par keusta (02 Dec 2005 - 17:37)
Bonjour,

Le problème est très simple à résoudre en CSS2... à un petit détail près : la propriété nécessaire est implémentée par tous les navigateurs modernes, mais pas IE 6.0 Win.

<style type="text/css">
<!-- 
#wrapper {
border: 1px solid;
display: table;
}
.post {
[b]display: table-cell;[/b]
vertical-align: bottom;
padding: 0 10px;
width: 33%;
}
-->
</style>
</head>
<body>
<div id="wrapper">
	<div class="post">
		<p>...</p>
	</div>
	<div class="post">
		<p>...</p>
	</div>
	<div class="post">
		<p>...</p>
	</div>
</div>


Pour compléter le tableau, une seconde solution, encore plus simple... suppose une autre propriété que ne supporte ni IE ni Firefox :

#wrapper {
border: 1px solid;
}
.post {
[b]display: inline-block;[/b]
width: 33%;
vertical-align: bottom;
}


(L'idée commune aux deux solutions étant de rendre possible l'utilisation de vertical-align entre des éléments blocs)

Désolé...
Modifié par Laurent Denis (02 Dec 2005 - 18:06)
merci quand même, je crois qu'en fait je suis trop exigeant ou trop impatient
ou les deux... je vais construire des tableaux parceque je ne peux pas négliger IE sous windows..

et ce que je veux est trop précis... mais peut etre qu'avec css3 les standardistes écouteront un peu plus les webdesigners, enfin je l'espere..
Je remonte ce message, ayant le meme probleme !

Si entre temps quelqu'un a trouvé une solution...

Je pense etre moins compliqué, voici a quoi ressemble la mise en page que je desire :

http://img488.imageshack.us/img488/2222/modele19xk.th.jpg

Je cherche desperement sans trouver de solution marchant à la fois sur IE et FF....

Si quelqu'un me donne une solution, je lui serais mille fois reconnaissant...

Merci de votre aide !
Sujet clos
Aller à