28173 sujets

CSS et mise en forme, CSS3

upload/11445-constructi.jpg

Bonjour

Je joins une image pour vous aider à cerner mon problème Smiley smile

Voici, en résumé, le code html de ma page :

<div id="contenant"> (le seul en position absolue)
<div id="haut" /div>

<div id="corps">

<div id="gauche" /div>
<div id="droite" /div>

</div>

<div id="bas" /div>
</div>

Pour la mise en page en Css, c'est droite qui me pose un problème, cette partie se met obligatoirement sous gauche. Si j'utilise des positions absolues ou des float, c'est bas qui ne fonctionne plus. A noter que je suis obligé de placer "gauche" et "droite" dans "corps" car j'ai besoin d'une image de fond pour cette zone.

Ma question est la suivante : comment avoir "gauche" et "droite" au même niveau sans déstructurer le reste ?

Je remercie par avance mon sauveur !

Cordialement

Baronwood
Bonjour,

gauche en float: left suivi de droite avec un margin-left= le width de gauche et bas clear: left;. Non?
Bonjour à tous et bienvenue à Baronwood,

Une petite relecture des règles du forum s'impose (règles certainement lues au moment de l'inscription, mais un peu vite, n'est-ce-pas ?)

Il s'agit donc, dans ce cas, d'éditer le message contenant ton code, et de l'encadrer dans les balises appropriées
Smiley cligne

De plus, merci de bien vouloir donner à ton sujet un titre plus évocateur (en éditant ton premier post), c'est à dire un titre qui facilite les
recherches sur le forum.
Modifié par Vero (17 Mar 2007 - 10:19)
Vero a écrit :
Bonjour à tous et bienvenue à Baronwood,

Une petite relecture des règles du forum s'impose (règles certainement lues au moment de l'inscription, mais un peu vite, n'est-ce-pas ?)

Il s'agit donc, dans ce cas, d'éditer le message contenant ton code, et de l'encadrer dans les balises appropriées
Smiley cligne

De plus, merci de bien vouloir donner à ton sujet un titre plus évocateur (en éditant ton premier post), c'est à dire un titre qui facilite les
recherches sur le forum.


Bah non, je ne cherche pas à ce que l'on cherche le code pour moi et en plus je sais lire Smiley lol

J'essaie juste de trouver une solution pour aligner mes deux zones car j'en ai essayé des tonnes et des tonnes ...

Je reviens à Ghost qui m'a gentiment aidé ... Ce que tu proposes fonctionne ("gauche" et "droite" alignés, "bas" bien en dessous) sauf que l'image d'arrière plan de "corps" se met derrière droite (normalement elle doit permettre une jonction avec "bas") ...

Smiley decu
Baronwood a écrit :
Bah non, je ne cherche pas à ce que l'on cherche le code pour moi et en plus je sais lire Smiley lol

Visiblement non, puisque tu n'as pas tenu compte des informations que Vero t'a données. Smiley cligne

Elle te demandait juste d'éditer ton premier message pour qu'il soit plus lisible. Merci donc de suivre les liens de son message et d'en tenir compte...
Julien Royer a écrit :

Visiblement non, puisque tu n'as pas tenu compte des informations que Vero t'a données. Smiley cligne

Elle te demandait juste d'éditer ton premier message pour qu'il soit plus lisible. Merci donc de suivre les liens de son message et d'en tenir compte...


Disons que là, mon code Html n'a pas grande importance ... Smiley decu
Re,

Je suppose que #droite et #gauche ont des longueurs variables et que la longueur de #corps suit le contenu ?
De gauche et droite il n'en est pas un des 2 qui soit systématiquement plus court que l'autre ?
ghost a écrit :
Re,

Je suppose que #droite et #gauche ont des longueurs variables et que la longueur de #corps suit le contenu ?
De gauche et droite il n'en est pas un des 2 qui soit systématiquement plus court que l'autre ?


Oui. "Gauche" a une longueur variable ... Par contre, je peux m'arranger pour que droite ait une longueur fixe "théoriquement" plus courte que "gauche". Dans ce cas, il faudra que "corps" s'adapte à "gauche" ... ?

Si vous avez une solution, je suis preneur !
Merci d'avance ...
Modérateur
Bonjour Baronwood, Smiley smile

Il me semble qu'il t'a été demandé de modifier ton titre ainsi que ton premier post par deux fois afin de présenter correctement ton code.
Il serait bon de le faire dès maintenant si tu ne veux pas qu'on ferme le sujet... Je te laisse choisir. Smiley cligne
Modifié par koala64 (17 Mar 2007 - 12:18)
Re,

corps background: pink
droite en float right
gauche avec un margn-right du width de droite et background blue
bas clear right

dans le code

<div id="droite">
</div>
<div id="gauche">
</div>

Enfin droite avant gauche et sûrement overflow: hidden pour gauche
Baronwood a écrit :
Disons que là, mon code Html n'a pas grande importance ... Smiley decu

Ce qui t'empêche donc de faire la correction demandée ?

La bonne mise en forme des messages est une règle que les modérateurs et plus généralement les membres d'Alsacréations aiment voir respectée, pour des raisons de lisibilité du forum que je ne rappelle pas ici. Même si ça n'est pas indispensable dans le cas présent, c'est une bonne habitude à prendre, surtout si tu comptes intervenir sur ce forum à l'avenir.

Merci de ta compréhension.

Edit : eh beh, c'est une véritable descente de modérateurs dans ce sujet. Smiley lo

Edit 2 : j'aimerais souligner le fait que ghost a proposé par deux fois une réponse adéquate au problème (la deuxième fois dans une variante, peut-être plus simple à mettre en oeuvre). Il serait intelligent de s'atteler à travailler sur cette proposition, quitte à demander des précisions si besoin.
Modifié par Florent V. (17 Mar 2007 - 12:26)
Florent V. a écrit :

Ce qui t'empêche donc de faire la correction demandée ?

La bonne mise en forme des messages est une règle que les modérateurs et plus généralement les membres d'Alsacréations aiment voir respectée, pour des raisons de lisibilité du forum que je ne rappelle pas ici. Même si ça n'est pas indispensable dans le cas présent, c'est une bonne habitude à prendre, surtout si tu comptes intervenir sur ce forum à l'avenir.

Merci de ta compréhension.

Edit : eh beh, c'est une véritable descente de modérateurs dans ce sujet. Smiley lo

Edit 2 : j'aimerais souligner le fait que ghost a proposé par deux fois une réponse adéquate au problème (la deuxième fois dans une variante, peut-être plus simple à mettre en oeuvre). Il serait intelligent de s'atteler à travailler sur cette proposition, quitte à demander des précisions si besoin.


Bah dites donc, Modérateurs = CRS ? Smiley lol
Je vais me souvenir de ma première journée sur ce forum !

Pour répondre au dernier modérateur :
1 Cela ne m'empêche pas de faire une correction c'est juste que je ne voyais pas l'utilité de la faire puisque ... l'erreur a déjà été faite. Au prochain message, je m'en serais souvenu (et là, je ne risque pas de l'oublier) !

2 S'il n'y avait pas autant d'interférence, la liaison avec Ghost serait plus clair. Il m'aide, je le remercie ; il m'aide encore, je vais essayer ses propositions (tout comme je l'avais déjà fait) et je le tiendrai au courant !
ghost a écrit :
Re,

corps background: pink
droite en float right
gauche avec un margn-right du width de droite et background blue
bas clear right

dans le code

<div id="droite">
</div>
<div id="gauche">
</div>

Enfin droite avant gauche et sûrement overflow: hidden pour gauche


Merci encore pour ton aide ! Là, tu m'as donné des pistes auxquelles je ne pensais pas du tout.
J'essaierai dans la journée et je te tiendrai au courant.
Modérateur
ok... donc tu te souviendras à l'avenir pourquoi le sujet est dorénavant fermé.

a écrit :
Bah dites donc, Modérateurs = CRS ? Smiley lol

Effectivement, nous serons inflexibles sur ce point. On te l'a demandé plusieurs fois et ce n'est toujours pas fait. Les CRS ne se donnent pas cette peine. Smiley cligne