Centrer le Header du thème Vertigo
olivierb Membre non connecté
-
Modérateur
- Voir le profil du membre olivierb
- Inscrit le : 07/02/2014
- Site internet
- Groupes :
-
Equipe Assistance
Sur ce site, je cherche à centrer le contenu de la div header du thème Vertigo. Je l'ai modifié afin d'y insérer un slide et sur les affichages larges, le logo, le titre et le slide sont alignés à gauche.
Voici le code complet du design.css
Caché :
body {
position: relative;
min-height: 100%;
height: auto;
background: #E8EDF3 /*url(images/body.png)*/;
color: #555;
font-size: 13px;
font-family: "Trebuchet MS", Verdana, 'Bitstream Vera Sans', Times, serif;
}
/* Conteneur global */
div#global {
width: 1200px;
margin: 18px auto 0px auto;
padding-bottom: 42px;
border-radius: 8px;
}
/* Entête */
#header {
height: 174px;
/*width: 1200px;*/
margin: 0 auto;
}
div#top-header {
height: 139px;
display: flex;
display: -webkit-flex;
display: -ms-flex;
display: -ms-flexbox; /* IE10 */
}
div#top-header form {
margin-left: auto;
}
div#sub-header {
min-width: 1200px;
min-height: 35px;
margin: 0 auto;
border-bottom: 3px solid #F47321;
background: #4D4C50;
}
div#site-infos {
display: flex;
display: -webkit-flex;
display: -ms-flex;
display: -ms-flexbox; /* IE10 */
max-width: 940px;
margin: 20px 20px 0px 20px;
}
div#site-logo {
margin-right: 20px;
background: url('images/logo.png') no-repeat;
width: 160px;
}
div#site-name-container {
margin-top: 10px;
flex: 1 1 auto;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
-ms-flexbox: 1 1 auto; /* IE10 */
width: 240px;
height: 108px;
overflow: hidden;
}
a#site-name {
color: #F47321;
font-size: 48px;
font-weight: bold;
line-height: 1em;
text-shadow: 0px 0px 0 rgb(0,0,0), 1px 0px 0 rgb(-255,-255,-255), 2px 0px 1px rgba(0,0,0,0.1), 2px 0px 1px rgba(0,0,0,0.2), 0px 0px 1px rgba(0,0,0,.1);
letter-spacing: 1.1pt;
text-decoration: none;
white-space: nowrap;
}
span#site-slogan {
display: block;
color: #F47321;
font-size: 12px;
font-weight: bold;
padding: 4px 0px 0px 4px;
letter-spacing: 1.5pt;
}
/* Compteur de visites */
div#compteur {
color: #F47321;
position: absolute;
top: 50px;
right: 0px;
font-size: 11px;
margin-right: 15px;
text-align: right;
}
/* Menu gauche */
aside#menu-left {
float: left;
width: 210px;
margin-right: 5px;
}
/* Menu droit */
aside#menu-right {
float: right;
width: 210px;
margin-left: 5px;
}
/* Contenu de la page */
div#main {
width: auto;
overflow: hidden;
}
/* Contenu central */
div#main-content {
padding: 20px 10px;
background: #E8EDF3; /* #FFF; #e6e6fa; */
border: 3px solid #CBCBCB;
border-radius: 4px;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
}
/* Barre d'outils */
#actions-links-menu {
float:right;
margin: 0 5px 5px 5px;
}
/* Barre de lien rapide */
nav#breadcrumb {
text-indent: 10px;
margin: 0px 0px 20px 10px;
}
nav#breadcrumb ol {
list-style: none;
margin: 0;
}
nav#breadcrumb ol li {
display: inline;
}
nav#breadcrumb ol li:not(.current):after {
content: '/'; color: #616161;
}
/* Emplacement au dessus et en dessous du contenu de la page */
div#top-content {
margin: 0px auto;
}
div#bottom-content {
margin: 8px 0;
}
/* Bloc au dessus du pied de page */
div#top-footer {
clear: both;
padding: 5px 0px;
}
/* Pied de page */
#footer {
clear: both;
margin: 0 auto;
min-width: 1200px;
background: #E8EDF3; /* #4D4C50; #E8EDF3; #006600; */
border-top: #F47321 3px solid;
text-align: center; /* centrage du texte */
}
#footer .footer-content {
margin: 20px auto 0 auto;
width: 1080px;
padding-bottom: 20px;
border-bottom: 2px groove #444;
}
#footer .footer-infos {
min-height: 40px;
text-align: center;
padding-top: 10px;
}
#footer .footer-infos a,#footer .footer-infos span {
color: #616161; /* #EEE; */
font-size: 10px;
}
#footer .footer-infos a:hover,#footer .footer-infos span {
color: #F47321; /* #EEE; */
}
/* Debut du Slide Show de Grenouille */
#slide-show{float: right; margin-right: 70px;}
#slide-images{
display:block;
height:120px;
margin:5px 0 0;
overflow:hidden;
/*padding-top:30px;*/
position:relative;
width:914px;
}
#slide-images li{
position:absolute;
display:block;
list-style-type:none;
margin:0px;
padding:0px;
}
#slide-images li img{
display:block;
width: 100%;
}
/* Fin du Slide Show de Grenouille */
position: relative;
min-height: 100%;
height: auto;
background: #E8EDF3 /*url(images/body.png)*/;
color: #555;
font-size: 13px;
font-family: "Trebuchet MS", Verdana, 'Bitstream Vera Sans', Times, serif;
}
/* Conteneur global */
div#global {
width: 1200px;
margin: 18px auto 0px auto;
padding-bottom: 42px;
border-radius: 8px;
}
/* Entête */
#header {
height: 174px;
/*width: 1200px;*/
margin: 0 auto;
}
div#top-header {
height: 139px;
display: flex;
display: -webkit-flex;
display: -ms-flex;
display: -ms-flexbox; /* IE10 */
}
div#top-header form {
margin-left: auto;
}
div#sub-header {
min-width: 1200px;
min-height: 35px;
margin: 0 auto;
border-bottom: 3px solid #F47321;
background: #4D4C50;
}
div#site-infos {
display: flex;
display: -webkit-flex;
display: -ms-flex;
display: -ms-flexbox; /* IE10 */
max-width: 940px;
margin: 20px 20px 0px 20px;
}
div#site-logo {
margin-right: 20px;
background: url('images/logo.png') no-repeat;
width: 160px;
}
div#site-name-container {
margin-top: 10px;
flex: 1 1 auto;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
-ms-flexbox: 1 1 auto; /* IE10 */
width: 240px;
height: 108px;
overflow: hidden;
}
a#site-name {
color: #F47321;
font-size: 48px;
font-weight: bold;
line-height: 1em;
text-shadow: 0px 0px 0 rgb(0,0,0), 1px 0px 0 rgb(-255,-255,-255), 2px 0px 1px rgba(0,0,0,0.1), 2px 0px 1px rgba(0,0,0,0.2), 0px 0px 1px rgba(0,0,0,.1);
letter-spacing: 1.1pt;
text-decoration: none;
white-space: nowrap;
}
span#site-slogan {
display: block;
color: #F47321;
font-size: 12px;
font-weight: bold;
padding: 4px 0px 0px 4px;
letter-spacing: 1.5pt;
}
/* Compteur de visites */
div#compteur {
color: #F47321;
position: absolute;
top: 50px;
right: 0px;
font-size: 11px;
margin-right: 15px;
text-align: right;
}
/* Menu gauche */
aside#menu-left {
float: left;
width: 210px;
margin-right: 5px;
}
/* Menu droit */
aside#menu-right {
float: right;
width: 210px;
margin-left: 5px;
}
/* Contenu de la page */
div#main {
width: auto;
overflow: hidden;
}
/* Contenu central */
div#main-content {
padding: 20px 10px;
background: #E8EDF3; /* #FFF; #e6e6fa; */
border: 3px solid #CBCBCB;
border-radius: 4px;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
}
/* Barre d'outils */
#actions-links-menu {
float:right;
margin: 0 5px 5px 5px;
}
/* Barre de lien rapide */
nav#breadcrumb {
text-indent: 10px;
margin: 0px 0px 20px 10px;
}
nav#breadcrumb ol {
list-style: none;
margin: 0;
}
nav#breadcrumb ol li {
display: inline;
}
nav#breadcrumb ol li:not(.current):after {
content: '/'; color: #616161;
}
/* Emplacement au dessus et en dessous du contenu de la page */
div#top-content {
margin: 0px auto;
}
div#bottom-content {
margin: 8px 0;
}
/* Bloc au dessus du pied de page */
div#top-footer {
clear: both;
padding: 5px 0px;
}
/* Pied de page */
#footer {
clear: both;
margin: 0 auto;
min-width: 1200px;
background: #E8EDF3; /* #4D4C50; #E8EDF3; #006600; */
border-top: #F47321 3px solid;
text-align: center; /* centrage du texte */
}
#footer .footer-content {
margin: 20px auto 0 auto;
width: 1080px;
padding-bottom: 20px;
border-bottom: 2px groove #444;
}
#footer .footer-infos {
min-height: 40px;
text-align: center;
padding-top: 10px;
}
#footer .footer-infos a,#footer .footer-infos span {
color: #616161; /* #EEE; */
font-size: 10px;
}
#footer .footer-infos a:hover,#footer .footer-infos span {
color: #F47321; /* #EEE; */
}
/* Debut du Slide Show de Grenouille */
#slide-show{float: right; margin-right: 70px;}
#slide-images{
display:block;
height:120px;
margin:5px 0 0;
overflow:hidden;
/*padding-top:30px;*/
position:relative;
width:914px;
}
#slide-images li{
position:absolute;
display:block;
list-style-type:none;
margin:0px;
padding:0px;
}
#slide-images li img{
display:block;
width: 100%;
}
/* Fin du Slide Show de Grenouille */
Je suppose qu'il faut modifier la div :
Code CSS :
div#top-header { height: 139px; display: flex; display: -webkit-flex; display: -ms-flex; display: -ms-flexbox; /* IE10 */ }
Mais où et comment ?
Olivier.
Olivier
babsolune Membre non connecté
-
Administrateur
- Voir le profil du membre babsolune
- Inscrit le : 16/05/2008
- Site internet
- Groupes :
-
Equipe Développement
rajoute un justify-content: center; dans ton top-header
attention tous les navigateurs ne le supportent pas, mais heureusement il y a http://the-echoplex.net/flexyboxes/
flexbox powa
Pour un support plus efficace, pensez à déclarer dans votre profil, le lien vers votre site
olivierb Membre non connecté
-
Modérateur
- Voir le profil du membre olivierb
- Inscrit le : 07/02/2014
- Site internet
- Groupes :
-
Equipe Assistance
Merci
mais je n'ai pas d'écran suffisamment grand pour vérifier.Par contre, ne parlons pas du comportement d'IE 11 :
Fenêtre ouverte en grand et réduite : le logo et site-name disparaissent
mais plutôt de Chrome et FF :
J'aimerai que LOGO et site-name/site-info soient sur une largeur fixe et que le slide passe dessous selon la taille de l'écran, voir ci-dessous :
Chrome fenêtre maxi :
Chrome fenêtre réduite :
FF fenêtre maxi :
FF fenêtre réduite :
En fait, seul FF semble ne pas gérer Flexbox mais à la limite ça m'arrange puisque il faut que la largeur du logo et du site-name soient fixes mais dans le cas des petits écrans, j'aimerai que le slide passe dessous.
J'espère que c'est possible
Olivier.
Édité par olivierb Le 20/02/2015 à 13h33
Olivier
janus57 Membre non connecté
-
Booster Fusée
- Voir le profil du membre janus57
- Inscrit le : 07/12/2007
- Groupes :
-
Equipe Assistance
Non FF, Chrome, IE11, Opera gère très bien les flex (http://caniuse.com/#feat=flexbox), mais peut être pas de la même manière.
Bugs connus :
Citation :
In IE10 and IE11, containers with display: flex and flex-direction: column will not properly calculate their flexed childrens' sizes if the container has min-height but no explicit height property. See bug.
In Chrome and Safari, the height of (non flex) children are not recognized in percentages. However Firefox and IE recognize and scale the children based on percentage heights. Chrome bug
Firefox does not support Flexbox in button elements
In IE10 and IE11, containers with display: flex and flex-direction: column will not properly calculate their flexed childrens' sizes if the container has min-height but no explicit height property. See bug.
In Chrome and Safari, the height of (non flex) children are not recognized in percentages. However Firefox and IE recognize and scale the children based on percentage heights. Chrome bug
Firefox does not support Flexbox in button elements
Je ne sais pas si cela va t'aider.
Cordialement, janus57
olivierb Membre non connecté
-
Modérateur
- Voir le profil du membre olivierb
- Inscrit le : 07/02/2014
- Site internet
- Groupes :
-
Equipe Assistance
Pour moi, l'information est claire
par contre je ne sais pas comment la mettre en place.Mais, ma priorité serait de pouvoir placer le logo et le site-name au dessus du slide lors d'un affichage réduit
Voici le début du body.tpl :
Code TPL :
# INCLUDE MAINTAIN # <header id="header"> <div id="top-header"> <div id="site-infos"> <div id="site-logo" # IF C_HEADER_LOGO #style="background: url('{HEADER_LOGO}') no-repeat;"# ENDIF #></div> <div id="site-name-container"> <a id="site-name" href="{PATH_TO_ROOT}/">{SITE_NAME}</a> <span id="site-slogan">{SITE_SLOGAN}</span> </div> </div> <div id="slide-show"> <ul id="slide-images"> <li><img src="{PATH_TO_ROOT}/templates/{THEME}/js/images/fontaine.png" alt="fontaine" title="fontaine" /></li> <li><img src="{PATH_TO_ROOT}/templates/{THEME}/js/images/braslou1.png" alt="entree de Braslou" title="entree de Braslou" /></li> <li><img src="{PATH_TO_ROOT}/templates/{THEME}/js/images/braslou2.png" alt="entree de Braslou" title="entree de Braslou" /></li> <li><img src="{PATH_TO_ROOT}/templates/{THEME}/js/images/braslou3.png" alt="entree de Braslou" title="entree de Braslou" /></li> </ul> </div> # IF C_MENUS_HEADER_CONTENT # {MENUS_HEADER_CONTENT} # ENDIF # </div> <div id="sub-header"> # IF C_MENUS_SUB_HEADER_CONTENT # {MENUS_SUB_HEADER_CONTENT} # ENDIF # </div> <div class="spacer"></div> </header>
Et la partie body du frame.tpl
Code TPL :
Olivier.
Édité par olivierb Le 19/02/2015 à 20h19
Olivier
janus57 Membre non connecté
-
Booster Fusée
- Voir le profil du membre janus57
- Inscrit le : 07/12/2007
- Groupes :
-
Equipe Assistance
Citation :
Mais, ma priorité serait de pouvoir placer le logo et le site-name au dessus du slide lors d'un affichage réduit
Que cela passe par dessus le slide sans le masquer ou que cela passe par dessus et masque le slide en même temps ?
Si c'est juste que sa doit passer dessus suffit de jouer avec z-index je pense.
Cordialement, janus57
olivierb Membre non connecté
-
Modérateur
- Voir le profil du membre olivierb
- Inscrit le : 07/02/2014
- Site internet
- Groupes :
-
Equipe Assistance
Une petite aide ne serait pas de refus car, à part insérer le code justify-content: center (ou space-around) (merci Babso
), je ne comprend pas comment et où mettre le z-index.Olivier.
Olivier
janus57 Membre non connecté
-
Booster Fusée
- Voir le profil du membre janus57
- Inscrit le : 07/12/2007
- Groupes :
-
Equipe Assistance
olivierb :
Bonjour,
Une petite aide ne serait pas de refus car, à part insérer le code justify-content: center (ou space-around) (merci Babso), je ne comprend pas comment et où mettre le z-index.
Olivier.
Une petite aide ne serait pas de refus car, à part insérer le code justify-content: center (ou space-around) (merci Babso
), je ne comprend pas comment et où mettre le z-index.Olivier.
Bonjour,
fonctionne pas je viens d'essayer et en même temps je viens de voir que le fait d'avoir mis
Code CSS :
te mange ton logo + nom de site sous firefox (il disparaissent à gauche de l'écran chez moi si je réduit la fenêtre).justify-content: center;
EDIT :
Solution "moche" :
Code CSS :
#slide-show { float: right; overflow: scroll; }
Cordialement, janus57
Édité par janus57 Le 20/02/2015 à 16h19
olivierb Membre non connecté
-
Modérateur
- Voir le profil du membre olivierb
- Inscrit le : 07/02/2014
- Site internet
- Groupes :
-
Equipe Assistance
J'ai testé et tu as raison, c'est moche
je remets donc le css comme avant, ce qui me gène est qu'avec Around_The_World sous 4.0.6 et avec United Colors sous 4.1 ça marchait très bien.
Le choix de la mairie est Vertigo mais je n'arrive vraiment pas à comprendre comment ça fonctionne.
Si une bonne âme peut me trouver la solution, je serais plus que ravi.
S'il faut mettre mon thème en ZIP, n'hésitez pas.
Et en espérant que Vertigo sera porté sur 4.2
Olivier.
Olivier
jpalbert92 Membre non connecté
-
Booster Fuzil
- Voir le profil du membre jpalbert92
- Inscrit le : 27/04/2014
La propriété z-index permet de préciser l'empilement de certains éléments d'une page, c'est-à-dire sur l'axe vertical. Elle permet par exemple d'indiquer que pour deux éléments A et B partiellement ou totalement superposés, A sera placé au dessus de B ou inversement.
Mais l'utilisation de cette propriété comporte quelques pièges. Il y a deux informations principales à retenir :
- Seuls les éléments positionnés peuvent avoir un z-index. Un élément positionné est un élément dont la propriété CSS position a pour valeur relative, absolute ou fixed. Par défaut, les éléments d'une page ne sont pas positionnés (ils sont en position:static).
- Les valeurs les plus élevées sont au premier plan, et les plus faibles sont au second plan. Un z-index de 2 sera placé au dessus d'un z-index de 1, et un z-index de -1 sera placé au dessus d'un z-index de -2.
Code HTML :
Code CSS :
div {height: 100px; width: 100px;} div#test1 {position: absolute; z-index: 4;} div#test2 {position: absolute; z-index: 2;} div#test3 {z-index: 10;} div#test4 {position: relative; z-index: 8;}
Le résultat attendu est le suivant:
- div#test1 sera au premier plan;
- en dessous on aura div#test2;
- en dessous encore on aura div#test3 (qui ne se place pas au-dessus malgré un z-index de 10 car il n'est pas positionné);
- enfin, div#test4 sera le plus haut de la pile, mais ne recouvre pas les autres blocs ici car il est repoussé vers le bas par div#test3 qui n'est pas positionné.
Au final, si tous les blocs ont une couleur de fond opaque, on ne pourra apercevoir que div#test1 en haut et div#test4 plus bas. Les autres blocs sont recouverts par div#test1.
En espérant t'avoir avancé.
SOURCES
Édité par jpalbert92 Le 20/02/2015 à 21h16
Jpa92, don't panik !
Because I need a signature... You were supposed to know !
Répondre
Vous n'êtes pas autorisé à écrire dans cette catégorie