Rechercher : dans
Par :

Problème de cadre arrondis...

Dernière réponse le 16 oct 2007 à 17:09:23 Jean_2, le 15 oct 2007 à 16:42:25 
 Signaler ce message aux modérateurs

Bonjour,

Je souhaite faire des coins arrondis sur un de mes cadres.
Pour celà, j'ai crée des 4 images que j'insère par des balises div.
Pour les coins haut gauche et haut droit, ça marche parfaitement.
Pour les coins du bas, ils ne sont pas bien placés (un peu en dessous du cadre... je ne vois pas pourquoi...)

Voici le code CSS concerné :

#coin_haut_gauche{float:left;} #coin_haut_droit{float:right;} #coin_bas_gauche{float:left;} #coin_bas_droit{float:right;}
#ce_cadre
{
width: 720px; min-height: 450px;
margin-left: 20%;
background-color: #0e0943;
font-family: Verdana, 'Bitstream Vera Sans',Arial, "Arial Black", "Times New Roman", Times; color:#ffffff; text-align: justify;
}

Voici le code html :

<div id="ce_cadre">
<div id="coin_haut_droit"><img src="images/coin_haut_droit.gif" alt="coin_haut_droit"></div>
<div id="coin_haut_gauche"><img src="images/coin_haut_gauche.gif" alt="coin_haut_gauche"></div>

<p>Du_texte</p>

<div id="coin_bas_droit"><img src="images/coin_bas_droit.gif" alt="coin_bas_droit"></div>
<div id="coin_bas_gauche"><img src="images/coin_bas_gauche.gif" alt="coin_bas_gauche"></div>
</div>

Comment ça se fait ???
C'est pas très joli lol

Une Idée ???

Configuration: Windows XP
Firefox 2.0.0.7

Meilleures réponses pour « problème de cadre arrondis... » dans :
Cadre photo numérique : comment choisir ? VoirUn cadre photo numérique a l’avantage de pouvoir diffuser vos photos au format numérique sans ordinateur. Exit le cadre photo classique pour lequel il faut imprimer les photos ! Côté technologies, du plus simple au plus sophistiqué, nos astuces...

1

Dalida, le 15 oct 2007 à 17:21:44

Salut,

il faut le faire en css pure, par de balise '<img>'.
un exemple
[ Mathieu ]

"Les jeunes c'est l'insécurité
il faudrait tous les enfermer!" BxN 1985

Répondre à Dalida

2

Jean_2, le 15 oct 2007 à 18:11:25

Dalida, sur cette page il est où le css ? c'est que du html non ?

il y a bien :
<link rel="stylesheet" type="text/css" href="styles/bordure.css"

mais pas le fichier css en question...

Répondre à Jean_2

3

Dalida, le 15 oct 2007 à 18:17:20

dalida, sur cette page il est où le css ? c'est que du html non ?
ah ba non !

il y a bien :
<link rel="stylesheet" type="text/css" href="styles/bordure.css"
mais pas le fichier css en question...

à partir de là tu peux recomposer son adresse.
quand tu affiches le document, dans la barre d'adresse, tu remplaces le nom du fichier par l'adresse relative du fichier css.
http://www.grainedekeupon.fr/ccm/bordure.html
devient
http://www.grainedekeupon.fr/ccm/styles/bordure.css
[ Mathieu ]

"Les jeunes c'est l'insécurité
il faudrait tous les enfermer!" BxN 1985

Répondre à Dalida

5

Jean_2, le 15 oct 2007 à 18:50:48

J'ai repris les codes...

mais ça marche pas pour le bas de mon cadre :

Mon cadre est l'endroit ou est le contenu de mon site.
En dessous, j'ai mis un pied de page.

Maintenant, mon pied de page n'est plus sous mon cadre mais il est au-dessus.
de plus, une fois que mon cadre passe en dessous de mon pied de page, il n'a plus de couleur de fond.

Par contre, les coins sont bien tout en bas...

Répondre à Jean_2

6

Dalida, le 15 oct 2007 à 19:02:03

Dans le code il faut virer ce qui est en trop si il y a.
et pour ton pied de page, essaie de lui coller un {clear:both;}.
je suppose que j'ai dû mettre une boite flottante.
[ Mathieu ]

"Les jeunes c'est l'insécurité
il faudrait tous les enfermer!" BxN 1985

Répondre à Dalida

7

Dalida, le 15 oct 2007 à 19:07:28

Tu dois garder :

div.top-left{
background-image:url("coin_top_left.png");
background-repeat:no-repeat;
background-position:top left;
}
div.top-right{
background-image:url("coin_top_right.png");
background-repeat:no-repeat;
background-position:top right;
}
div.bottom-right{
background-image:url("coin_bottom_right.png");
background-repeat:no-repeat;
background-position:bottom right;
}
div.bottom-left{
background-image:url("coin_bottom_left.png");
background-repeat:no-repeat;
background-position:bottom left;
}

et en html :
<div class="top-left">
	<div class="top-right">
		<div class="bottom-right">
			<div class="bottom-left">
				<p>[...]</p>
			</div>
		</div>
	</div>
</div>
[ Mathieu ]
"Les jeunes c'est l'insécurité
il faudrait tous les enfermer!" BxN 1985

Répondre à Dalida

8

Jean_2, le 16 oct 2007 à 09:58:01

Je ne réussis toujours pas.
en fait, la couleur de fond de mon cadre s'arrete toujours au meme endroit, cad à min-height: 450px;
C'est dans le CSS de #corps.
Ensuite je n'ai plus de couleur de fond, mais mon texte en php s'affiche bien.
En dessous, j'ai bien mais 2 coins de cadre du bas.
Et pour finir, j'ai bien mon pied de page qui est bien placé (grace à la propriété clear:both; que tu m'as judicieusement conseillé, merci)...

Conclusion, mon seul problème, c'est d'afficher ma couleur de fond en dessous de min-height ...


(PS si je remplace <div class="contenu">tout mon texte</div > par <p>tout mon texte</p> ça donne la meme chose...)

en html, j'ai :
<div id="corps">
<div class="top-left">
<div class="top-right">
<div class="bottom-right">
<div class="bottom-left">
<div class="contenu"> sur cette classe, je n'ai pas mis de propriétés CSS, il y a tout mon contenu
</div>
</div>
</div>
</div>
</div>
</div>

(corps, c'est mon cadre)

en CSS : j'ai repris exactement les 4 div que je dois garder (cf. ton post précédent)
je t'écris le CSS de mon pied_de_page et de mon_cadre

#pied_de_page
{
width: 80%;
margin-left: 10%; margin-right: 10%; margin-bottom : 10px;
text-align: center; color: #B3B3B3;
background-color: #626262;
clear:both;
}

#corps
{
width: 720px; min-height: 450px;
margin-left: 20%;
background-color: #0e0943;
font-family: Verdana, 'Bitstream Vera Sans',Arial, "Arial Black", "Times New Roman", Times; color:#ffffff; text-align: justify;
}


voilà les éléments.
Je ne comprends pas pourquoi ma couleur de fond ne s'affiche pas...
merci de tes explications

Répondre à Jean_2

10

Dalida, le 16 oct 2007 à 13:47:56

Salut,

si cela fonctionne
mais tu as fait une erreur dans le style.
pour une classe il faut faire précéder le sélecteur d'un point ('.') et non d'un dièse ('#') qui désigne un identifiant.
si cette balise n'est utilisé qu'une fois dans la page, mieux vaut utiliser un identifiant.

.corps
{
width: 720px; min-height: 450px;
margin-left: 20%;
background-color: #0e0943;
font-family: Verdana, 'Bitstream Vera Sans',Arial, "Arial Black", "Times New Roman", Times; color:#ffffff; text-align: justify;
} 

et si tu veux les coins autour de la couleur, il faut mettre {min-heigth} sur '<div class="contenu">'.
[ Mathieu ]
"Les jeunes c'est l'insécurité
il faudrait tous les enfermer!" BxN 1985

Répondre à Dalida

11

Jean_2, le 16 oct 2007 à 16:36:30

Merci pour ce cas particulier que tu as rajouté.

Il met en évidence ce qui ne va pas :
1/ mon cadre (.corps) n'est pas bon : je voudrai qu'il fasse au minimum 450px, or il fait 450px et n'est pas extensible : si mon texte est plus long, mon texte dépassera du cadre (chez moi mon texte est plus long et il dépasse)... PAS OK
2/ mes coins sont mal placés, à la place d'être au coin du cadre (.corps), ils sont au coin du texte (.contenu chez moi ou p dans ton exemple) (donc forcément ça se voit pas là en haut, par contre on le voit en bas)... PAS OK

(PS, j'ai bien remplacé id="corps" par class="corps" et donc adapté le CSS en remplacant #corps par .corps)

aieaieaie, pourquoi y a pas une propriété toute bete...

tu vois ce que je veux dire ?

Répondre à Jean_2

12

Dalida, le 16 oct 2007 à 16:55:58

J'ai mis à jour l'exemple, il gère bien la hauteur et le dépassement.
j'ai aussi remis en place les coins du bas.
[ Mathieu ]

"Les jeunes c'est l'insécurité
il faudrait tous les enfermer!" BxN 1985

Répondre à Dalida

4

Jean_2, le 15 oct 2007 à 18:21:57

Ah ouai !!! c'est bon ça...

je regarde, et je cloture si ça a résolu mon pb.

merci à toi

Répondre à Jean_2

13

 Jean_2, le 16 oct 2007 à 17:09:23
  • +1

ça marche !!!!!!!!

feux d'artifice, bimbos et compagnie..


voilà ce qui faisait foirer dans mon CSS :
j'avais bien mis pour chaque coin :
div.coin_haut_gauche{background-image:url("../images/coin_haut_gauche.gif");background-repeat:no-repeat;background-position:top left;}

mais j'avais laissé une ancienne propriété : .coin_haut_gauche{float:left;}

merci à toi, tu m'as vraiment bien aidé, car en voyant lecode tourner sur ton exemple, je me suis rendu compte de ce qui n'allait pas...

Viens manger quand tu veux à la maison avec ta femme et tes enfants lol

(LA SOLUTION EST DANS LES POST PRECEDENTS)

Répondre à Jean_2
Collection CommentÇaMarche.net