28173 sujets

CSS et mise en forme, CSS3

Bonsoir à tous.
Mon petit souci aprés avoir testé plusieurs solutions je me vois obligé de me tourné vers vous. En effet aprés avoir placé toute mes boites je me suis attaqué au contenue. Je voulais une image et le texte aligné à coté, je ne pensais pas que cela me donnerais autant de mal. Smiley bawling

Ce que j'ai essayé:
align="left" dans la balise.
float-left dans le css.

La solution qui me semble la meilleur est le foat avec le rajout d'un autre div clear-both. mais là je me retouve avec deux autres problème.
1) un espace trop important en dessous mon image.
2) un décalage de ma boite gauche vers le bas, que je retrouve quand meme si je n'utilise pas le clear-both.
je place ici un liens pour vous rendre compte et vers le fichier CSS ici
Merci beaucoup et A+
Modifié par ali13 (20 Feb 2006 - 12:54)
Bonjour, je pense avoir trouvé la solution mais j'ai ce décalage qui me chagrine et je ne voit vraiment pas comment je peut m'y prendre pour réglé le souci.

Le Css:
.contenaire{
height:92px; /* 92 pixel par ce que imgage 80px margin 5+5px et border 1+1px */
background:#E9E9E9 ;
/*padding:0px 0px 0px 0px; enlevé au profit de .paragraphe et de h1*/
margin-top:0px;
margin-left:180px;
margin-right:5px;
margin-bottom:10px;
}

.img-p{
width:80px;
height:80px;
margin:5px;
border:solid 1px;
background-image:url(../images/img-test.gif);
background-repeat:no-repeat;
float:left;
}

.paragraphe-1{
padding-left:5px;
}


le code HTML:

<!-- debut du contenaire image aligé à gauche et texte l'entoure par la droite -->
<div class="contenaire">			
<p class="paragraphe-1">			
<div class="img-p"> </div>
ici je place les actualitées: une images avec legende, et le texte sur quatre ligne.</p> 
</div>
<!-- fin du contenaire-->


Est ce que le float-left de image est de trop ?
les liens du post de dessus sont toujours valide pour ceut qui vroudrais voir et se rendre compte.

Merci et A+.
Modifié par ali13 (19 Feb 2006 - 13:41)
Salut,
En faite j'ai essayer avec align-left dans la balise img mais le résulta n'étais pas au rendez-vous. alors j'ai exploré plusieur solution possible et ce que tu vois là est ce qui me semblais le plus satisfaisant. Car dans les autres cas l'image sortait de ma Div. Alors je me suis dit que si je la plaçais dans une autre div sa pouvais changé quelque chose.

Et si il n'y a aucun intéret je change c'est pas grave. Mais j'aimerais bien comprendre pourquois une chose aussi simple peut devenir aussi casse tête que ça.

Moi je ne veut que un image et du texte à coté dans un contenaire placé au centre, qui lui mème et entouré de deux autre zone.

Aussi je vien de m'apercevoir que sous IE sa marche je n'est que les petits espace à réglé certainement du à mes padding. (a voir).

Si non y pas de solution ?
Merci A+
Modifié par ali13 (19 Feb 2006 - 15:27)
Bonsoir, si je vous dit que je suis brune aux yeux vert, vous pensez que j'aurais plus de succés pour des réponses Smiley lol

Je suis revenue à align-left dans la balise img. Et pour évité que mon image sorte de ma boite au cas ou il n'y a pas quatre ou cinq lignes, j'ai placé min-height:92px. Il n'y avais donc pas d'intéret à placé mon image dans une Div avec background-attachment. Par contre sa ne marche plus avec IE Smiley eek Mais en fouillant je croit avoir vue une soluce pour ça.

Mai dans toute ces batailles j'ai belle et bien perdu celle du décalage Smiley ohwell
Et vraiment j'aimerais un petit coup de main. Promis aprés j'irrais cherchez le livre chez mon libraire Smiley lol .

j'oubliais j'ai laisser le truc que je ne comprend pas, si je met un border 1px à mon .contenaire il se calera bien en le mettant à zero il se redécale.

J'ais fait du menage dans mon code ont doit y voir plus claire.

A+ et merci à la personne qui se dévoueras. Smiley biglove Smiley biglove
Modifié par ali13 (19 Feb 2006 - 22:29)