28172 sujets

CSS et mise en forme, CSS3

[Résolu] Forcer un conteneur à gauche sans que le reste bouge

Bonjour à tous,

J'ai un petit soucis de placement avec mes divs, et si ça se trouve je me casse la tête pour rien car il y a un moyen simple de régler ça ?

Voici ma page à l'heure actuelle:
upload/38821-prob1.jpg

Le bloc du milieu est en "display:table;margin:auto;" et les éléments à l'intérieur en "display:table-cell;"

Je souhaite rajouter un div vertical de 100px de largeur à gauche du bloc, sans que le bloc ne bouge. Car il n'y a pas de problème de place pour le bloc du milieu et la partie à droite et à gauche restera toujours vide (Si on réduit le site, rien ne bouge).

Si je le met en "float:left;".. le bloc du milieu est décalé ; ce qui peut être logique car il est en "margin:auto" et son flux disponible s'est réduit...

upload/38821-prob2.jpg

Mais il n'y a pas un moyen de faire un "float" brut, sans modifier le flux de contenu ? avec un z:index peut-être ?

Si vous avez des idées Smiley smile
Modifié par F2000 (13 Jul 2011 - 12:39)
En float, non, impossible.

Faire une réponse simple, je te dirais que le positionnement absolu te permettrait de faire exactement ce que tu demande ici.

Mais, c'est (je crois) loin d'être une bonne pratique vu ton cas de figure.
Le positionnement absolu marche par rapport à la fenêtre affichée non ?
Car mon site se centre au milieu de la fenêtre automatiquement (avec une largeur fixe) et il me semble que cela posait problème si l'on réduisait le navigateur.

On peut faire un positionnement absolu par rapport à un container ?
Modifié par F2000 (12 Jul 2011 - 22:28)
Un élément positionné en absolu sera positionné selon son plus proche parent lui-même positionné; s'il n'y en a pas, par défaut selon la balise html (ou body, sur le coup je ne sais plus)

Mais tu devrais lire un peu plus sur le positionnement CSS sans doute. Avec un code propre tu n'auras pas de difficultés à placer ton bloc comme tu le veux.
Alors là je suis bluffé.. j'étais en train d'écrire toute un pavé pour dire que ça marcherait pas.. et je me suis dit "Allez test donc un peu avant..".

Et ben, ça marche.
Merci.

J'ai juste mis "position:absolute;width:110px;height:300px;" sans valeur top/right/x/x pour pas justement que ça se fixe par rapport au <html> et c'est bon, il ne le prend plus en compte.

Pour info:
Sans "position:absolute;"
upload/38821-prob4.jpg

Avec "position:absolute;"
upload/38821-prob3.jpg


C'est valide ce que j'ai fait ? (mettre "position:absolute" sans valeurs spécifiques ? Smiley lol )
Modifié par F2000 (13 Jul 2011 - 12:38)
Sans valeur spécifique veut dire qu'il prend ses valeur par défaut. Soit top:0; left:0;

Il doit s'être positionné selon son premier parent lui même positionné (position: relative, absolue ou fixed).
Vaxilart a écrit :
Sans valeur spécifique veut dire qu'il prend ses valeur par défaut. Soit top:0; left:0;


Nop. Si je spécifie explicitement "top:0;left:0;", il va en haut à gauche du navigateur Smiley lol
A mon avis, sans valeur, il est juste mis "hors du flux", genre une sorte de "background".

M'enfin bon, moi ça me va nickel comme ça Smiley smile

Merci.
Sujet clos
Aller à