[résolu par e-kiwi] Avis aux "pas-cons" du CSS

TOMHTML · 19 Juillet 2006

Note : les "pas-cons" sont les gens qui trouvent toujours une idée à laquelle personne n'avait pensé, du coup on dit "c'est pas con"

Bref, un petit problème tout simple, mais je me casse là tête dessus depuis ce matin 8h :

Je cherche à afficher trois boîtes/colonnes les unes à côté des autres pour que ça fasse :

BLEU BLANC ROUGE

tout simple me direz-vous,
oui mais voila, il faut que le code HTML soit de la sorte :

<div>BLANC</div>
<div>BLEU</div>
<div>ROUGE</div>

ça se complique tout de suite, n'est ce pas ?

et le pire, c'est de mettre le tout dans un gros bloc div, là ça devient carrément infaisable.

Bref, j'ai beau tout essayé, rien n'y fait, ça veut pas faire bleu-blanc-rouge ça fait plutôt ça :

:evil: :evil: :evil: :evil: :evil: :evil: :evil: :evil: :evil: :evil: :evil:

voici un petit code HTML tout fait, vous pouvez le reprendre pour tester :

Code:

<html>
<head>
<title>Bleu-blanc-rouge</title>
<style type="text/css">
	#blanc {
		background-color:#FFFFFF; /*blanc*/
		width:390px; /*valeur test : 750 - 2*180 */
	}
	#bleu {
		background-color:#0000FF; /*bleu*/
		float:left;
		width: 180px;
	}
	#rouge {
		background-color:#FF0000; /*rouge*/
		float:right;
		width: 180px;
	}
	body {
		background-color:#FFFFCC; /*jaune*/
		text-align:center; /*pour centrer le gros bloc, à cause d'IE*/
	}
	#grosbloc {
		background-color:#FFCCFF; /*rose */
		border:2px solid #000000;
		width:750px;
		margin:0px auto; /*pour centrer le gros bloc, à cause d'IE*/
		text-align:left;
	}
</style>
</head>
<!-- A PARTIR DE LA ON NE TOUCHE PLUS A RIEN :-D -->
<body>
	<div id="grosbloc">
		<div id="blanc">
			BLANC<br /> Ceci est le contenu de la page.
		</div>
		<div id="bleu">
			BLEU<br /> Menu à gauche.
		</div>
		<div id="rouge">
			ROUGE<br /> Menu à droite.
		</div>
	</div>
</body>
</html>

NOTE 1 : je n'ai que faire du HTML, tant que les div sont dans le même ordre que dans le code ci-dessous. Vous pouvez mettre des largeurs en pixels, en pourcentage ou en bananes tant que ça marche c'est le principal. Enfin si vous pouviez garder les largeurs du bleu et du rouge en pixels ce serait sympa quand même

NOTE 2 : toutes les propositions sont bonnes à prendre, si vous avez une idée n'hésitez pas à la poster ! N'hésitez pas non plus à me poser des questions je suis là pour répondre

UN TRES GRAND MERCI D'AVANCE !!!

PS : celui qui me trouve la réponse exacte (ou presque) à ce problème gagnera un lien sur la home page de mon site (WWW) ou sur toutes les pages de mon site, en fonction de la réponse apportée ^^

Bonne chance amis designers !
(édition : le PS a été modifié, ça fait moins hypothétique )

e-kiwi · 19 Juillet 2006

en gros dans le source tu veux le contenu avant le menu. tu veux le site centré de resolution fixe ou le menu peut etre collé à gauche ?

Sir Dipp · 19 Juillet 2006

Salut,

Ajoute un float:left; à chaque bloc ;-)

Attention : la taille des trois blocs ensemble doit faire la largeur du plus grand bloc !

A+

HawkEye · 19 Juillet 2006

S'il met un float:left; à chaque, il va avoir [BLANC][BLEU][ROUGE]...

Est-ce que float:left; sur "bleu" et float:right; sur "rouge" ne peut pas aider ?

Jeff.hiks · 19 Juillet 2006

Je ferais ce que propose Sir Dipp.
Peut-être que je me trompe, mais suite à des expériences perso, il m'a semblé qu'il faut aussi préciser la hauteur des div à l'intérieur du conteneur pour que ça marche ? :roll:

e-kiwi · 19 Juillet 2006

non, ca ne marchera pas, relisez bien l'énoncé !

en float, il lui faudrait comme ordre : bleu-rouge-blanc

TOMHTML · 19 Juillet 2006

e-kiwi a dit:
en gros dans le source tu veux le contenu avant le menu. tu veux le site centré de resolution fixe ou le menu peut etre collé à gauche ?

le "grosbloc" doit être centré quelque soit la résolution de la page

en gros ça doit faire un truc qui ressemble à ça

(c'est un montage fait à l'arrache) // édition : le "haut gros bloc" et le "bas du gros bloc" n'étaient là que pour les tests. En effet je ne sais pas trop pourquoi mais quand on met des div flotants dans un div qui encadre, et bien le fond de ce gros bloc n'apparait pas...
//édition 2 : en fait la hauteur des cadres peut être différente, sachant qu'en général le contenu du bloc blanc sera plus grand (en hauteur) que les menus à coté. Mais bon là on s'en fout un peu, on va bien voir déjà comme ça comment ça marche, après je me débrouillerai ^^

Attention : la taille des trois blocs ensemble doit faire la largeur du plus grand bloc !

c'est pas ce que j'ai fait ?

e-kiwi · 19 Juillet 2006

par contre :
<div id=gauche>
<div id=blanc>
<div id=bleu>
</div>

<div id=rouge></div>

ca te va ?
en mettant le gauche en display:inline du droite et le bleu en float:left

TOMHTML · 19 Juillet 2006

autre truc : un ami, Yoann pour ne pas le citer, m'a trouvé une solution, c'est d'utiliser des positions absolues.
C'est pas bête et ça marche, mais le problème c'est que la position ne varie pas en fonction de la résoltion. C'est à dire que le "gros bloc" sera centré, mais ce qu'il y a dedans pas forcément

TOMHTML · 19 Juillet 2006

e-kiwi a dit:
par contre :
<div id=gauche>
<div id=blanc>
<div id=bleu>
</div>

<div id=rouge></div>

ca te va ?
en mettant le gauche en display:inline du droite et le bleu en float:left

je dois admettre que j'ai pas tout compris
mais en effet tu peux modifier le code HTML tant que le CONTENU DU BLOC BLANC vient avant les autres contenus dans le code HTML. En gros comme le verra le moteur quoi, et aussi les portables...

e-kiwi · 19 Juillet 2006

je peux inverser bleu et rouge ? (code : blanc-rouge-bleu)

Sir Dipp · 19 Juillet 2006

Je crois que j'ai compris, pour en fait pour a voir le contenu en haut si on prend pas en compte les CSS.

Dans ce cas, on ami à trouvé la solution avec des positions, mais c'est pas propre si j'ose dire.

Essai de voir sur alsacreations.com s'ils ont une autre solution ?

A+

Albert1 · 19 Juillet 2006

Re: Avis aux "pas-cons" du CSS

TOMHTML a dit:
Bref, j'ai beau tout essayé, rien n'y fait, ça veut pas faire bleu-blanc-rouge ça fait plutôt ça :

tu mets ton bleu et ton rouge en absolute et tu attribue des margin-right et left suffisant au blanc pour qu'il ne "gerbe" pas sur les menus ...
et basta ...

c'est un lay0ut 3 c0l0nnes tout ce qu'il y a de traditionnel.
va voir sur Openweb le cas y est traité à plusieurs reprises :wink:

TOMHTML · 19 Juillet 2006

e-kiwi a dit:
je peux inverser bleu et rouge ? (code : blanc-rouge-bleu)

sans problème, même si je sais pas comment tu vas t'en sortir ^^

Essai de voir sur alsacreations.com s'ils ont une autre solution ?

Quitte à faire gagner un/des lien(s), autant le faire avec des gens que je fréquente ^^

je vais devoir m'en aller jusqu'à ce soir, je ramasserai les copies en rentrant :lol: :lol: :lol: :lol:

e-kiwi · 19 Juillet 2006

trop facile...

parfait sous firefox, décalage de 2 px sous ie...

<html>
<head>
<title>Bleu-blanc-rouge</title>
<style type="text/css">
#blanc {background-color:#FFFFFF;float:left;width:390px;}
#bleu {background-color:#0000FF;width: 180px;-width: 177px;}
#rouge {background-color:#FF0000;float:right;width: 180px;}
body {background-color:#FFFFCC;text-align:center;}
*{margin:0px;padding:0px}
#gauche{float:right;width:570px;}
#site{margin:auto; width:750px}
</style>
</head>

<body>
<div id=site>
<div id="gauche">
<div id="blanc">BLANC<br /> Ceci est le contenu de la page.<br/><br/><br/><br/><br/></div>
<div id="rouge">ROUGE<br /> Menu à droite.</div>
</div>
<div id="bleu">BLEU<br /> Menu à gauche.</div>
</div>
</body>
</html>

TOMHTML · 19 Juillet 2006

Re: Avis aux "pas-cons" du CSS

Albert1 a dit:
c'est un lay0ut 3 c0l0nnes tout ce qu'il y a de traditionnel.
va voir sur Openweb le cas y est traité à plusieurs reprises :wink:

justement j'ai déjà regardé là dessus,
en effet en absolute ça pourrait marcher, mais le problème et ce "gros bloc" qui permet de centrer le tout. Ce bloc sera toujours centré quelque soit la résolution, pas les valeurs absolues... :roll:

TOMHTML · 19 Juillet 2006

e-kiwi a dit:
j'ai sous firefox ^^

toutes mes félicitations

Chapeau bas, MONSIEUR

Dans tous les cas t'as déjà gagné un lien ^^
Maintenant voyons si le lien sera sur toutes les pages ou pas :
reste à comprendre pourquoi ça fait bizare sous IE :S

e-kiwi · 19 Juillet 2006

albert1> essaye le avec ta méthode et reviens nous voir (rappel : un site à largeur fixe et centré) ...

e-kiwi · 19 Juillet 2006

TOMHTML> j'ai édité mon post, tu as la solution pour les deux, j'ai mis un decalage de 2 pixels sous ie, mais ca se voit pas si le fond est le meme sur les deux

Albert1 · 19 Juillet 2006

Re: Avis aux "pas-cons" du CSS

TOMHTML a dit:
en effet en absolute ça pourrait marcher, mais le problème et ce "gros bloc" qui permet de centrer le tout. Ce bloc sera toujours centré quelque soit la résolution, pas les valeurs absolues... :roll:

t'as pas bien cherché sur Openweb :
j'ai une page portail (imitation tableaux) avec 3 colonnes qui fonctionne sous le principe énoncé sur Openweb et que je décrivais succintement ici ...
avec bien sûr contenu centré quelque soit la résolution
et totale liberté de placement des divs (ordre dans le code html)

Jeff.hiks · 19 Juillet 2006

Code:

<html>
<head>
<title>Bleu-blanc-rouge</title>
<style type="text/css">
/* Remise a zero des marges... */
* {
	margin:0;
	padding:0;}
	
	
   #blanc {
      background-color:#FFFFFF; /*blanc*/
      width:390px; /*valeur test : 750 - 2*180 */
      float:right;
   }
   #rouge {
      background-color:#FF0000; /*rouge*/
      float:right;
      width: 180px;
   }
   #bleu {
      background-color:#0000FF; /*bleu*/
      float:left;
      width: 180px;
   }
   body {
      background-color:#FFFFCC; /*jaune*/
      text-align:center; /*pour centrer le gros bloc, à cause d'IE*/
   }
   #grosbloc {
      background-color:#FFCCFF; /*rose */
      border:2px solid #000000;
      width:750px !important;
      width:754px /* donnée pour IE */;
      margin:0px auto; /*pour centrer le gros bloc, à cause d'IE*/
      text-align:left;
   }
</style>
</head>
<!-- A PARTIR DE LA ON NE TOUCHE PLUS A RIEN :-D -->
<body>
   <div id="grosbloc">
     <div id="rouge">
         ROUGE<br /> Menu à gauche.
      </div>
            <div id="blanc">
         BLANC<br /> Ceci est le contenu de la page.
      </div>
      <div id="bleu">
         BLEU<br /> Menu à droite.
      </div>
   </div>
</body>
</html>

J'aurais aussi une solution, elle a l'air de fonctionner dans les deux (Firefox et IE) mais il faut fournir une dimension erronée rien que pour IE...
Mais j'ai dû faire des changements dans l'ordre de div.

e-kiwi · 19 Juillet 2006

elle vous plait pas ma soluce ? j'ai rien inversé et ca marche partout

nicolas.pied · 19 Juillet 2006

Je pense que "inline" devrait fonctionner pour réaliser ceci.

Exemple :

<div style="background-color: blue; display: inline;">bleu</div>
<div style="background-color: white; display: inline;">blanc</div>
<div style="background-color: red; display: inline;">rouge</div>

Sinon, pour faire plus simple, utilises un tableau.

TOMHTML · 19 Juillet 2006

Re: Avis aux "pas-cons" du CSS

Albert1 a dit:
t'as pas bien cherché sur Openweb :
j'ai une page portail (imitation tableaux) avec 3 colonnes qui fonctionne sous le principe énoncé sur Openweb et que je décrivais succintement ici ...
avec bien sûr contenu centré quelque soit la résolution
et totale liberté de placement des divs (ordre dans le code html)

Je crois que je me suis tapé quasiment tapé tous les topics d'Openweb, d'Alsacreations et d'aures sites qui parlaient de div, float, colonnes... et j'ai aussi testé les exemples qui étaient indiqués ! (les 3Mo de fichiers 'testXXX.html' que je viens de supprimer le prouvent).
Donc si tu pouvais me faire voire LE topic où y'a la même chose, je suis preneur

Jeff.hiks >> Malheureusement tu as fais, comme tu l'indique, un changement dans les div, ce qui n'est pas bon.

Donc, c'est avec un temps record qu'e-kiwi se retrouve sur la plus haute marche du podium de la premiere édition des "TOMHTML challenges". Félicitations !
Faudra que tu me contacte pour le lien.

PS : et la médaille de l'humour est remise à Nicolas pour cette phrase "Sinon, pour faire plus simple, utilises un tableau."

Albert1 · 19 Juillet 2006

Re: Avis aux "pas-cons" du CSS

TOMHTML a dit:
Je crois que je me suis tapé quasiment tapé tous les topics d'Openweb, d'Alsacreations et d'aures sites qui parlaient de div, float, colonnes... [...] Donc si tu pouvais me faire voire LE topic où y'a la même chose, je suis preneur

à ma connaissance, y a pas de topics sur Openweb, c'est pas un forum, juste des (très bons) tutoriaux, c'est mon "site de chevet" depuis plus de 2 ans maintenant, et j'y trouve toute mes réponses parce que j'ai pris soin d'en prendre connaissance ... j'ai jamais quémandé une soluce instantanée sur un forum, au lieu de çà, je me suis instruit.

TOMHTML a dit:
Donc, c'est avec un temps record qu'e-kiwi se retrouve sur la plus haute marche du podium de la premiere édition des "TOMHTML challenges". Félicitations !

Que le meilleur gagne :wink:

TOMHTML · 19 Juillet 2006

oui topic, et dans le cas d'Openweb des rubriques plus précisément. Et comme toi je m'instruis, mais quand ça coince ça coince :S

nicolas.pied · 19 Juillet 2006

En tout cas ma méthode fonctionne très bien (les "inline"), je l'ai testé et j'obtiens bien un drapeau comme tu le souhaites.

HawkEye · 20 Juillet 2006

nicolas.pied a dit:
En tout cas ma méthode fonctionne très bien (les "inline"), je l'ai testé et j'obtiens bien un drapeau comme tu le souhaites.

Oui mais, lis bien:

Code:

<!-- A PARTIR DE LA ON NE TOUCHE PLUS A RIEN :-D -->
<body>
   <div id="grosbloc">
     <div id="rouge">ROUGE</div>
     <div id="blanc">BLANC</div>
     <div id="bleu">BLEU</div>
   </div>
</body>

...les div ne sont pas dans l'ordre, et on ne peut pas modifier le code html

nicolas.pied · 20 Juillet 2006

Ben moi j'ai trouvé !

En fait, le CSS est interprété dans le sens de la lecture, d'où les surcharges possibles de feuilles CSS.

Ainsi, il suffit d'appliquer les styles dans l'ordre que l'on souhaite affiché les différentes couleurs du drapeau.

On a donc pour le code HTML suivant :

Code:

<div id="grosbloc">
  <div id="rouge">ROUGE</div>
  <div id="blanc">BLANC</div>
  <div id="bleu">BLEU</div>
</div>

La feuille de style suivante :

Code:

div#grosbloc {}
div#rouge {
	background-color: red;
	float: right;
}
div#blanc {
	background-color: yellow;
	float: right;
}
div#bleu {
	background-color: blue;
	float: right;
}

Ce qui optimisé pour un drapeau donne le résultat suivant :

Code:

<html>
<head>
<style type="text/css">
div#grosbloc {
	width: 300px;
}
div#rouge {
	background-color: red;
	float: right;
	width: 100px;
}
div#blanc {
	background-color: yellow;
	float: right;
	width: 100px;
}
div#bleu {
	background-color: blue;
	float: right;
	width: 100px;
}
</style>
</head>
<body>
   <div id="grosbloc">
     <div id="rouge">ROUGE</div>
     <div id="blanc">BLANC</div>
     <div id="bleu">BLEU</div>
   </div>
</body> 
</html>

Je me suis permis de remplacer le blanc par du jaune... c'est pas que c'est plus joli mais c'est plus voyant pour les tests

A+

PS : tester sous Firefox et IE

Sir Dipp · 20 Juillet 2006

Dans l'énnoncé TOMHTML ne souhaite pas quand change l'ordre des DIV et il a bien raison puisque ça permet d'avoir le contenu en tête au cas ou le naviguateur ne comprend pas le CSS.

A+

e-kiwi · 20 Juillet 2006

certains ne savent pas lire les énoncés

nicolas.pied · 20 Juillet 2006

Sir Dipp a dit:
Dans l'énnoncé TOMHTML ne souhaite pas quand change l'ordre des DIV et il a bien raison puisque ça permet d'avoir le contenu en tête au cas ou le naviguateur ne comprend pas le CSS.

En regardant bien le code HTML, les balises DIV sont dans le même ordre que données dans l'énoncé. Lorsque que j'ai dit avoir fait des modifications, c'était sur les couleurs (et celles ci ont été faites à partir de la feuille de style).

En gros il souhaitait un drapeau bleu blanc rouge et je lui affiche un drapeau bleu jaune rouge. Le jaune ayant été choisi afin de bien visualiser la taille de la div ainsi que son positionnement par rapport aux 2 autres.

TOMHTML · 20 Juillet 2006

nicolas.pied a dit:
Sir Dipp a dit:

Dans l'énnoncé TOMHTML ne souhaite pas quand change l'ordre des DIV et il a bien raison puisque ça permet d'avoir le contenu en tête au cas ou le naviguateur ne comprend pas le CSS.

Cliquez pour agrandir...

En regardant bien le code HTML, les balises DIV sont dans le même ordre que données dans l'énoncé.

Pas du tout

Sir Dipp a raison : je voulais afficher bleu-blanc-rouge, tout en faisant en sorte que DANS LE CODE HTML (c'est à dire ce qui se trouve entre les balises <body>), ce soit d'abord blanc et son contenu, puis ensuite seulement après le bleu et le rouge

Là le code que tu dis "pareil que le mien" est rouge-blanc-bleu. Le blanc n'est pas au début !

e-kiwi · 20 Juillet 2006

nicolas.pied> relis encore une fois l'énoncé mieux que ça ^^ tu affiche ROUGE en premier dans LE CODE

nicolas.pied · 20 Juillet 2006

Autant pour moi, dsl !

En fait, HawkEye m'a fournit les couleurs dans un autre sens. Je viens donc d'essayer dans le bon sens à savoir blanc, bleu et rouge avec tout un tas de propriétés (position, display, float, etc.) Certaines de ces propriétés ont donné un rendu souhaité mais pas très propre, de plus IE l'interprète différemment :

Code:

div#grosbloc {
   width: 300px;
   display: table-row;
}
div#blanc {
   background-color: yellow;
   width: 100px;
   display: table-cell;
   float: right;
}
div#bleu {
   background-color: blue;
   width: 100px;
   display: table-cell;
   float: left;
}
div#rouge {
   background-color: red;
   width: 100px;
   display: table-cell;
   float: none;
}

Enfin, là je vois pas comment le CSS peut résoudre ton problème. En a-t-il les possibilités (mis à part position: absolute)...je commence à en douter. :? Pourquoi n'utilises-tu pas du Javascript ?

thierry8 · 20 Juillet 2006

Toujours pas résolu le problème ?

Est-ce qu'il faut encore se pencher dessus ?

thierry8 · 20 Juillet 2006

Bon je n'ai pas tout lu, voila donc pour moi

:

Code:

<html>
<head>
<title>Bleu-blanc-rouge</title>
<style type="text/css">
   body {
      background-color:#FFFFCC; /*jaune*/
      text-align: center;
   }

   #grosbloc {
      position: relative;
      background-color: #FFCCFF; /*rose */
      border: 2px solid #000000;
      width: 750px;
      margin: auto;
      text-align: left;
   }

   #blanc {
      position: absolute;
      left: 180px;
      top: 0;
      background-color:#FFFFFF; /*blanc*/
      width: 390px; /*valeur test : 750 - 2*180 */
   }
   #bleu {
      background-color:#0000FF; /*bleu*/
      width: 180px;
   }
   #rouge {
      position: absolute;
      right: 0;
      top: 0;
      background-color:#FF0000; /*rouge*/
      width: 180px;
   }

</style>
</head>
<!-- A PARTIR DE LA ON NE TOUCHE PLUS A RIEN :-D -->
<body>
   <div id="grosbloc">
      <div id="blanc">
         BLANC<br /> Ceci est le contenu de la page.
      </div>
      <div id="bleu">
         BLEU<br /> Menu à gauche.
      </div>
      <div id="rouge">
         ROUGE<br /> Menu à droite.
      </div>
   </div>
</body>
</html>

Je n'ai changer aucun ordre des éléments..
uniquement travaillé sur les propriétés css.

e-kiwi · 20 Juillet 2006

tomhtml, met [résolu] qu'ils arretent de se creuser la tête

thierry8 · 20 Juillet 2006

arf ! quelqu'un avait déjà trouvé ?

bon ben si jamais c'est le cas, il aura une solution alternative

edit: c est quoi la solution qui avait été trouvé ?

TOMHTML · 20 Juillet 2006

merci aux participants, mais en effet e-kiwi a trouvé une bonne solution à la fin de la page 1.
d'ailleurs on peut remettre l'ordre des div en blanc -bleu -rouge, ça pose pas de problème en fait avec cette solution.
Voici le code :

Code:

<html>
<head>
<title>Bleu-blanc-rouge</title>
<style type="text/css">
#blanc{background-color:#FFFFFF;float:right;width:390px;}
#menugauche {background-color:#0000FF;width: 180px;-width: 177px;}
#menudroite {background-color:#FF0000;float:right;width: 180px;}
body {background-color:#FFFFCC;text-align:center;}
*{margin:0px;padding:0px}
#gauche{float:left;width:570px;}
#grosbloc{margin:auto; width:750px; background-color:#00CC33;}
#spacer{ clear:both;}
</style>
</head>

<body>
	<div id="grosbloc">
	<h1>Le drapeau français</h1>
		<div id="gauche">
			<div id="blanc">
			  <p>BLANC<br /> 
			Ceci est le contenu de la page.TTTTEXTE</p>
			  <p>&nbsp;</p>
			  <p>oui oui c long un contenu en g&eacute;n&eacute;ral ;)</p>
			  <p>&nbsp;</p>
			  <p>tr&egrave;s long  </p>
			</div>
			<div id="menugauche">BLEU<br /> Menu à gauche.</div>
		</div>
		<div id="menudroite">ROUGE<br /> Menu à droite. <br> Super super super<br> long</div>
		<div id="spacer"></div>
	</div>
</body>
</html>

PS : désolé j'ai modifié les noms des ID entre temps

l'avantage avec ça c'est que ce sera facile de géré les marges.

Nicolas a dit:
Pourquoi n'utilises-tu pas du Javascript ?

C'est pas parce qu'on a pas JavaScript qu'on a pas CSS ;-)
Regarde les téléphones portables : d'après mes constatations le JavaScript ne passe pas par contre le CSS peut, quelques fois, être compris

Merci pour ta solution Thierry, qui a l'air de bien fonctionné. Mais faut m'expliquer un truc là : comment tu fais pour utiliser des "position:absolute" sans que le repère de la base soit le haut de la fenêtre mais bien le div "gros bloc" ?

thierry8 · 20 Juillet 2006

Mais avec le code que tu affiche il y a un bogue..:

- un petit décalage sous IE de quelques pixels après le "bleu"
est-ce que c'est voulu ?

( vi je suis perfectionniste :? )

Oui ma solution fonctionne aussi bien sous IE que FF

Je suis arrivé un peu tard, mais mon temps de réflexion était court ( ~ 15 minutes)

bref..j'ai pas bien saisie ta question, mais d'après ce que j'ai "compris", je te dirais de regarder du coté de :

Code:

   #grosbloc {
      position: relative;
      background-color: #FFCCFF; /*rose */
      border: 2px solid #000000;
      width: 750px;
      margin: auto;
      text-align: left;
   }

position: relative;

Est-ce que cela répond à ta question ?

e-kiwi · 20 Juillet 2006

thierry8> colle ici ta solution qui marche en absolute (code complet)

thierry8 · 20 Juillet 2006

e-kiwi a dit:
thierry8> colle ici ta solution qui marche en absolute (code complet)

hein ??

ben elle y est au dessus..

thierry8 · 20 Juillet 2006

alors ? :|

TOMHTML · 20 Juillet 2006

thierry8 a dit:
Mais avec le code que tu affiche il y a un bogue..:

- un petit décalage sous IE de quelques pixels après le "bleu"
est-ce que c'est voulu ?

( vi je suis perfectionniste :? )

Oui c'est voulu j'étais déjà en train de me faire des petites marges

~~~~~~~~
Donc en fait le fait de mettre des boites en position absolue dans une grosse boite en position relative, ça fait que les boîtes à l'intérieur sont absolues par rapport à la grosse boite et pas à la page.
Je vois que ça marche mais je comprends pas pourquoi :?

thierry8 · 20 Juillet 2006

Ben si, tu as compris

ps: le bogue que je décrivait n'est présent que sous IE et non pas sur FF.
il s'agit donc, bien d'un bogue...

e-kiwi · 21 Juillet 2006

pas mieux

thierry8 · 21 Juillet 2006

e-kiwi a dit:
pas mieux

de quoi pas mieux ?

e-kiwi · 21 Juillet 2006

ben j'ai pas de solution meilleure

thierry8 · 21 Juillet 2006

arf ok.

ben la solution avec les absolute fonctionne, maintenant je ne me suis pas penché sur ce que tu as fait avec les float, mais il doit y avoir une solution..

je regarde vite un peu, mais je ne méternise pas dessus..
donc si pas de réponse c'est que j'ai pas trouvé dans les 5 minutes qui viennent. :?

thierry8 · 21 Juillet 2006

ok c'est bon:

Code:

<html>
<head>
<title>Bleu-blanc-rouge</title>
<style type="text/css">
body {background-color:#FFFFCC;text-align:center;}
#grosbloc{margin:auto; width:750px; background-color:#00CC33;}
*{margin:0px;padding:0px}
#gauche{float:left;width:570px;}
#blanc{background-color:#FFFFFF;float:right;width:390px;}
#menugauche {background-color:#0000FF;}
#menudroite {background-color:#FF0000;float:right;width: 180px;}
#spacer{ clear:both;}
</style>
</head>

<body>
   <div id="grosbloc">
   <h1>Le drapeau français</h1>
      <div id="gauche">
         <div id="blanc">
           <p>BLANC<br />
         Ceci est le contenu de la page.TTTTEXTE</p>
           <p>&nbsp;</p>
           <p>oui oui c long un contenu en g&eacute;n&eacute;ral ;)</p>
           <p>&nbsp;</p>
           <p>tr&egrave;s long  </p>
         </div>
         <div id="menugauche">BLEU<br /> Menu à gauche. Menu à gauche. Menu à gauche.</div>
      </div>
      <div id="menudroite">ROUGE<br /> Menu à droite. <br> Super super super<br> long</div>
      <div id="spacer"></div>
   </div>
</body>
</html>

bon j'ai pas regardé s'il y avait mieux à faire hein !...
mais dans tous les cas c'est fonctionnel.
Je vous laisse trouver l'erreur

Lord_Coder · 26 Juillet 2006

e-kiwi a dit:
en gros dans le source tu veux le contenu avant le menu. tu veux le site centré de resolution fixe ou le menu peut etre collé à gauche ?

C'est ça ce qui me plait dans un design , si le contenu est le premier dans la source HTML , le positionnement du site s'améliorera , on dira alors que le premier paragraphe <p> rencontré est privilégié par les robots ( par certains peut être ) .
Je pense qu'en manipulant bien l'attribut position , vous arriverez à placer vos blocs dans l'endroit désiré quelque soit sa position dans la source HTML ( uniquement si l'attribut est absolute , sinon la position dans la source joue bien un rôle important ) .
Mais il y'aura un petit probléme , c'est le scrolling qui va s'effectuer en fonction de l'element le plus bas dans la source HTML...

pierre_jean · 30 Mars 2007

TOMHTML,

Je remonte ton topic pour avoir un retour d'expérience depuis la mise en exergue de ton contenu dans ton code HTML. As tu vu ou remarqué des résultats concrets ? (classement, d'avantages de pages mise en avant, visiteurs ...)

Merci d'avance

++

TOMHTML · 30 Mars 2007

Salut
Je ne sais pas si c'est dû à l'activité de mon site ou si c'est le changement d'architecture, mais effectivement mes stats et mes positionnements ont progressé en flèche
et j'ai un Sitelinks comme je l'espérais =)

Oh et pour voir mon site depuis un téléphone portable c'est beaucoup plus pratique maintenant =)

pierre_jean · 30 Mars 2007

ah oui ? tu penses que ton linking serait lié a ce changement d'architecture ? et tes statistiques aussi ?

Code:

Oh et pour voir mon site depuis un téléphone portable c'est beaucoup plus pratique maintenant =)

moi qui fait pas mal de lynx c'est vrai que c'est plus confortable en ayant le contenu pertinent tout de suite (tester et approuver sur ton www) :wink:
Maintenant je me pose la question suivante : aurais-je la motivation de chambouler tout mon CSS ? :? c'est pour ça que je te demande pour tes résultats car au moins le référencement pourrait s'ajouter à l'argument précédent ce qui fait :

bc
1+1
2

:wink:

TOMHTML · 30 Mars 2007

avant la structure de la page, vue par le moteur, c'était : Grand titre, tous les liens du menu, le titre de la rubrique, puis le contenu
maintenant, les liens du menu sont à la fin, et je remarque donc que je suis mieux classé sur les recherches portants sur des mots du titre des rubriques, notamment

Là google affiche comme snippet le contenu de ma balise meta Description, si je n'en avais pas, je pense que ça donnerait un bel affichage également, pas un "Titre : accueil, contact, liens, ..."

pierre_jean · 30 Mars 2007

tu répond vite j'étais entrain d'éditer mon message précédent

[edit] tu as aussi un double affichage ! ... que tu avais avant ? Au bout de combien de temps as tu constaté ton linking ... etc ... ?

[edit2] tu as fait aussi volontairement cette "lourde modification" cet été ? ou tu n'avais pas de vacances :wink: ?

[edit3] cette technique ne peut-elle pas être considérée sur le court/moyen/long terme comme présenter un contenu différent selon la personne (l'internaute ou le robot) ? ou bien est-elle, au contraire, considérée comme présenter un contenu accessible (dans le prolongement du code XHTML/CSS) ? ... humm en même temps j'ai un peu la réponse sachant que ça fait 7 mois maintenant ... :roll: ?

[edit4]

Code:

maintenant, les liens du menu sont à la fin, et je remarque donc que je suis mieux classé sur les recherches portants sur des mots du titre des rubriques, notamment

humm ... remarque j'ai beaucoup de visites portant notamment sur des mots clés des entrées d'un de mes menus (autre que accueil, sortie, merci ... :wink: ) donc j'hésite ... remarque rien n'empêche de réhausser aussi ce menu avant le contenu (ou après) mais là je crains vraiement pour ma remarque du [Edit3] :?

Enfin bref tous avec tous mes [editX] je suis charmé par ton idée mais j'ai peur des hypothétiques retombées néfastes (notamment en ce qui concerne un de mes menus qui pourrait, une fois réhausser dans le code, s'apparenter à une mise en exergue de mots clés ... :? )

TOMHTML · 31 Mars 2007

pierre_jean a dit:
tu répond vite j'étais entrain d'éditer mon message précédent

[edit] tu as aussi un double affichage ! ... que tu avais avant ? Au bout de combien de temps as tu constaté ton linking ... etc ... ?

Avant ? j'avais la même balise méta description partout donc le même snippet partout.

[edit2] tu as fait aussi volontairement cette "lourde modification" cet été ? ou tu n'avais pas de vacances :wink: ?

Il était juste temps de rafraichir profondément le design

[edit3] cette technique ne peut-elle pas être considérée sur le court/moyen/long terme comme présenter un contenu différent selon la personne (l'internaute ou le robot) ? ou bien est-elle, au contraire, considérée comme présenter un contenu accessible (dans le prolongement du code XHTML/CSS) ? ... humm en même temps j'ai un peu la réponse sachant que ça fait 7 mois maintenant ... :roll: ?

Réponse 2 bien entendu
et je ne comprends pas pourquoi tu parle de "contenu différent" puisque c'est toujours le même texte, que ce soit robot ou internaute

Code:
[edit4]

Code:

maintenant, les liens du menu sont à la fin, et je remarque donc que je suis mieux classé sur les recherches portants sur des mots du titre des rubriques, notamment

humm ... remarque j'ai beaucoup de visites portant notamment sur des mots clés des entrées d'un de mes menus (autre que accueil, sortie, merci ... :wink: ) donc j'hésite ... remarque rien n'empêche de réhausser aussi ce menu avant le contenu (ou après) mais là je crains vraiement pour ma remarque du [Edit3] :?

Rien de particulier à craindre

Enfin bref tous avec tous mes [editX] je suis charmé par ton idée mais j'ai peur des hypothétiques retombées néfastes (notamment en ce qui concerne un de mes menus qui pourrait, une fois réhausser dans le code, s'apparenter à une mise en exergue de mots clés ... :? )

Tu peux essayer de laisser les liens les + importants en haut, le reste en bas

pierre_jean · 2 Avril 2007

merci d'avoir pris le temps de répondre

see you