Titre: Mise en page css
Posté par: Jeremie. le le 22-01-2013 a 19:07:31
Bonsoir,
Je viens ici car j'ai un problème, que voici :
Je refais complètement le site de mon père, qui est artiste peintre et sculpteur.
J'ai donc fait la maquette du menu sur Photoshop :
[url=http://www.servimg.com/image_preview.php?i=363&u=13419792]
J'ai écrit ça en HTML5 :
[url=http://www.servimg.com/image_preview.php?i=364&u=13419792]
Et ça en CSS3 :
[url=http://www.servimg.com/image_preview.php?i=365&u=13419792]
Seulement voilà le rendu :
[url=http://www.servimg.com/image_preview.php?i=367&u=13419792]
Je n'ai pas réussi à aligner le texte sur la bande du menu, et je n'ai pas réussi à mettre les petits "séparateurs" gris, présents sur la maquette Photoshop.
Auriez vous une idée ? |
Titre: Re:Mise en page css
Posté par: Wolf18 le le 22-01-2013 a 21:40:31
Essayes de rajouter dans ton "nav" :
Code:
Par contre fais attention, ton nav ul fait 1126px de large.. Autrement dit, si on ne veut pas voir la barre de scoll horizontale il faut avoir une sacrée résolution :)
Pour les séparateurs gris, pourquoi ne pas les insérer directement sur l'image de fond si ils ne sont amenés à changer ? |
Titre: Re:Mise en page css
Posté par: MarvinLeRouge le le 24-02-2013 a 12:54:10
Salut,
Si le menu est en texte, il vaut mieux éviter de mettre les séparateurs sur le fond, en cas de changement de taille de texte. |
Titre: Re:Mise en page css
Posté par: Franck K le le 26-02-2013 a 11:54:38
Wolf, s'il centre le contenu de nav, les 2 items du milieu apparaitront sur le logo =).
Tout d'abord, si tu as un canvas fixe, comme le dit Wolf il faudrait peut être revoir la largeur (genre 960px).
Ensuite Je serais curieux de savoir pourquoi tout le monde met des lists pour les menus ? C'est par défaut sur les thèmes WP, on voit ça sur beaucoup de site, mais pourquoi ? C'est certainement justifé, mais je ne vois pas (sauf pour certains menus verticaux, ok).
En plus pourquoi ajoutes tu le logo, PUIS le menu que tu redécales vers le haut ?
Bref j'aurais tendance à avoir un code de ce type (non testé hein) :
<nav>
<a href="LIEN">TEXT</a>
<a href="LIEN">TEXT</a>
<a href="LIEN">TEXT</a>
<a href="LIEN">LOGO</a>
<a href="LIEN">TEXT</a>
<a href="LIEN">TEXT</a>
<a href="LIEN">TEXT</a>
</nav>
Et tu centres tout le contenu du nav comme l'a dit Wolf.
Il ne te reste plus qu'à modifier le style des ancres, notamment et surtout le line-height (qui sera égal à la hauteur du logo).
Certainement que tu auras besoin d'ajouter une class sur l'ancre du logo pour lui donner un style spécifique.
Tiens nous au courant =). |
Titre: Re:Mise en page css
Posté par: KB le le 28-02-2013 a 11:11:22
Ou tu divise ton menu en 2 menus. celui a gauche du logo et celui a droite. Tu les positione en absolute dans une div qui regroupe tout ton header ?
|
Titre: Re:Mise en page css
Posté par: MarvinLeRouge le le 28-02-2013 a 11:44:15
| Euh non sinon le jour où quelqu'un augmente sa taille de caractères, tout se superpose. |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|