Aller au contenu

Image et habillage

Patricia

Par Patricia
dans (X)HTML et CSS

 Partager

Sujets conseillés

Patricia

Patricia

Posté
Posté

Bonsoir,

j'ai déjà posé cette question dans un forum et ... ça ne marche pas.

Je voudrais habiller une image , pour mon site scolaire, mais sans tableau.

Voici un exemple sur mon premier site, mais avec un tableau, de ce que je voudrais bien faire:

http://www.eric-seidel.com/CAMARGUE/gdrliving.htm

La première image + son texte (Voici une vue du living, vous pouvez apprécier une partie de la vue sur la mer...Un rêve.) sont dans un tableau ... Ben oui mais je débutais dans la conception :blush:

Vous remarquerez que le texte se met gentillement sur 2 lignes ET surtout centré !!!

Je voudrais faire la même chose sans tableau: à gauche, une photo d'activités d'élèves simplement mise dans le body (pas dans un bloc) et à droite le texte. Et ce texte (de 4-5 lignes), je le voudrais centré par rapport à la photo ...

Et cela ne marche pas, il me met la première ligne du texte, à droite et bien au milieu. Là, il est gentil mais le reste du texte, ben il me le place en dessous de la photo grrrr.

J'ai mis <img src=" ........." alt=" ..........." style=vertical-align: middle;"

Si je mets "left" ou right", il le place au dessus.

Merci des réponses

Fanou

Fanou

Posté
Posté

Bonjour Patricia,

il me semble que dans tes propriétés CSS, un float:left ou float:right suffirai.

Par contre il te faudrai tout de même aligner ton texte avec la propriété vertical align...

Bonne Chance.

Patricia

Patricia

Posté
  • Auteur
Posté (modifié)

moi, je veux bien mais je pédale pour comprendre, voici le code:

div class="centre">
			<link rel="stylesheet" type="text/css" href="../actualite.css">
			<h1>Calendrier des manifestations</h1>
			<h2>Vendredi 09 mars:</h2>
			<p>
			<a href="act_exter.html">Des activités extérieures font des heureux</a>
			</p>
			<p>
			<img src="../Images/Actualites/09-03.gif" alt="Activités extérieures à l'école" style="vertical-align: middle;"> Ce vendredi 09 mars, les élèves de 1ère accompagnés de leurs professeurs se sont rendus à Montigny-le-Tilleul pour participer à une journée d'activités encadrée par des animateurs extérieurs. L'un des objectifs de cette journée (...) <a href="act_exter.html">> lire la suite </a>>
			</p>
			<p>
			Mardi 12 mars: Animation sur le goût à lécole primaire de Piéton
			</p>

On dirait que l'image prend la hauteur d'une ligne.

Ou alors il faudrait mettre chaque image et son texte dans une DIV ?

Maintenant, est-ce qu'une page peut être reliée à deux feuilles de style ?

Un tout gros merci pour les réponses

Modifié par Monique
Fanou

Fanou

Posté
Posté

Recoucou Patricia...

en fait je me suis quelque peut gourrer en te disant de faire un vertical-align sur ton texte... cette propriété ne fonctionne que pour les tableaux...

Il y a plusieurs moyens de contourner cela, malheureusement l'ami des webmasters, j'ai bien sûr nommé Internet Explorer ne sait pas le gérer...

Cependant voici un truc tout simple, tout con, tout bête qui t'aidera pour ton image :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
<!--
img {
vertical-align:middle;
}
-->
</style>
</head>

<body>
	Voici une vue du living, vous pouvez apprécier une partie de la vue sur la mer...Un rêve.
	<img src="http://www.eric-seidel.com/CAMARGUE/PhotosGrauDuRoi/living01grand.gif" />
</body>
</html>

Là, c'est ton image qui se centre par rapport à ton texte...

à toi ensuite de décorer tout ça avec des CSS, dans la limite des possibilité d'IE bien sûr ;)

Bonne soirée !

karnabal

karnabal

Posté
Posté

Salut,

Patricia, merci d'utiliser la fonction de citation de code quand tu édites tes posts et que tu donnes ton code source. C'est quand même plus lisible et cela donnera plus envie de t'aider. ;)

Je ne me suis pas penché en détail sur ton problème mais attention à ça : </a>>

<a href="act_exter.html">> lire la suite </a>>

C'est pas bon du tout.

Si tu veux faire un "habillage", tel qu'on l'entend en PAO (texte qui suit les contours d'une image), fais une recherche sur la propriété "float". Je l'utilise sur mon site pour la plupart des images figurant sur ma page d'accueil.

#gauche img.med-mini {styles.css (line 101)
border:medium none;
float:left;
margin:0px 16px;
text-decoration:none;
}

Patricia, pense à valider ton code avant de le soumettre. :)

Fanou : dans le code que tu cites, il manque tout de même une balise ou deux pour présenter le texte, ne crois-tu pas ?

Patricia

Patricia

Posté
  • Auteur
Posté (modifié)

Bonsoir,

- la fonction de citation du code, j'ai essayé de le faire mais je n'ai pas réussi. Je suppose que c'est expliqué quelque part dans le site mais, hier, je n'ai pas trouvé. Il est vrai que j'avais presque 8 heures de code dans les mains et plus beaucoup de courage pour chercher ... :blush:

Le format des photos des élèves, actuellement, est simple: rectangle. Donc pas besoin de suivre le contour. Bon, je ne dis pas plus tard, ...

Quant à valider le code, je crois que pour cela il faut que le site soit sur Internet et ... il ne l'est pas encore car toutes les pages ne sont pas encore complétées. Il est dit, sur votre forum, qu'il n'est pas bon, pour le référencement, de mettre en ligne un site dont certaines pages sont vides. Et là, j'ai bien retenu ma leçon, le site est toujours bien au chaud chez moi :cool:

Ben non, mes questions, ce n'est pas de pub pour le site (pas d'adresse) :P et des questions, je crois que j'en aurai encore :whistling: (faut dire qu'avec presque 1/2 siècle, il y des moments où ffff...)

Un tout tout grand merci pour vos réponses :flower: :

Modifié par Patricia
Dan

Dan

Posté
Posté
- la fonction de citation du code, j'ai essayé de le faire mais je n'ai pas réussi. Je suppose que c'est expliqué quelque part dans le site mais, hier, je n'ai pas trouvé. Il est vrai que j'avais presque 8 heures de code dans les mains et plus beaucoup de courage pour chercher ... :blush:

C'est pourtant simple :)

Lorsque tu rédiges un texte, tu as à gauche un lien "Aide BB Code" ainsi que quelques mini-icônes au dessus de ta zone de saisie.

L'icône de droite '#' permet d'entourer le texte sélectionné des balises appropriées pour le code.

Celle qui précède cette icône permet d'ajouter automatiquement les balises pour les citations :)

Il faut pour cela que tu choisisses le mode 'guidé ou non' en bas à droite de la zone de saizie. Le fonctioonementdes icônes en haut change selon le mode choisi :)

Dan

karnabal

karnabal

Posté
Posté
Le format des photos des élèves, actuellement, est simple: rectangle. Donc pas besoin de suivre le contour. Bon, je ne dis pas plus tard

Si tu suis le lien que je te donne dans mon précédent post tu remarques que mes images aussi sont rectangulaires, ce qui n'empêche pas l'habillage : le texte suit les contours de celles-ci.

Quant à valider le code, je crois que pour cela il faut que le site soit sur Internet et ... il ne l'est pas encore

Pas nécessaire, tu peux copier-coller le code source de ta page dans le champ prévu à cet effet.

Il est dit, sur votre forum, qu'il n'est pas bon, pour le référencement, de mettre en ligne un site dont certaines pages sont vides. Et là, j'ai bien retenu ma leçon, le site est toujours bien au chaud chez moi

Tu peux mettre un fichier robot.txt qui interdira - provisoirement - aux robots d'indexer ton site. ;)

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...