28173 sujets

CSS et mise en forme, CSS3

Bonjour,
je suis en train de developper un outil qui est compose de 7 boites qui doivent etre placees au milieu de l'ecran (je n'ai pas encore teste avec IE):
http://demo.ortelli.org/prototype/index_proto.php

Pour ce faire, j'ai utilise des positions absolues a la place des float, afin d'eviter que les boites retournent a la ligne si la taille de la fenetre s'avere trop petite.

Maintenant, si on clique sur le lien slider, une barre laterale apparait se superposant sur les box presents dans le cas ou on a une petite resolution d'ecran ou bien si la taille de la fenetre est limitee.

Dans l'ideal, j'aimerais qu'a l'ouverture de la barre laterale, le partie central contenant mes boites, se decale vers la droite, histoire d'eviter cette superposition des deux elements.

Or, si je rajoute un float: left a la barre laterale et a la partie centrale, cette derniere ne sera plus centree lorsque la barre laterale est cachee... voici un bout de code de ma css actuelle:


html,
body
{
	padding: 0;
	margin: 0;
	text-align: center;
	width: 100%
}

/* partie centrale */
#main
{
	width: 800px;
	margin: 0 auto;
}

/* barre laterale */
#slide
{
	position: absolute;
	top: 65px;
	width: 150px;
}


Et ici le lien direct de la css:
http://demo.ortelli.org/prototype/css/style_proto.css

Si vous avez des idees pour me depanner... j'avoue que j'ai un peu tout essaye sans parvenir a une solution optimale.

Merci
Modifié par rortelli (17 May 2006 - 09:41)
Bon, je vais repondre moi meme, ai trouve une solution qui fonctionne sous FF et IE. Il suffisait de rajouter un div englobant la partie centrale et lui associer un float left, concretement le bout de css concerne donne cela:

html,
body
{
	padding: 0;
	margin: 0;
	text-align: center;
	width: 100%
}

#main-content
{
	width: 800px;
	margin: 0 auto;
}

#main
{
	float: left;
	
}

#slide
{
	float: left;
	margin: 65px 0 0 0;
	padding: 0;
	border: 1px solid #000;
}


Seul hic, Safari n'interprete pas correctement le float, la sidebar se superposant toujours sur la zone centrale. Toute idee est la bienvenue Smiley langue