Oltana.net

Informatique Créatrice => Webmastering => Discussion démarrée par: Norore le 08 Novembre 2007 à 21:41:44



Titre: [CSS] 3 colonnes extensibles ?
Posté par: Norore le 08 Novembre 2007 à 21:41:44
Hello, je suis en train de coder un design web que je veux extensible (pour tous donc ;) !) mais le problème c'est que j'ai 3 colonnes :
1 menu à gauche d'une largeur de 200px ;
1 menu à droite d'une largeur de 200px ;
1 colonne centrale pour le contenu extensible en largeur.

Mon souci vient du fait que si le contenu est plus court que les menus le contenu ne s'étend pas jusqu'à 1px au-dessus du pied de page. Et inversement pour les menus.

Comment faire pour que les 3 colonnes s'arrêtent bien à 1px du pied de page ? J'ai essayé avec les margin: mais ça n'a pas l'air d'être ça :/ !

Merci d'avance :): !


Titre:
Posté par: Corven le 10 Novembre 2007 à 08:53:59
Code:
    <div class="header">
<!-- Insèrer le code du header, possibilité de rajouté une barre de menu horizontale -->
     </div>

     <div class="menu_left">
<!-- Insertion du menu gauche -->
     </div>

     <div class="menu_right">
<!-- Insertion du menu droite -->
     </div>

     <div class="content">
<!-- Insertion du contenu du site -->
     </div>

     <div class="footer">
<!-- Insertion du code du footer -->
     </div>

Code:
*
{
     margin: 0; /* Initialise les marges extérieures à 0 */
     padding: 0; /* Initialise les marges intérieures à 0 */
     border: 0; /* Initialise les bordures à 0 */
}

.header {
     width: 100%;
     height: 50px;
     background: red;
}

.menu_left {
     width: 20%;
     float: left;
     height: 150px; /*à enlever une fois que du contenu est ajouté à la colonne*/
     background: green;
}

.menu_right {
     width: 20%;
     float: right;
     height: 150px; /*à enlever une fois que du contenu est ajouté à la colonne*/
     background: green;
}

.content {
     width: 60%;
     float: left;
     height: 150px; /*à enlever une fois que du contenu est ajouté dans ce bloc*/
     background: yellow;
}

.footer {
     width: 100%;
     clear: both;
     height: 50px; /*à enlever une fois que du contenu est ajouté à ce bloc*/
     background: blue;
}




MISES EN GARDE :
1°) Si tu rajoutes des padding ou margin aux colonne left/right/content tu auras une barre horizontale qui apparaitra.
2°) Si tu veux faire des espaces entre ces blocs, il te faudra rajouter un bloc dans ces derniers, ne pas fixer de largeur, ni de hauteur (donc tout laisser en auto) et à ce moment appliquer des margin (voire des padding, à tester) à ces nouveaux blocs encastrés et normalement tu ne devrais pas avoir d'ascenseur horizontal.
3°) Tu peux essayer de fixer la largeur des colonnes (à 200px donc) et de mettre le content en auto et voir ce que ça fait, j'ai pas essayé ou si je l'ai fait me rappelle plus ce que ça fait.



Est ce que tu as un aperçu en ligne de ton problème ?
C'est le fond du contenu que tu souhaites voir descendre à 1px du footer quand ce bloc de contenu est plus petit que les colonnes ?


Titre:
Posté par: Corven le 10 Novembre 2007 à 12:46:39
Regarde le code de ce site : http://www.fotopassion.fr/index.php/ (http://www.fotopassion.fr/index.php/)

colonne gauche = sidebar
centrale = content
bloc conteneur = main

La colonne de gauche est à largeur fixe et le contenu à largeur variable.
Utilisation de margin positives sur le content et de margin négative sur le main pour éviter l'ascenceur horizontal.
Tu trouveras le code dans le css en faisant ctrl+f et en recherchant les termes "sidebar" "content" et "main" qui sont tous à la suite.
 :)):


Titre:
Posté par: Norore le 10 Novembre 2007 à 13:10:47
C'est pas ça que je cherche ^^ !

Voilà le design du site pour l'instant :
http://concordia.olympe-network.com/index.php (http://concordia.olympe-network.com/index.php)

Ce que je veux c'est pousser le bas des menus jusqu'à 1px au-dessus du pied de page et pareil pour le milieu si celui-ci est plus court que les menus :)): !


Titre:
Posté par: Corven le 10 Novembre 2007 à 13:44:48
Tu englobes colonnes et contenu dans un container sur lequel tu appliques un background avec ton png transparent, et tu enlèves le fond des colonnes et content.  :):


Titre:
Posté par: Norore le 10 Novembre 2007 à 14:58:14
Citation de: "Corven"
Tu englobes colonnes et contenu dans un container sur lequel tu appliques un background avec ton png transparent, et tu enlèves le fond des colonnes et content.  :):


Bah oui mais je veux avoir un vide d'1 px :o !


Titre:
Posté par: Marmotte le 10 Novembre 2007 à 16:05:40
Citation de: "Corven"
un background avec ton png transparent
Rien de pire pour IE6 :(


Titre:
Posté par: Norore le 10 Novembre 2007 à 16:22:12
Citation de: "Marmotte"
Citation de: "Corven"
un background avec ton png transparent
Rien de pire pour IE6 :(


IE 7 est sorti et il n'a pas l'air buggué. Pour une fois qu'il est à peu près compatible avec les normes du W3C tu devrais te jeter dessus ^^ !


Titre:
Posté par: Corven le 10 Novembre 2007 à 18:57:00
Ouai sauf que l'utilisation du PNG n'est pas encore conseillé car le pourcentage  d'utilisateur sous IE7 est encore beaucoup trop faible.
Je t'ai dis de mettre du PNG car tu en utilisais, mais sinon je te l'aurais déconseillé.

Si tu veux avoir un décalage de 1px entre le footer et les colonnes d'au dessus, tu appliques un padding ou margin au footer et puis voilà, non ?


Titre:
Posté par: Norore le 10 Novembre 2007 à 20:17:09
Citation de: "Corven"
Si tu veux avoir un décalage de 1px entre le footer et les colonnes d'au dessus, tu appliques un padding ou margin au footer et puis voilà, non ?


Code:
/**---------------------------------
Zone du pied de page affichant les
copyright.
---------------------------------**/
#pied_de_page
{
clear: both;
margin: 0px;
margin-top: -11px;
line-height: 18px;
background: url(img/contenu.png) repeat;
text-align: center;
}

#pied_de_page p
{
font-family: "Lucida Console", Arial Black, sans serif;
font-size: 12px;
}


Déjà essayé :oops: !


Titre:
Posté par: Corven le 10 Novembre 2007 à 21:33:12
Je comprends pas le margin-top à -11px, reprends mon code de base, et essayes avec ça.

Sinon fait moi un croquis sous toshop pour me montrer les blocs et légende le (largeur, margin, padding)
 :)):


Titre:
Posté par: Norore le 10 Novembre 2007 à 21:38:35
Tu ne veux pas plutôt le code en entier :o ?

Et le margin -11px, c'est parce que, pour je ne sais qu'elle raison, le pied de page se colle 12px en dessous :/ !


Titre:
Posté par: Corven le 10 Novembre 2007 à 21:49:38
Le code pour la structure fait pas plus de 15 lignes en HTML donc bon (doctype inclu), si tu reprends ma base ou alors si tu reprends la base du site que je t'ai donné (ce qui correspondrait plus à tes attentes à savoir colonnes latérales fixes et contenu central variable) il ne devrait pas y avoir ce genre de soucis.

Si tu as ce décalage c'est que quelques part ça foire, te faut donc reprendre ça avant de passer à autre chose  :)):