[Résolu] Problème avec un cadre aux coins ronds.

Bonjour,

Voila ce que je voudrais coder en css / xhtml :

http://img324.imageshack.us/img324/2570/schema4ub.jpg

Un schéma vaut mieux que du texte (c'est juste un schéma donc le design est moche)

Bon alors ce que j'ai pensé c'est découpé en 3 parties le haut , le bas et le fond ! Donc 3 divs différents :

<div class="haut"></div>
<div class="fond"></div>
<div class="bas"></div>

Le problème vient que dans le div : "haut" je voudrais écrire titre de la news comme dans le schéma d'un certain style ET écrire aussi la date à droite d'un autre style tout ca dans le div "haut".

Je n'y arrive pas ca plante de partout bref j'aimerais une piste et sur demande je donne mon code css actuel

J'éspere avoit été clair et merci d'avance pour votre aide
Modifié par Snoopy17 (18 Dec 2005 - 21:08)

Théoriquement avec deux div ça devrait être faisable :

Un div pour le haut en background rouge (titre) et un div avec un fond adaptable (avec les coins arrondis en bas).

Ce cas a été traité dans le livre de Raphaël, j'imagine que tu peux trouver la solution dans la partie tutoriels

Le problème ne vient pas de là.

J'arrive à obtenir un cadre parfait avec marque "titre de la news" au bon endroit comme sur le schéma mais mon problème vient du fait que je n'arrive pas à placer "22/03/2008" comme sur le schéma dans le div "haut".

Merci de votre aide

Le mieux serais que tu nous montre ton code html + css pour qu'on voit ou tu plante, car theoriquement c'est bon :

<div id="haut"> /* avec en background ton encadre rouge */
   <h1>Titre de la news</h1> /* avec un style adapté */
   00/00/000 /* le style du texte sera adapté avec un text-align:right */
</div>
<div id="contenu">Lorem ipsum...</div> /* background avec repeat-y */
<div id="bas"></div> /* ton bas en background, en specifiant une taille au bloc */

Modifié par Toutankharton (18 Dec 2005 - 18:10)

voila mon code xhtml :

<!-- titre du bloc -->
	<div class="titre-bloc">
	<h2 class="test">test de news</h2>
	<span class="date-news">23/02/2005</span>
	</div>
	
	<!-- texte du bloc -->
	<div class="texte-bloc">
	  <p>test</p>  
		</div>

	<!-- le bas du bloc -->
	<div class="bas-bloc"></div>

et voila mon css :

.titre-bloc {
width:560px;
height:21px;
background-image:url(images/titre-bloc.jpg);
background-repeat:repeat-x;
padding-left:25px;
padding-right:5px;
padding-top:6px;
}
h2.test {
font-family: Tahoma;
font-size: 12px;
color: #FFFFFF;
font-weight: bold;
}
.texte-bloc {
width:569px;
background-image:url(images/bloc-fond.jpg);
background-repeat:repeat-y;
font-family: Tahoma;
font-size: 12px;
color: #34383a;
padding-left:10px;
padding-right:10px;
}
.bas-bloc {
width:590px;
height:7px;
font-size:0;
background-image:url(images/bloc-bas.jpg);
}
.date-news {
font-size:10px;
color:#000000;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-style:oblique;
text-align:right;
}

La date passe en dessous du div class="bloc-titre"

merci d'avance
Modifié par Snoopy17 (18 Dec 2005 - 18:21)

Bonsoir,

Utiliser un float:left sur le titre et régler sa largeur.

Ou inverser le span et le titre, et faire flotter le span à droite, ce qui évitera d'avoir à gérer une largeur.

Bref, faire flotter.
Modifié par Laurent Denis (18 Dec 2005 - 18:29)

Merci Laurent Denis ca marche

J'ai inversé le span et le titre et j'ai mis un float:right au span mais avant de mettre [Résolu] j'aimerais quelques explications sur ce que j'ai fais car mettre du code sans le comprendre ne sert à rien.

Voila mes quéstions :
- Pourquoi j'ai du inverser le titre et le span ?
- Le float:right signifie t-il flotter à droite si oui j'aimerais avoir quelques petites explications sur son fonctionnement

J'éspere que je n'en fait pas trop
Aller encore :
Pourrais-tu m'expliquer si j'aurais float:left au titre pour pourquoi j'aurais du regler sa largeur ?

Merci d'avance

Re-bonsoir,

Pour l'inversion du <span> et du <h2>: l'utilité du float, c'est que l'élément flottant laisse ce qui le suit se placer à côté de lui... Il faut donc qu'il soit en premier
- le span en float:right se range le plus à droite possible dans le conteneur
- le h2 qui le suit se place à la même hauteur tant qu'il reste assez de place en largeur.

Sinon, désolé pour les explications précédentes un peu rapides. Car elles étaient tellement bâclées qu'elles comportaient une erreur, en fait

En effet : ce n'est pas une largeur qu'il y aurait eu à gérer avec la solution du titre en float:left, mais des alignements:
- on commençait par le titre <h2> qu'on faisait flotter à gauche, ce qui veut dire qu'il laissait ce qui suit se mettre sur la même ligne que lui.
- le <span> pouvait donc se mettre à côté de lui, mais se retrouvait aligné à gauche, au lieu d'être du côté droit
- il aurait donc fallu ajouter un text-align:right sur le <div> parent pour que le span se mette à droite... (non, un text-align:right directement sur le <span> ne peut pas marcher, car c'est un élément en ligne).
- et du coup, ajouter aussi un text-align:left sur le <h2> qui héritait malencontreusement du text-align:right du <div> parent ...
- Ouf !

Comme tu le vois, il était plus simple d'utiliser un float:right sur le span...

<edit>Et dire, quand même, que... si CSS2.1 était vraiment implémentée par Firefox et IE Win... on pourrait faire tout ça encore plus simplement, sans flottants, avec un simple display, comme dans Opera, Safari et Konqueror...
Mais chut ! Il ne faut pas le répéter : ce n'est pas politiquement correct de dire du mal de Firefox
</>
Modifié par Laurent Denis (18 Dec 2005 - 19:34)

Ah merci Laurent Denis c'est beaucoup plus clair comme ca !

Je prends note de la 2ème méthode aussi qui peut s'averer utile de temps à autre

Je rajoute [Résolu] cette fois