Forums Développement Multimédia

Aller au contenu

Positionnement de texte

CODE HTML CSS

6 réponses à ce sujet

#1 damien59553

    Ceinture Jaune

  • Members
  • PipPip
  • 26 messages

Posté 27 January 2011 - 14:20 PM

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,

:) Fichier joint  Capture.PNG   2.71 Ko   15 téléchargement(s)

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


#2 Ren

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 600 messages

Posté 27 January 2011 - 14:48 PM

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
---------- anonymation - Studio de création ----------
www.anonymation.com - blog.anonymation.com
---------------------- Projets internes ---------------------
www.mavoiturealouer.com - www.cosplay-it.com

#3 damien59553

    Ceinture Jaune

  • Members
  • PipPip
  • 26 messages

Posté 27 January 2011 - 15:17 PM

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,

#4 damien59553

    Ceinture Jaune

  • Members
  • PipPip
  • 26 messages

Posté 27 January 2011 - 15:21 PM

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

Désolé encore. :)

#5 Ren

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 600 messages

Posté 27 January 2011 - 18:00 PM

Bonsoir damien59553,

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

Je reste attentif à tes posts :)

Ren
---------- anonymation - Studio de création ----------
www.anonymation.com - blog.anonymation.com
---------------------- Projets internes ---------------------
www.mavoiturealouer.com - www.cosplay-it.com

#6 Eddy.vh

    Éternel apprenti.

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 1194 messages

Posté 28 January 2011 - 22:05 PM

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…

#7 Ren

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 600 messages

Posté 29 January 2011 - 10:21 AM

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
---------- anonymation - Studio de création ----------
www.anonymation.com - blog.anonymation.com
---------------------- Projets internes ---------------------
www.mavoiturealouer.com - www.cosplay-it.com



1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP