Fixer une div sans width -PHP,HTML, CSS-
mariostar27
Messages postés
442
Statut
Membre
-
jjsteing Messages postés 1670 Date d'inscription Statut Contributeur Dernière intervention -
jjsteing Messages postés 1670 Date d'inscription Statut Contributeur Dernière intervention -
Bonjour,
Voila je fait un blog pour une entreprise. mes article doivent figurer dans une boite, et, en fonction de la taille de l'article, ma boite doit s'agrandir aussi bien horizontalement que verticalement (et oui verticalement si j'ai qu'un seul mot dans mon article).
voici mon code PHP:
<div class="top1">
<div class="topleft1"></div>
<div class="topright1"></div>
<div class="topcenter1"></div>
</div>
<div class="center1">
<div class ="centerleft1"></div>
<div class="centercenter1">
//CONTENU DE MON ARTICLE
</div>
<div class="centerright1"></div>
</div>
<div class="bottom1">
<div class="bottomleft1"></div>
<div class="bottomright1"></div>
<div class="bottomcenter1"></div>
</div>
et mon code CSS
.top1{
height : 10px;
overflow: hidden;
}
.topleft1{
overflow: hidden;
float: left;
width : 10px;
height : 10px;
background-image: url("./images/coins.gif");
background-position: 0 -390px;
background-repeat: no-repeat;
}
.topright1{
float: right;
width : 10px;
height : 10px;
background-image: url("./images/coins.gif");
background-position: 0 -350px;
background-repeat: no-repeat;
}
.topcenter1{
height: 10px;
margin-left: 10px;
margin-right: 10px;
background-image : url("./images/hautbas.gif");
background-position: 0 -190px;
background-repeat: repeat-x;
}
.center1{
overflow: hidden;
display: table-cell;
}
.centerleft1{
width : 10px;
background-image : url("./images/cote.gif");
background-position: -0px 0;
background-repeat: repeat-y;
display: table-cell;
}
.centerright1{
width : 10px;
background-image : url("./images/cote.gif");
background-position: -13px 0;
background-repeat: repeat-y;
display: table-cell;
}
.centercenter1{
padding-left: 5px;
padding-right: 5px;
overflow: hidden;
display: table-cell;
background-color : #dad2a8;
}
.bottom1{
height : 10px;
overflow: hidden;
}
.bottomleft1{
float: left;
width : 10px;
height : 10px;
background-image: url("./images/coins.gif");
background-position: 0 -470px;
background-repeat: no-repeat;
}
.bottomright1{
float: right;
width : 10px;
height : 10px;
background-image: url("./images/coins.gif");
background-position: 0 -430px;
background-repeat: no-repeat;
}
.bottomcenter1{
height: 10px;
margin-left: 10px;
margin-right: 10px;
background-image : url("./images/hautbas.gif");
background-position: 0 -230px;
background-repeat: repeat-x;
}
merci de bien vouloir m'aider svp.
Voila je fait un blog pour une entreprise. mes article doivent figurer dans une boite, et, en fonction de la taille de l'article, ma boite doit s'agrandir aussi bien horizontalement que verticalement (et oui verticalement si j'ai qu'un seul mot dans mon article).
voici mon code PHP:
<div class="top1">
<div class="topleft1"></div>
<div class="topright1"></div>
<div class="topcenter1"></div>
</div>
<div class="center1">
<div class ="centerleft1"></div>
<div class="centercenter1">
//CONTENU DE MON ARTICLE
</div>
<div class="centerright1"></div>
</div>
<div class="bottom1">
<div class="bottomleft1"></div>
<div class="bottomright1"></div>
<div class="bottomcenter1"></div>
</div>
et mon code CSS
.top1{
height : 10px;
overflow: hidden;
}
.topleft1{
overflow: hidden;
float: left;
width : 10px;
height : 10px;
background-image: url("./images/coins.gif");
background-position: 0 -390px;
background-repeat: no-repeat;
}
.topright1{
float: right;
width : 10px;
height : 10px;
background-image: url("./images/coins.gif");
background-position: 0 -350px;
background-repeat: no-repeat;
}
.topcenter1{
height: 10px;
margin-left: 10px;
margin-right: 10px;
background-image : url("./images/hautbas.gif");
background-position: 0 -190px;
background-repeat: repeat-x;
}
.center1{
overflow: hidden;
display: table-cell;
}
.centerleft1{
width : 10px;
background-image : url("./images/cote.gif");
background-position: -0px 0;
background-repeat: repeat-y;
display: table-cell;
}
.centerright1{
width : 10px;
background-image : url("./images/cote.gif");
background-position: -13px 0;
background-repeat: repeat-y;
display: table-cell;
}
.centercenter1{
padding-left: 5px;
padding-right: 5px;
overflow: hidden;
display: table-cell;
background-color : #dad2a8;
}
.bottom1{
height : 10px;
overflow: hidden;
}
.bottomleft1{
float: left;
width : 10px;
height : 10px;
background-image: url("./images/coins.gif");
background-position: 0 -470px;
background-repeat: no-repeat;
}
.bottomright1{
float: right;
width : 10px;
height : 10px;
background-image: url("./images/coins.gif");
background-position: 0 -430px;
background-repeat: no-repeat;
}
.bottomcenter1{
height: 10px;
margin-left: 10px;
margin-right: 10px;
background-image : url("./images/hautbas.gif");
background-position: 0 -230px;
background-repeat: repeat-x;
}
merci de bien vouloir m'aider svp.
A voir également:
- Fixer une div sans width -PHP,HTML, CSS-
- Editeur html - Télécharger - HTML
- Easy php - Télécharger - Divers Web & Internet
- Div c++ - Télécharger - Langages
- Expert php pinterest - Télécharger - Langages
- Fixer colonne excel - Guide
4 réponses
Je ne vois pas trop l'intérêt au niveau horizontal de fixer une boîte d'article. Il vaut mieux fixer la largeur de ta boîte (width : 500px;) et mettre une hauteur automatique selon qu'il y est plus ou moins de contenu (height :auto;) dans ton CSS.
Bonjour...
ma boite doit s'agrandir aussi bien horizontalement que verticalement ??
Verticalement, ok, normal, si tu écris 1 mots, c'est pas la meme dimension de 20 lignes.. mais horizontalement , la je pige pas, ca veux dire que tu peux te retouver avec 3 articles à la suite horizontalement si chaque article n'a que 1 mot ??? c'est pas tres lisible apres..
ma boite doit s'agrandir aussi bien horizontalement que verticalement ??
Verticalement, ok, normal, si tu écris 1 mots, c'est pas la meme dimension de 20 lignes.. mais horizontalement , la je pige pas, ca veux dire que tu peux te retouver avec 3 articles à la suite horizontalement si chaque article n'a que 1 mot ??? c'est pas tres lisible apres..