28172 sujets

CSS et mise en forme, CSS3

Bonjour Smiley smile

Alors, je vais essayer d'exprimer ça simplement, si tant est que ça puisse se faire ^^
J'ai un bloc que je dois nécessairement placer en absolute pour qu'il se superpose sur un autre. Je dois le placer à droite. Mon problème est que lorsque je lui applique un float:right , et bien ce bloc dépasse du cadre de mon body (1024px et marges auto) et sa position fluctue selon la taille de la fenêtre du navigateur, or je voudrais que ce bloc, pourtant contenu dans le body, y reste et ne bouge pas ^^.

Me suis-je trompé de stratégie où pensez-vous qu'il s'agisse d'une erreur de code?

Merci beaucoup Smiley smile
Modifié par cssgrr (13 Jan 2014 - 17:50)
Je ne comprend pas trop le position absolute et float right :s
On peut voir le css que tu as mis ?
Je crois que l'on peut faire :

position : absolute;
right : 0;

Modifié par mathieu1004 (13 Jan 2014 - 17:21)

<body>

<section>

<article>
Verum ad istam omnem orationem brevis est defensio. Nam quoad aetas M. Caeli dare potuit isti suspicioni locum, fuit primum ipsius pudore, deinde etiam patris diligentia disciplinaque munita. Qui ut huic virilem togam deditšnihil dicam hoc loco de me; tantum sit, quantum vos existimatis; hoc dicam, hunc a patre continuo ad me esse deductum; nemo hunc M. Caelium in illo aetatis flore vidit nisi aut cum patre aut mecum aut in M. Crassi castissima domo, cum artibus honestissimis erudiretur.
</article>

<article class="[#green]resize[/#]">
<p>Verum ad istam omnem orationem brevis est defensio. Nam quoad aetas M. Caeli dare potuit isti suspicioni locum, fuit primum ipsius pudore, deinde etiam patris diligentia disciplinaque munita. Qui ut huic virilem togam deditšnihil dicam hoc loco de me; tantum sit, quantum vos existimatis; hoc dicam, hunc a patre continuo ad me esse deductum; nemo hunc M. Caelium in illo aetatis flore vidit nisi aut cum patre aut mecum aut in M. Crassi castissima domo, cum artibus honestissimis erudiretur.<p>
</article>

<article>
<p>Verum ad istam omnem orationem brevis est defensio. Nam quoad aetas M. Caeli dare potuit isti suspicioni locum, fuit primum ipsius pudore, deinde etiam patris diligentia disciplinaque munita. Qui ut huic virilem togam deditšnihil dicam hoc loco de me; tantum sit, quantum vos existimatis; hoc dicam, hunc a patre continuo ad me esse deductum; nemo hunc M. Caelium in illo aetatis flore vidit nisi aut cum patre aut mecum aut in M. Crassi castissima domo, cum artibus honestissimis erudiretur.<p>
</article>

</section>

<aside>
<p>Verum ad istam omnem orationem brevis est defensio. Nam quoad aetas M. Caeli dare potuit isti suspicioni locum, fuit primum ipsius pudore, deinde etiam patris diligentia disciplinaque munita. Qui ut huic virilem togam deditšnihil dicam hoc loco de me; tantum sit, quantum vos existimatis; hoc dicam, hunc a patre continuo ad me esse deductum; nemo hunc M. Caelium in illo aetatis flore vidit nisi aut cum patre aut mecum aut in M. Crassi castissima domo, cum artibus honestissimis erudiretur.<p>
</aside>

</body>




*{padding:0; margin:0;
}
html{
margin-left:auto;
margin-right:auto;
max-width:1024px;
}
body{
position:relative;
max-width:1024px;
background-color:#fff;
padding:4%4%4%4%;
}
.resize{
width:70%;
}
aside{
position:absolute;
width:25%;
right:0;
top:97%;
}


alors effecivement avec
right:0;
le bloc se place nickel mais je n'arrive pas à le faire remonter
mon pote qui veut que je lui fasse sont site, tiens à cette structure alambiquée avec l'aside au beau milieu de la section... Smiley ohwell c'est pourquoi j'ai ajouté une classe à l'article du milieu pour réduire sa largeur afin d'y accoler l'aside en absolute.
problème solved avec
right:0;

je m'étais trompé dans les valeurs de
top

Merci Raphael pour le coup de main, très bien vu pour la relation entre les blocs!!
Modifié par cssgrr (13 Jan 2014 - 17:46)
Hum je n'ai pas tout saisi de ce que tu cherches à faire avec le aside, mais si c'est résolu pense à mettre résolu dans le titre Smiley smile
Modifié par mathieu1004 (13 Jan 2014 - 17:52)