Je hais les CSS

Salut à tous,

Avant toute chose, merci pour votre travail, on y trouve très souvent des tutoriaux très instructifs.

Mais là je cale pour aligner au centre une ou plusieurs div flottant dans une autre div. Mon problème est que grosso modo la structure de mon site est la suivante :

Le haut est en 100%, le reste en pixels (1000) et donc je peux pas mettre de div global (enfin selon mes modestes compétences).
J'ai bien essayer de mettre une marge en % mais en fonction des résolutions, certaines div sont décalés. Aussi ma question: comment centrer la div flottante.

Un grand merci d'avance !!!
Zedbar
CCC (Comité Contre les Css # vive le flash

Zedbar1 a écrit :

Le haut est en 100%, le reste en pixels (1000) et donc je peux pas mettre de div global (enfin selon mes modestes compétences).

Drole de choix pour les 1000 pixels. On peut toujours englober les div dans un div parent, difficile de te dire autre chose vu la succincte description de ta page.

Bonjour, t'as raison, fais le en flash

Hello et bienvenue à toi,

Les CSS ont des lacunes en effet. Ce n'est pas un langage magique.

Cependant, avec ma courte expérience du forum, je peux t'assurer que généralement les membres qui "détestent les CSS" :
- n'ont pas les connaissances suffisantes de ce langage (ou ont pioché des infos éparses et de qualité variables d'un site web à un autre sans vraiment comprendre les bases)
- n'ont pas les connaissances suffisantes en termes de faiblesses des navigateurs : dire que "les CSS ne marchent pas" alors qu'il s'agit d'un bogue ou d'une lacune d'un navigateur en particulier ne relève pas du ressort des CSS.

Bref. Tout ça pour dire que je n'ai pas compris ton explication et que je pense qu'une illustration, voire un code seraient les bienvenus.

Ensuite, il faudra sans doute (re)voir certaines bases des CSS avant de critiquer

Bonne chance.
Modifié par Raphael (13 Nov 2010 - 15:40)

Faut pas haïr les CSS, il faut juste apprendre à s'en servir... ou passer la main à quelqu'un de compétent (je ne hais pas la mécanique malgré mon incompétence dans le domaine, car j'essaie pas d'en faire... ça aide à rester zen).

Zedbar1 a écrit :
Le haut est en 100%, le reste en pixels (1000)

Donc si je lis bien le «haut» est en 100% choucroute ou 100% carambar, tandis que «le reste» est en 1000px de profondeur sur la diagonale? Attention à ne pas haïr la précision et les informations claires.
Préciser de quelle dimension on parle, hauteur ou largeur, ça aide pas mal. Attention aussi à bien comprendre à quoi se rapportent les pourcentages: les débutants en CSS mettent souvent des height:100% sur des éléments en se disant que par une sorte d'intervention magique la hauteur de l'élément va se rapporter à la hauteur d'un autre élément de la page, à celle du viewport ou à l'âge du capitaine. Comme les navigateurs ne lisent pas dans les pensées du débutant en CSS, ça marche rarement.

Zedbar1 a écrit :
comment centrer la div flottante

La propriété float accepte deux valeurs (en dehors de la valeur par défaut, "none"): "left" et "right". Ça me semble antinomique avec l'idée de centrage horizontal. Si tu pensais à un centrage vertical, là par contre il y a peut-être quelque chose à faire.

Plus globalement, même si ton explication avait été un peu plus claire ça ne nous aurai donné qu'une idée très partielle de ce que tu cherches à obtenir. Ça ne nous dit pas, par exemple, si tu es parti sur une mauvaise piste pour ton intégration. Le mieux serait de nous montrer un aperçu du design à intégrer, et une page en ligne qui montre ce que tu as réalisé pour l'instant.

Salut,

C'est pas comme si l'intégration web était un métier dont il fallait apprendre les subtilités. L'improvisation y a peu sa place, sauf en période d'apprentissage. Et se braquer contre la technologie quand on y arrive pas n'est pas forcément la meilleure solution.

A propos de solution, j'ai peur qu'il soit impossible de t'en apporter une, sans un peu plus d'informations de ta part :

Dans l'ordre de priorité, tu peux nous fournir :
1. un descriptif très précis de ton problème, impératif pour focaliser notre recherche dans le bons sens.
2. un lien vers une page en ligne, qui permet de constater ce problème par nous même, ne nécessitant parfois pas d'autres informations.
3. l'intégralité du code html et css produit dans le navigateur (et pas seulement des extraits, car le problème se situe parfois ailleurs dans le code).
4. des schémas ou captures d'écran.

La rapidité d'obtention de la réponse dépendra de la qualité les informations que tu nous fourniras.

Bonne chance à toi.

Merci à tous de vos réponses. Je vais effectivement essayer d'être plus précis dans l'explication de mon problème mais je voulais vous épargner la lecture, pour moi qui vient du flash, "rébarbative" de ma feuille de style mais la voila. Ce que je désire faire est je crois commun à de nombreux sites : un bandeau pleine page en haut, et un body de 1000px
Je n’utilise certainement pas les bons termes alors voici une capture d'écran de mon site qui fonctionne, je l’ai réalisé à partir de «tableaux» mais je crois qu’il ne faut pas les utiliser, c’est pourquoi je fais appel à vous.
Avec mes propres mots : centrer le contenu des div "header" et "titre".
Autres exemples et sans leur faire de pub et en vrac : http://www.sfrbusinessteam.fr/ ou tout simplement la dernière version de Twitter (http://twitter.com/)

Merci de votre patience
Zedbar




//*CSS*//
html,
body {width:100%;height:100%;margin-left:auto;margin-right:auto;margin-top:0px;align:center;font-family: Arial, Helvetica, sans-serif;font-size:12px; }
.clear { clear : both; }
/*Paragraphes*****************************************************************************************************************************/
h1 {display: inline; margin:0px;padding:0px; color: #99cc00; font-size: 14px; font-weight: bold;line-height:0.9em; }
h2 {color: #000; font-size: 13px;font-weight: bold; }
h4 {color: #666; font-size: 11px;line-height:1.3em; }
p {color: #000; font-size: 12px;line-height:1.5em; }
p2 {color: #346633; font-size: 11px; }
/*Headmain*****************************************************************************************************************************/
#headmain {margin-left:auto;margin-right:auto;width:100%;align:center; }
div#header {float:left; width:100%;height:80px;background-color:#346633;align:center; }
div#header_logo {float:left;width:180px;align:center; }
div#header_nav {float:left;width:750px;align:center; }
div#titre{float:left;width:100%;height:27px;background-color:#346633;align:center; }
div#titre_g {float:left;text-align:left;width:720px;align:center;text-indent:10px;align:center;}
div#titre_d {float:left;width:280px;align:center; }
/*Sommaire*****************************************************************************************************************************/
#sommaire {margin-left:0px;width:100%;align:center;position: absmiddle; }
div#produit{float:left;width:100%;height:70px;background: -moz-linear-gradient(bottom, #346633, #99cc00 5%, #8EC105 1% ,#346633 ); }
div#produit_1 {margin-left:15.5%;float:left;margin-top:20px;width:250px;height:20px; }
div#produit_2 {float:left;width:250px;height:20px;margin-top:20px; }
div#produit_3 {float:left;width:250px;height:20px;margin-top:20px; }
div#produit_4 {float:left;width:250px;height:20px;margin-top:20px; }
div#accueil {float:left;width:1000px;height:300px;background: #fff ; }
/*Navigation*****************************************************************************************************************************/
div#navigation {float:left;width:1000px;height:10px;text-indent:5px;margin:10px 15px 10px 0px; }
div#navigation_gauche {float:left;width:800px;height:10px; }
div#navigation_droite {float:left;width:180px;height:10px;text-align:left;}
/*Principal*****************************************************************************************************************************/
#principal {margin-left:auto;margin-right:auto;width:1000px;align:center;position: absmiddle; }
div#contenu {float:left;width:1000px;max-height:700px;background-color:#fff;text-align:left; }
div#contenu_gauche {float:left;margin-left:10px;width:690px;height:700px;align:center;background-color:#fff; }
div#contenu_droite {float:left;margin-right:10px;width:290px;height:700px;text-align:left;background: -moz-linear-gradient(left, #ECECEC , #fff 15%); }
/*Carrieres*****************************************************************************************************************************/
div#contenu4 {float:left;width:1000px;height:600px;text-align:left; }
div#contenu4_gauche {float:left;width:150px;height:450px;align:center;background: -moz-linear-gradient(right, #EBF5CE , #fff 75%);border-top: 5px solid #99cc00; }
div#contenu4_inter {float:left;width:15px;max-height:1500px;align:center;background: none;border-top: 5px solid #fff; }
div#contenu4_centre {float:left;width:560px;margin-left:0px;max-height:1500px;align:justify;text-indent:0px;border-top:0px;}
div#contenu4_centre2 {float:left;width:560px;margin-left:0px;max-height:1500px;align:justify;text-indent:0px;border-top:0px;border-top: 5px solid #99cc00;}
div#contenu4_centre3 {float:left;width:800px;margin-left:0px;max-height:1500px;align:justify;text-indent:0px;border-top:0px;border-top: 5px solid #99cc00;}
div#contenu4_droite {float:left;width:220px;max-height:1500px;text-indent:10px;text-align:left;background: -moz-linear-gradient(left, #EBF5CE , #fff 75%);border-top: 5px solid #99cc00; }
/*Contenus Principaux*****************************************************************************************************************************/
#menu {margin-bottom:10px;padding-bottom:10px; margin-left:29px;margin-top:19px; background-color:none; solid 10px;}
#bloc1 {background:#99cc00;width:220px;height:135px;margin-left:0px;margin-right:0px;margin-top:0px;text-align:center;}
#bloc13 {background:#fff;width:220px;height:135px;margin-left:0px;margin-right:0px;margin-top:0px;text-align:center;}
#bloc1bis {width:180px;height:100px;margin-left:10px;margin-right:5px;margin-top:10px;border:0px;text-indent: 0px; }
#bloc2 {background:none;width:180px;height:120px;margin-left:20px;margin-right:20px;margin-top:15px;border:0px;text-indent: 0px; }
#bloc3 {background:#ffffff;width:180px;height:120px;margin-left:20px;margin-right:20px;margin-top:5px;border: 1px solid #99cc00;-moz-border-radius: 11px 11px 11px 11px;text-indent:10px;}
#bloc3bis {width:180px;height:100px;margin-left:10px;margin-right:5px;margin-top:10px;border:0px;text-indent: 0px; }
div#texte {margin-left:15px; margin-right:15px;text-align: justify;letter-spacing:0px; }
div#faq {float:left;width:800px;height:70px;margin-left:10px;margin-right:5px;margin-top:10px;margin-bottom:10px;border-bottom:1px solid #ccc;text-indent: 0px; }
div#faq_gauche {float:left;width:40px;height:60px;border-style-left:dashed;border-right:1px solid #ccc;}
div#faq_centre {float:left;width:280px;margin-left:25px;text-align:left; }
div#faq_droite {float:left;width:410px;margin-left:0px;text-align:justify; }
div#pdg {float:left;width:130px;height:60px;margin-left:10px;margin-right:0px;margin-top:20px;text-align:justify;border: 1px solid #999;border-right: 0px;-moz-border-radius: 11px 0px 0px 11px;background: -moz-linear-gradient(right, #99cc00 , #E5F2BE 75%); }
div#demo{float:left;width:130px;height:60px;margin-left:0px;margin-right:5px;margin-top:20px;text-align:justify;border: 1px solid #999;border-left: 0px;-moz-border-radius: 0px 11px 11px 0px;background: -moz-linear-gradient(left, #99cc00 , #E5F2BE 75%); }
/*Retour*****************************************************************************************************************************/
div#haut {float:left;width:1000px;height:25px; }
div#haut_gauche {float:left;width:890px;height:25px;align:center; }
div#haut_droite {float:left;width:110px;height:25px; }
/*Pied de page*****************************************************************************************************************************/
div#piedpage {float:left;width:1000px;height:120px;text-align:left;background-color:#666; }
div#piedpage_b {float:left;width:50px;height:120px; }
div#piedpage_g {float:left;width:400px;height:120px; }
div#piedpage_m {float:left;width:330px;height:120px; }
div#piedpage_d {float:left;width:210px;height:120px; }
/*Liens*****************************************************************************************************************************/
a:link {font-family: Arial, Helvetica, sans-serif;color:#fff;text-decoration:none; }
a:visited {font-family: Arial, Helvetica, sans-serif;text-decoration:none;color:#fff; }
a:hover {font-family: Arial, Helvetica, sans-serif;text-decoration:underline;color:#fff; }
a:active {font-family: Arial, Helvetica, sans-serif;text-decoration:none;color:#fff; }
/*Menu Gauche *********************************************************************************************************************/
#button {
background-color: none;margin-left: 0px;text-align:left;width: 150px;border-right: 0px solid #000; padding: 0 0 1em 0; margin-bottom: 1em; font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;font-size: 12px;font-weight : bold;color: #000; }
#button ul {background-color: none;list-style: none;margin: 0;padding: 0;border: none; }
#button li {background-color: none;border-bottom: 1px solid #EBF5CE;margin: 0; }
#button li a {background-color: none;display: block;padding: 5px 5px 5px 0.5em;background-color: none;color: #99cc00;text-decoration: none;width: 100px; }
html>body #button li a {background-color: none;width: auto; }
#button li.on ul {display : block;background-color: none; }
#button li a:hover {background: -moz-radial-gradient(left, #fff, #fff, #fff, #EBF5CE );color: #acb0b6; }
#selected {color: #ff0000; }
/*Polices*****************************************************************************************************************************/
.Style1 {font-family: Arial, Helvetica, sans-serif; color: #000; font-size: 12px; }
.Style4 {font-family: Arial, Helvetica, sans-serif; color: #99cc00; font-size: 12px; font-weight: bold; }
.Style2 {font-family: Arial, Helvetica, sans-serif; color: #000; font-size: 11px; }
.Style3 {font-family: Helvetica, Tahoma,Sans-serif; color: #000; font-size: 26px; }
.Style18 {font-family: Arial, Helvetica, sans-serif; color: #000; font-size: 16px; font-weight: bold; }
.Style19 {font-family: Arial, Helvetica, sans-serif; color: #000; font-size: 14px; font-weight: bold; }
.Style5 {font-family: Helvetica, Tahoma,Sans-serif; color: #ACB0B6; font-size: 10px; }
.Style7 {font-family: Helvetica, Tahoma,Sans-serif; color: #000; font-size: 12px }
.Style9 {font-family: Helvetica, Tahoma,Sans-serif; color: #cccccc; font-size: 14px; font-style: italic; }
.Style6 {font-family: Helvetica, Tahoma,Sans-serif; color: #666666; font-size: 12px; }
.Style10 {font-family: Helvetica, Tahoma,Sans-serif; color: #fff; font-size: 16px; font-weight: bold; }
.Style11 {font-family: Helvetica, Tahoma,Sans-serif; color: #fff; font-size: 18px; }
.Style12 {font-family: Helvetica, Tahoma,Sans-serif; color: #fff; font-size: 14px; font-weight: bold; }
.Style23{font-family: Helvetica, Tahoma,Sans-serif; color: #fff; font-size: 12px; }
.Style12 {font-family: Arial, Helvetica, sans-serif; color: #fff; font-size: 13px; font-weight: bold; }
.Style17 {font-family: Arial, Helvetica, sans-serif; color: #CCCCCC; font-size: 10px; }
.Style16 {font-family: Arial, Helvetica, sans-serif; color: #CCCCCC; font-size: 12px; }
.Style26 {font-family: Arial, Helvetica, sans-serif; color: #ACB0B6; font-size: 20px; }
.Style20 {font-family: Arial, Helvetica, sans-serif; color: #99cc00; font-size: 16px; font-weight: bold; }
.Style22 {font-family: Arial, Helvetica, sans-serif; color: #99cc00; font-size: 12px; font-weight: bold; }
.Style23 {font-family: Arial, Helvetica, sans-serif; color: #99cc00; font-size: 14px; font-weight: bold; }
.Style25 {font-family: Arial, Helvetica, sans-serif; color: #99cc00; font-size: 10px; font-weight: bold; }
.Style24 {font-family: Arial, Helvetica, sans-serif; color: #99cc00; font-size: 26px; }
.Style30 {font-family: Arial, Helvetica, sans-serif; color: #346633; font-size: 14px; font-weight: bold; }
.Style31 {font-family: Arial, Helvetica, sans-serif; color: #346633; font-size: 12px; font-weight: bold; }
.Style32 {font-family: Arial, Helvetica, sans-serif; color: #346633; font-size: 10px; font-weight: bold; }
.Style40{font-family: Arial, Helvetica, sans-serif; color: #99cc00; font-size: 12px; }
.on {font-size: 12px;font-weight:bold; }

//*Fin CSS*//

Oups Petit oubli :
ci-dessous la capture d'écran avec la css actuelle : comme vous pouvez le voir les div "header" et "titre" restent alignées à gauche. Ainsi que la div "produit" qui est artificiellement centrée avec une marge en % (margin-left:15.5%).
Merci
Bye
Zedbar

Hello,

Voici un exemple simple:

<!doctype html>
<html lang="fr">
<head>
  <title>Exemple: site largeur fixe centré, en-tête avec fond sur toute la largeur</title>
  <style>
  #header {background: #FAA;}
  #header > .inner-block {width: 980px; margin: 0 auto; background: #FCC;}
  #main {width: 980px; margin: 0 auto; background: #AFA;}
  </style>
</head>
<body>
<div id="header">
  <div class="inner-block">
    Contenu de l'en-tête.
  </div>
</div><!--#header-->
<div id="main">
  Contenu principal
</div><!--#main-->
</body>
</html>

Pour avoir un bloc sur toute la largeur disponible il suffit d'utiliser un élément dont le rendu par défaut dans les navigateurs est display:block (par exemple DIV, P, BLOCKQUOTE ou autre... pour de la mise en page un DIV est indiqué)... et de ne pas lui assigner de largeur (il reste donc en width:auto, qui est la valeur par défaut). C'est le cas ici pour le bloc #header.

Ensuite si tu veux un contenu de largeur fixe et centré horizontalement à l'intérieur de l'en-tête, il faut rajouter un autre conteneur, lui donner une largeur explicite, et le centrer grâce à la technique des marges automatiques (on écrit margin: 0 auto; qui est un raccourci pour margin-top: 0; margin-bottom: 0; margin-left: auto; margin-right: auto;).

Pour le conteneur principal, apparemment on a juste besoin d'un bloc de largeur fixe et lui aussi centré horizontalement.

Pour information, la technique des marges automatiques permet aussi d'aligner un bloc à gauche ou à droite. On pourra tester, avec un bloc de largeur fixe (et inférieure à l'espace disponible dans le conteneur) les combinaisons suivantes:
- margin-left: 0; margin-right: auto;
- margin-left: auto; margin-right: 0;
- margin-left: auto; margin-right: auto;
Modifié par Florent V. (14 Nov 2010 - 16:09)

Merci. Cela fonctionne très bien sous firefox mais avec IE & Safari (j'ai testé avec plusieurs résolutions), il reste une petite marge (de l'ordre de 5 px) à droite, as-tu idée ?

Merci.

Zedbar1

Il faut sans doute remettre à zéro les marges et padding par défaut de l'élément body:

body {margin: 0; padding: 0;}

Autrement, pas de raison que #header ne prenne toute la place disponible.

Pour info, la plupart des navigateurs proposent des outils pour développeur qui permettent d'inspecter le code tel qu'il est interprété par le navigateur. Il y a les outils pour développeur d'IE8, Web Inspector dans Safari et Chrome, ou encore Firebug pour Firefox (pour ce dernier c'est une extension à installer). Apprendre à se servir de ces outils est une des meilleures choses qu'on puisse faire quand on apprend HTML, CSS et JavaScript.

À remarquer aussi qu'à écrire chaque règle CSS sur une seule ligne rend le CSS quasiment illisible. Il est plus facile de lire (et de maintenir) ceci :

html, body {
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0px;
  align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}

que cela :

html,
body {width:100%;height:100%;margin-left:auto;margin-right:auto;margin-top:0px;align:center;font-family: Arial, Helvetica, sans-serif;font-size:12px; }

Un code indenté et un minimum aéré n'est-il pas plus agréable à lire, surtout quand on y décèle plus facilement des erreurs (comme la propriété align, qui n'existe pas), ainsi que les défauts de conception CSS (comme les marges automatiques appliquées à des éléments dont la largeur est de 100 %) ?

Certes Victor, mais pour moi qui ait commencé le "développement" web par flash, je trouve illisible mais aussi fastidieux le classement vertical. C'est plus une feuille de style mais un livre de style !
Je dois reconnaitre qu'en revanche pour la page html sans codage indenté c'est vite le bordel.
Lors de ma prochaine demande, j'essaierais de rendre une meilleure copie Merci de tes conseils !

Une question me vient du coup : sur la base d'un codage sans erreur ( ce qui n'est pas encore mon cas je te l'accorde) les navigateurs lisent-ils plus rapidement un codage indenté qu'un codage horizontal ?

Zedbar1 a écrit :
les navigateurs lisent-ils plus rapidement un codage indenté qu'un codage horizontal ?

Non, strictement aucun impact. C'est une question de convention de codage (quand on bosse à plusieurs ou que le code peut être repris par d'autres). Les deux modèles existent: bloc de déclarations sur une seule ligne (comme dans ton exemple), ou chaque déclaration sur une ligne propre (comme conseillé par Victor). Je n'ai pas fait de sondage mais à vue de nez je dirais que le premier modèle à 5-20% des suffrages, et le second rafle le reste.

Florent: Ça dépend des régions, en Asie ils sont plutôt friands des règles sur une seule ligne (à 90%).