J'aimerais savoir si il existe pas un autre moyen d'effectuer la même chose mais avec moins de div.
j'ai environ 9 boxes sur mon site et elle sont toute a quelques exceptions prettent avec la même mise en forme.
cependant j'ai l'impression que je m'y prends mal pour les faire en CSS et a l'aide de <div>
voici mon code actuelle
et voici le code CSS
en gros mais boite sont organisé comme ceci
Largeur de 170px (toutes les boxes)
hauteur variable (le contenu)
header de la boxe (image de fond ou image clic avec lien)
Centre ou contenu de la boxe (image de fond fixe repeter sur l'axe des y)
bottom de la boxe (image de fond fixe)
voici pour moi comment j'organise cela....
j'ai 3 images pour cela utilisé pour chaque boxe
l'image du header
l'image repeter du centre
l'image du pied de boxe (bottom)
Mon exemple fonctionne ... cependant j'ai l'impression que je rajoutte des choses inutiles.
j'ai vu le tuto sur la boite a hauteur variable sur le site...mais mon probleme viens du fait que sur cette exemple, c'est l'image du bas qui est grande de facon a recouvrir le contenu de la boxe.
moi je ne peux pas me permettre cela pour cause d'allourdir mes pages. Car il s'agit d'image graphique.
Encore merci pour tout.
++
fab
j'ai environ 9 boxes sur mon site et elle sont toute a quelques exceptions prettent avec la même mise en forme.
cependant j'ai l'impression que je m'y prends mal pour les faire en CSS et a l'aide de <div>
voici mon code actuelle
<div id="panier" >
<div><a href="<?php echo tep_href_link(FILENAME_SHOPPING_CART); ?>"><img src="images/infobox/cadre_haut_panier1.gif"></a></div>
<div class="paniertext" ><p>Vous avez <span class="strongred"><?php echo $cart->count_contents(); ?></span> article(s)</p><p>dans votre panier</p></div>
<div class="boxbottom"><p class="paniertotal">Total : <span class="strongred"><?php echo $currencies->format($cart->show_total()); ?></span></p></div>
</div>
et voici le code CSS
* {
margin:0px;
padding:0px;
}
/* BALISE GENERAL */
body {
margin: 0; /* pour éviter les marges */
padding: 0;
text-align: center; /* pour corriger le bug de centrage IE */
}
table
{
padding: 0px;
border-collapse: collapse;
border-spacing: 0px;
}
td {
margin: 0px;
padding: 0px;
}
/* CONTENEUR GENERAL */
div#conteneur {
position:absolute;
left: 50%;
width: 950px;
margin-left: -475px; /* moitié de la largeur */
background-color:#000000;
text-align: center;
}
#corps{
background-color:#FFFFFF;
width:940px;
margin-left: auto;
margin-right: auto;
text-align:left;
}
/* Boite PANIER */
#shoppingcartbox{
background:url(images/infobox/cadre_centrec.gif) repeat-y;
font-weight:bold;
font-family: Verdana, Arial, sans-serif;
text-align:center;
font-size: 11px;
}
.paniertext{
font-size: 11px;
margin-top:10px;
margin-bottom:10px;
}
.paniertotal{
font-size: 12px;
text-align:right;
margin-right:5px;
}
/* Propriété general des boites */
.boxbottom{
background:url(images/infobox/cadre_bass.gif) no-repeat;
height:19px;
text-align:right;
margin-right:5px;
}
/* Formatage particulier du texte */
.smallText {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
}
.strongred {
font-weight:bold;
color:#FF0000;
}
/* LIEN HYPERTEXTE */
a {
text-decoration: none;
color: #000066;
}
a:hover {
text-decoration: underline;
color: red;
background-color: none;
}
</style>
en gros mais boite sont organisé comme ceci
Largeur de 170px (toutes les boxes)
hauteur variable (le contenu)
header de la boxe (image de fond ou image clic avec lien)
Centre ou contenu de la boxe (image de fond fixe repeter sur l'axe des y)
bottom de la boxe (image de fond fixe)
voici pour moi comment j'organise cela....
<div id="panier" > // Conteneur du panier
<div><a href="<?php echo tep_href_link(FILENAME_SHOPPING_CART); ?>"><img src="images/infobox/cadre_haut_panier1.gif"></a></div> // Image a clic de hauteur fixe et de largeur fixe
<div class="paniertext" ><p>Vous avez <span class="strongred"><?php echo $cart->count_contents(); ?></span> article(s)</p><p>dans votre panier</p></div> // Contenu de la boxe
<div class="boxbottom"><p class="paniertotal">Total : <span class="strongred"><?php echo $currencies->format($cart->show_total()); ?></span></p></div> // Bottom de la boxe avec image de fond de taille fixe en hauteur et largeur. Et un text
</div> // Fermeture du conteneur panier
j'ai 3 images pour cela utilisé pour chaque boxe
l'image du header
l'image repeter du centre
l'image du pied de boxe (bottom)
Mon exemple fonctionne ... cependant j'ai l'impression que je rajoutte des choses inutiles.
j'ai vu le tuto sur la boite a hauteur variable sur le site...mais mon probleme viens du fait que sur cette exemple, c'est l'image du bas qui est grande de facon a recouvrir le contenu de la boxe.
moi je ne peux pas me permettre cela pour cause d'allourdir mes pages. Car il s'agit d'image graphique.
Encore merci pour tout.
++
fab
