Problème de cadre arrondis...
Résolu
Jean_2
Messages postés
245
Statut
Membre
-
Jean_2 Messages postés 245 Statut Membre -
Jean_2 Messages postés 245 Statut Membre -
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 ???
Configuration: Windows XP Firefox 2.0.0.7
A voir également:
- Problème de cadre arrondis...
- Cadre word - Guide
- Télécharger logiciel cadre photo gratuit pour pc - Télécharger - Montage photo
- 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 LibreOffice / OpenOffice
- Images seulement le cadre sans images dans word - Forum Word
- Dans la présentation à télécharger, déplacez l'image dans le cadre sans en modifier la taille. redressez l'image pour que le niveau de la mer soit à l'horizontale. faites correspondre : la ligne avec le niveau de la mer ; le point avec le sommet de la grande voile. combien d'oiseaux sont dans le cadre ? ✓ - Forum Windows
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)
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>
