28106 sujets

CSS et mise en forme, CSS3

Bonjour,

Je souhaiterais élargir la zone d'affichage de mon site, c'est à dire diminuer la largeur des bandes oranges à droite et à gauche pour avoir plus de place utile au milieu:
http://www.bobdylan-comewritersandcritics.com/

J'ai besoin d'aide car je ne suis pas très fort en .css, et la personne qui a conçu le site a maintenant changé d'activité;
j'ai pensé augmenter la taille du width dans le wrapper, en le passant de 1152px à 1500.
Est-ce là ce qu'il faut faire, et que faut-il corriger aussi pour ne pas avoir de décalage dans l'affichage comme ce que j'obtiens?

Merci de votre aide...
upload/1582023747-78849-width1152.jpg
upload/1582023516-78849-width1500.jpg

ci dessous le .css:

@charset "UTF-8";
/* CSS Document */


html, body {
max-height:100%;
}

body {
background-color: #d69158;
font-family:Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
width: 100%;
z-index: 5;

}

#bg-header {
background-color: #464646;
height: 100px;
min-width:100%;
margin: 0 auto;
position: relative;
width: 1152px;
z-index: 10;
}

.wrapper{
display:block;
width:1500px;
box-shadow: 0px 5px 10px 0px #707173;
position:relative;
z-index:15;
margin-left:auto;
margin-right:auto;
height:1000px;

}

#header {
height: 100px;
width: 1152px;
position: relative;
background-color:#464646;
z-index:20;
margin-left: auto;
margin-right: auto;
}

#logo{
margin-left:auto;
margin-right:auto;
}

#navigation {
background-color:#c96311;
height: 54px;
width: 1152px;
padding-top:8px;
z-index:2;
margin-left: auto;
margin-right: auto;
font: Arial,Helvetica,sans-serif;
}

#menu{
height: 54px;
width: 920px;
float:left;
margin-left:-20px;
}
.search {
height: 54px;
width: 200px;
float:left;
}

#bg-navigation {
background-color: #c96311;
height: 62px;
min-width:100%;
margin: 0 auto;
position: relative;
z-index: 10;
}

#menu li {
list-style-type:none;
display:inline;
margin: 2px;
padding-left:8px;
font-family:Arial, Helvetica, sans-serif;
}

#menu li a {
text-decoration:none;
margin-top: 10px;
font-size:16px;
font-variant:small-caps;
color:#FFF;
font:Arial, Helvetica, sans-serif;
}

#menu li a:hover {
text-decoration:none;
margin-top: 10px;
font-size:16px;
color:#464646;
}

#contenu{
width:1152px;
background-color:#fff8e1;
z-index:5;
height:1000px;

}

a{
text-decoration:none;
}

table a{
color:#c3c4bc;
}

.colonne-gauche a{
color:#c3c4bc;
}

.textes{
margin:20px;
width:1112px;
font-family: Arial,Helvetica,sans-serif;
font-size: 14px;
color:#464646;
line-height:14px;
}



#footer{
width:1152px;
height:120px;
background-color:#464646;
float:left;
}

.colonne_gauche{
display:block;
width:250px;
padding:5px;
float:left;
background-color:#464646;
color:#c3c4bc;
overflow:auto;
height:1100px;
margin-top:-32px;

}

.colonne-gauche a{
color:#c3c4bc;
}

.colonne_droite{
display:block;
width:872px;
float:left;
background-color:#fff8e1;
height:1001px;
padding:10px;
overflow:visible;
margin-top:-32px;
}

.colonne_droite a{
color:#00F;
}

.bottom{
display:block;
margin-top:0px;
height:100%;
}
Modifié par michpom (18 Feb 2020 - 12:03)
Bonjour,

Il suffit de mettre 1500px sur ton wrapper en effet. Cependant, la plupart de ses enfants ont une taille fixe, il faut l'enlever afin qu'ils prennent naturellement la largeur de leur parent. De ce fait, lorsque tu donneras une nouvelle largeur à ton wrapper, les enfants en hériteront automatiquement, d'où l'utilité d'avoir un wrapper Smiley smile

Tu peux marquer ceci dans ton css :

#wrapper {
   width: 1500px;
}


Et enlever le width: 1152px sur #contenu, .textes. Pour le #footer il faut mettre un width: 100% vu que celui-ci est en float.

Pour la bannière, sois tu retravailles la structure ou l'image afin de pouvoir l'afficher en full largeur (en background-image par exemple) ou bien tu la centre :

img#bibliotheque {
   display: block; 
   margin: auto;
}
Merci de ta réponse, mais je ne m'en sors pas...
J'ai modifié le wrapper, enlevé le width du #contenu, passé le #footer width à 100%,
mais j'ai toujours le décalage...
Faut-il toucher aux colonnes droite et gauche?

upload/1582026117-78849-width1500-modif-1.jpg


.wrapper{
display:block;
width:1500px;
box-shadow: 0px 5px 10px 0px #707173;
position:relative;
z-index:15;
margin-left:auto;
margin-right:auto;
height:1000px;

.textes{
margin:20px;
width:1112px;
font-family: Arial,Helvetica,sans-serif;
font-size: 14px;
color:#464646;
line-height:14px;

#footer{
width:100%;
Administrateur
Bonjour,

je me suis servi de Firefox pour modifier "sur place" les CSS de cette page et dans les Devtools (F12) de son onglet Modifications pour c/c ici ce que j'ai modifié.

/* Feuille de style intégrée #0 |  http://www.bobdylan-comewritersandcritics.com/  */

body {
  /* z-index: 5; */
}

#bg-header {
  /* height: 100px; */
  /* z-index: 10; */
  min-height: 100px;
}

#header {
  /* height: 100px; */
  /* width: 1152px; */
  /* z-index: 2; */
  max-width: 1152px;
}

#bg-navigation {
  /* height: 62px; */
  /* min-width: 100%; */
  min-height: 62px;
}

#navigation {
  /* height: 54px; */
  /* width: 1152px; */
  max-width: 1152px;
}

#menu li a {
  /* margin-top: 10px; */
  padding: calc(1em + 10px) 0 1em 0;
}

#wrapper {
  /* width: 1152px; */
  max-width: 1500px;
}

#contenu {
  /* width: 1152px; */
  /* z-index: 5; */
}

#footer {
  /* width: 1152px; */
  /* float: left; */
  max-width: 1500px;
}

/* Élément |  http://www.bobdylan-comewritersandcritics.com/  */

#contenu > map:nth-child(3) {
  width: 100%;
}

/* Élément |  http://www.bobdylan-comewritersandcritics.com/  */

#bibliotheque {
  height: auto;
  margin: 0 auto;
  display: block;
}

/* Élément |  http://www.bobdylan-comewritersandcritics.com/  */

h1.textes {
  margin: auto;
}

/* Élément |  http://www.bobdylan-comewritersandcritics.com/  */

#footer > p:nth-child(2) {
  margin-top: 0;
}

Ce qui est /* commenté */ est des choses que j'ai désactivé en décochant dans l'Inspecteur / Règles les déclarations que je voulais supprimer.
Il te faudra toi aussi les désactiver ou bien les commenter dans ta CSS… Pas super pratique j'en conviens.
Pour appliquer les nouvelles règles, tu peux aller dans l'onglet Éditeur de styles, cliquer sur le + pour créer une nouvelle feuille de style et y c/c mon code.
Tu rafraîchis, tout a disparu.
Si tu veux te servir de l'onglet Modifications : tu fermes les Devtools tu rouvres il ne sait plus ce que tu avais modifié (mais c'est toujours actif jusqu'au prochain rafraîchissement F5).

Sinon dans l'idée :
- j'aime bien la technique de centrage de mon ancienne collègue à base de margin: 0 auto; pour centrer et max-width: 1500px; (plutôt que width, c'est plus fluide)
- les z-index sont inutiles ici, enfin je pense.
- pas besoin d'enquiller les height en px. Un seul sur l'élément suffit, pas besoin sur son parent (et pense à virer ça le jour où tu seras plus à l'aise avec les CSS. Mieux vaut un attribut height sur l'image ou rajouter du padding sur le contenu (les liens de la navigation par exemple) que d'utiliser height. Mauvaise pratique).
- gros souci vu que tu utilises un map area : c'est pas du tout responsive, il faut indiquer des zones cliquables en pixel donc t'es un peu coincé.
Là j'ai agrandi l'image en respectant les proportions largeur / hauteur mais tu vas voir que la zone cliquable en haut à droite est toujours au même endroit alors que visuellement ce n'est plus "dessous".
Soit tu fais autrement (SVG ?) soit y a une technique de ouf à base de CSS3 transform: scale() (perso je l'ai découverte par hasard pour intégrer la carte de France de https://www.vigicrues.gouv.fr ce qui leur a évité quelques semaines de boulot à refaire un des éléments les plus importants du site Smiley prodigy ) mais c'est pas exactement simple quand le navigateur à l'inspection te dit autre chose que ce que tu vois Smiley fou

Le dernier sélecteur c'est un paragraphe vide dans le pied de page qui ne devrait pas être là. Mieux vaudrait coller une marge sur un élément
upload/1582282087-78849-modif-css-felipe.jpg Merci Felipe pour cette modif; il y a toutefois un souci avec les onglets de navigation quand je l'applique,qui sont alignés verticalement... Je vois aussi que là les bandes latérales ont totalement disparu, et que la colonne de droite, par le fait bien plus large, est aussi bien plus vide, car le texte est prévu pour une zone plus étroite...
Tout ça peut sans doute se modifier, mais le site est énorme, et je ne me sens pas de le faire, d'autant plus qu'une automatisation de la tâche semble impossible...
En résumé, je crois que je vais rester comme ça.
Modifié par michpom (21 Feb 2020 - 11:48)
...sauf s'il est possible de diminuer la largeur des bandes latérales sans les supprimer et de récupérer les onglets de navigation à leur place...

-pour la zone clickable dont tu parles, elle est uniquement sur la page d'accueil: je l'y ai mise ('Info') car sur des petits écrans les visiteurs ne voyaient pas ce qu'il y a en bas de page (la carte) ...
Modifié par michpom (21 Feb 2020 - 17:31)