Discussion :

[CLeBeR]

Bonjour,
je souhaite aligner une image et un paragraphe horizontalement, malgré avoir cherche des sources sur le net, je n'arrive pas à les disposer comme je veux.
Voici le code HTML :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<div id="conteneurtitre">
	<h1>Titre 1</h1>
	<h2>Titre 2</h2>
</div>
<div id="photocontact">
	<img src="images/photo.jpg" alt="photo" title="photo" width="200" height="200">
</div>

Voici le code CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
#titrecontact{
	padding-top:4em;
}
#photocontact {
	float:left;
}

Merci.

[Invité]

Bonjour,
commence par apprendre les bases du CSS.
Les cours sont là pour ça :

• http://css.developpez.com/cours/

[johnrock]

Bonjour,
Essaie de mettre avec mon ordre ton codage HTML et de remettre ton code css tout en définissant des valeurs exactes des largeurs avec la propriété width. Comme ceci, et vois ce qui se passe:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<div id="photocontact">
	<img src="images/photo.jpg" alt="photo" title="photo" width="200" height="200">
</div>
<div id="conteneurtitre">
	<h1>Titre 1</h1>
	<h2>Titre 2</h2>
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
#titrecontact{
	padding-top:4em;
        width: valeur;
}
#photocontact {
	float:left;
        width: valeur;
}

[CLeBeR]

Bonsoir,
Voilà comment j'ai résolu le problème :

HTMl :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
    <div id="photocontact">
        <img src="images/monimage.png" alt="mon alt" title="mon titre" width="200" height="200">
    </div>
    <div id="titrecontact">
        <h1>Titre 1</h1>
        <h2>Titre 2</h2>
    </div>

CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
#titrecontact{
    padding-top:4em;
}
 
#photocontact {
    vertical-align: text-top;
    padding-top:4em;
    float: left;
}

Merci pour vos réponses.