[Résolu] Souci de positionnement

Question

scott54

6 Jul 2011 à 17:14

bonjour

j'ai un (petit ?) souci de positionnement

j'ai un menu à 9 items qui doivent être positionnés comme ceci :

voici mon code html (simplifié)


<div id="page">
	
    	        
    <ul> 		
	<li> <a href="#" ><img  id="1" /></a></li>
	<li> <a href="#" ><img  id="2" /></a></li>	 
        <li> <a href="#" ><img  id="3" /></a></li>
        <li> <a href="#" ><img  id="4" /></a></li>
	<li> <a href="#" ><img  id="5" /></a></li>	 
        <li> <a href="#" ><img  id="6" /></a></li>
        <li> <a href="#" ><img  id="7" /></a></li>
	<li> <a href="#" ><img  id="8" /></a></li>	 
        <li> <a href="#" ><img  id="9" /></a></li>

    </ul>
    
</div>

et le css qui va bien :



body {
margin:0;
padding:0;
background-color: rgb(0,0,0);
}

#page {
margin-left: auto; 
margin-right: auto;
width: 1024px;
}

img {
border:none;
display:block;
}

#1 {
float:left;
}

#2 {
float:left;
}

#5 {
float:left;
}

#6 {
float:left;
}

et j’obtiens ... (suspense) ...
ça :

si je colle un float:left à 7 c'est 8 qui va se coller à coté
si je colle un float:left à 8, 9va se mettre à la hauteur de 8 (avec un espace blanc au dessus)

bref ... help
Modifié par scott54 (06 Jul 2011 - 20:48)

scott54

6 Jul 2011 à 17:25

(le dessin est shématique : les éléments sont en fait collés les uns aux autres sans espacement)
Modifié par scott54 (06 Jul 2011 - 17:27)

fvsch

6 Jul 2011 à 18:58

Hello,

Le rendu visuel souhaité est trop arbitraire (largeurs variables, un ou deux éléments par «colonne») pour que ça soit gérable en appliquant les mêmes styles à une liste d'éléments. Il va falloir tricher. Le plus simple va sans doute être d'avoir un DIV englobant 3 et 4, et un autre englobant 7 et 8. Du coup il va sans doute falloir laisser tomber la structure ul>li.

Ou alors tu places tous les éléments en absolu, mais tu perds les possibilités d'extensibilité en hauteur.

scott54

6 Jul 2011 à 19:24

fvsch a écrit :
Hello,

Le rendu visuel souhaité est trop arbitraire (largeurs variables, un ou deux éléments par «colonne») pour que ça soit gérable en appliquant les mêmes styles à une liste d'éléments. Il va falloir tricher. Le plus simple va sans doute être d'avoir un DIV englobant 3 et 4, et un autre englobant 7 et 8. Du coup il va sans doute falloir laisser tomber la structure ul>li.

Ou alors tu places tous les éléments en absolu, mais tu perds les possibilités d'extensibilité en hauteur.

c'était comme ça au départ : que des liens avec un div englobant 7 et 8
j'ai voulu "simplifier" et donner plus de "sens" à la page
mais c'est un vrai casse tête avec cette structure pour placer un bloc à côté de deux autres superposés.
Cela dit, 7,8 et 9 étant des liens moins "importants" (dans le sens on ce sont les liens que l'on retrouve généralement en pied de page : contact,forum et mentions légales) je vais essayer avec deux listes

~~supprimé~~

6 Jul 2011 à 19:50

Bonsoir à toutes et à tous,

j'ai un peu triché pour obtenir l'effet escompté !

<html>
<head>
<title>test</title>

<style type="text/css">
body {
		background-color	: maroon;
}

#content {
		background-color	: grey;
		margin				: 25px;
		width				: 500px;
		height				: 400px;
}

/*------------------------*/
/*     Première ligne     */
/*------------------------*/

#content > div {
		float				: left;
		background-color	: red;
		width				: 200px;
		height				: 200px;
}

#content > div+div {
		float				: left;
		background-color	: green;
		width				: 100px;
		height				: 200px;
}

#content > div+div+div {
		float				: left;
		background-color	: blue;
		width				: 200px;
		height				: 100px;
}

#content > div+div+div+div {
		float				: left;
		background-color	: yellow;
		width				: 200px;
		height				: 100px;
}

/*------------------------*/
/*     Deuxième ligne     */
/*------------------------*/

#content > div+div+div+div+div {
		float				: left;
		background-color	: blue;
		width				: 100px;
		height				: 200px;
}

#content > div+div+div+div+div+div {
		float				: left;
		background-color	: yellow;
		width				: 100px;
		height				: 200px;
}

#content > #bloc {
		float				: left;
		background-color	: white;
		width				: 300px;
		height				: 200px;
}

#content > #bloc > div {
		float				: right;
		background-color	: pink;
		width				: 100px;
		height				: 200px;
}

#content > #bloc > div+div {
		float				: right;
		background-color	: red;
		width				: 200px;
		height				: 100px;
}

#content > #bloc > div+div+div {
		float				: right;
		background-color	: green;
		width				: 200px;
		height				: 100px;
}

.clear {
		clear				: both;
}

</style>
</head>


<body>
	<div id="content">
		<div>Boite Un</div>
		<div>Boite Deux</div>
		<div>Boite Trois</div>
		<div>Boite Quatre</div>
		<div>Boite Cinq</div>
		<div>Boite Six</div>
		<div id="bloc">
			<div>Boite Neuf</div>
			<div>Boite Sept</div>
			<div>Boite Huit</div>
		</div>
	<br class="clear" />
	</div>
</body>
</html>

@+
Modifié par Artemus24 (06 Jul 2011 - 20:02)

scott54

6 Jul 2011 à 20:13

merci.

Finalement j'ai contourné le problème en transformant mon gros menu en 3 menus plus petits :



<div id="page"> 
     
                 
    <ul>          
    <li> <a href="#" ><img  id="1" /></a></li> 
    <li> <a href="#" ><img  id="2" /></a></li>      
    <li> <a href="#" ><img  id="3" /></a></li> 
    <li> <a href="#" ><img  id="4" /></a></li> 
    <li> <a href="#" ><img  id="5" /></a></li>      
    <li> <a href="#" ><img  id="6" /></a></li> 
    </ul>
    <ul id="7et8">
    <li> <a href="#" ><img  id="7" /></a></li> 
    <li> <a href="#" ><img  id="8" /></a></li>      
    </ul>
    <ul>
    <li> <a href="#" ><img  id="9" /></a></li> 
    </ul> 
     
</div>

du coup je peux coller un float:left à #7et8

reste à savoir si une liste avec une seule ligne est pertinent ...

Sujet clos

CSS et mise en forme, CSS3

[Résolu] Souci de positionnement