Forum d'aide création graphique / Demande de modification du haut et header d'un kit qui n'existe plus

remzouille · 29-06-2011 03:32:43

Bonjour,

je me sers actuellement d'un de vos kit graphique gratuit pour mon site web. Malheureusement, je viens de voir que ce dernier n'existe plus puisque vous ne le proposez plus. Je vous laisse aller visiter mon site web pour voir duquel il s'agit :

http://www.remzouilleradio.com/

Ps : je l'ai très modifié depuis sa base.

Je voudrais modifier l'header c'est à dire tout le haut et également ajouter un menu déroulant horizontal. En bref, je voudrais donc mettre un nouvel header avec un nouveau design qui va etre créé par un ami à moi. Et ainsi enlever les 4 menus gris avec les coins arrondis du haut.

Je voudrais de l'aide donc pas pour le design mais pour le codage car j'avou ne pas du tout savoir ce qu'il faut modifier dans la feuille de style css pour avoir tel élément à telle place etc.

Pour vous aider à comprendre ce que je cherche à réaliser, je vous ai fait un petit shema disponible ici meme :

http://zupimages.net/up/0/1651295522.jpg

Vous l'avez donc compris c'est lheader que je veux changer, également ajouter un menu horizontal déroulant dans les tons gris comme le site juste en dessous de l'header, et également faire la petite partie zone d'identification de l'espace membre avec un petit design de cadre assez simple à l'endroit renseigné sur la photo.

Je voudrais donc qu'un membre de l'équipe qui fait les kits graphiques de ce site puisse m'aider et je suis meme pret à donner en contrepartie une petite remuneration puisque ce travail est assez complexe mais je m'adresse à vous ici car je pense que vous avez l'habitude surtout que le kit de base vient de vous meme. Ou meme si quelqu'un de l'exterieur est preneur aussi, pas de soucis.

Je le repete donc ce n'est pas pour le design dont j'ai besoin d'aide mais bien pour le codage.

Il me faudrait le résultat final avant le dimanche 21 aout 2011.

Merci d'avance à vous pour votre aide, et si quelqu'un se propose, je lui donnerais donc le bon design qui va normalement pas tarder a être fait et je prendrais contact avec lui pour expliquer tous les éléments qu'il faut ajouter donc sur cet header, les images, les textes, les codes...etc.

N'hésitez pas à poser des questions si vous en avez !

Merci, cordialement,

Rémi.

SaiTek · 30-06-2011 17:05:30

Bonjour,

Pour le menu déroulant : ( Je ne sais point si c'est ce que tu veux )

Code:

<style> 
body
{
        width:100%;
        margin: 0px auto;
}
 
/* Main menu */
 
#menu
{
        width: 100%;
        margin: 0;
        padding: 10px 0 0 180px;
        list-style: none;  
        background: #111;
        background: -moz-linear-gradient(#444, #000); 
        background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000),color-stop(1, #444));      
        background: -webkit-linear-gradient(#444, #000);        
        background: -o-linear-gradient(#444, #000);
        background: -ms-linear-gradient(#444, #000);
        background: linear-gradient(#444, #000);
        
        -moz-box-shadow: 0 2px 1px #9c9c9c;
        -webkit-box-shadow: 0 2px 1px #9c9c9c;
        box-shadow: 0 2px 1px #9c9c9c;
}
 
#menu li
{
        float: left;
        padding: 0 0 10px 0;
        position: relative;
        line-height: 0;
}
 
#menu a 
{
        float: left;
        height: 25px;
        padding: 0 10px;
        color: #fff;
        text-transform: uppercase;
        font: bold 14px/25px Arial, Helvetica;
        text-decoration: none;
        text-shadow: 0 1px 0 #000;
}
 
#menu li:hover > a
{
        color: #FFF;
}
 
*html #menu li a:hover /* IE6 */
{
        color: #fff;
}
 
#menu li:hover > ul
{
        display: block;
}
 
/* Sub-menu */
 
#menu ul
{
    list-style: none;
    margin: 0;
    width:220%;
    padding: 0;    
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    z-index: 99999;    
    background: #444;
    background: -moz-linear-gradient(#444, #111);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
    background: -webkit-linear-gradient(#444, #111);    
    background: -o-linear-gradient(#444, #111); 
    background: -ms-linear-gradient(#444, #111);        
    background: linear-gradient(#444, #111);
    -moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
    -webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
    box-shadow: 0 0 2px rgba(255,255,255,.5);   
    
}
 
#menu ul ul
{
  top: 0;
  left: 150px;
}
 
#menu ul li
{
    float: none;
    margin: 0;
    padding: 0;
    display: block;  
    -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}
 
#menu ul li:last-child
{   
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;    
}
 
#menu ul a
{    
    padding: 10px;
        height: 10px;
        width: 100%;
        height: 20px;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
        text-transform: none;
}
 
*html #menu ul a /* IE6 */
{    
        height: 10px;
}
 
*:first-child+html #menu ul a /* IE7 */
{    
        height: 10px;
}
 
#menu ul a:hover
{
    background: #0186ba;
        background: -moz-linear-gradient(#04acec,  #0186ba);    
        background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
        background: -webkit-linear-gradient(#04acec,  #0186ba);
        background: -o-linear-gradient(#04acec,  #0186ba);
        background: -ms-linear-gradient(#04acec,  #0186ba);
        background: linear-gradient(#04acec,  #0186ba);
        width:92%;
}
 
#menu ul li:first-child > a
{
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}
 
#menu ul li:first-child > a:after
{
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #444;
}
 
#menu ul ul li:first-child a:after
{
    left: -8px;
    top: 12px;
    width: 0;
    height: 0;
    border-left: 0;     
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    border-right: 8px solid #444;
}
 
#menu ul li:first-child a:hover:after
{
    border-bottom-color: #04acec; 
}
 
#menu ul ul li:first-child a:hover:after
{
    border-right-color: #04acec; 
    border-bottom-color: transparent;   
}
 
 
#menu ul li:last-child > a
{
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}
 
/* Clear floated elements */
#menu:after 
{
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
}
 
* html #menu             { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
</style> 
 

</head> 
<body> 
    
<ul id="menu"> 
        <li><a href="/members/home">Navigation</a></li> 

        <li> <a href="">Navigation </a>    
        <ul>
 <li><a href="#"> Rubrique </a>  </li>
 <li><a href="#"> Rubrique </a>  </li>
 <li><a href="#"> Rubrique </a>  </li>
 <li><a href="#"> Rubrique </a>  </li>
 <li><a href="#"> Rubrique </a>  </li>

                </ul>   </li>   

        <li> <a href="#">Menu </a>     
        <ul>
 <li><a href="#"> Rubrique </a>  </li>
 <li><a href="#"> Rubrique </a>  </li>
 <li><a href="#"> Rubrique </a>  </li>
 <li><a href="#"> Rubrique </a>  </li>
                </ul>   </li> 

        <li> <a href="#">Menu</a> 
                <ul> 
 <li><a href="#"> Rubrique </a>  </li>
 <li><a href="#"> Rubrique </a>  </li>
 <li><a href="#"> Rubrique </a>  </li>
 <li><a href="#"> Rubrique </a>  </li>
                </ul>   </li> 
        
        <li> <a href="#">Menu </a>    
        <ul>
 <li><a href="#"> Rubrique </a>  </li>
 <li><a href="#"> Rubrique </a>  </li>
 <li><a href="#"> Rubrique </a>  </li>
 <li><a href="#"> Rubrique </a>  </li>
 <li><a href="#"> Rubrique </a>  </li>
 <li><a href="#"> Rubrique </a>  </li>
                        
                </ul>   </li> 


        
        <li> <a href="#">Menu </a>     
        <ul>
     <li><a href="#"> Rubrique </a>  </li>
 <li><a href="#"> Rubrique </a>  </li>
 <li><a href="#"> Rubrique </a>  </li>
 <li><a href="#"> Rubrique </a>  </li>
                </ul>   </li> 

        
        <li> <a href="#">Menu</a>      
        <ul>
 <li><a href="#"> Rubrique </a>  </li>
 <li><a href="#"> Rubrique </a>  </li>
 <li><a href="#"> Rubrique </a>  </li>
 <li><a href="#"> Rubrique </a>  </li>
 <li><a href="#"> Rubrique </a>  </li>
                        
                </ul>   </li> 

        
        <li> <a href="#"> Menu</a>     
        <ul>
 <li><a href="#"> Rubrique </a>  </li>
 <li><a href="#"> Rubrique </a>  </li>
 <li><a href="#"> Rubrique </a>  </li>
 <li><a href="#"> Rubrique </a>  </li>
 <li><a href="#"> Rubrique </a>  </li>
                        
                </ul>   </li> 
        
        <li> <a href="#">Menu</a>     
        <ul>
 <li><a href="#"> Rubrique </a>  </li>
 <li><a href="#"> Rubrique </a>  </li>
 <li><a href="#"> Rubrique </a>  </li>
 <li><a href="#"> Rubrique </a>  </li>
 <li><a href="#"> Rubrique </a>  </li>
 <li><a href="#"> Rubrique </a>  </li>
                </ul>   </li> 
        
        <li> <a href="#">Menu </a>      
        <ul>
 <li><a href="#"> Rubrique </a>  </li>
 <li><a href="#"> Rubrique </a>  </li>
 <li><a href="#"> Rubrique </a>  </li>
 <li><a href="#"> Rubrique </a>  </li>
 <li><a href="#"> Rubrique </a>  </li>
 <li><a href="#"> Rubrique </a>  </li>
                        

                </ul>   </li> 
        

        
        <li> <a href="#">Menu </a>      
        <ul>
 <li><a href="#"> Rubrique </a>  </li>
 <li><a href="#"> Rubrique </a>  </li>
 <li><a href="#"> Rubrique </a>  </li>
 <li><a href="#"> Rubrique </a>  </li>
 <li><a href="#"> Rubrique </a>  </li>
 <li><a href="#"> Rubrique </a>  </li>

                </ul>   </li> 

</ul> 
 
<br/>
<br/>

Après le reste je ne sais pas désolé.

remzouille · 30-06-2011 23:51:55

Bonjour, le menu ressort blanc, as tu une démo ?

Merci

SaiTek · 01-07-2011 09:26:26

Non désolé j'ai pas de demo en ligne... sinon tu fais clique droit sur ton bureau tu créer un document text tu met le code ci-dessus et tu clique sur enregistre sous le nom : menu.html et tu l'ouvre avec ton navigateur (:

remzouille · 01-07-2011 17:55:03

Bonjour,

comme tu peux le voir : http://www.remzouilleradio.com/menu.html

:/

remzouille · 01-07-2011 17:56:13

Ca marche que avec firefox :s mais avec IE 8 non

A oué il passe bien smile

Mais as tu une solution pour que il s'affiche aussi sous IE 8 ?

Merci

Dernière modification par remzouille (01-07-2011 17:57:52)

SaiTek · 01-07-2011 20:00:40

Bonsoir,

Non désolé, je n'ai pas IE je suis sous Ubuntu...

#1 29-06-2011 03:32:43

Demande de modification du haut et header d'un kit qui n'existe plus

#2 30-06-2011 17:05:30

Re: Demande de modification du haut et header d'un kit qui n'existe plus

Code:

#3 30-06-2011 23:51:55

Re: Demande de modification du haut et header d'un kit qui n'existe plus

#4 01-07-2011 09:26:26

Re: Demande de modification du haut et header d'un kit qui n'existe plus

#5 01-07-2011 17:55:03

Re: Demande de modification du haut et header d'un kit qui n'existe plus

#6 01-07-2011 17:56:13

Re: Demande de modification du haut et header d'un kit qui n'existe plus

#7 01-07-2011 20:00:40

Re: Demande de modification du haut et header d'un kit qui n'existe plus

Pied de page des forums