Bonjour les zéros !

J'essaye en vain de positionner deux images l'une à côté de l'autre. Visiblement elles ne m'obéissent pas et ont décidé de se mettre l'une en dessous de l'autre. Je les ai positionné dans le header dans deux div différentes et malgré mes recherches sur google je reste paumé...

Voici mon code :

html :

<header>
<div id="float"><img src="float.png"></div>
<div id="fleche"><img src="fleche.png"></div>
</header>

css :

header
	{
		display: block;
		width: 100%;
		height: 80px;
		background: #ffffff;
		box-shadow: 0px 1px 1px #680c0c;
	}
	
#float
{
	padding-top: 80px;
}

#fleche
{
	padding-left: 45%;
}

L'image "float" est juste en dessous de mon header blanc (c'est voulu) et mon image "flèche" se positionne automatiquement en dessous de l'image "float", ce que je ne souhaite pas. Je voudrais qu'elle soit alignée avec l'autre image...

Merci :S

Salut,

c'est parce que tu les as mises dans des div, et les div sont des blocks, et les block passent à la ligne.

Donc soit tu les mets dans rien, soit tu aligne tes div avec display:inline-block par exemple.

Enlève display:block et width:100% sur header qui ne servent à rien et qui pourrait te poser des problèmes principalement avec le width.

Attention également aux % surtout sur des padding et margin. Selon la taille de l'écran tu auras des surprises.

Il faudrait que tu te documente un petit peu sur les éléments inline et le séléments block. C'est une base qui te serait utile.

EDIT : oui thenif, même pas pensé à cette solution...

-
Edité par Frogweb 6 février 2013 à 17:50:10

Salut,
Si tu n'as que deux images (pas de texte qui prend plus de hauteur que ton image float), tu peux utiliser display: inline-block; sur les images.
Tu n'as pas besoin des div, des id dans les balises img suffisent...
Je crois que display: block; sur le header ne doit servir à rien, mais pas sur...

EDIT: Ha bah j'arrive en retard ^^, et dsl double post je sais pas pourquoi ca a bugué quand j'ai fait "envoyer" =/

-
Edité par KevinHi 6 février 2013 à 17:56:48

EDIT: Du coup ce second post est à supprimer...

-
Edité par KevinHi 6 février 2013 à 18:06:32

il y a une autre solution toute simple, sans css. 

<table>
		<tr>
			<td><img src="logo.jpeg" alt="" /></td>
			<td><img src="logo.jpeg" alt="" /></td>
		</tr>
</table>

03t02: Non. Le tableau ne sert pas à ça.