Problème de cadre arrondis...
Résolu
Jean_2
Messages postés
245
Date d'inscription
Statut
Membre
Dernière intervention
-
Jean_2 Messages postés 245 Date d'inscription Statut Membre Dernière intervention -
Jean_2 Messages postés 245 Date d'inscription Statut Membre Dernière intervention -
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 ???
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 ???
A voir également:
- Problème de cadre arrondis...
- Comment faire un cadre sur word - Guide
- Problème cadre frameo - Forum Graphisme
- Dans le document à télécharger, positionnez l'image dans le cadre gris. mettez un espace de 1 cm autour de l'image. comment se prénomme la personne recherchée ? - Forum Word
- Illustrator cadre de sélection disparu ✓ - Forum Illustrator
- Supprimer cadre zone de texte word 2010 ✓ - Forum Bureautique
3 réponses
ç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)
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)
salut,
il faut le faire en css pure, par de balise '<img>'.
un exemple
il faut le faire en css pure, par de balise '<img>'.
un exemple
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
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
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...
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...
tu dois garder :
et en html :
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>
