Conteneur amèlioré
renoncule62
Messages postés
83
Date d'inscription
Statut
Membre
Dernière intervention
-
eba973 Messages postés 32 Date d'inscription Statut Membre Dernière intervention -
eba973 Messages postés 32 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J' utilise pour mon site un conteneur centré et je souhaiterais, pour amèliorer le visuel, que les angles soit arrondis et, pour donner du relief, ajouter une ombre portée.
Ci dessous le code simplifié de ma page. Quelqu' un aurait-il une solution qui puisse répondre à mon souhait?
merci à ceux qui pourraient m'aider
<head>
<title>essai</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
margin: 0;
padding: 0;
text-align: center;
}
#contenu {
position: absolute;
left: 50%;
top: 50%;
width: 968px;
height: 580px;
margin-top: -292px;
margin-left: -490px;
border: 4px solid #E1EE0E;
background-color: #E90E2D;
}
</style>
</head>
<body bgcolor="#040303"><div id="contenu">
<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1; left: 382px; top: 282px;"><font color="#FFFFFF" size="+3">Merci</font></div>
</body>
</html>
J' utilise pour mon site un conteneur centré et je souhaiterais, pour amèliorer le visuel, que les angles soit arrondis et, pour donner du relief, ajouter une ombre portée.
Ci dessous le code simplifié de ma page. Quelqu' un aurait-il une solution qui puisse répondre à mon souhait?
merci à ceux qui pourraient m'aider
<head>
<title>essai</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
margin: 0;
padding: 0;
text-align: center;
}
#contenu {
position: absolute;
left: 50%;
top: 50%;
width: 968px;
height: 580px;
margin-top: -292px;
margin-left: -490px;
border: 4px solid #E1EE0E;
background-color: #E90E2D;
}
</style>
</head>
<body bgcolor="#040303"><div id="contenu">
<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1; left: 382px; top: 282px;"><font color="#FFFFFF" size="+3">Merci</font></div>
</body>
</html>
A voir également:
- Conteneur amèlioré
- Conteneur poubelle - Guide
- Graphique radar amélioré pour Excel - Forum Excel
- Thunderbird v68.0 - thème sombre amélioré ??? - Forum Thunderbird
- Comment amélioré la qualité video D'un AVI ? - Forum Format et connectique vidéo
- Google améliore la recherche d'expression précise - Guide
1 réponse
Bonjour,
Si tu penses que la largeur de ton contenu (id=contenu) ne va plus bouger, alors tu peux faire comme ça:
dans ton div 'contenu', tu ajoutes :
- un div 'contenu_top' dans lequel tu auras le haut de ton cadre avec les arrondis.
- un div 'contenu_central' dans lequel tu auras ton contenu sans bords en haut en en bas et avec ton ombre sur le coté.
- un div 'contenu_bas' dans lequel tu auras le bas de ton cadre avec les arrondis.
Voilà pour les divs, maintenant tu dois créer une image de ton cadre (avec arrondis et ombre). Ce cadre, tu vas le couper en trois parties : haut, milieu et bas. La partie du milieu devra être assez grande pour que ton div puisse s'étendre en hauteur et que ton image couvre tout le div.
Si tu veux que ton 'contenu' puisse s'adapter en largeur, il faudra découper en 4 parties avec 4 divs.
A+
Eric
http://www.ameliorer-votre-site.com?s=f1
Si tu penses que la largeur de ton contenu (id=contenu) ne va plus bouger, alors tu peux faire comme ça:
dans ton div 'contenu', tu ajoutes :
- un div 'contenu_top' dans lequel tu auras le haut de ton cadre avec les arrondis.
- un div 'contenu_central' dans lequel tu auras ton contenu sans bords en haut en en bas et avec ton ombre sur le coté.
- un div 'contenu_bas' dans lequel tu auras le bas de ton cadre avec les arrondis.
Voilà pour les divs, maintenant tu dois créer une image de ton cadre (avec arrondis et ombre). Ce cadre, tu vas le couper en trois parties : haut, milieu et bas. La partie du milieu devra être assez grande pour que ton div puisse s'étendre en hauteur et que ton image couvre tout le div.
Si tu veux que ton 'contenu' puisse s'adapter en largeur, il faudra découper en 4 parties avec 4 divs.
A+
Eric
http://www.ameliorer-votre-site.com?s=f1