Fork me on GitHub






crazy85
[gabarit morphogenesis] Séparation du header
#1
Régulier
Inscrit: 20/08/2005 16:38
De Près de la plage
Messages: 493
Bonjour depuis hier j'essai de séparer le header en 3 cellules mais sans résultat.
L'original se présente de cette façon
Citation :
<div id="xo-banner" class="commercial"><!-- avec affichage activée de la bannière -->
<a id="xo-main-logo" class="commercial" href="<{xoAppUrl /}>"><img src="<{xoImgUrl img/xoops_sticker.png}>" alt="<{$xoops_sitename}>" /></a>
<a id="xo-site-title" href="<{xoAppUrl /}>"><h1><{$xoops_sitename}></h1></a>
<div id="xo-site-slogan" class="commercial">"Nos idées mises en commun "</div>
<div id="xo-banner-ad"><{$xoops_banner|smarty:nodefaults}></div>
<!-- include du bloc Utilisateur dans le header -->
<{includeq file="$theme_name/userbar.html"}>
<!-- fin de l'include du bloc Utilisateur dans le header -->
</div>
<{else}>

<div id="xo-banner"><!-- avec affichage de la bannière désactivé -->
<a id="xo-site-title" href="<{xoAppUrl /}>"><h1><{$xoops_sitename}></h1></a>
<div id="xo-site-slogan"><{$xoops_slogan}></div>
<!-- include du bloc Utilisateur dans le header -->
<{includeq file="$theme_name/userbar.html"}>
<!-- fin de l'include du bloc Utilisateur dans le header -->
</div>
<{/if}>

et moi je voudrais le séparer en 3 cellules dans le but d'inserer un coin gauche, le centre avec la proprièté "backgroung-repeat: repeat-x" et le coin droit.
Dans le css j'ai créé une class
Citation :
#xo-banner.corner_l {
height: 117px;
background-image: url(img/head_left.png);
background-repeat: no-repeat;
}
et une autre
Citation :
#xo-banner.corner_r {
height: 117px;
background-image: url(img/head_right.png);
background-repeat: no-repeat;
}


J'ai donc modifier le header de cette façon
Citation :
<div id="xo-banner" class="commercial">
<div id="xo-banner" class="corner_l"></div>
<a id="xo-main-logo" class="commercial" href="<{xoAppUrl /}>"><img src="<{xoImgUrl img/xoops_sticker.png}>" alt="<{$xoops_sitename}>" /></a>
<a id="xo-site-title" href="<{xoAppUrl /}>"><h1><{$xoops_sitename}></h1></a>
<div id="xo-site-slogan" class="commercial">"Nos idées mises en commun "</div>
<div id="xo-banner-ad"><{$xoops_banner|smarty:nodefaults}></div>
<div id="xo-banner" class="corner_r"></div>
<!-- include du bloc Utilisateur dans le header -->
<{includeq file="$theme_name/userbar.html"}>
<!-- fin de l'include du bloc Utilisateur dans le header -->
</div>
<{else}>

<div id="xo-banner"><!-- avec affichage de la bannière désactivé -->
<a id="xo-site-title" href="<{xoAppUrl /}>"><h1><{$xoops_sitename}></h1></a>
<div id="xo-site-slogan"><{$xoops_slogan}></div>
<!-- include du bloc Utilisateur dans le header -->
<{includeq file="$theme_name/userbar.html"}>
<!-- fin de l'include du bloc Utilisateur dans le header -->
</div>
<{/if}>

mais seul le coin gauche s'affiche normalement, le coin droit lui se place en nouveau paragraphe
Quel est mon erreur ?
Je souhaite également appliqué ce principe au colonne.
Merci de vos réponses

Posté le : 20/02/2007 14:29

Open in new window
http://www.amenosyla.fr
I'm Bad, Mad, Totaly Cr@zy !!!
Partager Twitter Partagez cette article sur GG+
Rapport Haut
lasco
Re: [gabarit morphogenesis] Séparation du header
#2
Régulier
Inscrit: 23/03/2005 04:38
Messages: 408
regarde le theme city refletions

Posté le : 20/02/2007 14:44
Partager Twitter Partagez cette article sur GG+
Rapport Haut
Kris
Re: [gabarit morphogenesis] Séparation du header
#3
Supporter Xoops
Inscrit: 09/01/2005 13:37
De Breizh
Messages: 16972
En vrac, la partie de theme.html :
<div id="xo-banner">
<img src="<{xoImgUrl img/header_left.jpg}>" alt="" class="left" />
<img src="<{xoImgUrl img/header_right.jpg}>" alt="" class="right" />    
<!-- <a id="xo-main-logo" href="<{xoAppUrl /}>"><img src="<{xoImgUrl img/header-logo_small.gif}>" alt="<{$xoops_sitename}>" /></a> -->
<div id="xo-site-title"><a href="<{xoAppUrl /}>" title="<{$xoops_sitename}>"><{$xoops_sitename}></a></div>
<div id="xo-site-slogan">"<{$xoops_slogan}>"</div>
<div id="xo-banner-ad"><{$xoops_banner|smarty:nodefaults}></div>
<ul id="xo-globalnav">
<{if !$xoops_isuser}>
<li><a href="<{xoAppUrl modules/contact/}>" title="">Contact</a></li>
<li><a href="<{xoAppUrl modules/myCredits/}>" title="">Crédits</a></li>
<li><a href="<{xoAppUrl modules/google/}>" title="">Google</a></li>
<li><a href="<{xoAppUrl /browser_check/}>" title="">Test Compatibilité Web</a></li>
<{else}>
<li><a href="<{xoAppUrl /}>" title="">Accueil</a></li>
<li><a href="<{xoAppUrl modules/news/}>" title="">News</a></li>
<li><a href="<{xoAppUrl modules/newbb/}>" title="">Forum</a></li>
<li><a href="<{xoAppUrl modules/xcgal/}>" title="">Photos</a></li>
<li><a href="<{xoAppUrl modules/contact/}>" title="">Contact</a></li>
<{/if}>
</ul>
</div>


la partie de style.css :
#xo-banner { 
    background:#000000 url(img/header_center.jpg) repeat-x top left;
    color:#EEE;
    height:110px;
    margin:0 5px 1px 5px;
    padding:0;
    clear:both;
}

#xo-banner img.left {
  position: absolute;
  left: 5%;
}
#xo-banner img.right {
  position: absolute;
  right: 5%;
}


Avec celà tu devrais t'en sortir

A +

Posté le : 20/02/2007 14:47

La connaissance s'accroît quand on la partage ...
Partager Twitter Partagez cette article sur GG+
Rapport Haut
Kris
Re: [gabarit morphogenesis] Séparation du header
#4
Supporter Xoops
Inscrit: 09/01/2005 13:37
De Breizh
Messages: 16972
Le principe :
dans ma div, une image à gauche, une a droite et un background central dans ma classe de mon xo-banner

et le tour est joué

A +

Posté le : 20/02/2007 14:58

La connaissance s'accroît quand on la partage ...
Partager Twitter Partagez cette article sur GG+
Rapport Haut
crazy85
Re: [gabarit morphogenesis] Séparation du header
#5
Régulier
Inscrit: 20/08/2005 16:38
De Près de la plage
Messages: 493
Merci Kris !!!
Je tente ça et je tiens au courant du résultat !!!!


Bon j'édit mon post pour le résultat !!!

Y a du mieux mais le header se dédouble en arrière plan de chaque coté
Citation :
extrait du css:

#xo-banner {
background:#000000 url(img/head_center.png) repeat-x top left;
color:#EEE;
height:110px;
margin:0 5px 1px 5px;
padding:0;
clear:both;
}


#xo-banner.commercial {
height: 117px;
}

#xo-banner img.left {
position: absolute;
left: 5%;
}
#xo-banner img.right {
position: absolute;
right: 5%;
}

Citation :
extrait du code theme.html:

<div id="xo-banner" class="commercial"><!-- avec affichage activée de la bannière -->
<img src="<{xoImgUrl img/head_left.png}>" alt="" class="left" />
<img src="<{xoImgUrl img/head_right.png}>" alt="" class="right" />
<!---<a id="xo-main-logo" class="commercial" href="<{xoAppUrl /}>"><img src="<{xoImgUrl img/xoops_sticker.png}>" alt="<{$xoops_sitename}>" /></a>--->
<a id="xo-site-title" href="<{xoAppUrl /}>"><h1><{$xoops_sitename}></h1></a>
<div id="xo-site-slogan" class="commercial">"Nos idées mises en commun "</div>
<div id="xo-banner-ad"><{$xoops_banner|smarty:nodefaults}></div>
<!-- include du bloc Utilisateur dans le header -->
<{includeq file="$theme_name/userbar.html"}>
<!-- fin de l'include du bloc Utilisateur dans le header -->
</div>
<{else}>


image du header:
Open in new window

Posté le : 20/02/2007 17:05

Open in new window
http://www.amenosyla.fr
I'm Bad, Mad, Totaly Cr@zy !!!
Partager Twitter Partagez cette article sur GG+
Rapport Haut
crazy85
Re: [gabarit morphogenesis] Séparation du header
#6
Régulier
Inscrit: 20/08/2005 16:38
De Près de la plage
Messages: 493
Bon les choses avancent bien !!!!
Avec ta solution Kris le fond se dédoublait en arrière plan. J'ai donc sur les conseils de l'un membres de design-creation modifier une proprièté css que tu m'avais soumises
Citation :
#xo-banner img.left {
position: absolute;
left: 5%;
}
#xo-banner img.right {
position: absolute;
right: 5%;
}

par ceci

Citation :
#xo-banner img.left {
left: 5%;
float: left;
}
#xo-banner img.right {
right: 5%;
float: right;
}

et cette fois ça à l'air d'être bon
exemple ICI
Reste plus qu'à s'occuper des barres de titre !!!

Posté le : 20/02/2007 19:22

Open in new window
http://www.amenosyla.fr
I'm Bad, Mad, Totaly Cr@zy !!!
Partager Twitter Partagez cette article sur GG+
Rapport Haut
Kris
Re: [gabarit morphogenesis] Séparation du header
#7
Supporter Xoops
Inscrit: 09/01/2005 13:37
De Breizh
Messages: 16972
J'avais bien dis : en vrac

Posté le : 20/02/2007 22:46

La connaissance s'accroît quand on la partage ...
Partager Twitter Partagez cette article sur GG+
Rapport Haut

 Haut   Précédent   Suivant



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

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