"tableau" en div, vos avis sur le code || vertical align en css

Marsh Posté le 15-02-2007 à 18:29:45

Bonjour;

je refais actuellement mon site; et clarifie pour l'occasion le code.

Je dois notamment modifier le cadre rouge de présentation (ex : http://henol.fr/articles/debian_apache.php )
Mais c'est loin d'être la plus évidente association de div que j'ai faite.

J'arrive pour l'instant à cela :

Citation :

<div align=\"center\">
<div align=\"left\" class=\"presentation\">
<div class=\"presentation1\">
<div class=\"presentation2\">
<span class=\"presentation_legende\">Difficulté</span><br />
<span class=\"presentation_contenu1\">
";
$i = 1;
while( $i <= $difficulte )
{
echo "<img src=\"images/etoile-r.gif\" />";
$i++;
}
$i = $difficulte+1;
while( $i <= 5 )
{
echo "<img src=\"images/etoile-b.gif\" />";
$i++;
}
echo "
</span>
</div>
<div class=\"presentation3\">
<span class=\"presentation_legende\">Durée approximative</span>
</div>
<span class=\"presentation_contenu1\">$duree</span>
</div>
<div class=\"presentation3\">
<span class=\"presentation_legende\">Logiciels proposés</span>
</div>
<span class=\"presentation_contenu2\">
test
</span>
</div>
</div>

Mais je n'en suis pas très satisfait
Qu'en pensez vous ?
Puis je le simplifier ?

Sinon, j'aimerais beaucoup que la liste des logiciels apparraisent centrée verticalement; ce qui semble -presque- impossible en css, puis je vous demander de l'aide ?

Merci beaucoup

Message cité 1 fois

Reply

Marsh Posté le 15-02-2007 à 18:29:45

Reply

Marsh Posté le 15-02-2007 à 19:49:05

Oups, et voici la partie css associée :

Citation :

.presentation {
border: 1px solid #F2BBBD;
height: 75px;
width: 500px;
}
.presentation1 {
float: right;
height: 75px;
width: 150px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #F2BBBD;
}
.presentation2 {
height: 36px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #F2BBBD;
}
.presentation3 {
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #F2BBBD;
}
.presentation_legende {
padding-left: 5px;
font-style: italic;
}
.presentation_contenu1 {
text-align: center;
margin: 6px;
display: block;
}
.presentation_contenu2 {
color: #666666;
margin: 6px;
display: block;
}

Reply

Marsh Posté le 15-02-2007 à 20:16:00

Proxounet a écrit :

Bonjour;

Salut !

J'ai pas analysé ton code, mais je ressors encore et toujours ma solution pour centrer un div verticalement :
Tu lui attribue un width et un height
Tu le place en absolute à 50% du haut
Tu lui colle une marge négative qui vaut la moitié de la hauteur du div

Fonctionne aussi en centrage horizontal.

Un exemple ? Oui :

Code :

#ton_div
{
width:200px;
height:200px;
position:absolute;
top:50%;
margin-top:-100px;
left:50%
margin:left:-100px;
}

En espérant t'avoir aidé

Sinon la prochaine fois, va plutot voir dans la cat Programmation pour ce genre de question

Message édité par Profil supprimé le 16-02-2007 à 17:44:44

Reply

Marsh Posté le 16-02-2007 à 05:19:15

Encore beaucoup d'erreurs de sémantique et de méconnaissance des regles css.
ça bidouille, ça bidouille, mais tout ça il va falloir le désapprendre un jour pour gagner du temps et travailler propre.

Keep on going....

Reply

Marsh Posté le 16-02-2007 à 16:00:22

C'est bien pour cela que je poste ici, je me rend bien comtpe qu'on peut faire mieux,
mais sans doute parceque je suis habitué aux cadres, je ne me rend pas compte comment mieux faire,
donc si vous avez des directions à me proposer, je m'y dirigerai volontier

Reply

"tableau" en div, vos avis sur le code || vertical align en css

Sujets relatifs:

Leave a Replay