6 réponses à ce sujet

[damien59553]

Bonjour à tous, Salut Ren également si tu viens à me lire,

J'ai un nouveau petit problème. Je m'explique :

L'histoire se déroule dans mon header.
J'ai une balise div, à l'intérieur se trouve le titre de mon site placé avec un text-indent de 10px (naturellement à gauche). Je voudrais y ajouter des liens de navigation mais à droite avec un "alinéa inversé" de 10px.

Je complémente par une illustration. Je souhaiterai positionner les liens représentés ci en jaune.

Merci d'avance, bonne après midi,

Modifié par damien59553, 27 January 2011 - 14:21 PM.

[Ren]

Bonjour damien59553,

voici comment tu pourrais procéder.

HTML :

<div id="header-container">
<h1 class="main-title">Mon titre</h1>
<div class="menu-jaune">Mon menu</div>
</div>

CSS :

.header-container {height:50px; width:800px;}
.main-title {float:left;}
.menu-jaune {float:right;}

Bien sûr les valeurs css dans mon exemple son à titre indicatives.

Je t'invite vivement à lire les tutoriels du site Alsacreations, un site très agréable et une référence en la matière.

Tes questions suggèrent que tu ne cherches pas beaucoup par toi même.
Ne le prend pas mal , je répond volontiers à tes questions, mais au moins montre moi que tu as cherché un peu, propose un début de solution à ton problème.

Ren

[damien59553]

Pas de soucis, par contre, ça m'a fait sourire car au moment où je lisais ta réponse, j'avais 3 onglets d'Alsacreation ouvert. De même que je peux t'assurer avoir cherché/essayé un minimum. Mes excuses.
Je vais essayer ce que tu m'as partagé, par contre je ne suis pas sûr que ça est le rendu souhaité car il me faut la marge de 10px de chaque côté, peut être avec padding, je vais voir ça...

Merci,

[damien59553]

Effectivement, avec la règle padding, ça fonctionne parfaitement, merci Ren.

Désolé encore.

[Ren]

Bonsoir damien59553,

aucun problème !
Super que tu lises déjà ce site, il est incontournable

Je reste attentif à tes posts

Ren

[Eddy.vh]

Salut les gars.
Si je peux y mettre mon grain de sel, j'aurais fais :

<ul class="menu-jaune">
<li>Mon premier lien</li>
<li>Mon deuxième lien</li>
<li>Mon troisième lien et plus si affinité</li>
</ul>

Et un formatage des items de la liste pour qu'ils soient à horizontale.

Cela évite une div (boite) ± inutile mais ce n'est que mon avis…

[Ren]

Bonjour,

Edfred a raison, pour ma défense la question concerne le positionnement des éléments (CSS) et pas la sémantique (HTML), car finalement "li", "div" ou n'importe quel élément, le règles CSS appliquées sont les mêmes.

Mais la précision est importante
J'espère que damien59553 fait bien ses menus avec les balises "ul" et "li" !

Ren