Une seul ligne mais plusieurs div

Bonjour ou plutôt bonsoir,

je suis tout nouveau sur le site et j'ai commencé à apprendre le HTML5 et CSS3 via ce livre :
http://uni.gam.free.fr/projet-electrotechnique/html5-livre-eyrolles.jpg

pour l'instant je m'en sors bien, ma vie est intérressante je le conçois ^^

mon problème est que je veux faire une barre fixe en haut de ma page :

<div id="bloc-fixe">
</div>

#bloc-fixe { 
position:fixed;
display:inline;
right:0px;
left:0px;
top:0px;
height:30px;
border:solid 1px;
background-color:#0055FF;
}

si je me trompe corrigez moi (elle fonctionne mais j'ai un soucis sous chrome que je n'ai pas sous FF, tout ce qui est image,javascript,iframe passe par dessus cette barre quand je scroll vers le bas ( evidement ) ).


mon réel problème c'est que je veux dans cette barre afficher 4 images, deux collées à gauche et deux collées à droite et pour l'instant je n'obtient que celles de gauche, les autre sont une ligne en dessous mais bien à droite...

<div id="bloc-fixe">
 	
<div id="bloc-fixe-left">
<!-- image1 et 2 -->
</div>
		
<div id="bloc-fixe-right">
<!-- image 3 et 4 -->
</div>
	
</div> 

#bloc-fixe { 
position:fixed;
display:inline;
padding:0px;
margin:0px;
right:0px;
left:0px;
top:0px;
text-align: left;
height:30px;
border:solid 1px;
background-color:#0055FF;
font-size:90%;
}

#bloc-fixe-right{

text-align: right;
top:0px;
padding:0px;
margin:0px;
border:0;
}

#bloc-fixe-left{
text-align: left;
top:0px;
padding:0px;
margin:0px;
border:0;
}

Il y a également 5pixels entre chaque image dont je n'i aucune idée de la présence ( surement du css mais quoi )


Merci pour vos futures réponses
Modifié par DC_Volo (13 Nov 2011 - 01:06)

DC_Volo a écrit :

si je me trompe corrigez moi (elle fonctionne mais j'ai un soucis sous chrome que je n'ai pas sous FF, tout ce qui est image,javascript,iframe passe par dessus cette barre quand je scroll vers le bas ( evidement ) ).

Regardes du côté de la propriété z-index.

DC_Volo a écrit :

mon réel problème c'est que je veux dans cette barre afficher 4 images, deux collées à gauche et deux collées à droite et pour l'instant je n'obtient que celles de gauche, les autre sont une ligne en dessous mais bien à droite...

Tu as plusieurs solutions pour çà : les flottants, la position absolute et ce qui serait plus approprié pour toi, la propriété display avec inline-block.

DC_Volo a écrit :

Il y a également 5pixels entre chaque image dont je n'i aucune idée de la présence ( surement du css mais quoi )

C'est sûrement çà !
Modifié par mob (13 Nov 2011 - 11:44)

J'ai réussi pour faire la barre.

moi il me faudrait un horizontal-align ^^ ( parce que sur une meme ligne y'a generallement pas de dessous )

le z-index a fonctionné pour javascript mais toujours pas pour l'iframe ( youtube ) je comprend pas..

j'ai même été jusqu'a mettre un id à la vidéo et a lui coller un z-index inferieur a la barre mais rien n'y fait. ( oui j'ai mis des position, des relative )

http://forum.alsacreations.com/topic.php?fid=4&tid=58353&s=z-index
je crois avoir situé mon problème, je travaillerai ça cet après-midi.
Modifié par DC_Volo (14 Nov 2011 - 11:25)

Bonjour, le mieux c'est de revoir les bases du positionnement.

En comprenant bien ce que tu fais, tu vas réussir à faire ce que tu veux.

C'était tout bète en plus, un simple , right:0; et left:0;

j'ai centré une image au milieu des deux avec un text-align:center; dans la div principal qui contient les deux autres div ( droite et gauche)

si je veux faire une troisieme div centré comment faire?
j'ai tenté un margin-left et right en auto; mais ça ne fonctionne pas.


Une question d'ordre technique, le format png est dit indeformable, donc sa voudrait dire qu'en l'inserant dans une div a width 50% quelque soit la largeur de l'ecran il garde sa taille original en pixel ?