28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous !

J'aimerais faire un simple header avec à gauche mon logo et à droite une barre de connexion.
Je ne sais pas trop comment m'y prendre pour mettre la barre de connexion à droite, je pense qu'un float est le mieux adapté mais je n'arrive pas à le manipuler correctement.

upload/53502-probleme.png

HTML

<header>
         <a href="#"><img src="images/piano_logo.png" alt="Logo piano" id="logo" /></a>

         <form method="POST" action="#"> 
	         ...
                 ...
         </form>
</header>

CSS

header{
	overflow: auto;
	border: 1px solid black;
	font-family: arial;
	font-size: .8em;
}

#logo{
	display: inline-block;
	margin: 0px 0px 0px 10px;
	border: 1px solid red;
}

form{
	float: right;
	vertical-align: top;
	border: 1px solid red;
	display: inline-block;
}


Je ne comprends pas pourquoi ma barre se met en bas à droite et pas en face...

Merci d'avance ! Smiley smile
Modifié par Sha0 (12 Feb 2014 - 15:27)
Bonjour !

Merci mais finalement j'ai trouvé mieux que float qui faisait n'importe quoi au passage.

J'ai mis un [i]position: relative[/b] sur mon header puis un [i]position: absolute[/b] sur ses enfants.
Et ça marche très bien comme ça Smiley smile

Ps: je crois que le système d'édition à un petit problème avec les balises, non ?
Modifié par Sha0 (13 Feb 2014 - 10:21)
Sha0 a écrit :

Merci mais finalement j'ai trouvé mieux que float qui faisait n'importe quoi au passage.

J'ai un doute que le float, fasse n'importe quoi, il a un fonctionnement précis, il fait toujours la même chose lui... généralement c'est plutôt celui qui s'en sert qui fait un peu n'importe quoi, fin bon , je dis ça je dis rien hein.
Bonne chance pour la suite de ton site.
Modifié par mathieu1004 (13 Feb 2014 - 10:38)
Oui, j'ai pensé exactement la même chose que toi en disant ça Smiley smile

Malgré le tuto, j'ai du mal à contrôler son comportement. Je suppose que ça viendra en codant et en visitant la doc
mathieu1004 a écrit :

J'ai un doute que le float, fasse n'importe quoi, il a un fonctionnement précis, il fait toujours la même chose lui... généralement c'est plutôt celui qui s'en sert qui fait un peu n'importe quoi

+1
Tu auras encore plus de problèmes avec les positions absolues. Les "float" auraient gérer ce que tu aurais voulu faire.