18041 sujets

Questions générales et questions de débutants

Structure - pourquoi ca ne marche pas ?

Hello tout le monde,

J'ai pas mal de sites prof. à mon actif mais commence seulement à travailler "concrètement" avec les CSS. Pour m'entrainer et surtout comprendre j'ai fais les tutoriaux et suis entrain de reprendre quelques templates que j'avais fais il y a quelques temps avec de superbes tableaux Smiley cligne ... Mais voila.

Ma structure me pose un problème. J'ai sur le coté gauche une colonne qui doit resté à taille fixe et sur la droite une colonne qui occupe 100% du reste. Mon souci c'est que la partie qui devrait être à droite en float left passe dessous dès que la mets en 100%...

Voila mon code html

a écrit :
<body>
<div id="Page">

<div id="Header">
<div id="HeaderL">HL</div>
<div id="HeaderR">HR</div>
</div>

<ul id="Menu">
<li><a href="etape1.html">ACCUEIL</a></li>
<li><a href="etape2.html">PRESENTATION</a></li>
<li><a href="etape3.html">ARTICLES</a></li>
<li><a href="etape4.html">LIENS</a></li>
<li><a href="etape5.html">CONTACT</a></li>
</ul>

<div id="WSpace">
<h2>Un titre 2</h2>
<p>Un paragraphe</p>
</div>

<p id="Footer">Web Architect's</p>

</div>
</body>


Et le CSS utilisé (juste les bonnes classes)

a écrit :

div#Header
{
height: 258px ;
margin: 0 ;
background: #666 ;
}


div#HeaderL
{
height: 258px ;
width: 300px;
float: left;
background: blue ;
}


div#HeaderR
{
height: 258px ;
width: 100%;
float: left;
background-color: red;

}



Des idées... qu'est ce que je n'ai pas compris lol Smiley ohwell
mick_ge a écrit :
qu'est ce que je n'ai pas compris

Au hasard : le comportement des flottants. Smiley cligne

Pour une petite mise en jambe, voici une page de test à visualiser avec un autre navigateur qu'IE6 (pour la transparence PNG) :
http://web.covertprestige.info/test/07-colonnes-flottantes-et-place-dans-le-flux.html

Tu remarqueras que les flottants ne repoussent pas les blocs, mais juste leur contenu (texte). Donc ta colonne flottante à gauche ne repoussera que le contenu de la partie de droite.

Le bloc de droite, lui, ignore le flottant... sauf si tu le mets lui-même en flottant, car les flottants se repoussent entre eux.

Donc si tu veux faire tenir deux flottants côte-à-côte, il faut leur donner à tous les deux la bonne largeur.

Le problème, c'est que ton width: 100% sera calculé non pas par rapport à « l'espace qui reste une fois le premier flottant placé » mais par rapport à la largeur de la zone de contenu du bloc parent. Bref, width: 100% veut dire : prends toute la largeur, pas « prends toute la largeur moins celle déjà prise par le flottant qui te précède ».

Dis comme ça, ça a l'air un poil compliqué. En réalité, l'erreur que tu commets est de considérer que les deux blocs flottants que tu crées sont « comme des cellules de tableau », ce qui est faux. Chaque bloc flottant est indépendant des autres, contrairement à ce qui se passe avec des cellules de tableau. Le navigateur ne peut donc pas calculer « l'espace qui reste pour la seconde colonne » ou autre vue de l'esprit. Smiley cligne


Si j'explique tout ça, c'est pour te donner quelques repères conceptuels, dont tu auras bien besoin si tu veux utiliser les CSS professionnellement. Un autre conseil : la mise en page avec les CSS diffère énormément de la mise en page par « découpage » d'un design avec les tableaux.

- Avec les tableaux de mise en forme, on découpe un design en une grille ;
- Avec les CSS, on crée une structure de la page avec des blocs de contenu*, puis on construit la mise en page en positionnant et habillant ces blocs.

Mais à voir ton code HTML il semblerait que le réflexe soit pris, donc je ne m'éternise pas sur ce sujet. Smiley cligne

[* Ces blocs de contenu seront probablement des div qui auront un identifiant (attribut HTML id) propre correspondant à leur fonction dans la page, ce qui donnera, pour les sélecteurs CSS correspondant : div#header, div#menu, div#content, div#footer... ce genre de choses.]


Pour revenir à ton problème : mieux vaut ne pas utiliser deux blocs flottants. Pour mettre deux blocs côte-à-côte, tu n'as besoin que d'un seul flottant.

Voir cet exemple :
http://web.covertprestige.info/test/11-page-fluide-avec-trois-colonnes-1.html
Il suffira de faire la même chose mais avec une seule colonne latérale flottante.
Un conseil pour ton menu de navigation : garde des intitulés des liens avec une casse normale :
<ul id="Menu">
<li><a href="etape1.html">Accueil</a></li>
<li><a href="etape2.html">Présentation</a></li>
<li><a href="etape3.html">Articles</a></li>
<li><a href="etape4.html">Liens</a></li>
<li><a href="etape5.html">Contact</a></li>
</ul>

Rien ne t'empêche par la suite, via les CSS, de changer le style du texte pour afficher uniquement des capitales :
ul#Menu li {text-transform: capitalize;}
Un très gros merci d'avoir pris le temps d'une répnose pareil Florent.
J'ai compris ce que tu voulais dire donc c'est parfait Smiley cligne A tel point que je viens de plancher 25sec sur la solution :

a écrit :

div#HeaderL
{
height: 258px ;
width: 300px;
float: left;
background: blue ;
}


div#HeaderR
{
height: 258px ;
width: 100%;
margin-left: 258px;
background-color: red;

}


Héhé Smiley cligne Comme ca ca joue ! Ma logique est logique ?

Par contre tu entends quoi par :

a écrit :

garde des intitulés des liens avec une casse normale :


Sans Maj ???

Merci encore pour ton aide Smiley cligne
Sujet clos
Aller à