28118 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

voila je vais tenter d'intégrer cette maquette (désoler pour taille je n'ai pas le PSD au boulot) dans wordpress :
http://img227.imageshack.us/img227/7618/screenshotss.png

Je commence par un zonning HTML/CSS en mettant des blocs de couleurs pour symboliser les endroit ou seront placer les infos :
http://www.tristanroger.fr/heberg/wordpress/

Avant de continuer j'aimerais placer correctement mon bloc menu, quelle est la meilleur solution ? passer le logo en relatif et jouer avec les margin du bloc menu ?

Merci !
Modifié par Teytoon (20 May 2010 - 14:46)
Merci pour la réponse, j'ai éesayer, ça a l'air de fonctionner sur le principe (j'ai aussi passer mon logo en relatif) :

http://img243.imageshack.us/i/image1zi.png/
http://img38.imageshack.us/i/image2ka.png/

Maintenant pour le positionement de mes titres menu, le padding ne s'affecte pas à l'intérieur (surement du au 100%), doit je crée une div pour chaque titre de menu et ensuite je pourrais appliquer un margin pour les décaler à souhait ?

merci encore !
Modifié par Teytoon (19 May 2010 - 14:14)
Non ça ce n'est pas une bonne solution Smiley biggol

- Ton menu doit (ce n'est pas une obligation mais bon) être une liste (généralement <ul>) pour des raisons de propreté, d'accessibilité et de référencement.
- C'est une erreur de croire qu'on ne peut styler que les divs. Les divs sont inutiles dans la majortié des cas.

L'exemple que je t'ai donné était une piste pour te faire avancer. Vire tous tes divs (même le menu), et à la place :

<ul id="menu">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>

ensuite tu peux styler ton menu :

#menu {
width: 100%;
text-align: right;
}

et chacun de tes items :

#menu li {
display: inline; (pour afficher les éléments de menu en ligne et non en colonne)
margin: XX;
padding: XX;
color: XX;
etc.
}

Voilà ! Tu as un super menu stylable à volonté, propre, et SEO compliant !
Yes ! super, je test ça toute à l'heure, enfaite je n'étais pas partie sur une histoire de liste car vu qu'avec wordpress je vais devoir remplacer ça par un fonction php, mais au moins il me donneras une très bonne base !
Salut,

pas de soucis avec wordpress, celui utilise php pour intégrer les éléments de menus, mais comprendra parfaitement ce code (et heureusement !! Smiley smile )
Kursus, un grand merci car comme tu peut le voir sur : http://www.tristanroger.fr/heberg/wordpress/ ça commence à prendre forme ! Smiley smile

Un petit problème ce pause maintenant à moi... c'est le slide intégrer à wordpress que j'ai réussi à faire afficher le hic c'est qu'il me crée un éspace noir au dessus de lui, j'ai beau chercher avec firebug je ne trouve pas comment le coller à mon header,

une idée ?

edit : j'ai ajouter un margin-top négatif, je ne c'est pas si c'est "propre" mais ça marche...
Modifié par Teytoon (20 May 2010 - 15:02)