Boutons et Footer

Boutons et Footer [Réglé]

Hugo Membre non connecté

Booster Roquette

Le 15/02/2013 à 19h15

Booster Roquette
Voir le profil du membre Hugo
Inscrit le : 13/04/2012

Bonjour,

J'ai quelques questions a vous poser.

Je voudrais faire le même footer que phpboost (du moins dans le même style). Seulement je ne sais absolument pas comment m'y prendre...

Après j'aimerai rajouter des betit boutons vert derrière les liens Accueil,Forum,Marché ect.. sur mon site Pourquoi pas en CSS si possible...

Merci d'avance a bientot !

ElenWii Membre non connecté

Equipe Graphique Administrateur

Le 15/02/2013 à 19h32

#123761

Administrateur
Voir le profil du membre ElenWii
Inscrit le : 14/08/2009
Site internet
Groupes :
Equipe Graphique

Bonjour Hugo,

Le footer de PHPBoost n'est pas vraiment compliquer :

Un conteneur global,
4 conteneurs colonne en float (float:left avec une taille fixe (width:x px
Des balises <ul> <li> <a> pour faire les liens

Aide toi de la fonction "examiner l'elements" pour comprendre l'architecture et le CSS appliquer à chaque class.

Si tu as besoin, on sera la pour t'aider

ElenWii

Hugo Membre non connecté

Booster Roquette

Le 15/02/2013 à 22h27

#123778

Booster Roquette
Voir le profil du membre Hugo
Inscrit le : 13/04/2012

Ok,

Pour le CSS j'ai récupérer ceci:

Code CSS :

div#top_footer{
clear:both;
}
 
div#footer{
clear:both;
background:#212121;
border-top:5px solid #25466c;
margin-top:50px;
min-width:1000px;
overflow:hidden;
}
 
div#footer_links{
text-align:center;
margin:auto;
width:610px;
height:48px;
}
 
div#footer_links span{
vertical-align:middle;
line-height:48px;
}
 
div.footer_social{
float:right;
}
 
div.footer_social:hover{
background-position:0% 100%;
}
 
div.footer_social_facebook{
background:url('/templates/phpboost/theme/images/logo_facebook.png')0% 0% no-repeat;
}
 
div.footer_social_twitter{
background:url('/templates/phpboost/theme/images/logo_twitter.png')0% 0% no-repeat;
}
 
div.footer_social_gplus{
background:url('/templates/phpboost/theme/images/logo_gplus.png')0% 0% no-repeat;
}
 
div.footer_social_guestbook{
background:url('/templates/phpboost/theme/images/logo_guestbook.png')0% 0% no-repeat;
}
 
div.footer_social_rss{
background:url('/templates/phpboost/theme/images/logo_rss.png')0% 0% no-repeat;
}
 
div.footer_social a{
display:block;
width:48px;
height:48px;
}
 
div#footer span{
color:#666666;
font-size:10px;
}
 
div#footer span a{
color:#718396;
font-size:11px;
}
 
div#footer span a:hover{
color:#25466C;
font-size:11px;
}

Pour le HTML j'ai pas pu récupérer grand chose...

Code HTML :

<div id="footer">
<div id="footer_columns_container">
<div style="margin:auto;width:920px;">
<div id="footer_links">

Je changerez le design a ma sauce mais j'aimerai bien avoir un base pour le code html svp

Merci d'avance.

ElenWii Membre non connecté

Equipe Graphique Administrateur

Le 15/02/2013 à 23h48

#123782

Administrateur
Voir le profil du membre ElenWii
Inscrit le : 14/08/2009
Site internet
Groupes :
Equipe Graphique

Bonsoir,

Voici un l'architecture

Code HTML :

<div id="footer_columns_container">
<div class="footer_columns">
<ul>
<li><a href="ton lien">Ton lien</a></li>
<li><a href="ton lien">Ton lien</a></li>
</ul>
</div>
<div class="footer_columns">
...
</div>
<div class="spacer"></div>
</div>

je pense que tu trouveras comment remplir la suite

Autant de div que du colonne, et bien sur il faut regler la taille en conséquence.

ElenWii

Hugo Membre non connecté

Booster Roquette

Le 16/02/2013 à 15h23

#123810

Booster Roquette
Voir le profil du membre Hugo
Inscrit le : 13/04/2012

J'ai ceci en CSS:

Code CSS :

div#top_footer {
    clear:both;
    padding:0.75em;
}
 
/* ##### Pied de page ###### */
div#top_footer{
clear:both;
}
 
div#footer_columns{
   float:left;
   width:229px;
 
}

Et voici mon fichier footer.tpl:

Code TPL :

</div>
# IF C_MENUS_BOTTOM_CENTRAL_CONTENT #
        <div id="bottom_contents">
{MENUS_BOTTOMCENTRAL_CONTENT}
</div>
# ENDIF #
</div>
# IF C_MENUS_TOP_FOOTER_CONTENT #
<div id="top_footer">
{MENUS_TOP_FOOTER_CONTENT}
<div class="spacer"></div>
</div>
# ENDIF #
</div>
<div id="footer">
<div id="footer_columns_container">
<div class="footer_columns">
<ul>
<li><a href="ton lien">Ton lien</a></li>
<li><a href="ton lien">Ton lien</a></li>
</ul>
</div>
<div class="footer_columns">
<ul>
<li><a href="ton lien">Ton lien</a></li>
<li><a href="ton lien">Ton lien</a></li>
</ul>
</div>
<div class="spacer"></div>
</div>
</div>
</body>
</html>

Seulement sa ne donne rien... Besoin d'aide svp

ElenWii Membre non connecté

Equipe Graphique Administrateur

Le 16/02/2013 à 15h32

#123811

Administrateur
Voir le profil du membre ElenWii
Inscrit le : 14/08/2009
Site internet
Groupes :
Equipe Graphique

Code CSS :

div#footer_columns{
   float:left;
   width:229px;
 
}

Footer_columns est une class et pas une ID unique remplace le "#" par un "."

Il te faut aussi faire les class Css des autres élements.

ElenWii

Hugo Membre non connecté

Booster Roquette

Le 16/02/2013 à 16h04

#123813

Booster Roquette
Voir le profil du membre Hugo
Inscrit le : 13/04/2012

C'est bon sa commence a prendre forme Merci !

Créations de Thèmes

Répondre

Vous n'êtes pas autorisé à écrire dans cette catégorie