5568 sujets

Sémantique web et HTML

Image +habillage

Bonsoir,

Je voudrais habiller une image , pour mon site scolaire, mais sans faire de 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 Smiley confused

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 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 "align: middle". Si je mets "left" ou right", il le place au dessus.

Un grand merci des réponses
Bonsoir et bienvenue ici,

Peut-être est ce du a mon état de fatigue mais ça ne parait pas clair du tout ton histoire. Smiley langue

Mais la dessus, quoi qu'il en soit il y a ce qui faut dans la FAQ là et là

FAQ veut dire Facile A Qomprendre ....( Smiley cligne )

N'hésites pas à l'utiliser, c'est une ressource précieuse !
Bonsoir

Je n'ai peut-être pas bien expliqué: une image à gauche qui n'est pas dans un bloc mais simplement dans le body et une légende à mettre à propos de cette image à droite mais en centrant le commentaire par rapport à l'image.

La FaQ, je l'avais lue et j'ai testé, cela donne +-:

<img src=" ........." alt=" ..........." style=vertical-align: middle;"

Ben ça marche pas ! Smiley confused Une ligne à droite et le reste en dessous

Non, je ne peux pas vous donner l'adresse du site pour mieux expliquer, il n'est pas encore en ligne.

Le mieux que je puisse faire, c'est de donner l'adresse plus haut pour montrer ce que je désire Smiley rolleyes
Alors, voici mon grain de sel pour ton affaire de centrage.

HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="fr" lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="test.css" rel="stylesheet" title="Test" type="text/css" media="screen"/>
</head>

<body>
<div id="conteneur">
	<div id="photo1gauche"></div>
	<div id="texte1droite">
	<p> C'est ici que vous allez vous éclater, et mettre du texte aligner à droite de l'image.</p>
	</div>
</div>
</body>
</html>


Comme tu peux le constater, il n'y a pas grand chose dans le code HTML. Tout se passe dans le CSS

CSS nommé "test.css"


body{
background-color:orange;/* ou un code #FFFFFF*/
margin:auto; /*te permet de centrer ton desgin 
dans une fenètre plus large qu'initialement prévue*/
}

/*le conteneur sert à enfermé tes divs dans un espace 
que tu peux paramétrer.*/
#conteneur{
width:800px;
margin:auto;
margin-top:100px;/*décale ton conteneur de 100px du bord haut de la fenètre.*/
}

/*l'addition des width de "photo1gauche" et "texte1droite" 
ne doit pas dépasser le "width" du "conteneur". il faudra aussi prendre 
en compte les "padding"*/
#photo1gauche{
width: 400px;
height: 400px;
background-image:url("img/photo1gauche.gif");
background-repeat: no-repeat;
margin:0;
float:left; /*ta photo sera à gauche*/
}

#texte1droite{
width:390px;
float:right;/*ton texte sera à droite*/
padding-left:10px; /*pour décaler un peu ton texte du bord de l'image*/
padding-top: 50px; /*fait descendre ton texte de 50px. Tu peux avec cette commande
centré ton texte*/
}



Pour plus de faciliter à repérer tes divs, tu peux leur assigner une bordure de travail en couleur. C'est super pratique.
border:white 1px solid;

Et faire varier les couleurs pour chaque div.
Penser que la bordure décale les divs de 1px. Parfois on peut avoir l'impression que l'alignement n'est pas correct à cause de ça.

Voila, j'espère que ça va t'aider.

EDIT : J'ai oublié une p'tite image.
upload/8567-apercu.gif
Modifié par Wuam (15 Mar 2007 - 15:50)
Benjamin D.C, toutes mes excuses, je raconte n'importe quoi.

Il est super intéressant cet article.
J'ai éditer mon post pour effacer mon aberration Smiley confused
Wuam a écrit :
Benjamin D.C, toutes mes excuses, je raconte n'importe quoi.

Il est super intéressant cet article.
J'ai éditer mon post pour effacer mon aberration Smiley confused

Pas de soucis! Smiley cligne
Sujet clos
Aller à