La Communauté Webmaster  forum rss


  Forum-webmaster
  Technique - programmation
  HTML / CSS / XHTML
(Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  Mise en page css
« Précédent Suivant »
Pages: [1] Descendre
Répondre    Aviser des réponses    Envoyer le sujet    Imprimer
  Auteur  Sujet: Mise en page css  (Lu 1657 fois)
Mise en page css
« sur: le 22-01-2013 a 19:07:31 »
Jeremie.
Membre récent
*

Hors-Ligne

Messages: 2





Voir le Profil
Répondre avec citation

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 :



J'ai écrit ça en HTML5 :



Et ça en CSS3 :



Seulement voilà le rendu :



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 ?

« Dernière Édition: le 22-01-2013 a 19:12:29 par Jeremie. » Rapporter au modérateur  

Re:Mise en page css
« Répondre #1 sur: le 22-01-2013 a 21:40:31 »
Wolf18
Guru
*****

Hors-Ligne

Sexe: Male
Messages: 1343





Voir le Profil    WWW
Répondre avec citation

Essayes de rajouter dans ton "nav" :
Code:
text-align:center;

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 ?

Rapporter au modérateur  

Création de sites internet sur mesure Var (PACA) | Webdesign, découpage/codage, programmation, référencement
Communauté GTA5 francophone
Partageons l'actualité jeux-video
Re:Mise en page css
« Répondre #2 sur: le 24-02-2013 a 12:54:10 »
MarvinLeRouge
Superactif
****

Hors-Ligne

Messages: 584





Voir le Profil    WWW
Répondre avec citation

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.

« Dernière Édition: le 26-02-2013 a 12:00:04 par MarvinLeRouge » Rapporter au modérateur  

Développeur web / Création de site internet
jean@ceugniet.com
Jean Ceugniet, Développement web
SIRET : 523 611 044 00018
Re:Mise en page css
« Répondre #3 sur: le 26-02-2013 a 11:54:38 »
Franck K
Habitué
***

Hors-Ligne

Sexe: Male
Messages: 319



Développeur / Intégrateur Freelance

Voir le Profil    WWW    E-Mail
Répondre avec citation

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 =).

Rapporter au modérateur  

Franck Kosellek - Développeur web en freelance depuis 2009 -
Expert E-commerce / Prestashop. Nephila Studio - PrestaStudio
SIRET 798 506 366 00011
Re:Mise en page css
« Répondre #4 sur: le 28-02-2013 a 11:11:22 »
KB
Superactif
****

Hors-Ligne

Messages: 613





Voir le Profil
Répondre avec citation

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 ?

Rapporter au modérateur  
Re:Mise en page css
« Répondre #5 sur: le 28-02-2013 a 11:44:15 »
MarvinLeRouge
Superactif
****

Hors-Ligne

Messages: 584





Voir le Profil    WWW
Répondre avec citation

Euh non sinon le jour où quelqu'un augmente sa taille de caractères, tout se superpose.

Rapporter au modérateur  

Développeur web / Création de site internet
jean@ceugniet.com
Jean Ceugniet, Développement web
SIRET : 523 611 044 00018
Répondre    Aviser des réponses    Envoyer le sujet    Imprimer
Pages: [1] Monter
« Précédent Suivant »
Sauter à: 

Votre statut : Invité
Vous devez être membre pour participer.
 
 
Let’s Encrypt : le certificat SSL gratuit
Tester votre site internet sur différents navigateurs
[WordPress] Des problèmes avec l’administration ?
Rappel : Mettez à jour vos CMS et vos sites E-commerce
Le .fr fête ses 25 années d’existence !
Mesurer votre audience en temps réel avec BubbleStat
Porter réclamation contre Google Panda ?
Zlio n’est plus …
 
 
 
 
 

Copyright (c) Devclic 2002 - 2026 - Tous droits réservés

creation site internet strasbourg