Fork me on GitHub




(1) 2 »


Paul
Demande docteur ès CSS
#1
Semi pro
Inscrit: 27/08/2003 11:03
De Perpignan
Messages: 1255
Salut, je suis en train de créer un thème pour mon futur site... mais je n'ai pas voulu faire 3 colonnes comme habituellement...

voir ici l'image

le problème c'est que les blocs du bas ne chasse pas, donc ça donne ça :

voir ici la 2ème image

Ma question est simplement : est ce qu'une disposition comme celle ci est possible avec un contenu dynamique ??? Sinon je passerai le haut de la colonne de gauche à la même hauteur que la colonne de droite...

Le code des colonnes :



body
{
    color: #003366;
    font-size: 83%;
    font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans", Tahoma, Arial, 'Helvetica Neue', Helvetica, Geneva, Lucida, sans-serif;
    margin: 0;
    text-align: center;    
    background-color:#003366;
}
#conteneur {
width:780px;

background-color:#FFFFFF;
}
#page
    {
    font-size: 11px;
    font-family: Verdana, Geneva, Arial, sans-serif;
    line-height: 14px;
    background-color: #FFFFFF;
    text-align: left;
    visibility: visible;
    margin-top: 10px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    width: 780px;
    border-right-width: 20px;
    border-right-style: solid;
    border-right-color: #000066;
    border-bottom-color: #000066;
    border-top-color: #000066;
    border-left-color: #000066;
    margin-bottom: 0;
    border-left-width: 10px;
    border-left-style: solid;
    border-top-width: 10px;
    border-top-style: solid;
    border-bottom-width: 20px;
    border-bottom-style: solid;
    }

#header 
    {
    position: relative;
    height: 93px;
    width: 75%;
    background-image: url(images/theme_01.gif);
    float: left; 
    }


#barremenu 
    {
    position: relative;
    height: 23px;
    width: 630px;
    float: left;
    text-align: right;
    background-color: #FFFFFF;
    }


#righcolumn
    {
    background-color: #FFFFFF;
    
    
    width: 150px;
    float: right;
    
    }
    
    #leftcolumn
    {
    float: left;
    background-color: #FFFFFF;
    position: relative;
    padding: 10px;
    
    margin-right: 5px;
    width: 150px;
    }

#centre {
float: left;
background-color:#9999CC;
margin-left: 160px;
margin-right: 160px;
}

#barreombre 
    {
    position: relative;
    height: 12px;
    width: 627px;
    float: left;
    text-align: right;
    background-image: url(images/ombre.gif);
    background-repeat: repeat-x;

#pied
    {
    background-color: #FF9900;
    position: relative;
    clear: both;
    border-right-width: 3px;
    border-bottom-width: 3px;
    border-left-width: 3px;
    height: 15px;
    text-align: center;
    vertical-align: middle;
    }
    
    }



Le placement dans le thème :

Citation :
<div id="righcolumn">
<!-- Start right blocks loop -->
<{foreach item=block from=$xoops_rblocks}>
<{include file="xhtml/theme_blockright.html"}>
<{/foreach}>
<!-- End right blocks loop -->
</div>
<div id="barreombre"> </div>

<div id="gauche">
<!-- Start left blocks loop -->
<{foreach item=block from=$xoops_lblocks}>
<{include file="xhtml/theme_blockleft.html"}>
<{/foreach}>
<!-- End left blocks loop -->
</div>


<div id ="voiture"><img src="<{$xoops_imageurl}>images/voiture.jpg" alt="" />
<div id="content"><{$xoops_contents}></div>

<!-- Start center-center blocks loop -->
<{foreach item=block from=$xoops_ccblocks}>
<{include file="xhtml/theme_blockcenter_c.html"}>
<{/foreach}>
<!-- End center-center blocks loop -->
</div>

<div id="pied"><{$xoops_footer}>
</div>
</div>


Et encore là c'est la version sur mozilla, sur IE ça part en live total

Posté le : 27/04/2006 20:34

Edité par winsion sur 27/04/2006 21:19:52
Edité par winsion sur 29/04/2006 05:59:39
Edité par winsion sur 29/04/2006 06:12:42
Edité par winsion sur 29/04/2006 06:19:37
Edité par winsion sur 29/04/2006 08:36:58
Edité par winsion sur 29/04/2006 08:39:24

Si tu frappes sur ta tête avec une cruche et que ça sonne creux, n'en déduis pas forcément que c'est la cruche qui est vide. ...
Partager Twitter Partagez cette article sur GG+
Rapport Haut
Christian
Re: Demande docteur ès CSS
#2
Xoops accro
Inscrit: 04/02/2003 01:54
De Le Mans
Messages: 12273
C'est un problème bien connu pour ceux qui se lancent dans cette aventure et pour lequel des solutions existent :

Les meilleurs articles se trouvent en général sur alistapart, où tu trouveras différentes solutions.

Des propres tout en css, sans artifice avec les marges négatives, d'autres avec une image que l'on va étendre et qui contient les couleurs de chacune des colonnes, et d'autres solutions avec du javascript

Les mots clés pour google : css three column equal heigt

Posté le : 27/04/2006 21:01

Vous connaissez la recherche
Solutions professionnelles Xoops
Partager Twitter Partagez cette article sur GG+
Rapport Haut
PinMaster
Re: Demande docteur ès CSS
#3
Supporter Xoops
Inscrit: 02/10/2004 14:09
Messages: 370
Un thème a base de balise DIV ^^
Cool... pour le site d'une asso je me suis inspiré du theme fanfan24 (truc du genre). Et il m'a fallu créer deux fichiers css (un pour IE et l'autre pour firefox). Ce n'est pas encore parfait mais je n'ai pas ton bug

Pour la partie corp du theme :
<div id="entete">
    <div id="entete_gauche"><img src="<{$xoops_url}>/themes/LiPom/logo_lipom.png" alt="" width="194px" border="0" /><img src="<{$xoops_url}>/themes/LiPom/entete_gauche.png" alt="" width="22px" border="0" /></div>
    <div id="entete_droite"><img src="<{$xoops_url}>/themes/LiPom/entete_droite.png" alt="" width="22px" border="0" /></div>
    <div id="entete_centre"><div id="entete_centre_titre">L'association des Ingénieurs<br />de Polytech'Marseille</div></div>
</div>

<div id="corps_page">
    <div id="colonne_gauche">
           <{foreach item=block from=$xoops_lblocks}>
           <div class="blockTitle"><{$block.title}></div>
           <div class="blockContent"><{$block.content}></div>
           <div style="font-size:8px;">&nbsp;</div>
           <{/foreach}>
    </div>
      <{if $xoops_showrblock == 1}>
      <div id="colonne_droite">
        <{foreach item=block from=$xoops_rblocks}>
        <div class="blockTitle"><{$block.title}></div>
        <div class="blockContent"><{$block.content}></div>
        <div style="font-size:8px;">&nbsp;</div>
        <{/foreach}>
      </div>
      <{/if}>
      <div id="<{if $xoops_showlblock == 0 or $xoops_showrblock == 0}>colonne_centreMaxi<{else}>colonne_centre<{/if}>">
        <{if $xoops_showcblock == 1}>
        <div id="colonne_centreCentre">
              <{foreach item=block from=$xoops_ccblocks}>
              <div class="blockTitle"><{$block.title}></div>
              <div class="blockContent"><{$block.content}></div>
              <{/foreach}>    
        </div>
        <div id="colonne_centreGauche">
              <{foreach item=block from=$xoops_clblocks}>
              <div class="blockTitle"><{$block.title}></div>
              <div class="blockContent"><{$block.content}></div>
              <{/foreach}>
        </div>
        <div id="colonne_centreDroite">
              <{foreach item=block from=$xoops_crblocks}>
              <div class="blockTitle"><{$block.title}></div>
              <div class="blockContent"><{$block.content}></div>
              <{/foreach}>
        </div>
        <{/if}>
        <div id="colonne_centreModules"><{$xoops_contents}></div>
    </div>
</div>

<div id="pied_page">L'association des Ingénieurs de Polytech'Marseille est régie par la loi du 1er juillet 1901 et le décret du 16 août 1901<br /><{$xoops_footer}> 
</div>


Pour le css dédié IE :
/* Squellette de la page */
#entete {width: 986px; height: 110px;}
#entete_gauche {width: 216px; float: left;}
#entete_droite {width: 22px; float: right;}
#entete_centre {
    width: auto;
    margin-left: 214px;
    margin-right: 22px;
    background-color: #d6ffff;
    border-bottom: solid 2px; border-bottom-color: #76809C;
    border-top: solid 2px; border-top-color: #76809C;
}
#entete_centre_titre {
    height: 106px;
    font-family: Arial, Courier; font-size: 42px;
    vertical-align: middle;  text-align: center;
    text-shadow: #50669c; color: #16357A;
    overflow: auto;
}

#corps_page {width: 986px; margin-top: 8px;}

#colonne_gauche {float: left; width: 190px;}
#colonne_gauche .blockTitle {
    padding: 6px;
    color: #16357A; background-image: url(./colg_titre.gif);
    font-weight: bold; text-transform: uppercase;
    text-align: center;
}
#colonne_gauche .blockContent {
    margin-left: 17px;
    line-height: 120%;
    background-color: #eaedf4;
    border-left: solid 2px #76809C;
    border-right: solid 2px #76809C;
    border-bottom: solid 2px #76809C;
}

#colonne_droite {float: right; width: 151px;}
#colonne_droite .blockTitle {
    padding: 6px;
    color: #16357A; background-image: url(./cold_titre.gif);
    font-weight: bold; text-transform: uppercase;
    text-align: center;
}
#colonne_droite .blockContent {
    line-height: 120%;
    background-color: #eaedf4;
    border-left: solid 1px #76809C;
    border-right: solid 1px #76809C;
    border-bottom: solid 1px #76809C;
}

#colonne_centre {
    background-color: white;
    width: auto;
    border: solid 2px #76809C;
    margin-right: 156px;
    margin-left: 194px;
    padding: 2px;
}
#colonne_centre .blockTitle {
    font-weight: bold;
    padding: 4px;
    border: 1px solid #98aab1;
    color: #000000; background-color: #E1E8F1;
}
#colonne_centre .blockContent {width: 100%; margin-bottom: 8px; line-height: 120%;}

#colonne_centreCentre {width: 99%; background-color: white; text-align: left;}
#colonne_centreGauche {width: 49%; float: left; background-color: white; text-align: left;}
#colonne_centreDroite {width: 49%; float: right; background-color: white; text-align: left;}
#colonne_centreModules {width:99%; background-color: white; text-align: left;}

#colonne_centreMaxi {
    border: solid 2px #76809C;
    margin-left: 194px;
    background-color: white;
    padding: 2px;
    text-align: center;
}
#centreMaxi .blockTitle {
    font-weight: bold; 
    padding: 4px; 
    border: 1px solid #98aab1; 
    color: #000000; background-color: #E1E8F1; 
}
#centreMaxi .blockContent {
    padding: 0px; 
    margin-bottom: 8px; 
    line-height: 120%;
}

#pied_page {
    clear: both;
    border: solid 2px #76809C;
    margin-top: 10px;
    padding-top: 4px; padding-bottom: 4px;
    width: 986px;
    text-align: center;
    color: #16357A; background-color: #d6ffff;
    font-size: 10px;
}


Pour le css dédié firefox :
/* Squellette de la page */
#entete {width: 100%; height: 110px;}
#entete_gauche {width: 216px; float: left;}
#entete_droite {width: 22px; float: right;}
#entete_centre {
    width: auto;
    margin-left: 214px;
    margin-right: 22px;
    background-color: #d6ffff;
    border-bottom: solid 2px; border-bottom-color: #76809C;
    border-top: solid 2px; border-top-color: #76809C;
}
#entete_centre_titre {
    height: 106px;
    font-family: Arial, Courier; font-size: 42px;
    vertical-align: middle;  text-align: center;
    text-shadow: #50669c; color: #16357A;
    overflow: auto;
}

#corps_page {width: 100%; height: 100%; margin-top: 8px;}

#colonne_gauche {float: left; width: 190px;}
#colonne_gauche .blockTitle {
    padding: 6px;
    color: #16357A; background-image: url(./colg_titre.gif);
    font-weight: bold; text-transform: uppercase;
    text-align: center;
}
#colonne_gauche .blockContent {
    margin-left: 17px;
    line-height: 120%;
    background-color: #eaedf4;
    border-left: solid 2px #76809C;
    border-right: solid 2px #76809C;
    border-bottom: solid 2px #76809C;
}

#colonne_droite {float: right; width: 151px;}
#colonne_droite .blockTitle {
    padding: 6px;
    color: #16357A; background-image: url(./cold_titre.gif);
    font-weight: bold; text-transform: uppercase;
    text-align: center;
}
#colonne_droite .blockContent {
    line-height: 120%;
    background-color: #eaedf4;
    border-left: solid 1px #76809C;
    border-right: solid 1px #76809C;
    border-bottom: solid 1px #76809C;
}

#colonne_centre {
    background-color: white;
    width: auto;
    min-height: 425px;
    border: solid 2px #76809C;
    margin-right: 156px;
    margin-left: 194px;
    padding: 2px;
}
#colonne_centre .blockTitle {
    font-weight: bold;
    padding: 4px;
    border: 1px solid #98aab1;
    color: #000000; background-color: #E1E8F1;
}
#colonne_centre .blockContent {padding: 0px; margin-bottom: 8px; line-height: 120%;}

#colonne_centreCentre {width: 100%; background-color: white; text-align: left;}
#colonne_centreGauche {width: 49%; float: left; background-color: white; text-align: left;}
#colonne_centreDroite {width: 49%; float: right; background-color: white; text-align: left;}
#colonne_centreModules {width:100%; background-color: white; text-align: left;}

#colonne_centreMaxi {
    border: solid 2px #76809C;
    margin-left: 194px;
    background-color: white;
    padding: 2px;
    text-align: center;
}
#centreMaxi .blockTitle {
    font-weight: bold; 
    padding: 4px; 
    border: 1px solid #98aab1; 
    color: #000000; background-color: #E1E8F1; 
}
#centreMaxi .blockContent {
    padding: 0px; 
    margin-bottom: 8px; 
    line-height: 120%;
}

#pied_page {
    clear: both;
    border: solid 2px #76809C;
    margin-top: 10px;
    padding-top: 4px; padding-bottom: 4px;
    width: 100%;
    text-align: center;
    color: #16357A; background-color: #d6ffff;
    font-size: 10px;
}


Il y a de légère différence et ce ne sont que des extraits du thème utilisé sur www.lipom.org
Après faud pas oublié de tripatouiller le jeu de template pour être tranquille (surtout pour cbb, que j'ai pas encore touché)

J'espère que celà t'indera au mieux
a+

Posté le : 27/04/2006 21:10
Partager Twitter Partagez cette article sur GG+
Rapport Haut
Paul
Re: Demande docteur ès CSS
#4
Semi pro
Inscrit: 27/08/2003 11:03
De Perpignan
Messages: 1255
Merci à tout les 2...

Oui Christian , dur de se lancer dans l'aventure, mais il faut bien que je m'y mette

Pinmaster... je vais tester cela, merci beaucoup (cool

Posté le : 27/04/2006 21:18

Si tu frappes sur ta tête avec une cruche et que ça sonne creux, n'en déduis pas forcément que c'est la cruche qui est vide. ...
Partager Twitter Partagez cette article sur GG+
Rapport Haut
Mercowe
Re: Demande docteur ès CSS
#5
Régulier
Inscrit: 05/12/2003 17:21
De Marseille
Messages: 322
Il te manque une fermeture de </div> aprés l'id=voiture.

Posté le : 28/04/2006 11:26
Partager Twitter Partagez cette article sur GG+
Rapport Haut
vexin
Re: Demande docteur ès CSS
#6
Semi pro
Inscrit: 25/09/2005 22:00
De Soisy-sous-Montmorency
Messages: 654
Bonjour,

Un lien que je trouve des plus utiles en ce qui concerne les CSS et le HTML:

Alsacréations

Bon courage

Posté le : 28/04/2006 12:37
Partager Twitter Partagez cette article sur GG+
Rapport Haut
laloutre
Re: Demande docteur ès CSS
#7
Semi pro
Inscrit: 07/05/2005 14:17
Messages: 1126
tu devrais tout simplement mettre une div conteneur des div gauche, right column contente et centre colonne. mais surtout pas footer

@pinmaster : ca fait 1 mois a peu pret que j'essaye de faire ton code pour le theme, et mes floats ne fonctionnaient pas grrrr, merci beaucoup grace a toi je viens de comprendre pourquoi, je ne placais pas mes clear au bon endroit grrrrr

Posté le : 28/04/2006 12:43

black-hattitude
Partager Twitter Partagez cette article sur GG+
Rapport Haut
Paul
Re: Demande docteur ès CSS
#8
Semi pro
Inscrit: 27/08/2003 11:03
De Perpignan
Messages: 1255
oui alsacréations je connais merci

Je n'ai pas de mal à coder un thème normal... (d'ailleurs si vous regardez le nom du thème vous n'aurez aucun mal à comprendre que je suis partie de l'excellent tutoriel du non moins excellentissime Christian)

Le problème de celui là c'est qu'il n'y a pas d'alignement entre les colonnes...

Mais je pense avoir trouvé la solution... car justement je n'aurais pas du coder comme un thème "normal"... reste a essayé quand j'aurais un bout de temps...

Laloutre, ce n'est pas un problème de footer, c'est le conteneur d'abord qui ne suit pas...

Posté le : 28/04/2006 14:10

Si tu frappes sur ta tête avec une cruche et que ça sonne creux, n'en déduis pas forcément que c'est la cruche qui est vide. ...
Partager Twitter Partagez cette article sur GG+
Rapport Haut
laloutre
Re: Demande docteur ès CSS
#9
Semi pro
Inscrit: 07/05/2005 14:17
Messages: 1126
a bon? le probleme c'est aps que le footer ne se calle pas en dessous des blocs centraux? dsl c'est mle seul bug que je vois sur une image

bonne soirée

Posté le : 28/04/2006 16:58

black-hattitude
Partager Twitter Partagez cette article sur GG+
Rapport Haut
Paul
Re: Demande docteur ès CSS
#10
Semi pro
Inscrit: 27/08/2003 11:03
De Perpignan
Messages: 1255
oui on pourrait le croire, mais même sans footer ce ne sont que les blocs de gauche qui chasse le conteiner vers le bas... enfin tout cela n'est pas bien grave... je vais tout refaire !!!

Posté le : 28/04/2006 18:42

Si tu frappes sur ta tête avec une cruche et que ça sonne creux, n'en déduis pas forcément que c'est la cruche qui est vide. ...
Partager Twitter Partagez cette article sur GG+
Rapport Haut

 Haut   Précédent   Suivant
(1) 2 »



Vous pouvez voir les sujets.
Vous ne pouvez pas débuter de nouveaux sujets.
Vous ne pouvez pas répondre aux contributions.
Vous ne pouvez pas éditer vos contributions.
Vous ne pouvez pas effacez vos contributions.
Vous ne pouvez pas ajouter de nouveaux sondages.
Vous ne pouvez pas voter en sondage.
Vous ne pouvez pas attacher des fichiers à vos contributions.
Vous ne pouvez pas poster sans approbation.
Propulsé avec XOOPS | Graphisme adapté par Tatane, Grosdunord, Montuy337513

33 Personne(s) en ligne (27 Personne(s) connectée(s) sur Forum) | Utilisateur(s): 0 | Invité(s): 33 | Plus ...