28220 sujets

CSS et mise en forme, CSS3

bonjour tout le monde !

nous avons dans l'idée de faire un livre d'or sous cette forme : upload/3151-idee.gif

mnt on se pose la question comment y gérer en css en sachant qu'il y aura plusieurs messages par page.
il est clair que la bulle se "découpe" en trois parties,(tete, corps extensible et pied) mais comment gérer l'émoticone (variable via php/mysql)???

on attend avec impatience vos remarques

vgentizon et p_tite_jo
peut être que ce post merriterait une petite reformulation... étant donné le nombre de réponse ! Smiley confus
tout d'abord une petite précsion... ne croyez pas qu'on attend de vous que vous fassiez le boulot à notre place... ça fait un p'tit moment qu'on traine sur ce forum et de 1 on a vu que c'était pas le style de la maison et de 2, pour nous les avantages d'une telle "politique" sont clairs. Maintenant que ceci est dit, intéressons nous à notre livre d'or... Nous avons posté dans l'espoir de partager notre reflexion avec vous... que les maitres de la CSS nous donne leur point de vue sur la chose afin que nous ayons nos idées claires avant de mettre les mains dans le cambouis...

Voici notre raisonnement... on pensait partager notre image en deux div.. gauche et droite, la gauche contenant notre petit bonhomme et la droite notre bulle. La gauche serait positionnée en flottante. La droite serait divisée en 4 parties.
1: le haut de la bulle, une image en background ( pr les arrondis)
2: le centre de la bulle, contenant le message du livre d'or, une div avec un fond de la meme couleur que l'image du haut afin qu'elle puisse s'agrandir en fonction du message posté.
3: meme raisonnement que pour le haut. une image en background.
4. image a zone réactives (les deux zones email et site).

le soucis que nous avons c'est que nous sommes pas certains que cette méthode puisse nous permettre de positionné le bonhomme à la bonne place par rapport à la bulle..
que pensez-vous de notre raisonnement ? voyez-vous une autre manière de faire ?

p_tite_jo et vgentizon
Hello,

tu as bien fait de préciser tout cela Smiley smile
Votre idée est bonne il me semble.
En s'arrangeant pour que les deux "colonnes" aient la même hauteur (cf modèles Alsa ou FAQ), il suffira de le positionner en bas.
Les parties 3 et 4 pourraient même être une seule.

Peut-être essayez de commencer un developpement, on verra au fur et à mesure Smiley cligne
p_tite_jo a écrit :
le soucis que nous avons c'est que nous sommes pas certains que cette méthode puisse nous permettre de positionné le bonhomme à la bonne place par rapport à la bulle..

Vgentizon parle d'émoticon. Si c'est de l'avatar dont vous parlez (avatar = variable), je ne vois pas le problème puisqu'il n'y a pas de chevauchement entre les images. Il suffirait que l'avartar soit toujours bien positionné sur la droite du bord de son image.

PS : c'est pas bien de se citer en premier quand on parle pour deux Smiley cligne
cf : carte postale (hors de la faq pour une fois Smiley langue )
Merci à vous deux pour vos réponses.
En effet, yyoupla y a pas de raison de faire deux div différentes pour 3 et 4.
Et oui c'est de l'avatar...
a écrit :
PS : c'est pas bien de se citer en premier quand on parle pour deux
J'sais bien mais c'est lui qui a commencé Smiley langue ! j'allais quand meme pas être polie alors que lui ne l'est pas Smiley cligne

Je vais gentiment mettre les mains dans le cambouis et je reviendrai si tout se passe pas comme je veux !
Encore Merci ! A+
Modifié par p_tite_jo (29 Nov 2005 - 14:58)
Bonjour !!!

sur firefox, j'ai réussi à obtenir le résultat que je voulais... mais sur internet explorer, c'est n'importe quoi Smiley confus .

Voici ma mage

C'est impressionnant quand même la différence qu'il y a entre les deux navigateurs Smiley decu
Modérateur
bonjour,
en inserant dans "perso", tete, main et pied, tu n'as plus ce souci de decallage, d'ailleurs, la petite tete pourrait etre dans livre_or, et "perso" eliminé.
ex:
<html>

<head>
  <title>Design livre d'or</title>
  <style type="text/css">


div.livre_or {width:524px;
background:url("http://www.joelleg.ch/pages/livre_or/img/perso.png");
background-position: left bottom; background-repeat:no-repeat;
margin: 0;
padding: 0;

}

div.bulle{
margin-left: 75px;
height: 181px;
width: 448px;
}

div.tete{background:url("http://www.joelleg.ch/pages/livre_or/img/tete.png");
         background-repeat: no-repeat;
         height:  13px;
	overflow:hidden;/* ou : background-position: bottom; */
         }
div.main{background:url("http://www.joelleg.ch/pages/livre_or/img/main.png");
         background-repeat: no-repeat;
         height:  102px;
         }
div.pied{background:url("http://www.joelleg.ch/pages/livre_or/img/pied.png");
         background-repeat: no-repeat;
         height:  66px;
         }
  </style>
</head>

<body>

<div class="livre_or">
                      
                       

                       <div class="bulle">
                            <div class="tete">
                            </div>
                            <div class="main">
                            </div>
                            <div class="pied">
                            </div>

                      
</div>
</div>


</body>

</html>

et pour forcer IE a fficher tes 13px de haut a "tete", ajoute un "overflow:hidden;"
Tu peux aussi positionner ton image en background a bottom .
a plus
re bonsoir!
tout d'abord merci pour vos précédentes réponses... comme d'hab vous êtes d'une grande aide Smiley biggrin !
J'ai néeanmoins un dernier soucis ( du moins j'espère que c'est le dernier Smiley ohwell ) avec ce livre d'or


div.livre_or {width:524px;
background:url("http://www.joelleg.ch/pages/livre_or/img/perso.png");
background-position: left bottom; background-repeat:no-repeat;
margin: 0;
padding: 0;

}


mon image perso.png est maintenant une variable...
J'ai essayé de la mettre en image c'est a dire

echo "<div class=\"livre_or\" >
         <img=\"../img/$perso.png\"/>
      <div class=\"tete\"></div>";  

mais impossible de la remettre à sa place... J'ai alors tenté de mettre directement le background dans ma div ( à l'ancienne)

echo "<div class=\"livre_or\" background=\"/img/$perso.png\">
<div class=\"tete\">
</div>";  

mais la encore, aucun succès...
deux possibilités, soit mes idées sont bonnes et je me suis plantée à quelque part, soit je suis à l'ouest.. quoi qu'il en soit, j'ai besoin de votre aide Smiley cligne
Modifié par p_tite_jo (13 Dec 2005 - 22:19)
Modérateur
bonjour,
tu as oublier les ". !

<?php echo "<div class=\"livre_or\" background=\"/img/".$perso.".png\">
<div class=\"tete\">
</div>";  ?>

a plus
Modifié par gcyrillus (13 Dec 2005 - 22:29)
juste! merci!
par contre ça ne marche toujours pas.. j'arrive pas à afficher le background.. j'ai fait un p'tit test et

<body background="../pages/livre_or/img/perso.gif> 

passe mais,

<div background="../pages/livre_or/img/perso.gif">

ne fonctionne pas... quelqu'un sait pourquoi ?
Modifié par p_tite_jo (13 Dec 2005 - 23:36)
Modérateur
je ne voit pas, a part peut-etre une apostrophe manquante, mais pourquoi ne passe tu pas simplement les styles, comme d'habitude dans l'entete de la page , ou dans fichier externe, plutot que dans les balises, ce serait plus facile a gerer par la suite pour vous .
bien sur que ce serait plus simple, mais j'ai besoin du php pour mettre ma variable.. on peut mettre du php dans la css ?
essaye plutot :
<div style="background-image:url('../pages/livre_or/img/perso.gif');background-repeat : none;">

Modifié par sane79 (14 Dec 2005 - 12:34)
Modérateur
bonjour,
oui, tu peut mettre du php dans le css, en particulier si celui ci est declarer dans entre les balises d'entete de ta page, ensuite pour un fichier css. je pense que de cette façon c'est aussi possible ((okay avec IE et FX, les autres.. ?):
<link rel="stylesheet" href="style.php" type="text/css" />

ensuite tu met simplement les balise php et le script ou tu en as besoin dans ta feuille de style renommé.
Une autre technique est de declarer par le biais du fichier ".htacces" de traiter les fichier css comme les fichier "php", ( je suis desolé je n'ai plus la syntaxe en memoire).
a plus