28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,
Je tiens à préciser qu'avant de poster j'ai effectué des milliers de recherche sans arriver à trouver de réponses. Je développe un site pour mon entreprise (stage) où evidemment je dois gérer du CSS (j'avoue je suis nul en css). Bref, voici le problème.
J'ai mis en place un genre de petit forum où les réponses des utilisateurs doivent s'affichent dans une image (ordre du boss).
Mon code se compose de la manière suivante:
						
echo "<div class='boite'>"; //Le bloc conteneur
echo '<p class="txt">'.$row["contenu"].'</p>'; //Le contenu du message posté
echo "<img class='img_forum' src='../../images/milieu.png'>";//L'image 					
echo "</div>";


Et voici le code css:



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

.img_forum{
position:absolute;
width:100%;
height:100%;
top:0px;
}

.boite p{
position:relative;
padding: 20px;
z-index: 1; //pour qu'il apparaisse au dessus du txt
}


Bref, sous Firefox aucun problème mais sous IE gros problème comme vous pouvez le voir, l'image empiète sur le prochain bloc. Je sais que si je met height:200px; ca fonctionnera mais le but c'est d'avoir une image qui s'adapte au texte en quelque sorte.
Auriez-vous une astuce?
Merci d'avance Smiley cligne upload/20634-firefox.JPG upload/20634-ie7.JPG
Modifié par yann0807 (31 Mar 2009 - 09:24)
Pourquoi gérer l'image dans le html ?
Alors qu'il te suffit de séparer ton image en 3 niveaux.
une pour la bordure haut.
une pour la bordure basse.
et une dernière que tu fera répéter sur la hauteur.

Niveau html cela ressemblera à ça :

<div class="boite"><!-- gere la hauteur background avec repeat-y -->
  <div class="boite-top"><!-- gere la bordure haute : background avec top left no-repeat -->
    <div class="boite-bottom"><!-- gere la bordure basse background avec bottom left no-repeat -->
       Ton contenu
   </div>
  </div>
</div>

Ceci sera beaucoup plus propre et efficace.
Bonsoir et merci de ta réponse.
Bah écoute après avoir discuté avec quelqu'un de très doué en CSS c'est la solution qui m'a été suggéré. Et oui hélas je débute mais merci pour ta réponse.
C'est que je vais faire.
;)
yann0807 a écrit :
Bonsoir et merci de ta réponse.
Bah écoute après avoir discuté avec quelqu'un de très doué en CSS c'est la solution qui m'a été suggéré. Et oui hélas je débute mais merci pour ta réponse.
C'est que je vais faire.
;)

Considères-tu ce sujet comme [résolu] ? Smiley cligne

Cdt,
Sylvain