Message d'avertissement

The subscription service is currently unavailable. Please try again later.

Modification de theme "Header" + "Footer" de largeur différente du "Content"

Information importante

En raison d'un grand nombre d'inscriptions de spammers sur notre site, polluant sans relache notre forum, nous suspendons la création de compte via le formulaire de "sign up".

Il est néanmoins toujours possible de devenir adhérent•e en faisant la demande sur cette page, rubrique "Inscription" : https://www.drupal.fr/contact


De plus, le forum est désormais "interdit en écriture". Il n'est plus autorisé d'y écrire un sujet/billet/commentaire.

Pour contacter la communauté, merci de rejoindre le slack "drupalfrance".

Si vous voulez contacter le bureau de l'association, utilisez le formulaire disponible ici, ou envoyez-nous un DM sur twitter.

Bonjour à tous,

Je tente une modification du thème "Basic" pour l'adapter à mes besoins...

Je cherche à avoir un "Header" ainsi qu'un "Footer" en largeur fluide avec un contenu en largeur fixe (1010px).

Ca parait simple mais je n'y arrive pas.

Dans mon layout.css j'ai ce code :

/** Layout
---------------------------------
*  Using a negative margin technique, adapted from ZEN. The page is loaded by this order:

*  1. Header
*  2. Content
*  3. Navigation menus
*  4. Sidebar Left
*  5. Sideabr Right
*
/

  /
   * IEUF Réglage du 'width' sur "1010px"
   /

#page {
width: /
1010px; edit to change the width of the page /
   margin: /
0 auto; remove 'auto' and the width to switch to a fluid width /
}

/** LAYOUT RULES
---------------------------------
  do not change if you're not sure you know what you're doing
/

#content {
  float: left;
  width: 1010px;
  margin-right: -1010px;
  padding: 0;
}
.sidebar {
  float: left;
}
#sidebar-second {
  float: right;
}
#footer {
  float: none;
  clear: both;
}

/ Layout Helpers /

#header, #footer, .mission, .breadcrumb, .node {
  clear: both;
}

/** Sidebars width
---------------------------------
  Changing the width of the sidebars is dead easy, just change the
*  values below corresponding to the sidebar you want to modify.
*  Make sure you keep negative values as negative values.
*  For example, if I want to increase the width of the left sidebar
*  to 300px, I would have to change each '190' to '300'.
/

/
   * IEUF Réglage du 'margin-left (.sidebar-left .center' sur "200px"
   * IEUF Réglage du 'width (#sidebatfirst)' sur "200px"
   * IEUF Réglage du 'margin-right (#sidebatfirst)' sur "-200px"
   /

.two-sidebars .center,
.sidebar-left .center {
  margin-left: 200px;     /
LEFT value /
}
#sidebar-first {
  width: 200px;           /
LEFT value /
    margin-right: -200px;    /
negative LEFT value /
}
.two-sidebars .center,
.sidebar-right .center {
  margin-right: 200px;    /
RIGHT value /
}
#sidebar-second {
  width: 200px;           /
RIGHT value /
}

/** Columns inner
---------------------------------
  You can change the padding inside the columns without changing the
*  width of them by just usinbg the INNER div of each column
/

.inner {
    padding: 0px;
}

/** Navigation styles
---------------------------------
  The navigation is loaded after the content, so we need to make space
*  for it, equal to its height, so if you change the height of the navigation,
*  remember to adapt the margin top of the content and sidebars.
/

#navigation {
  float: left;
  margin-left: 0;
  margin-right: -100%;
  padding: 0;
  width: 100%;
}
.with-navigation #content,
.with-navigation .sidebar {
  margin-top: 40px;        /
Navigation Height /
}
#navigation {
  height: 40px;            /
Navigation Height */
}

J'ai "commenté" les indications de taille de #page puis j'ai tenté plusieurs choses sur #content mais rien n'y a fait...
Le code tel qu'il est là me donne une largeur "float" sur la page et m'aligne à gauche le "content" qui lui a bien une largeur de 1010px. Si je met le "float" du #content sur "center", j'ai ma sidebar-first qui ce décale vers le bas...

Merci d'avance de votre aide,
Cordialement,

Thib

Forum : 
Version de Drupal :