18073 sujets

Questions générales et questions de débutants

Vos avis pour une mise en page

Bonjour à tous,

je souhaite creer un site web pour mon mariage, surtout une page que retrace la vie des mariés avec des photos et du texte.
Mon seul probleme est comment mettre des photos en face d'un texte particulier de façon a ce que la resolution de l'ecran ne change pas la plaçe de la photo par rapport a ce texte precis, je souhaite aussi que la taille des photos soit correct pour pouvoir quand meme deviner qui est dessus Smiley langue

Merci d'avance de vos avis.

@++
Salut,

Utilise la propriété float en css : elle permet de faire flotter un élément à droite ou à gauche du reste du contenu.
Ce flottement ne concernant que ce qui se trouve après l'élément en float, tu pourrais laisser tes photos dans le fil du texte, en les plaçant simplement juste avant la partie concernée.

Autre solution : définir des sections dans ta page, et mettre l'image en question en float : left, en mettant à ton texte une marge gauche égale à la largeur de l'image, afin de créer une pseudo-colonne pour ton image.

N'ayant pas trouvé de tutoriels spécifique au float parmi ceux d'Alsacréations (Raphaël, s'il y en a un édite moi stp), je te conseille celui-ci sur Openweb.

Pour la taille des photos, y'a pas de secret :
soit tu optimises tes images et elles sont suffisament légères pour être dans le corps de la page
soit elles sont trop lourdes, auquel cas tu mets une miniature avec un lien vers le grand format
Salut,

voici mon debut : http://cterpreau.nerim.net/test.html

J'ai suivi ce tuto http://css.alsacreations.com/Bases-et-indispensables/Comprendre-le-positionnement-des-balises-en-CSS
pour mettre l'image et le texte dans un conteneur comme celui-ci:
http://css.alsacreations.com/xmedia/exemples/positionnement/img2.gif
mais a chaque fois le texte garde la largeur du centre de ma page.

Merci pour votre aide.

PS: Voila je viens d'éditer, desolé.

@++
Modifié par tof (03 Mar 2005 - 17:02)
Administrateur
Tes liens ne fonctionnent pas du tout.

As-tu lu la FAQ pour comprendre le principe ?
Modifié par Raphael (03 Mar 2005 - 16:59)
Que le texte garde la largeur de la page c'est normal. En fait ton texte s'etire dans la place que tu lui laisses en l'occurence ici la place de "conteneur".
Tu ne devrais pas laisser dans ton code un texte sans aucun balisage comme c'est le cas dans ton exemple.
Utilise les balises classiques du HTML que sont <blockquote> (paragraphe) et/ou <p> pour les lignes. C'est 2 sélecteurs sont evidemment parametrable par le CSS !
Comme tu débutes j'anticipe la prochaine question (classique avec les flottants) : pense à la propriété "clear: both".

Bon courage.

[édition] correction des fautes de frappe
Modifié par gilles6975 (04 Mar 2005 - 09:38)
Salut,

a écrit :

(...)par contre je ne comprend pas pourquoi mon deuxieme bloc de gauche s'aligne horizontalement avec le premier bloc à droite.


Probablement le "float:left;" dans le "conteneur1" (si j'ai bien compris la question Smiley lol )

Au passage, si tu as un peu de temps et que tu veux un peu mieux marier tes images avec ton texte dans tes paragraphes, va faire un tour ici :

http://www.alistapart.com/articles/crosscolumn2/

Bonne continuation Smiley cligne
Sujet clos
Aller à