28173 sujets

CSS et mise en forme, CSS3

[Résolu] Pb colonnes factices

Bonsoir,

La technique (Pompage.net) fonctionne bien, sauf que les colonnes factices sont collées à la fenêtre du navigateur, en haut et en bas, bien que j'aie indiqué une marge haute (dans le body) et une marge de retrait (footer). Les colonnes factices (en background) passent derrière le contenu.

Haut de page :

upload/6301-haut.gif

Bas de page :

upload/6301-bas.gif

CSS

body
{
width: 760px;
margin: auto;
margin-top: 30px;
background: url("bgrdrpt.gif") repeat-y 50% 30px;
font-family: "trebuchet ms", verdana, tahoma, arial;
color: #333333;
}

Merci de m'aider
Modifié par jide (01 May 2006 - 11:50)
Bonjour,

Sauf erreur, c'est normal, car le body, c'est l'ensemble de la fenêtre du navigateur.
Ici, on dirait un design avec des dimensions fixes et centré : cela implique un div qui va contenir l'ensemble de la page (je l'appelerai #page ici). C'est sur lui qu'il faut utiliser la technique des colonnes factices.

[#orange]CSS :[/#]

body {
   margin: 0;
   padding: 0;
   background: #fff;
   font-family: "trebuchet ms", verdana, tahoma, arial, sans-serif;
   color: #333;
   text-align: center; /* pour centrer #page sur certains vieux navigateurs */
   }

#page {
   text-align: left; /* pour remettre le texte à gauche */
   margin: 30px auto; /* marges haut et bas à 30px, gauche et droite en auto */
   width: 760px;
   background: url(bgrdrpt.gif) repeat-y;
   }

[#orange]BALISAGE :[/#]

(...)
<body>
<!-- début du div#page -->
<div id="page">

   <p>Un peu de texte pour tester<br />
   bla bla bla bla bla bla bla bla bla<br />
   bla bla bla bla bla bla bla bla bla</p>
   (...)
   <p>Un peu de texte pour tester<br />
   bla bla bla bla bla bla bla bla bla<br />
   bla bla bla bla bla bla bla bla bla</p>

</div>
<!-- fin du div#page -->
</body>
</html>
Tout le contenu du site, sur l'ensemble des pages est donc à mettre dans le conteneur #page.
Modifié par Smiley neko (30 Apr 2006 - 23:02)
Bonsoir,

Merci de ton retour.

Excellemment vu ! Il s'agit en effet d'un design à dimensions fixes et centré.

Je comprends tes commentaires, et je vais "potasser".

Avant ton post, en me balladant sur la toile, j'ai observé que les sites mettant en oeuvre les colonnes factices collaient aux limites haute et basse de la fenêtre du navigateur ; alors tout ce qui compose le "background" ne gêne pas la lisibilité de ce qui se trouve "au-dessus"...

Mon enthousiasme de débutant est intacte. Je te tiens au courant.

Merci encore.
(suite)

Les colonnes factices fonctionnaient bien, sauf que l'ensemble du design se retrouvait à gauche, et je n'avais plus de marge en haut...

Après tatonnements, j'obtiens ce que je veux design fixe, centré, marges en haut et après le footer, et colonnes factices ok.

Tout le contenu du site se trouve bien dans le conteneur #page.

Voici les modifications dans CSS :

body
{
width: 760px;
margin: auto;
padding: 30px;
background: #fff;
font-family: "trebuchet ms", verdana, tahoma, arial, sans-serif;
color: #333;
text-align: center; /* pour centrer #page sur certains vieux navigateurs */
}

#page {

text-align: left; /* pour remettre le texte à gauche */
background: url(bgrdrpt.gif) repeat-y;
}

Cela fonctionne, mais est-vraiment sémantiquement correct ?

Merci, merci
En HTML, on parle de sémantique en pensant au sens des balises. C'est à dire d'utiliser les balises pour leur sens et non en les détournant à seules fins de présentation. Un exemple : 
non juste :

<p class="gros titre">Quoi d'neuf doc ?!</p>
<p class="petit titre">Où la vie de Bugs Bunny</p>
<p>Plein de bla bla bla sur les lapins...</p>

juste :

<h1>Quoi d'neuf doc ?!</h1>
<h2 class="petit titre">Où la vie de Bugs Bunny</h2>
<p>Plein de bla bla bla sur les lapins...</p>
Ton extrait de code concerne la partie CSS, donc il n'est pas concerné par les problèmes de sémantique.

Une chose cependant : pourquoi ce padding de 30 px partout. Il est inutile car l'exemple que je t'ai donné (margin: 30px auto;) centre bien le document sur les marges horizontales et applique une marge en haut et en bas de 30 px. Il permet également de gagner quelques octets...

Encore une chose : tu as placé width et margin dans le body, ce qui fonctionne bien, mais ça me fait bizarre... (j'ai l'habitude de voir et de mettre ça dans le div servant de conteneur.) Smiley lol


Enfin, pour finir, pense à placer tes extraits de code entre les balises [ code] à mettre au dessus du code, et [/ code] (à mettre dessous). Ceci pour rendre la présentation du code plus lisible ; un modérateur risque de te le demander.
(Remarque : ici, j'ai du insérer des espaces à ne pas reproduire pour pouvoir afficher la balise - on peut aussi utiliser le bouton "code" sous les smileys.)
Modifié par Smiley neko (01 May 2006 - 09:58)
Bonjour,

(neko) mes félicitations pour tes qualités de pédagogue !

Je poursuis, "bien en selle". A bientôt, sans doute, sur le forum.

Encore merci.
Sujet clos
Aller à