aligner 3 boîtes en css

[tomlelab]

Bonjour,

j'ai enfin décidé de transformer tous mes tableaux imbriqués en css, mais les débuts sont vraiment laborieux. J'ai essayé de récupérer des informations sur plusieurs sites mais je commence à m'énerver tout seul...

Alors voilà ce que j'essaie d'obtenir:

version tableaux (ouh!)

et voilà mes débuts en css:

version css (hum!)

le rendu n'est pas le même ds firefox et IE: les pubs du milieu sont l'une sur l'autre ds firefox, et décalés vers le abs ds IE. Qu'ai je fais de mal, ou que n'ai-je pas fait ??

voici le code que j'utilise pour mes css:

body {
margin: 0;/* sans marges, la page sera collée aux bords */
font-family: verdana, arial, sans-serif; /* on définit la police de base dans la page */
font-size: 11px; /* on définit la taille de police de base dans la page */
}
#navcontainer ul
{
padding-left: 0;
margin-left: 0;
background-color: #B3A4FB;
color: White;
float: left;
width: 100%;
margin-top:0px;
height:25px;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
padding: 0.2em 0.5em;
background-color:#B3A4FB;
color: White;
text-decoration: none;
float: left;
/*border-right: 1px solid #fff;*/
margin-top:0px;
}

#navcontainer ul li a:hover
{
background-color:#B3A4FB;
color: #fff;
}
.haut {/* contient la deuxième ligne*/
width:100%;
display:inline;

}
.haut_pub { /* contient les 2  emplacements pub*/
width: 470px;
text-align:center;
height:126px;
margin-left: 5px;  
margin-top: 1px;
border: 0;
display:inline;
}

.haut_pub_ban {
width: 468px;
height: 60px;
margin-left: 300px;
}

.haut_pub_google {
width: 468px;
height: 60px;
margin-left: 300px;
}

.haut_info {
	border:0;
	position: absolute;
	right: 0px;
	top:20;
	width: 200px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	left: 830px;
	top: 48px;
	width: 157px;
}

.haut_logo {
float: left; /* alignement du logo à gauche */
width: 280px;
height:128px;
margin-left: 10px;  /* placement du logo dans son conteneur, head1 */
margin-top: 3px;
border: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}

.haut_menu {
	width: 100%;
	height: 30px;
	margin-top:0px;
	background-color:#B3A4FB;
	color: #FFFFFF;
	text-align:center;
	}
.haut_menu a{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
margin-left: 12px;
}

.main {
margin-left:10px;
margin-top:5px;
}

.bottom {
text-align:center;
margin-top:0px;
}
</style>
<link href="../assets/macromusica.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.haut_info1 {border:0;
	position: absolute;
	right: 0px;
	top:20;
	width: 200px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	left: 830px;
	top: 48px;
	width: 157px;
}
-->
</style>

Mon but est donc d'aligner 3 boîtes:

haut_logo, haut_pub (qui contient haut_pub_ban et haut_pub_google) et haut_info (que j'ai mis en absolute car si j'ai bien compris, pas possible de mettre 3 div sur la même ligne ?)

Merci de vos conseils pour ces débuts difficiles générateurs de bonnes prises de tête

[manmachine]

tu peux aligner autant de div que tu veux

1 - en les placant en absolut et en leur donnant les bonnes coordonnées

exemple

.mondiv {
 position:absolute;
 top:0px;
 left: 10px;
}

ou bien en les sortant du flux a l'aide de l'instruction float

<div class="box 1">contenu</div>
<div class="box 2">contenu</div>
<div class="box 3">contenu</div>

en css

.box {
float:left;
}

ensuite pour restitué le flux sur l'element suivant ces 3 div tu met

.tonselecteur {
clear:both;
}

Modifié 15 Novembre 2005 par manmachine

[tomlelab]

Merci manmachine, voilàa qui va mieux et qui m'éclaire.

[jeanpierre949]

salut.

pour aligner 3div tu mets un float:left; 1float:right; et un au milieu margin-left:auto; margin-right:auto;

[yuston]

J'avais rencontré le même problème que toi, mais j'ai demandé tout comme toi sur le Hub, d'ailleurs voici le post:

http://www.webmaster-hub.com/index.php?sho...6&st=0&p=123765

Et le problème est résolu....

Dans le post que j'ai donné, le lien d'exemple n'est plus fonctionnel mais les codes donnés en réponses fonctionne bien!

[tomlelab]

Bonjour,

merci à tous.

Dans la série "le css c'est énervant au départ ", j'ai désormais ces 2 problèmes:

1) la barre de menu du haut se décale sous firefox sur certaines pages:

ex:

décalé: http://www.boursematch.com/testcss.php et http://www.boursematch.com/

pas décalé: http://www.boursematch.com/forum.php

J'utilise le code css suivant:

#navcontainer ul
{
margin-top: 0px;
padding-left: 0;
margin-left: 0;
background-color: #B3A4FB;
color: White;
font-size:11px;
float: left;
width: 100%;

}

#navcontainer ul li {display: inline;}

#navcontainer ul li a
{
padding: 0.3em 0.5em;
background-color:#B3A4FB;
color: White;
text-decoration: none;
float: left;
top:0;
/*border-right: 1px solid #fff;*/
margin-top:0px;
height:25px;
}

#navcontainer ul li a:hover
{
background-color:#B3A4FB;
color: #fff;
}

2) les bordure des tables n'apparaissent pas sous firefox

j'utilise le css suivant:

.table_mauve {
	border: thin 1px solid #CAC2FC;
}

Si vous avez le temps de jeter un coup d'oeil, merci d'avance.

[jeanpierre949]

salut.

Je ne vois pas l'interet que tu as a mettre ton menu en float-left vu qu'il fait 100% de la largeur de la page .

Je le vois pas decalé sur FF.

supprime le float-left et mets text-align:center;

pour la bordure des tables enleve "thin" devant 1px

[tomlelab]

Salut Jean Pierre,

Merci pour la table, j'ai enlevé le thin, et en effet les bordures sont bien là.

J'ai enlevé le float:left et mis le text-align, mais ça change un peu, il y a des petits point entre chaque élément , je laisse quelques instants, ça fera office de décoration de noel

Mais je vois toujours le menu décalé sous FF (décalé par rapport au haut de la page) ici.

[jeanpierre949]

tu veux dire le texte est decalé il ne s'affiche pas au milieu de ton container?

pour les petits points suffit d'ajouter ca dans.

#navcontainer ul

list-style-type:none;

[tomlelab]

non il y a un espace (ligne blanche) entre le haut de la page et le menu mauve, alors qu'il devrait être collé comme sur les autrespages

[jeanpierre949]

decidement testé sur 4 navigateurs IE FF Nscape Opera pas le moindre decalage le menu est collé tout en haut meme en fermant toutes les tools bars

[tomlelab]

Bon c'est déjà ça, ça veut dire que tout le monde ne voit pas ce petit désagrément.

Ca le fait que sous FF chez moi, avec windows2000 et windows xp.