CSS : un bloc à gauche, un bloc à droite

[Nissone]

Bonjour.

Histoire de me mettre (enfin !) sérieusement aux CSS, je m'entraîne en faisant une petite page pour une copine.

Je voudrais avoir deux blocs : un à gauche, un à droite.

J'ai suivi les indications de Openweb / mise en page à deux colonnes.

Jusque-là, ça à l'air tout simple, mais voilà : ça s'affiche mal !

Je ne sais pas si le problème vient de mon code ou de IE.

Voici mon code CSS :

.Gauche {
	float: left;
  width: 200px;
  margin: 0;
}

.Milieu {
	float: left;
	margin-left: 20px;
}

Et en HTML (je n'ai mis qu'une partie)

<div class="gauche">
  <p>
    <br>
    <br>
      <span class="VioletGras">Laboratoire <a href="http://geosciences.geol.u-psud.fr/recherch/cnrsassocie.html" target="_blank">OrsayTerre</a><br>
      Bâtiment 504 Faculté des sciences<br>
      F – 91405
    Orsay Cedex<br>
    <br>
    <span class="GrisGras"><a href="#profil">PROFIL</a><br>
    <a href="#formation">FORMATION ET DIPLOMES</a><br>
    <a href="#stages">STAGES UNIVERSITAIRES</a><br>
    <a href="#experiences">EXPERIENCES PROFESSIONNELLES</a><br>
    <a href="#assoc">VIE ASSOCIATIVE</a><br>
    <a href="#loisirs">LOISIRS</a></span><br>
    <br> 
          </p>
  </div>
  
<div class="Milieu">
  <img src="images/photo.jpg" width="150" height="187"><br>
  Née le 3 janvier 1977 (26 ans)<br>
  Célibataire<br>
  Titulaire
  du permis B </div>

Et la page en question.

Est-ce que quelqu'un peut me dire d'où vient le problème ?

<Edité>

Je viens de me rendre compte que mon problème est exactement le même que celui posté par Jazz !

</Edité>

[Loupilo]

Voilà voilà ! (J'ai enfin aidé qql, Nissone qui plus est ! )

J'ai vérifié, ça marche

#Gauche {

float: left;

width: 200px;

margin: 0;

}

#Milieu {

float: left;

margin-left: 20px;

}

<div id="Gauche">

<p>

<br>

<br>

  <span class="VioletGras">Laboratoire <a href=&quot;http://geosciences.geol.u-psud.fr/recherch/cnrsassocie.html" target="_blank">OrsayTerre</a><br>

  Bâtiment 504 Faculté des sciences<br>

  F – 91405

Orsay Cedex<br>

<br>

<span class="GrisGras"><a href="#profil">PROFIL</a><br>

<a href="#formation">FORMATION ET DIPLOMES</a><br>

<a href="#stages">STAGES UNIVERSITAIRES</a><br>

<a href="#experiences">EXPERIENCES PROFESSIONNELLES</a><br>

<a href="#assoc">VIE ASSOCIATIVE</a><br>

<a href="#loisirs">LOISIRS</a></span><br>

<br>

      </p>

</div>

<div id="Milieu">

<img src="images/photo.jpg" width="150" height="187"><br>

Née le 3 janvier 1977 (26 ans)<br>

Célibataire<br>

Titulaire

du permis B </div>

[Fight]

Bonjour,

oui je rajouterais juste qu'il faut faire TRES attention à la casse pour les class CSS. Je te conseils de ne mettree que des minuscules.

[Nissone]

Nissone qui plus est

Je vous remercie pour vos conseils (et rapides, en plus ! Ce qui est très appréciable quand on est en train de s'énerver sur quelque chose ).

Loupilo, si j'ai bien regardé, il faut que je remplace

.Gauche

par

#Gauche

et

class="Gauche"

par

id="Gauche"

(idem pour Milieu)

Est-ce qu'il y a autre chose à faire que je n'ai pas vu ?

Parce que ça ne marche toujours pas comme ça !

Fight,

je me permettrais de ... ne pas suivre ton conseil !

Non pas que je ne le crois pas bon, mais pour ce qui est des langage sensibles à la casse, je pense qu'il y a des habitudes chez chacun de nous. J'utilise justement cette particularité pour mettre des majuscules à beaucoup de mes mots (je pense que c'est une question de mémoire visuelle ; chez moi, c'est plus pratique comme ça)

Je crois volontier que pour d'autres, il sera plus simple de ne fonctionner qu'en minuscules.

[Loupilo]

Effectivement, j'ai modifié juste ça. J'ai remplacer les class par des id et les . par des #. J'ai fait attention à la casse et ça marche quand je le mets dans mon document

(<style type="text/css">

<!--

#Gauche {

float: left;

width: 200px;

margin: 0;

}

#Milieu {

float: left;

margin-left: 20px;

}

-->

</style>).

j'ai pas essayé avec une feuille de style externe mais vérifie que la casse est bonne, ainsi que celle des liens, je ne vois que ça qui puisse causer le non fonctionnement de cette solution

J'espere que ç@ v@ m_AT_rcher !

[Nissone]

Comme je suis en plein apprentissage et en pleine expérimentation, j'ai essayé autre chose :

#Gauche {
	position: absolute;
	top: 10px;
	left: 10px;
	width: 200px;
}

#Milieu {
	position: absolute;
	top: 0px;
	left: 250px;	
}

Et ça marche !

Je te remercie pour ton aide.

Pour l'instant, j'essaye d'avancer sur cette page. Il y a tellement de choses que je ne comprends pas encore (et qui m'éniiirve ! )

[Fight]

Nissone, c'est pas moi qui ai écrit :

<div class="gauche">

Mais bien sûr tu fais comme tu veux, moi je disais ça par expérience et parce que t'avais fait la faute, et il me semble que ça va dans le sens des recommandations du w3c.

[Nissone]

Désolée, Flight, je ne voulais pas te vexer.

[Fight]

Ne t'inquiète pas je ne suis pas vexé

C'etait un simple conseil amical.

[Monique]

Bonjour Nissone,

Il est inutile d'utiliser un positionnement absolu dans ce cas, il suffit de déplacer une balise de fin de div.

De plus, tes span sont inutiles et pour ce type de présentation (liste, menu) il est préférable d'utiliser les balises prévues pour

Dans ta feuille de style, tu ajoutes ceci (pour qu'il n'y aie pas de puce) :

ul {
	list-style: none;
	margin-left: 1px;
}

et dans ta page :

<div id="Gauche">
  <h1 class="VioletGras">Hydrogéologue, Géochimiste isotopique</h1>
<p class="VioletGras">Christelle CHABAULT</p>
  <ul>
  <li>Laboratoire <a href="http://geosciences.geol.u-psud.fr/recherch/cnrsassocie.html" target="_blank">OrsayTerre</a></li>
  <li>Bâtiment 504</li>
  <li>Faculté des sciences</li>
  <li>F  91405 Orsay Cedex</li>
</ul>
    
<div id="Nav">
<ul type="disc">
  <li><a href="#profil" class="GrisGras">PROFIL</a></li>
  <li><a href="#formation" class="GrisGras">FORMATION ET DIPLOMES</a></li>
  <li><a href="#stages" class="GrisGras">STAGES UNIVERSITAIRES</a></li>
  <li><a href="#experiences" class="GrisGras">EXPERIENCES PROFESSIONNELLES</a></li>
  <li><a href="#assoc" class="GrisGras">VIE ASSOCIATIVE</a></li>
  <li> </li>
  <li><a href="#loisirs" class="GrisGras">LOISIRS</a></li>
  <li><a href="#" class="GrisGras">PUBLICATIONS</a></li>
  <li><a href="#" class="GrisGras">CONTACT</a></li>
</ul>
    
</div><!-- fin id Nav -->
</div><!-- fin id Gauche -->

Et surtout, use et abuse du validateur (celui-ci est plus explicite que celui du W3C)... dans le bloc du milieu, par exemple, tu verras qu'il y a des balises p mal placées.

Bon courage

[Nissone]

Merci Monique.

Je vais suivre tes conseils.

Euh... sauf peut-être pour la fin de div... J'ai essayé, mais je crois que j'ai fais autrement... Et j'ai l'impression que ça marche pour moi, comme pour le validateur.

D'ailleurs, le validateur me "réclame" des ALT pour mes images qui sont en fait des puces.

J'ai voulu, du coup, faire ça :

.ulPuce {
	list-style: url(images/puce.gif);
}

(car j'utilise déjà <ul> ailleurs)

Que j'appelle de la façon suivante :

<ul class="ulPuce">
<li></li><span class="VioletGras">DOCTORAT
    Hydrogéologie, Hydrologie, Géochimie et Géostatistique</span><br>
  <div class="Texte2">Faculté d'ORSAY Paris XI -  2001/2004 <br>
  <br>

(...)

</ul>

Ca ne marche pas ... parce que ce n'est pas possible ou il y a quelque chose que j'ai mal fais ?!

[Monique]

Nissone, tu fais comme tu veux

Je t'ai juste donné un exemple de code correct pour l'exemple que tu as donné en début de discussion...

Deux choses qu'il faut toujours avoir à l'esprit :

- la simplicité du code, que l'on obtient notamment en utilisant les balises adaptées (par exemple une liste au lieu d'une série de br)

- le positionnent naturel, qui est à privilégier chaque fois que c'est possible (plutôt que le positionnement absolu)

Une chose que je ne comprends pas : ton utilisation massive de span qui est surtout à utiliser pour attribuer un style différent à une partie de texte.

Par exemple :

<p class="green">Cette phrase est en vert mais ce <span "class="blue">mot</span> est en bleu</p>

Pour ta liste, utilise plutôt (et vérifie que le chemin de l'URL est bon)

.ulPuce  {
list-style-image: url(images/puce.gif);
display: list-item;
}

Quant au code de ta liste

<ul>
<li class="ulPuce VioletGras">DOCTORAT Hydrogéologie, Hydrologie, Géochimie et Géostatistique<br> </li>
 <li class="ulPuce">Faculté d'ORSAY Paris XI -  2001/2004</li> 
</ul>

[Monique]

D'ailleurs, le validateur me "réclame" des ALT pour mes images qui sont en fait des puces.

Bonjour Nissone,

J'ai oublié de répondre à ceci hier...

Pour qu'une page soit validée, l'attribut alt doit être présent.

Si l'image n'est pas significative pour le contenu, il est recommandé de la laisser vide :

alt=""

L'utilisateur qui a désactivé l'affichage des images saura qu'il ne rate rien d'important, le non-voyant qui utilise un lecteur vocal ne sera pas gêné par des lectures répétitives et inutiles (Jaws ne lit pas les attributs alt vides).

[Nissone]

Nissone, tu fais comme tu veux 

Je t'ai juste donné un exemple de code correct pour l'exemple que tu as donné en début de discussion...

C'est que, Monique, je ne voudrais pas donner l'impression de demander des conseils et de ne pas les suivre !!!

Tu te décarcasses tellement à répondre précisément à toutes les questions !

Mais c'est vrai qu'avec ma page qui évoluait au cours de la journée...

Bon ! Ben, j'ai corrigé quelques trucs, mais j'en ai encore beaucoup à voir ! Au moins, au fur et à mesure, ça devient de plus en plus concret pour moi !