Problème de calques (CSS)

[Gillou]

Hi,
J'espère qu'Olab ou autre expert web lit ce forum, parce que j'ai une question sur les calques en CSS.
Bon voilà, je suis en train de faire un site, et je veux mettre deux sections différentes alignées horizontalement. Je vais faire des dessins, ce sera plus simple à comprendre

• Ce que je veux :

  Code : Tout sélectionner

  _Calque 1_______________________________________________
  |                                                         Calque 2______________________|
  Blabla du calque 1                          | Blabla du calque 2                              |
  ________________________________________________________
  

  (Calque 2 est imbriqué dans Calque 1, et les deux blablas sont alignés horizontalement)
• Ce que je ne veux pas :

  Code : Tout sélectionner

  _Calque 1________________    Calque 2_______________________
  |Blabla du calque 1                    |    |Blabla du calque 2                                |
  ________________________     ______________________________
  

  (Calque 1 et Calque 2 sont côte à côte, non imbriqués)

Pour l'instant, je n'arrive pas à avoir ça, car si j'imbrique 2 dans 1, Blabla 2 est placée sur la ligne du dessous de Blabla 1

Question : qui a compris et peut m'aider ?

[SB]

Il faut que tu mettes une balise avec un Id ou une classe à ton blabla1 et qu'en css tu lui donnes la propriété float:left. Exemple:
html

Code : Tout sélectionner

<p id="xx">blabla1</p>

css

Code : Tout sélectionner

#xx {float:left}

[Gillou]

Le souci c'est que j'ai déjà un truc comme ça ! Regarde :

HTML :

Code : Tout sélectionner

<div id="calque1">blabla 1<div id="calque2">blabla 2</div></div>

CSS :

Code : Tout sélectionner

#calque1{float:left;text-align:left;}
#calque2{float:right;text-align:right;}

Mais ça ne me met pas blabla 1 et blabla 2 sur la même ligne, blabla 2 est sur la ligne du dessous de blabla 1

[calimo]

#calque1 tu ne dois pas le faire flotter

[Gillou]

Voilà exactement ce que j'ai :

Code : Tout sélectionner

<div id="entete">
	<div id="breadCrumb">Vous êtes ici : Accueil</div>
	<h2 id="pageName">Le site du Pampryl Tour 2004</h2>
</div>

Avec les 3 classes CSS correspondantes :

Code : Tout sélectionner

#entete{
/*	float:left;*/                                        Désactivé pour tester
	width:79%;
	margin-bottom:10px;
}
#breadCrumb{
	font-size: 80%;
	padding: 2px 0px 0 10px;
	text-align:right;
}
#pageName{
	margin: 0px;
	padding: 0px 0px 0px 10px;
}

Impossible d'avoir Le site du Pampryl Tour 2004 et Vous êtes ici : Accueil sur la même ligne
Si vous voulez vous pouvez aller voir le site en question pour vous faire une idée. Pour l'instant je suis simplement en train de régler la mise en page, donc faites pas gaffe au contenu y'a rien et ça veut rien dire
Help please

[Gillou]

J'ai rien, dit j'ai rien dit !!! Honte sur moi !
Je viens de rajouter un petit float:right; pour breadcrumb et tout va bien maintenant, ouf
Désolé d'avoir fait le boulet

[Gillou]

Ah, merde quand même, voilà que j'ai un autre problème...
Sur les pages internes du site (pour lesquelles je veux avoir une colonne à droite), le "Vous êtes ici :" n'est pas placé complètement à droite à cause de la colonne des headlines. Pourtant, comme il vient avant dans le code je me disais qu'il allait être placé correctement... eh non, malgré la spécification de largeur le calque d'en-tête (qui contient la nom de la page et le vous êtes ici) s'arrête avant la colonne de droite C'est pas du tout ce que je veux !

Si ça peut aider voilà la classe de la colonne de droite :

Code : Tout sélectionner

#headlines{
  float:right;
	width: 20%;
	border-left: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	border-top: 1px solid #cccccc;
	padding-right: 10px;
}

J'ai pas trouvé de site expliquant clairement le positionnement des calques, j'y comprends pas grand chose pour l'instant et je tatonne beaucoup... vous l'aurez compris je débute !!!
Une idée pour placer mon "Vous êtes ici" tout à droite ? Merci

[calimo]

PS : il y a une rubrique "développement web" spécialement conçue pour ce genre de soucis

[Gillou]

PS : il y a une rubrique "développement web" spécialement conçue pour ce genre de soucis

Oui je sais, c'est ma "journée boulet" Si un modo passe par là...

Mais que ça n'empêche pas de répondre hein, je cherche toujours