28173 sujets

CSS et mise en forme, CSS3

[résolu] Problème de placement de texte

Bonjour,

Je suis en train de créer une page dans laquelle sera intégrée du code php, je ne me charge que du desing web, et j'ai un soucis pour l'intégration de bouton suivant et précédant que j'aimerais placer tout en bas d'un div qui me sert à faire un cadre à bord arrondie, mais pour bien comprendre, voyez la page à cette adresse : http://www.goldenfish.info/doujinblade/

Ce que je cherche à faire précisément sont des boutons (en texte) suivant et précédant tout en bas du cadre vert, dans la partie du cadre qui se courbe.

J'aimerais trouver la méthode pour faire ceci sans étirer le div lui même et détruire ma mise en page, le placement absolute est à oublié car le cadre est extensible, pour le reste, je manque encore de connaissance pour arriver à mes fins (je ne sais pas comment j'ai réussi à faire ça en une nuit à mon niveau...).

Merci d'avance si vous pouvez m'aider.
Modifié par Goldysama (27 Sep 2007 - 18:01)
Goldysama a écrit :
Bonjour,
le placement absolute est à oublié car le cadre est extensible


Hello,

si ton bloc conteneur est positionné en relative, tu peux tout à fait y mettre un element en absolute. Il se positionnera alors en bas quelle que soit la hauteur du conteneur.
Le soucis étant que je n'arrive pas à déplacer avec les padding les paragraphes que j'ai placé juste avant la fermeture du div. Autant j'arrive à les déplacer horizontalement, je peux même les descendre, mais impossible de les montrer...

Je vous copie colle la zone qui correspond au cadre vert sur la page (désolé, c'est pas formaté) :

<div id="content">
<h4 id="contenthaut">News</h4>
<div id="contentmillieu">
<h3>Ceci est un titre h3</h3>
<h4>Et ça un sous-titre h4</h4>
<p class="just">(class "just") Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed
non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing
nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas
ligula massa, varius a, semper congue, euismod non, mi. Proin
porttitor, orci nec nonummy molestie, enim est eleifend mi, non
fermentum diam nisl sit amet erat.</p><p class="just">Duis semper. Duis arcu massa,
scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue.
Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum
augue. Praesent egestas leo in pede. Praesent blandit odio eu enim.
Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum
primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum.
Maecenas adipiscing ante non diam sodales hendrerit.</p>
<ul>
<li>Puce</li>
<li><a href="http://www.google.com">Lien</a></li>
<li>Vademecum</li>
</ul>
<p class="sign">Goldy (class "sign")</p>
<p class="date">19/11/2012 (class "date")</p>
<hr />
<h3>Titre h3</h3>
<h4>Sous-titre h4</h4>
<p class="just">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed
non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing
nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas
ligula massa, varius a, semper congue, euismod non, mi. Proin
porttitor, orci nec nonummy molestie, enim est eleifend mi, non
fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa,
scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue.
Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum
augue. Praesent egestas leo in pede. Praesent blandit odio eu enim.
Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum
primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum.
Maecenas adipiscing ante non diam sodales hendrerit.</p>
<p class="sign">Poshu</p>
<p class="date">25/06/1995</p>
</div>
<p id="prev">prev</p>
<p id="next">next</p>
</div>


Le css de la page est ici : http://www.goldenfish.info/doujinblade/styles.css

(les définitions pour ce que je cherche à faire est tout à la fin, vous remarquerez quelques essaies infructueux).
Modifié par Goldysama (27 Sep 2007 - 16:43)
Si j'ai bien compris tu veux mettre ces boutons à la fin du bloc #contentmillieu ?

Alors c'est relativement simple.
Il faut d'abord positionner ton bloc conteneur en relatif, afin de pouvoir positionner les éléments à l'intérieur comme tu le souhaites.
Ensuite il faut lui donner un peu d'espace en bas pour avoir la place des boutons.
(je mets juste les styles à rajouter/modifier)
div#contentmillieu {
position:relative;
padding-bottom:30px;
}

Ensuite il faut positionner tes blocs Next et Previous:
---- CSS ----
p#prev
{
	position: absolute;
	bottom:0;
	left:0;
}
p#next
{
	position: absolute;
	bottom:0;
	right:0;
}

---- HTML ---- (à mettre dans ton bloc #contentmillieu)
<p id="prev">Prev</p>
<p id="next">Next</p>

C'est ça ?
Modifié par yyoupla (27 Sep 2007 - 17:04)
Non, ce n'est pas "contentmillieu", il s'agit du premier div, à savoir "content". Je vais essayer de bien expliqué (car la lecture du code est un peu fouillis).

Pour réaliser le cadre, j'utilise 2 div imbriqués, le premier contient en haut un titre qui me permet de placer la partie haute de mon cadre, et la partie basse, je met entre les deux un second div qui me permet de mettre le contenu (et le milieu du cadre). Là où je veux placer mes boutons, c'est dans la partie basse du cadre, donc dans le premier div, pour qu'ils puissent se placer au dessus de la zone où le cadre se referme en bas.

Je vais essayer tout de même avec ta méthode, mais j'ai peur que les boutons ne soient pas placés à l'endroit où je veux les mettre.
J'ai réussi, en modifiant quelques paramètres de ta méthode, mais l'approche est différente de celle que j'avais au départ, je voulais pas que les contenus dépassent des div, j'ai un peu l'impression d'avoir triché.

Les modifications que j'ai fait sont en ligne, vous pouvez les voir en suivant le lien de mon premier post.

Merci en tout cas pour ton aide.
Sujet clos
Aller à