Succession Horizontale !

Salut,

Voilà je cherche a faire une disposition de ce type, mais je viens de m'apercevoir que l'on a pas le droit d'attribuer une taille width a un span (bon ca marche avec IE bien sur mais pas FF) et je n'arrive pas a mettre en place cette architecture avec des div à la place des span pour les blocs intérieurs. (je n'arrive pas à les mettre en ligne)

div
--------------------
¦ -------- ---------¦
¦ ¦ span ¦ ¦ span ¦ ¦
¦ -------- -------- ¦
--------------------




Si quelqu'un peut m'éclaircir, je suis preneur ! Merci bcp d'avance.

CSS

#conteneurCentral
{
position:absolute;
width:100%;
margin-top:10px;
}


#conteneurCentral .contenu
{
margin-left:210px;
margin-right:210px;
text-align:center;
}

#conteneurCentral .contenu .box
{
width:250px;
border-top:1px solid #BABABA;
}

HTML

<div id="conteneurCentral">

	<div class="contenu">
		<span class="box">TEST</span>
		<span class="box">TEST</span>
	</div>

</div>

Modifié par EggY (29 May 2006 - 15:32)

vous pouvez peut-être regarder sur
http://openweb.eu.org/articles/initiation_flux/
Les explications sur le positionnement sont vraiment très claires
Bon courage

Oui j'ai bien lu ce que propose ce site mais je ne vois vraiment pas comment résoudre mon souci car les balises de type bloc se succèdent verticalement or moi je souhaite une succession horizontale. De plus les éléments en ligne comme le span qui affiche un résultat comme je souhaiterais, ne permet pas de définir une largeur.
Je suis un peu perdu
Modifié par EggY (29 May 2006 - 15:39)

Salut

tu peux mettre les bloc en float

A+

Oké mais comment réduire leur espacement ? Car la j'ai un bloc super à gauche et l'autre super à droite Sinon ca se rapproche de ce que je veux.
Ou soit si je met les deux en float:left ils sont pas centrés dans mon conteneur.
Modifié par EggY (29 May 2006 - 15:59)

Il suffit ensuite de les positionner en leurs spécifiant des "marges"

J'ai un problème avec IE j'ai spécifié la taille de ma box en % or il ne l'interprète pas du tout de la meme facon que FF ca part en cacahouète (c'est beaucoup plus long sous IE que sur FF) jarrive pas a avoir à la fois quelquechose de cohérent au niveau des résolutions et des navigateurs, ca commence à me pomper

#conteneurCentral
{
position:absolute;
width:100%;
margin-top:10px;
text-align:center;
}


#conteneurCentral .contenu
{
margin-left:210px;
margin-right:210px;
}




#conteneurCentral .box
{
	float:left;
	border-top:1px solid #BABABA;
	border-bottom:1px solid #BABABA;
	border-left:1px solid #BABABA;
	border-right:1px solid #BABABA;
	width:48%;
	
}

<div id="conteneurCentral">

	<div class="contenu">
		<div class="box">TEST</div>
		<div class="box">TEST</div>
	</div>

</div>

Voilà ce que me donne IE, FF m'affiche correctement, quel est encore ce bug d'IE qui fait que celà dépasse de mon conteneur ? Merci d'avance !

Modifié par EggY (30 May 2006 - 09:23)

Là je vois vraiment si ya quelqu'un pour m'aider je suis dans la mouise la plus totale ! J'ai passé la journée la dessus !

EggY a écrit :
Là je vois vraiment si ya quelqu'un pour m'aider je suis dans la mouise la plus totale ! J'ai passé la journée la dessus !

Moi ça me rappelle ça :
Largeur anarchique avec Internet Explorer Windows
(Désolé, c'est une page de tests sans explications pour l'instant, c'est juste pour reproduire le bug d'IE en environnement minimal).

La solution ? Ben pour l'instant je n'en ai pas. Il faut donc éviter d'avoir un conteneur en absolu ou en flottant, et à l'intérieur un élément de type bloc doté de HasLayout dans IE (le HasLayout est une propriété que l'on obtient généralement avec une hauteur ou une largeur fixe… dans mes pages de test, je l'ai reproduite à l'occasion avec la propriété CSS spécifique à Internet Explorer zoom).

Dans ton cas, c'est le positionnement absolu avec une largeur de 100% qui me semble tout à fait dispensable.

PS: pour ton image, tu devrais utiliser la fonction « générer une vignette ». Merci.
Modifié par mpop (30 Jun 2006 - 22:16)

[quote=EggY]J'ai un problème avec IE j'ai spécifié la taille de ma box en % or il ne l'interprète pas du tout de la meme facon que FF ca part en cacahouète (c'est beaucoup plus long sous IE que sur FF) jarrive pas a avoir à la fois quelquechose de cohérent au niveau des résolutions et des navigateurs, ca commence à me pomper

#conteneurCentral
{
position:absolute;
width:100%;
margin-top:10px;
text-align:center;
}


#conteneurCentral .contenu
{
margin-left:210px;
margin-right:210px;
}




#conteneurCentral .box
{
	float:left;
	border-top:1px solid #BABABA;
	border-bottom:1px solid #BABABA;
	border-left:1px solid #BABABA;
	border-right:1px solid #BABABA;
	width:48%;
	
}

<div id="conteneurCentral">

	<div class="contenu">
		<div class="box">TEST</div>
		<div class="box">TEST</div>
	</div>

</div>

Voilà ce que me donne IE, FF m'affiche correctement, quel est encore ce bug d'IE qui fait que celà dépasse de mon conteneur ? Merci d'avance !

J'ai bien envie de "ressombrer" vers les tableaux pour faire mes boites dans mon contenu central, c'est pas entièrement vide sémantiquement.
Qu'en pensez vous ?

Bonjour,

Si c'est juste sur IE que cela merde, pourquoi ne mets tu pas un crack IE pour règler le problème ?!

Un truc du genre :
_margin-right: 210px;

Ensuite tu modifies la marge attribué par ton crack jusqu'à avoir le résultat escompté.

J'avoue que pour ma part, actuellement je n'ai pas trouvé mieux que faire une CSS classique pour FF et corriger ce qui ne va pas sous IE de la sorte

Ouep merci Jedi je connaissais pas ce genre de pratique ( seul IE va interpréter les propriétés préfixés du _ c'est ca ?) mais j'ai du mal a que ca soit compatible avec différentes résolutions avec ce genre de problème. IE ne resize pas bien les boites centrales malgèrs une valeure en %
Modifié par EggY (30 May 2006 - 09:59)

Bon j'ai reussi a m'en sortir avec des commentaires conditionnels dans mon HTMEULEU et dans ma css

<div id="conteneurCentral">
 
 	<div class="contenu">
	
	<!--[if lte IE 7]> 
		<span class="box">TEST</span>
		<span class="box">TEST</span>
		<span class="box">TEST</span>
		<span class="box">TEST</span>
		<span>TEST</span>
		<span>TEST</span>
	<![endif]--> 
	
	
	<!--[if !IE]> <-->
   		<div class="box">TEST</div>
		<div class="box">TEST</div>
		<div class="box">TEST</div>
		<div class="box">TEST</div>
<!--> <![endif]-->
	
	
		
		
	</div>
	

</div>

#conteneurCentral
{
position:absolute;
width:100%;
}

#conteneurCentral .contenu
{
margin-top:10px;
margin-left:230px;
margin-right:210px;
}

#conteneurCentral .box
{
float:left;
border:1px solid #BABABA;
width:48%;
/*POUR IE*/
_float:none;
}

Seul ptit pb je n'arrive pas à coller 2 span, voilà ce que j'ai :



J'ai bien essayé de mettre des marges négatives et tout et tout mais rien ne veut me coller les spans ! Est-ce que c'est possible ?
Merci pour vos réponses
Modifié par EggY (30 May 2006 - 10:52)

Ca fait plus de 1 jour et demi que je suis sur ce blème et je commence à plus rien comprendre la j'ai enlevé mes commentaires conditionnels et j'ai remis que des spans pour tout les navigateurs et maintenant FF veut bien m'interpreter le width:48% qui ne voulait pas passer avant, alors je sais pas ce qu'il s'est passé mais bon c'est cool

Sinon j'ai toujours mon problème pour les coller les span dans IE, une idée ?
Modifié par EggY (30 May 2006 - 11:31)

EggY a écrit :
J'ai bien envie de "ressombrer" vers les tableaux pour faire mes boites dans mon contenu central, c'est pas entièrement vide sémantiquement.
Qu'en pensez vous ?

Disons que ça ne correspond pas à l'usage logique d'un tableau, qui sert à faire des liens verticaux et horizontaux entre les données/informations.

Mais UN SEUL tableau de mise en page, pour faire rentrer les trois colonnes sans se prendre la tête, c'est une solution intéressante quand on ne maîtrise pas les divers aspects du positionnement CSS.

Par exemple, le site Framasoft a une structure de ce type (ils auraient pu simplifier, pour ne garder qu'un seul tableau sur la zone des trois colonnes, mais bon…). Pour voir ça, faire le test avec la barre d'outils Webdevelopper (extention pour firefox http://joliclic.free.fr/mozilla/webdeveloper/ici) permet de visualiser ça en faisant Entourer > Entourer les cellules de tableaux.

Si ce genre de solutions intermédiaires (et néanmoins plutôt accessibles, bien que pas optimales) peut te permettre d'utiliser les CSS sereinement, en attendant de mieux maîtriser divers aspects pas évidents, c'est plutôt une bonne chose.