28172 sujets

CSS et mise en forme, CSS3

Empecher les DIV de faire de retour à la ligne dans une div plus grand

Bonjour à tous.

je réalise un menu avec des divs. Le principe est que lorsque le curseur passe au dessus d'une div, elle s'agrandit et les autres rétrécissent.

voici la trame :


<head>
<style type="text/css">
.container{
    border:1px solid #000;
    width:500;
    height:300;
    overflow:hidden;
    display:block;
}

.boite{
    border:1px solid #000;
    width:100;
    height:inherit;
    display:table-cell;
    float:left;
}
</style>
</head>

<body>
<div class="container">
    <div class="boite" style="background-color:#333;"></div>
    <div class="boite" style="background-color:#444;"></div>
    <div class="boite" style="background-color:#CCC;"></div>
    <div class="boite" style="background-color:#EAE;"></div>
    <div class="boite" style="background-color:#123;"></div>
</div>
</body>


Mon code fonctionne seulement j'aimerai régler un soucis (esthétique) :
Je dois donner à la div "container" un taille plus grande que la somme de mes divs "boites". Si ce n'est pas le cas, ma dernière div est automatiquement mise à la ligne.

Est-il possible de faire en sorte que la dernière div "boite" déborde de la div "contenair" mais sans que ca se voit ?

l'image illustre (enfin essaie Smiley smile )la dernière div affichée en partie sur la même ligne que les autres
upload/13498-Capturedec.png

Merci d'avance pour vos réponses
Bonsoir.
pierre68314 a écrit :
Est-il possible de faire en sorte que la dernière div "boite" déborde de la div "contenair" mais sans que ca se voit ?
J'ai un peu de mal à saisir ce que tu souhaites obtenir. Saurais-tu reformuler le problème, stp ?
ok je rééssaie.

si la somme des largeur de mes div boite est supérieure à la largeur de ma div contenant les autres (cf le code), alors la dernière div passe à la ligne suivante.

moi j'aimerai forcer les div à rester sur la même ligne sans agrandir ma div "contenair".
l'idée serait que la dernière div dépasse de la div "contenair". (le bout qui dépasse ne deoit pas être visible)

cordialement
En fait la largeur de tes 5 div n'est pas égale à la largeur de ton container. Tes 5 divs représentent une largeur totale de : 5 x (100 + 2), le 2 provenant des bordures gauche et droite d'1px chacune.
hello,

c'est là mon problème, j'aimerai faire tenir sur 1 ligne des DIV dont la somme des largeur dépassent celle du contenant.

pourquoi ?
parce que me div s'agrandissent et rapetissent si la souris passe dessus, le problème est que la dernière div a sa bordure droite qui se déplace au lieu de rester en position. j'aimerai cacher cela avec la bordure droite de ma div contenant.
le problème est que la dernière div "boite" passe à la ligne par moment lorsque mes boites s'agrandissent.

si tu regardes le code que je donne, je veux faire tenir 5 div de 100px, toutes alignées dans une div de 450px. (en sachant très bien que la dernière div sera tronquée)
Smiley resolu

re-

J'ai résolu mon problème mais en "trichant".
j'ai agrandi ma div "contenair" et j'ai placé une nouvelle div de background bland avec un float:right et un z-index supérieur aux autres.

Je pense que ce n'est pas très propre comme solution, mais en attendant.



Je ne sais pas si j'ai été assez clair au niveau des explications mais je ne vois pas comment le dire autrement.

merci d'avoir essayé de me répondre.
Sujet clos
Aller à