17 Utilisateur(s) en ligne

Oltana.net 17 Juillet 2018 à 08:10:05 *
Bienvenue, Invité. Veuillez vous connecter ou vous inscrire.


Connexion avec identifiant et mot de passe
Nouvelles:
Bascule sur SMF faite!
 
 
Accueil Aide Rechercher
Pages: [1]   Bas de page
Imprimer
Auteur Fil de discussion: [CSS] 3 colonnes extensibles ?  (Lu 6530 fois)
0 Membres et 1 Invité sur ce fil de discussion.
Norore
Animateurs
****
Hors ligne Hors ligne

Sexe: Femme
Messages: 369



Voir le profil WWW
« le: 08 Novembre 2007 à 21:41:44 »

Hello, je suis en train de coder un design web que je veux extensible (pour tous donc Clin d'oeil !) 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 :): !
Journalisée

Citation de: Secondat de Montesquieu
Je me croirais le plus heureux des mortels si je pouvais faire que les hommes puissent se passer de leur préjugé.
Corven
Administrateur
*****
Hors ligne Hors ligne

Sexe: Homme
Messages: 1632



Voir le profil WWW
« Répondre #1 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 ?
Journalisée

[size=84]Intel E6600 @ 2,4ghz - Asus P5B Deluxe Wifi/AP - Asus 7600GT Silent/2DHT - G.Skill Extreme Serie PK 4*1go PC6400 - Hitachi T7K250 250go & 160go - Seasonic S12 600Watts - Noctua NH-U12F + 2* Noctua NF-S12 1200 - Nec 3520A - Gigabyte Triton Black - 2* Viewsonic VX2025WM - Logitech Media Keyboard Elite - Logitech G5 - Koss UR40 - Onduleur MGE 675VA // MACBOOK PRO 2008 @2,4ghz[/size]
Corven
Administrateur
*****
Hors ligne Hors ligne

Sexe: Homme
Messages: 1632



Voir le profil WWW
« Répondre #2 le: 10 Novembre 2007 à 12:46:39 »

Regarde le code de ce site : 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.
 :)):
Journalisée

[size=84]Intel E6600 @ 2,4ghz - Asus P5B Deluxe Wifi/AP - Asus 7600GT Silent/2DHT - G.Skill Extreme Serie PK 4*1go PC6400 - Hitachi T7K250 250go & 160go - Seasonic S12 600Watts - Noctua NH-U12F + 2* Noctua NF-S12 1200 - Nec 3520A - Gigabyte Triton Black - 2* Viewsonic VX2025WM - Logitech Media Keyboard Elite - Logitech G5 - Koss UR40 - Onduleur MGE 675VA // MACBOOK PRO 2008 @2,4ghz[/size]
Norore
Animateurs
****
Hors ligne Hors ligne

Sexe: Femme
Messages: 369



Voir le profil WWW
« Répondre #3 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

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 :)): !
Journalisée

Citation de: Secondat de Montesquieu
Je me croirais le plus heureux des mortels si je pouvais faire que les hommes puissent se passer de leur préjugé.
Corven
Administrateur
*****
Hors ligne Hors ligne

Sexe: Homme
Messages: 1632



Voir le profil WWW
« Répondre #4 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.  :):
Journalisée

[size=84]Intel E6600 @ 2,4ghz - Asus P5B Deluxe Wifi/AP - Asus 7600GT Silent/2DHT - G.Skill Extreme Serie PK 4*1go PC6400 - Hitachi T7K250 250go & 160go - Seasonic S12 600Watts - Noctua NH-U12F + 2* Noctua NF-S12 1200 - Nec 3520A - Gigabyte Triton Black - 2* Viewsonic VX2025WM - Logitech Media Keyboard Elite - Logitech G5 - Koss UR40 - Onduleur MGE 675VA // MACBOOK PRO 2008 @2,4ghz[/size]
Norore
Animateurs
****
Hors ligne Hors ligne

Sexe: Femme
Messages: 369



Voir le profil WWW
« Répondre #5 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 Choqu&eacute; !
Journalisée

Citation de: Secondat de Montesquieu
Je me croirais le plus heureux des mortels si je pouvais faire que les hommes puissent se passer de leur préjugé.
Marmotte
Modérateur Global
*****
Hors ligne Hors ligne

Sexe: Homme
Messages: 554



Voir le profil WWW
« Répondre #6 le: 10 Novembre 2007 à 16:05:40 »

Citation de: "Corven"
un background avec ton png transparent
Rien de pire pour IE6 Triste
Journalisée

Norore
Animateurs
****
Hors ligne Hors ligne

Sexe: Femme
Messages: 369



Voir le profil WWW
« Répondre #7 le: 10 Novembre 2007 à 16:22:12 »

Citation de: "Marmotte"
Citation de: "Corven"
un background avec ton png transparent
Rien de pire pour IE6 Triste


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 ^^ !
Journalisée

Citation de: Secondat de Montesquieu
Je me croirais le plus heureux des mortels si je pouvais faire que les hommes puissent se passer de leur préjugé.
Corven
Administrateur
*****
Hors ligne Hors ligne

Sexe: Homme
Messages: 1632



Voir le profil WWW
« Répondre #8 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 ?
Journalisée

[size=84]Intel E6600 @ 2,4ghz - Asus P5B Deluxe Wifi/AP - Asus 7600GT Silent/2DHT - G.Skill Extreme Serie PK 4*1go PC6400 - Hitachi T7K250 250go & 160go - Seasonic S12 600Watts - Noctua NH-U12F + 2* Noctua NF-S12 1200 - Nec 3520A - Gigabyte Triton Black - 2* Viewsonic VX2025WM - Logitech Media Keyboard Elite - Logitech G5 - Koss UR40 - Onduleur MGE 675VA // MACBOOK PRO 2008 @2,4ghz[/size]
Norore
Animateurs
****
Hors ligne Hors ligne

Sexe: Femme
Messages: 369



Voir le profil WWW
« Répondre #9 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: !
Journalisée

Citation de: Secondat de Montesquieu
Je me croirais le plus heureux des mortels si je pouvais faire que les hommes puissent se passer de leur préjugé.
Corven
Administrateur
*****
Hors ligne Hors ligne

Sexe: Homme
Messages: 1632



Voir le profil WWW
« Répondre #10 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)
 :)):
Journalisée

[size=84]Intel E6600 @ 2,4ghz - Asus P5B Deluxe Wifi/AP - Asus 7600GT Silent/2DHT - G.Skill Extreme Serie PK 4*1go PC6400 - Hitachi T7K250 250go & 160go - Seasonic S12 600Watts - Noctua NH-U12F + 2* Noctua NF-S12 1200 - Nec 3520A - Gigabyte Triton Black - 2* Viewsonic VX2025WM - Logitech Media Keyboard Elite - Logitech G5 - Koss UR40 - Onduleur MGE 675VA // MACBOOK PRO 2008 @2,4ghz[/size]
Norore
Animateurs
****
Hors ligne Hors ligne

Sexe: Femme
Messages: 369



Voir le profil WWW
« Répondre #11 le: 10 Novembre 2007 à 21:38:35 »

Tu ne veux pas plutôt le code en entier Choqu&eacute; ?

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

Citation de: Secondat de Montesquieu
Je me croirais le plus heureux des mortels si je pouvais faire que les hommes puissent se passer de leur préjugé.
Corven
Administrateur
*****
Hors ligne Hors ligne

Sexe: Homme
Messages: 1632



Voir le profil WWW
« Répondre #12 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  :)):
Journalisée

[size=84]Intel E6600 @ 2,4ghz - Asus P5B Deluxe Wifi/AP - Asus 7600GT Silent/2DHT - G.Skill Extreme Serie PK 4*1go PC6400 - Hitachi T7K250 250go & 160go - Seasonic S12 600Watts - Noctua NH-U12F + 2* Noctua NF-S12 1200 - Nec 3520A - Gigabyte Triton Black - 2* Viewsonic VX2025WM - Logitech Media Keyboard Elite - Logitech G5 - Koss UR40 - Onduleur MGE 675VA // MACBOOK PRO 2008 @2,4ghz[/size]
Pages: [1]   Haut de page
Imprimer
 
Aller à:  

Powered by SMF 1.1.21 | SMF © 2015, Simple Machines