[CSS] petit probleme d'alignement

Bonjour Bonjour !
Alors voilà, j'ai plusieurs petits problèmes :

- Le premier c'est un problème que je rencontre sous FF et sous IE, je n'arrive pas à mettre les deux textes a la meme hauteur je me retrouve avec ceci jme suis dit que c'était pas grave que j'allais mettre des "flaot" mais bon c'était encore pire... (je n'ai pas de screen à disposition désolé)

Je voudrais ne pas devoir utiliser le tableau pour corriger le problème, sauf si c'est le seul moyen, mais j'aimerai le faire que par le css.

- Le second problème est encore un problème d'alignement cette fois corriger sous FF mais qui a créer un bug pour IE en regardant ce screenshot vous constaterai que les bouton "profil, email, www, mp etc..." sont bien collés à la barre noire qui cloture ce bloc, le problème et que sous IE ces boutons se trouvent plusieurs pixel au dessus... le seul moyen que je vois pour corriger ce bug est d'enlever le "padding-bottom : 15px;" que j'ai rajouter, mais ça crée un bug sous FF (les boutons chevauchent la barre de cloture)...

Voilà le code de mon css :

/*Classes de bloc du forum*/
.post {
width : 763px;
max-width : 763px;
margin-top : 20px;
margin-left : 5px;
margin-right : 5px;

}

.titre {
padding-bottom : 10px;
}

.barreh {
width : 763px;
height : 9px;
background-image : url(../design/vs/barre_horizontale.jpg);
font-size : 1px;
}

.barrev {
width : 745px;
background-image : url(../design/vs/barre_verticale.jpg);
font-size : 0.8em;
padding-right : 9px;
padding-left : 9px;
}

.barretitre {
width : 618px;
height : 15px;
margin-left : 117px;
padding-left : 5px;
padding-right : 5px;
padding-top : 1px;
background-image : url(../design/vs/barre_titre.jpg);
color : #cccccc;
font-size : 10px;
font-weight : bold;
}

.postleft {
width : 90px;
padding-top : 9px;
padding-bottom : 9px;
padding-left : 9px;
padding-right : 9px;
}

.postright {
width : 610px;
padding-left : 126px;
padding-right : 9px;
}

.bouton {
width : 628px;
margin-top : 9px;
padding-left : 117px;
padding-bottom : 15px; /*Crée un bug sous IE, mais corrige celui de FF*/
}

.barresignature {
width : 278px;
height : 9px;
background-image : url(../design/vs/barre_signature.jpg);
font-size : 1px;
margin-left : -10px;
margin-top : 9px;
margin-bottom : 9px;
}

et celle de mon html :

<div class="post">
<div class="titre">Test</div>
<div class="barreh"></div>
<div class="barrev">
<div class="barretitre">
<div style="float:left">The test !</div>
<div style="float:right">Le : 16/02/06 à 21:32</div>
</div>
<div style="float:right">
<img src="design/vs/ip.jpg" /><img src="design/vs/reports.jpg" />
</div>
<div class="postleft">
<img src="http://www.zelda64hyrule.com/perso/avatar8.png" />
<br />Kuketsu<br />9999 messages
</div>
<div class="postright">
test ultra ultra test !!!
<div class="barresignature"></div>
</div>
<div class="bouton">
<div style="float:left">
<img src="design/vs/profil.jpg" /><img src="design/v'.$_SESSION['version'].'/email.jpg" /><img src="design/vs/www.jpg" /><img src="design/vs/mp.jpg" />
</div>
<div style="float:right">
<img src="design/vs/delete.jpg" /><img src="design/vs/edit.jpg" /><img src="design/vs/quote.jpg" />
</div>
</div>
</div>
<div class="barreh"></div>
</div>

Voilà en vous remerciant d'avance de votre précieuse aide

Bonne journée !

Tsu

Kuketsu

22 février 2006 à 13:07:59

myabdelis

22 février 2006 à 14:26:50

Le seul problème que je vois, et Dieu sait que je ne suis pas un as comme certain du CSS/XHTML, c'est que dans ton code XHTML, les balises "div" se chevauchent de trop (parfois j'ai eu 4 balises ouvertes, mais à la fin c'était résolu

) et comme ton code CSS s'applique à chaque "div" particulièrement, le navigateur choisit un peu quels attributs mettre.

Mais j'avoue que je n'y connais que très peu. Donc je laisse les autres t'aider mieux que moi.

jp949

22 février 2006 à 15:09:29

quels textes veux-tu aligner sur le screen il n'y a qu'un seul texte.
pour l'autre probleme peut-etre qu'avec un display:block; tu en viendras a bout

22 février 2006 à 15:26:32

Ben le texte de gauche (avatar, pseudo, nombre de messages...) et le texte de droite (celui où c'est marqué "et je test") je voudrai qu'ils soient tous les deux à la même hauteur.

Ok je vais essayé pour le display.

je voudrai ne pas avoir a utiliser de table

[CSS] petit probleme d'alignement

Supprimer

Modérer

Signaler le message aux modérateurs