Aller au menu - Aller au contenu

écrire a coté d'une image

sur toute la hauteur

Pour accéder à cette section
Connectez-vous !
connexion_rpx

Résolu Le problème de ce sujet a été résolu

Page 1 
Auteur Message
1 visiteur sur ce sujet (1 Anonyme)
Page 1 
Hors ligne Surren # Posté le 24/11/2008 à 18:02:24
Move All Night Long
Avatar
salut à tous, voila j'ai affiché plusieurs images cliquables (liens) sur mon site, 5 l'une en dessous de l'autre, aligné sur la gauche du corps, j'aimerais écrire un texte a droite de chaque image, mais lorsque je le fais ca écris à coté oui, mais en dessous:

|-----|
| img|
|-----|texte

avec:

Code : HTML
1
<a href="#"><img src="images/123.png" alt="pc1" title="titre" /></a> texte<br/>


j'aimerais savoir s'il existe une astuce en html pour pouvoir écrire à coté sur toute la hauteur de l'image, sinon j'avais pensé devoir créé un deuxième corps dans le corps en css.. une idée? :)

merci pour vos réponses ;)
Édité le 24/11/2008 à 18:09:21 par Surren
Image utilisateur
 
Hors ligne Papy_Poke # Posté le 24/11/2008 à 18:14:45
Run or shoot?
Avatar
Une astuce en HTML... pas vraiment. On utilisera du CSS:

Code : CSS
1
2
3
.mon_image {
float: left;
}


Code : HTML
1
<p><a href="#"><img src="images/123.png" class="mon_image" alt="pc1" title="titre" /></a>texte</p>


Si tu ne sais où écrire la ligne de code CSS je t'invite à aller lire ce tuto:

http://www.siteduzero.com/tutoriel-3-1 [...] e-le-css.html
Édité le 24/11/2008 à 18:16:17 par Papy_Poke
Quelques conseils pour obtenir la meilleure aide qui soit:

- bien expliquer son problème
- mettre, si possible, un exemple en ligne
- être poli et patient
 
Hors ligne Surren # Posté le 24/11/2008 à 18:21:15
Move All Night Long
Avatar
merci :) je vais essayer
Édité le 24/11/2008 à 18:36:48 par Surren
Image utilisateur
 
Hors ligne Jinno # Posté le 24/11/2008 à 18:27:42
fresh reel!
Avatar
Donc ajoutes à toutes t'es images la class ".mon_image"
Image utilisateur

Image utilisateur Image utilisateur Image utilisateur Image utilisateur Image utilisateur Image utilisateur










 
Hors ligne Surren # Posté le 24/11/2008 à 18:34:14
Move All Night Long
Avatar
ça ne marche pas comme prévu, le texte s'écrit bien a coté en haut cette fois mais les images se placent toutes à droites de la première image, avec le texte au dessus d'elles, (elles sont donc décalées de quelques pixels vers le bas) une idée? :s

Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<div id="corps">
    		<p><h3>titre</h3>
			
<a href="#"><img src="images/1.png" class="mimage" alt="1" title="titre" /></a> du texte et encore du texte
<a href="#"><img src="images/2.png" class="mimage" alt="1" title="titre" /></a>
<a href="#"><img src="images/3.png" class="mimage" alt="1" title="titre" /></a>
<a href="#"><img src="images/4.png" class="mimage" alt="1" title="titre" /></a>
<a href="#"><img src="images/5.png" class="mimage" alt="1" title="titre" /></a>


			</p>
</div>



et

Code : CSS
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
.mimage{
float: left;
}
#corps{
float: left;
text-align: left;
margin-left: 15px;
width: 750px;
margin-bottom: 20px;
padding: 20px;
}
img
{
border: none;
}
Édité le 24/11/2008 à 18:40:24 par Surren
Image utilisateur
 
Hors ligne Papy_Poke # Posté le 24/11/2008 à 18:45:05
Run or shoot?
Avatar
Essayes d'ajouter à chaque ligne la balise <br />

De plus, si tu pouvais nous donner un lien, on pourrait t'aider plus facilement.

EDIT: de plus le <h3> doit se mettre à l'extérieur de la balise <p>:

Code : HTML
1
2
<h3>titre</h3>
<p>texte du paragraphe</p>
Édité le 24/11/2008 à 18:46:29 par Papy_Poke
Quelques conseils pour obtenir la meilleure aide qui soit:

- bien expliquer son problème
- mettre, si possible, un exemple en ligne
- être poli et patient
 
Hors ligne selen # Posté le 24/11/2008 à 21:17:29
Avatar
Cette réponse a aidé l'auteur du sujet Cette réponse a aidé l'auteur du sujet
bonjour

En fait, c'est un peu plus compliqué que ça:

Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<div id="corps">
<h3>titre</h3>
<div class="bloc">
<a href="#"><img src="images/1.png" alt="1" title="titre" /></a><p> du texte et encore du texte </p></div>

<div class="bloc">
<a href="#"><img src="images/2.png" alt="2" title="titre" /></a><p> du texte et encore du texte </p></div>

<div class="bloc">
<a href="#"><img src="images/3.png" alt="3" title="titre" /></a><p> du texte et encore du texte </p></div>

etc.
</div>


Code : CSS
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#corps{
float: left;
text-align: left;
margin-left: 15px;
width: 750px;
margin-bottom: 20px;
padding: 20px;
}
a img{
border: none;
}
.bloc{
background: #d7eeff; /*si on veut une couleur de fond*/
margin-bottom: 10px; /*espace entre les blocs*/
width: 350px; /*largeur du bloc image + texte*/
}
.bloc img{
float: left;
}
.bloc p{
height: 80px; /*hauteur de l'image*/
margin-left: 130px; /*largeur de l'image + quelques px de marge*/
}


Remplace mes valeurs en px par les tiennes !
Pour une aide plus efficace et plus rapide, postez le lien de votre page en ligne !
 
Hors ligne Surren # Posté le 25/11/2008 à 20:31:53
Move All Night Long
Avatar
merci, ca marche à la perfection ^^ un as :p
Image utilisateur
 

Retour au forum "XHTML / CSS" ou à la liste des forums

Pour accéder à cette section
Connectez-vous !
connexion_rpx