28220 sujets

CSS et mise en forme, CSS3

[Résolu] Avec des tableaux moches j'y arrive, mais pas avec des DIV

Bonjour à tous,

J'ai un souci de mise en forme d'une page web. Je cherche en effet à centrer une image, et dans les espaces disponibles à gauche et à droite, placer une image de fond.

Pour mieux comprendre, j'ai crée une page de test :
http://lhot.free.fr/test/

Le problème (comme l'indique le titre), c'est qu'avec un vilain tableau c'est plutôt facile, mais avec des DIV je n'ais pour l'instant abouti à rien.

Quelqu'un aurait-il une proposition ?

Merci.
Modifié par PomPom (29 Mar 2005 - 22:51)
bha moi j'utiliserai 3 divs...mais comme je suis une maniaque des divs, je ne pense pas que cela soit la bonne solution.
Bonjour Pompom,

Je dirais que l'idée principale est d'utiliser un bloc qui sera centré et dans ce bloc tes 2 autres blocs positionnés avec chacun leur arriere plan.

Donc 3 blocs comme le suggére excargot.

Tu pourrais peut être trouvé un début de réponse dans ce tuto et dans celui-ci.
Modifié par knarf (29 Mar 2005 - 19:06)
Salut

pour le moment je ne vois pas de test avec un DIV ... juste un tableau.
montre nous ce que tu fait avec les div et là on pourra te dire tes eventuelles erreurs.

personnellement, je n'est pas l'intenation de te pondre un code tout fait Smiley langue
Les 3 DIV étaient aussi mon idée de départ. J'ai mis 2 pages qui marchent à peu près (tous mes autres tests foirent).
http://lhot.free.fr/test/div1.html
http://lhot.free.fr/test/div2.html

Même si l'aspect est à peu près bon, l'image "centrale" n'est justement pas exactement au centre.

Sur le 2eme, on peut constater une "cassure" dans les hautes résolutions.

J'aimerais bien trouver une solution qui permette de faire pareil qu'avec les tableaux, ya surement moyen, mais pour l'instant je sèche.
les 2 bloc de chaque coté sont bien.
pour ce genre de choses, j'utilise la marge negative

quelque chose comme ça:


.centre {
        position:relative;
        left:50% ;
        width: 100px;
	margin-left: -50px;
}


ca devrait en plus fonctionner partout Smiley biggrin
J’ai fait un test avec une marge négative et en position absolute, et par miracle ca marche Smiley smile
http://lhot.free.fr/test/div3.html
(j’ai mis une bordure blanche sur l’image centrale, pour bien voir que justement elle est centrée)

Mais malheureusement (comme d’habitude ?) ça foire sous IE. Y aurait-il une ruse pour gruger de navigateur de me****.
oui ca arrive parfois avec IE qui gère les border bizarrement

essai de placer 
width:49%;
dans les 2 div des bords.
PomPom a écrit :

Pas de bouton "Résolu" sur le forum ?


oui.. dans le titre de ton sujet !

edite le premier message
Sujet clos
Aller à