Chevauché des div

Marsh Posté le 30-05-2005 à 16:30:17

Salut

J'aimerais se faire chevauchée 3 div de largeure différente sur une meme ligne (3 div d'une ligne en fait)

Je vois comment faire pour gerer les priorité de chevauchement (grace a la propriété z-order) mais je galere a trouver comment positionner les div au meme endroit (position absolute, fixe, relative?

j'ai fait pas mal de site sans vraiment trouver mon bonheur

merci

Reply

Marsh Posté le 30-05-2005 à 16:30:17

Reply

Marsh Posté le 30-05-2005 à 17:13:12

La propriété est z-index, pas z-order.

Pour qu'elle fonctionne, tes éléments doivent être positionnés (absolu, relatif, fixe)
Il faudrait un exemple pour t'aider.

Message édité par sibelius le 30-05-2005 à 17:13:42

---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com

Reply

Marsh Posté le 31-05-2005 à 09:25:19

Salut

Ok pour z-index :jap:

sinon pour mon exemple :

j'ai donc une div conteneur (restreint a une ligne de 400 px) dans laquelle je veut supperposé 3 div (de facon a ce qu'on voit les 3, chaqu'une etant plus petite que l'autre) :

Code :

<div class="cadre_heures">
<div id="conso" style="width:30%">30</div>
<div id="engag" style="width:50%">50</div>
<div id="tot_libre" style="width:100%">100</div>
</div>
<br class="clearall" />

CSS :

Code :

#conso, #engag, #tot_libre{
float:left;
font-weight:bold;
color:white;
text-align:right;
height:15px;}
#conso { background-color:#FE0000; border-right:1px solid #3398c3;}
#engag {background-color:#FF7C34; border-right:1px solid #3398c3;}
#tot_libre {background-color: #00FF01;}
.cadre_heures {
background: #3398c3;
color: white;
width:400px;
height:10px;
border: 1px solid black;
padding:2px;
}

Bien sur, ici mon css n'est pas bon, car pour l'instant elles se succedent au lieu de se chevaucher

ps:le resultat final de ce conteneur et de ses divs doit ressembler a une barre de chargement...

merci

Message édité par bixibu le 31-05-2005 à 09:27:42

Reply

Marsh Posté le 31-05-2005 à 09:30:44

et si tu placais tes divs les uns à la suite des autres
à la manière de cet exemple :

http://gatsu.ftp.free.fr/html/test [...] ession.htm

Reply

Marsh Posté le 31-05-2005 à 09:41:47

Salut gatsusat

He ben j'ai un gros probleme en fait.. et c'est pour ca que j'ai laissé tomber cette methode. Car dans chaque div que j'ai , je dois pas seulement affiché le rectangle coloré de la div, mais en meme temps un chiffre ( a linterieur de chauqu'un des 3 div)Et cet insertion du chiffre decale tout mon affichage et me plante mes calculs (par exemple si le nombre total est 1000 et que la limite des 2 autre divs est 20 ou 30 !

Bref je galere depuis pas mal de temps la dessus...
Ya peut etre moyen de mettre les chiffres en dessous au lieu de dedans les div mais j'ai pas trouvé

ps: voila mon script complet, modifiez les valeurs des constantes dans le php pour voir que l'affichage arrete pas de planter pour des valeurs un peu extremes:

Code :

<style type="text/css">
.intitule_heures {
width:120px;
float: left;
background: #3398c3;
color: white;
border: 1px solid black;
padding:3px;
margin-left:15px;
}
#conso, #engag, #tot_libre{
float:left;
font-weight:bold;
color:white;
text-align:right;
height:15px;}
#conso { background-color:#FE0000; border-right:1px solid #3398c3;}
#engag {background-color:#FF7C34; border-right:1px solid #3398c3;}
#tot_libre {background-color: #00FF01;}
.cadre_heures {
background: #3398c3;
color: white;
width:400px;
height:10px;
border: 1px solid black;
padding:2px;
}
</style>
<?
$heur_tot = 1000;
$heur_engag = 30;
$heur_conso = 20;
$conso_pourcent = (int) ($heur_conso*100/$heur_tot);
$engag_pourcent = ((int) ($heur_engag*100/$heur_tot)) - $conso_pourcent;
$tot_pourcent = 100 - $engag_pourcent - $conso_pourcent;
?>
<div class="intitule_heures">Public 1er degré :</div>
<div class="cadre_heures">
<div id="conso" style="width:<? echo ($conso_pourcent.'%'); ?>"><? echo($heur_conso); ?></div>
<div id="engag" style="width:<? echo ($engag_pourcent.'%'); ?>"><? echo($heur_engag); ?></div>
<div id="tot_libre" style="width:<? echo ($tot_pourcent.'%'); ?>"><? echo($heur_tot); ?></div>
</div>
<br class="clearall" />

Message édité par bixibu le 31-05-2005 à 09:42:41

Reply

Marsh Posté le 31-05-2005 à 10:00:10

ben regarde ce que je viens de te faire.
J'ai un chiffre dans mes div qui ne casse pas la mise en page grace à l'attribut : overflow : hidden;
que j'ai mis pour mes 3 div

ca pourrait te convenir ?

http://gatsu.ftp.free.fr/html/test [...] ession.htm

PS : le javascript c'était un trip pour quelqu'un sur ce forum il y a une semaine

Message édité par gatsusat le 31-05-2005 à 10:09:17

Reply

Marsh Posté le 31-05-2005 à 10:09:42

C'etait pour moi déja ^^ ya quelques jours

Sinon j'ai bien regardé ton ptit truc la mais je vois nul part de overflow : hidden.., bon je vais me documenter la dessus

EDIT/ hum ca s'ameliore!! mais c'est pas encore parfait, ya d'la bidouille a faire pour bien tout faire rentrer dans la div conteneur

Message édité par bixibu le 31-05-2005 à 10:11:06

Reply

Marsh Posté le 31-05-2005 à 11:03:12

BON merci pour ce overflow qui m'a resolu un probleme..

par contre il m'en reste un, la barre verte a tendance soit a depasser donc a sauter de ligne, soit a bouffer un peu les chiffres contenu dans les autre div

J'aimerais donc garder mes 2 premieres div comme elles sont
mais inséré la 3eme (la verte) en dessous sur toute la longueur de la div conteneur
De cette facon, la div verte serait recouverte en aprtie par les 2 autre.. et la ce serais gagné!

comment faire?
merci

Message édité par bixibu le 31-05-2005 à 11:30:33

---------------
App Android NextGP : Store - TU | Makerworld

Reply

Chevauché des div

Sujets relatifs:

Leave a Replay