Bonjour à toutes et à tous,
Je rencontre un problème sur un positionnement css.
Je ne sais pas vraiment si j'utilise une bonne approche.
Je suis en train de faire un site et je souhaiterai mettre la même bordure que j'ai fait en haut a gauche du conteneur en bas a droite. Le probleme c'est que j'aimerai que la barre s'ajuste avec le contenu, je ne souhaite pas une position fixe.
Je ne sais pas si c'est réalisable en css.
Je vous donne l'addresse du site : http://www.lesfoulons.fr/test/nouveau/index.php.
Je vous joint également, le code html ainsi que la feuille de style.
Merci beaucoup.
Code html :
Le css :
Je rencontre un problème sur un positionnement css.
Je ne sais pas vraiment si j'utilise une bonne approche.
Je suis en train de faire un site et je souhaiterai mettre la même bordure que j'ai fait en haut a gauche du conteneur en bas a droite. Le probleme c'est que j'aimerai que la barre s'ajuste avec le contenu, je ne souhaite pas une position fixe.
Je ne sais pas si c'est réalisable en css.
Je vous donne l'addresse du site : http://www.lesfoulons.fr/test/nouveau/index.php.
Je vous joint également, le code html ainsi que la feuille de style.
Merci beaucoup.
Code html :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
<link href="css/bureau.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
</header>
<div id="barreVerteHeader"></div>
<div id="barreTransparenteHeader"></div>
<nav>
</nav>
<div id="cadre">
<div class="barreCadreHautGauche">
</div>
<div class="barreCadreGauche">
</div>
<div class="barreCadreBasDroite">
</div>
<div class="barreCadreBas">
</div>
<br/>
<p>Sed si ille hac tam eximia fortuna propter
Cum haec taliaque sollicitas eius aures everberarent expositas semper eius modi rumoribus et patentes, varia animo tum miscente consilia, tandem id ut optimum factu elegit: et Vrsicinum primum ad
Quapropter a natura mihi videtur potius quam ab indigentia orta amicitia, applicatione magis animi cum quodam sensu amandi quam cogitatione quantum illa res utilitatis esset habitura. Quod quidem quale sit, etiam in bestiis quibusdam animadverti potest, quae ex se natos ita amant ad quoddam tempus et ab eis ita amantur ut facile earum sensus appareat. Quod in homine multo est evidentius, primum ex ea caritate quae est inter natos et parentes, quae dirimi nisi detestabili scelere non potest; deinde cum similis sensus exstitit amoris, si aliquem nacti sumus cuius cum moribus et natura congruamus, quod in eo quasi lumen aliquod probitatis et virtutis perspicere videamur.
Quapropter a natura mihi videtur potius quam ab indigentia orta amicitia, applicatione magis animi cum quodam sensu amandi quam cogitatione quantum illa res utilitatis esset habitura. Quod quidem quale sit, etiam in bestiis quibusdam animadverti potest, quae ex se natos ita amant ad quoddam tempus et ab eis ita amantur ut facile earum sensus appareat. Quod in homine multo est evidentius, primum ex ea caritate quae est inter natos et parentes, quae dirimi nisi detestabili scelere non potest; deinde cum similis sensus exstitit amoris, si aliquem nacti sumus cuius cum moribus et natura congruamus, quod in eo quasi lumen aliquod probitatis et virtutis perspicere videamur.
Quapropter a natura mihi videtur potius quam ab indigentia orta amicitia, applicatione magis animi cum quodam sensu amandi quam cogitatione quantum illa res utilitatis esset habitura. Quod quidem quale sit, etiam in bestiis quibusdam animadverti potest, quae ex se natos ita amant ad quoddam tempus et ab eis ita amantur ut facile earum sensus appareat. Quod in homine multo est evidentius, primum ex ea caritate quae est inter natos et parentes, quae dirimi nisi detestabili scelere non potest; deinde cum similis sensus exstitit amoris, si aliquem nacti sumus cuius cum moribus et natura congruamus, quod in eo quasi lumen aliquod probitatis et virtutis perspicere videamur.
Iis igitur est difficilius satis facere, qui se Latina scripta dicunt contemnere. in quibus hoc primum est in quo admirer, cur in gravissimis rebus non delectet eos sermo patrius, cum idem fabellas Latinas ad verbum e Graecis expressas non inviti legant. quis enim tam inimicus paene nomini Romano est, qui Ennii Medeam aut Antiopam Pacuvii spernat aut reiciat, quod se isdem Euripidis fabulis delectari dicat, Latinas litteras oderit?</p>
</div>
</body>
</html>Le css :
@charset "utf-8";
/* CSS Document */
body{
background: url(../img/fond.jpg) no-repeat center fixed;
-webkit-background-size: cover; /* pour Chrome et Safari */
-moz-background-size: cover; /* pour Firefox */
-o-background-size: cover; /* pour Opera */
background-size: cover; /* version standardisée */
font-family : "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
/*font-size : 100%;*/
/*font-weight:bolder;*/
}
header{
background-color:#7B719A;
width:auto;
height:100px;
z-index:1;
}
#barreVerteHeader{
width:auto;
height:10px;
background-color: rgba(149, 193, 31, 0.9);
z-index:1
}
#barreTransparenteHeader{
width:auto;
height:20px;
background:#999;
z-index:1;
background-color: rgba(218, 218, 218, 0.5);
}
nav{
margin-left:50px;
margin-right:auto;
height:50px;
width:500px;
background-color:#903;
position:relative;
margin-top:-30px;
z-index:2;
}
#cadre{
background-color: rgba(123, 113, 155, 0.7);
width:809px;
height:auto;
margin-top:200px;
margin-left:auto;
margin-right:auto;
z-index: 1;
/*position: absolute;*/
border: 20px solid;
border-color:rgba(218, 218, 218, 0.2);
}
.barreCadreHautGauche{
background-color:rgba(149, 193, 31, 0.9);
width:80px;
height:5px;
margin-top:-20px;
margin-left:-20px;
z-index:2;
position:absolute;
}
.barreCadreGauche{
background-color:rgba(149, 193, 31, 0.9);
width:5px;
height:150px;
margin-top:-20px;
margin-left:-20px;
z-index:2;
position:absolute;
}
.barreCadreBasDroite{
background-color:rgba(149, 193, 31, 0.9);
width:5px;
height:150px;
margin-top:80%;
margin-left:800px;
z-index:2;
position:absolute;
}
/*
.barreCadreBas{
background-color:#F00;
width:150px;
height:5px;
margin-top:215px;
margin-left:680px;
z-index:2;
position:absolute;
}*/
