Alignement de trois blocs!

Bonjour,

Les tutoriels du site m'ont extrêmement aidé quant à la réalisation de l'alignement de mes deux blocs concernant le centre de ma page!

Mais, par la suite j'ai voulu intégré un bloc supplémentaire, j'ai donc procédé de cette manière:

mon code XHTML:

<div id="centrebas">
				             <div id="basggauche">
                                             </div>
                                             <div id="basgauche">
                                             </div>
                                             <div id="basdroite">
                                             </div>
</div>

enfin mon code CSS:

#centrebas{
position: relative;
margin-left: auto;
margin-right: auto;
text-align: left;
width:780px;
}
#basggauche{
position:absolute;
left:0px;
height:235px;
width:35px;

}

#basgauche{

position: absolute;
left:0px;
height:235px;
width: 750px;

}

#basdroite{
margin-left: 175px;

}

Ne vous préoccupez surtout pas des largeurs ou des auteurs de mes blocs, tout ça est fait pour des raisons personnelles d'affichage.
L'erreur vient certainement sur les float ou margin.

De plus ce code marche parfaitement sur Mozilla Firefox, mais comme d'habitude sur IE, cela ne marche pas!!
Le bloc du milieu c'est à dire:

<div id="basgauche">
</div>

Il descend un peu plus bas, enfin un peu beaucoup, enfin assez pour que ça me gêne que les autres.

Merci d'avance pour toute éventuelle réponse.

Hello,

Attention, tu risques de t'y perdre entre div#basgauche et div#basggauche. Pas sûr que ce choix d'identifiants soit très judicieux...

Pour le placement de trois colonnes, pourquoi ne pas utiliser ce tutoriel? Le positionnement absolu peut parfois poser des problèmes (en cas d'agrandissement des caractères par exemple, ou de contenu plus important que prévu).

Mais si tu gardes le positionnement absolu, tu devrais préciser top: 0, je pense que ça peut aider IE6 à bien positionner les blocs.
Voir aussi:
http://web.covertprestige.info/test/12-positionnement-absolu-selon-conteneur.html

oui je sais bien mais c'est la syntaxe que j'ai utilisé!

J'ai déjà préalablement utilisé les tutoriels que tu m'as fournis.
Mais en fait, moi je veux utilisé la disposition des trois blocs en bas de ma pages web!
Je veux pas appliqué ce comportement sur toute ma page, c'est pour cela que je les ai intégré dans un div "centrebas"!

Y'a toujours un problème même en utilisant les tutoriaux!
Mais je vais retenté et encore retenté jusqu'à que j'y arrive!

Merci en tout cas pour ta réponse!

serpolet a écrit :
Je veux pas appliqué ce comportement sur toute ma page

Et ça t'empêche d'utiliser le même principe dans ton pied de page?
Si tu te contentes de faire du copier-coller de tutoriels, sans doute, mais du moment que tu as les bases en CSS tu devrais pouvoir adapter ça sans problème.

Bien sûr ça dépend du design à intégrer, pas sûr que la méthode présentée dans le tutoriel que j'indique soit la plus adaptée à ce que tu veux faire. Comme tu es le seul à connaitre le design à intégrer, c'est à toi de trancher.

Ce que tu ne comprends pas, c'est que les tutoriaux qui sont représentés ici sont pour établis pour des cas précis.
Il donne un exemple sur la façon d'aligner trois blocs.
Mais ces blocs sont collés à la marge par le code "float:right" et "float:left" et enfin on règle les mesures du bloc centre pour que tout coordonne bien.
Or, moi ma page est centré au milieu.
Je ne la veux pas collé sur les côtés!!
C'est pour cela que dans cas, il faut utilisé une autre méthode que celle-ci parcequ'en reprenant le code du bloc gauche, et en rajoutant margin-left: 100px, le bloc ne bougera pas a cause du "loat:left".

Donc voilà, si quelqu'un a une idée, vous êtes les bienvenues!!

a écrit :
et en rajoutant margin-left: 100px, le bloc ne bougera pas a cause du "loat:left".

Si tu fait sa sa va se decal de 100px meme s'il y a le float-left.

Essaye de creer une div global qui englobe les 3 sous block.
Ensuite tu centre comme tu la deja fait ta div global (margin:auto).

et tu place via les float des sous block. Donc si tu fait float:left le bloc sera a gauche de la div global et non a gauche de le page.

see you +°

Oui je me suis trompé tout à l'heure à propos du margin-left. Comme je suis en train de faire plein de trucs en même temps...enfin bref, c'est même pas ça mon problème!
Je sais pas, c'est trop bizarre, en reprenant ce que vous me dites, ca mef ait un premier bloc, en haut, un deuxièmen un peu baissé, un troisième encore plus.

Pourtant j'ai repris le tuto et je comprends le système...mais dans mon cas cela marche pas!!

serpolet a écrit :
Ce que tu ne comprends pas, c'est que les tutoriaux qui sont représentés ici sont pour établis pour des cas précis.

Hmm... je crois que l'incompréhension est de ton côté plutôt que du mien. Je peux t'assurer très bien comprendre à la fois le tutoriel que j'évoque (je l'ai rédigé) et sa portée potentielle (beaucoup moins limitée que tu ne l'imagines).

Ce tutoriel donne deux réponses techniques précises à la problématique suivante: comment juxtaposer trois blocs, ou dit autrement comment faire trois «colonnes» en utilisant le positionnement flottant. Rien ne dit que ces colonnes doivent représenter les conteneurs principaux du design. Par contre, les exemples données sont effectivement ceux d'un design avec trois colonnes de contenu, en largeur fluide sur toute la page. Mais rien n'interdit de garder la même technique (plutôt bien expliquée dans le tutoriel, je pense) et de l'appliquer dans un contexte différent!

Il est vrai que quand on débute on a tendance à chercher des choses toutes faites, ou bien on pense qu'un tutoriel n'est pas utilisable s'il ne correspond pas pile à ce que l'on souhaite faire (enfin, moi je n'ai jamais fonctionné ainsi pour l'apprentissage de HTML et CSS, mais disons que c'est un réflexe courant et compréhensible). Si à l'inverse on lit un tutoriel dans le but de comprendre les techniques utilisées, on devient capable de faire beaucoup plus de choses que de simplement réutiliser le code du tutoriel en ne changeant que des aspects cosmétiques.

À toi de voir comment tu veux lire les ressources pédagogiques proposées ici ou ailleurs: en comprenant ce qu'elles disent, ou en essayant juste de reproduire leurs effets.
(Bien sûr, aucun choix n'est meilleur dans l'absolu. Le recopiage est aisé mais limité, et l'apprentissage est long mais plus efficace.)

serpolet a écrit :
et en rajoutant margin-left: 100px, le bloc ne bougera pas a cause du "loat:left".

Non, tu te trompes.

Et si tu nous montrais un aperçu du rendu souhaité? Je pense que ça serait plus simple pour te conseiller. On verra alors si le positionnement flottant est utilisable (j'en suis certain), et s'il est opportun (ça reste à voir).

serpolet a écrit :
Pourtant j'ai repris le tuto et je comprends le système...

Eh bien je peux rayer certaines remarques de mon message précédent alors. (Et bravo pour l'effort.)

serpolet a écrit :
mais dans mon cas cela marche pas!!

Une petite page en ligne pour qu'on voie ça?

^^! Florent on dirait sincèrement que tu me prends pour un mongol!

Je ne fais jamais de copier-coller, je regarde seulement pour m'informer, voir comment on peut utiliser certaines choses.
J'ai l'impression que tu te sens offensé par rapport à la rédaction de ton tutorial!
T'inquiètes pas, il est très bien fait.
Mais c'est pas pour ça que tu dois jugé comme ça!
Je suis à mon troisième site web, j'en pour chaque fois apprendre plus, donc sérieux arrête avec tes remarques!
Ca, c'est au niveau personnel!^^

Bon, sinon voilà sous firefox ce que cela donne:



Et maintenant sous IE:



Voilà!

humm......

En vu de tes screen tu doit ajuster tes menu en fonction du background qui on les petites images qui vont avec l'ecriture du menu.

Je pense que c'est pas la bonne facon de faire. Tu devrai plutot definir ton menu comme une liste ( ul / li ) et adapter sa en css.

Renseigne toi sur ces points, sa sera beaucoup sur FF et IE

serpolet a écrit :
^^! Florent on dirait sincèrement que tu me prends pour un mongol!

Certainement pas, et je pense que mes réponses ci-dessus ont été plutôt mesurées. Par contre, il est vrai qu'en lisant tes messages il m'est venu les idées suivantes:
1. tu es débutant en intégration HTML/CSS (ce que tu confirmes);
2. certaines solutions techniques te sont inconnues ou ne t'apparaissent pas utilisables dans un contexte donné alors qu'elles le sont parfaitement;
3. tu as lu certaines ressources en diagonale.

La troisième était fausse et je m'en excuse. Mais passons (la suite par MP si tu souhaites des précisions).

Revenons au problème technique. Je suis un peu circonspect en voyant tes captures d'écran. La partie «centrebas», ce sont bien les petites décorations à gauche, les liens juste à droite, et la fleur stylisée tout à droite?
Si c'est bien le cas, alors tu t'es trompé côté intégration HTML/CSS en imaginant une solution avec trois blocs (qu'ils soient positionnés en absolu ou flottants). Enfin, disons que tu pourrais arriver à un résultat à peu près correct avec trois blocs (en utilisant l'une ou l'autre technique de positionnement), mais que ce n'est certainement pas la meilleure manière de procéder.

Voici ce que je te propose: une solution sur-mesure et nickel-chrome, mais sous la forme d'un petit défi. Je te donne le code HTML nécessaire, et tu t'occupes du CSS. On y va? Alors voilà le code HTML:

<ul id="centrebas">
	<li><a href="...">Où nous rencontrer?</a></li>
	<li><a href="...">Qui sommes-nous?</a></li>
	<li><a href="...">Avec qui traitons-nous?</a></li>
	<li><a href="...">Contact</a></li>
</ul>

Voilà, rien d'autre. Cela ne prend bien sûr pas en compte le «squelette» de la page, l'en-tête avec image et texte ou la liste des activités (peut-être est-ce un menu?). Pour être clair, c'est le code correspondant à ceci (centrage horizontal compris, s'il n'est pas pris en charge par un conteneur global contenant tout le site):


Quelques indices:
- pas besoin de toucher au code HTML, il se suffit à lui-même;
- parmi les propriétés CSS que l'on utilisera, il y a margin, padding, background-image, background-repeat, background-position... voilà pour l'essentiel;
- on n'utilisera pas les propriétés CSS float ou position.

Si ça t'intéresse je te laisse tenter ça. Je donnerai de toute façon la réponse si tu en as besoin, mais c'est moins intéressant pour toi si je te la donne directement.

PS: bien entendu ceci est un jeu pédagogique, qui n'a absolument rien de condescendant. Ça m'a juste semblé sympa de procéder ainsi.

Edit: Funk, interdit de donner la réponse trop tôt.
Modifié par Florent V. (30 Mar 2008 - 00:21)

a écrit :
Edit: Funk, interdit de donner la réponse trop tôt. cligne

Oups

Désolé de vous contrarié messieurs!!

Mais je connaissais déjà la petite astuce de funk...qui consiste à utiliser le CSS pour remplacer les puces par des images.

L'une des sources que j'avais déjà consulté:
http://openweb.eu.org/articles/puces_images/

Cependant cette méthode ne marche pas non plus car mes images sont trop grandes. Et je ne veux pas les réduire!!
Pour que l'image soit entièrement afficher il aurait fallu grandir la taille du texte...en tout cas cette méthode ne me convient pas.

Ensuite, je vais tenté ta méthode, florent, mais je ne vais pas vous cacher que vous m'agacez!Pour être très poli!

a écrit :

Désolé de vous contrarié messieurs!!
...
Ensuite, je vais tenté ta méthode, florent, mais je ne vais pas vous cacher que vous m'agacez!Pour être très poli!

Jusqu'au preuve du contraire, on est pas là pour "t'agacer" comme tu le dit, mais bien au contraire, on est ici pour t'aider (le but de ce forum!).

a écrit :
Cependant cette méthode ne marche pas non plus car mes images sont trop grandes. Et je ne veux pas les réduire!!
Pour que l'image soit entièrement afficher il aurait fallu grandir la taille du texte...en tout cas cette méthode ne me convient pas.

Ensuite, cette méthode n'est pas limité en taille, et c'est la façon la plus méthodique et éthique de l'aborder.

Je pense que ton cas tu cherche une solution toutes faite, et tu ne la trouvera pas. On est ici pour t'aider a progresser et te faire comprendre le pourquoi du comment. Les tutorials sont ici pour te faire comprendre certain principe du xhtml/css, à toi de l'adapter dans ton cas en réfléchissant une minimun

sur ceux bonne continuation ++

Mais c'est bon je rigole!
Pas besoin de le prendre comme ça!!

Et franchement arrêtez avec vos solutions toutes faites!!vous voyez pas que je m'en fou!
Je te l'ai déjà dit!
Qu'est ce que ça m'apporterait puisque j'ai envi de continuer à en créer.
Je préfère qu'au prochain je me retrouve à en faire un avec plus de facilités que chercher encore quelque chose que j'avais déjà cherché.

De plus, j'avais continué à travaillé, et j'y suis presque arrivé, il y'a juste une petite marge pour les liens qui m'embête j'aimerai bien juste placer sur le bord du conteneur! Vais certainement la trouver!

serpolet a écrit :

De plus, j'avais continué à travaillé, et j'y suis presque arrivé, il y'a juste une petite marge pour les liens qui m'embête j'aimerai bien juste placer sur le bord du conteneur! Vais certainement la trouver!

Bonjour,

Le plus simple serait de mettre une page en ligne, pour que ceux qui souhaitent t'aider et te conseiller aient la totalité des codes html et css à disposition
Pratiquer pas petits bouts de ci delà ne permet pas d'avoir la structure complète utilisée dans la page et les réponses apportées ne colleront pas toujours.

re!

Déja, je suis arrivé à avoir un même affichage sur les deux navigateurs!
De plus, j'ai réussi à mettre dans un conteneur deux autres blocs correctement.
Le seul hic,c'est que le conteneur n'est pas centré.
je vais continué à essayé!il doit y avoir une petite erreur que j'arrive pas à voir!

<div id="bas">
				             
				       
                             
							 
							 <div id="basgauche">
	                                   <ul id="buttonmenu" >
						                      <ol>

	                                                <li id="li1"><a href="lieu.html">Où nous rencontrer?</a></li>
					                                <li>&nbsp;</li>
					                                <li id="li1"><a href="...">Qui sommes-nous?</a></li>
					                                <li>&nbsp;</li>
                                                    <li id="li1"><a href="...">Avec qui traitons-nous?</a></li>
					                                <li>&nbsp;</li>
                                                    <li id="li1"><a href="...">Contact</a></li> 
											  </ol>  												  
                                       </ul>
						     </div>
							 
                             <div id="basdroite">
							 
			                           <p><img align="center" src="images/fleur2.png" alt=""/></p>	
									   
							 </div>
		         </div>

div {
text-align:center;
margin-left: auto;
margin-right: auto;
}

bas{
width:780px;
height:235;
}

#basgauche{
float:left;
height:235;
width:200px;
}

#buttonmenu{

margin: 0;
padding: 0;
width: 150px;
}

#buttonmenu #li1 {
font-family:Helvetica;
font-size: 100%;

list-style-type: none;
background-image: url(images/bouton.png);
background-repeat: no-repeat;
background-position: 0% 65%;
padding-left: 40px;
text-decoration:none;
}

#buttonmenu #li1 a{
color: white;
}

#buttonmenu #li1 a:hover, .buttonmenu li a:active{
color: #e7552b;
}

#basdroite{
float:left;
width:605;
height:235;
}

Voilà pour le code, je vous informerai lorsque je l'aurai trouvé!

 <div id="bas">
	      <div id="basgauche">
	                             <ul id="buttonmenu" >
						      <ol>

	                                                     <li id="li1"><a href="lieu.html">Où nous rencontrer?</a></li>
					                     <li>&nbsp;</li>
					                     <li id="li1"><a href="...">Qui sommes-nous?</a></li>
					                     <li>&nbsp;</li>
                                                             <li id="li1"><a href="...">Avec qui traitons-nous?</a></li>
					                     <li>&nbsp;</li>
                                                             <li id="li1"><a href="...">Contact</a></li> 
		                                      </ol>  												  
                                     </ul>
	          </div>
							 
                  <div id="basdroite">
							 
			      <p><img align="center" src="images/fleur2.png" alt=""/></p>	

                  </div>

</div>

Un meilleur affichage

serpolet a écrit :
Et franchement arrêtez avec vos solutions toutes faites!!vous voyez pas que je m'en fou!

Ah ben ça fait plaisir...
Bon, alors voilà la solution à ma petite énigme qui n'a pas l'air de t'enchanter:
http://web.covertprestige.info/divers/spl/

Je te laisse décortiquer ça. Merci de ne pas compter sur moi pour les explications: en temps normal, je le ferais avec plaisir, mais je pense avoir perdu assez de temps à suivre ce sujet.

Bonne continuation malgré tout.