Position des liens

Position des liens - HTML/CSS - Programmation

Marsh Posté le 08-06-2009 à 15:41:13    

Coucou,

 

Je voulais savoir si quelqu'un pouvait m'aider sur un détails qui me turlupine concernant l'écart des liens dans mon index.html, j'explique :

 

Je n'arrive pas à trouver le code qui permet de mettre tantôt quelques liens à l'extrême gauche, et tantôt à l'extrême droite tout en restant sur la même ligne ? (j'espère que vous me suivez..?) Faut que ça soit homogène de sorte à ce que ça puisse s'adapter à toutes les résolutions.

 

j'édite via namo.

 

Merci de m'aider


Message édité par pr0faz le 08-06-2009 à 15:42:20

---------------
Mes VenTes - Mes AchaTs
Reply

Marsh Posté le 08-06-2009 à 15:41:13   

Reply

Marsh Posté le 08-06-2009 à 16:17:22    

Reply

Marsh Posté le 08-06-2009 à 16:27:10    

Merci pataluc, justement, je connais un minimum, voici mon code :
 

Code :
  1. <p align="left" style="line-height:100%; margin-top:0; margin-bottom:0;"><b><font size="2" face="Arial">WebCV</font><font size="2"> &nbsp;</font></b><a href="http://google.com"><font size="2" face="Arial">Actualité</font></a><font size="2" face="Arial"> &nbsp;</font><a href="http://google.com"><font size="2" face="Arial">Connaissance</font></a><font size="2" face="Arial"> &nbsp;</font><a href="http://google.com"><font size="2" face="Arial">Expérience</font></a><font size="2" face="Arial"> &nbsp;</font><a
  2. href="http://google.com"><font size="2" face="Arial">Formation</font></a><font size="2" face="Arial"> &nbsp;</font><a href="http://google.com"><font size="2" face="Arial">Maps</font></a><p align="right" style="line-height:100%; margin-top:0; margin-bottom:0;"><a
  3. href="http://www.google.fr/ig?hl=fr&source=iglk">IGoogle</a>&nbsp;|
  4. <a href="https://www.google.com/accounts/Login?continue=http://www.google.fr/&hl=fr">Connexion</a>


 
Mais rien à faire, les deux liens sur la droite saute une ligne et du coup ce n'est plus sur la même ligne que les liens qui se trouvent sur la gauche


---------------
Mes VenTes - Mes AchaTs
Reply

Marsh Posté le 08-06-2009 à 16:46:11    

pr0faz a écrit :

Merci pataluc, justement, je connais un minimum, voici mon code :
 
[cpp]<p align="left" style="line-height:100%; margin-top:0; margin-bottom:0;">


Je crois que "un minimum" est le mot qui convient  :D  
L'intérêt du CSS, c'est de séparer les information de contnu de la présentation.
 
Et affirmer que tu "connais" le CSS, quand (entre autres) tu précises à chaque balise que tu utilise une police Arial taille 2...  :lol:  
 
Encore un exemple ? où as-tu vu qu'on peux ouvrir un paragraphe à l'intérieur d'un autre paragraphe ? Et connais-tu les notions de "bloc" et "inline" ?

Reply

Marsh Posté le 08-06-2009 à 16:55:25    

Heu, j'affirme que je connais un minimum, tu as bien fait de le rappeler. Cela-dit, j'ai pas trop le temps de faire quelque chose de bien propre, je cherche juste une solution à mon problème de départ.
 
Sinon, pour l'instant la mise en page me convient (je le rappel aussi, j'édite avec namo, faire avec le bloc note en séparant le css du html me prendrai trop de temps)


---------------
Mes VenTes - Mes AchaTs
Reply

Marsh Posté le 08-06-2009 à 17:06:04    

pr0faz a écrit :

Heu, j'affirme que je connais un minimum, tu as bien fait de le rappeler. Cela-dit, j'ai pas trop le temps de faire quelque chose de bien propre, je cherche juste une solution à mon problème de départ.

En gros :
- Tu estimes avoir des connaissances de base en HTML/CSS
- Tu n'as pas le temps => tu ponds une daube.
- Malgré tes "connaissances de base" tu ne sais pas corriger ton problème.
- Tu voudrais qu'on te le corriges.
 :pt1cable:  
 
Namo n'est pas capable de positionner des éléments là où tu lui demandes de les mettre ?
Je t'ai donné des pistes (erreurs de balises, bloc/inline), à toi de jouer.  ;)

Reply

Marsh Posté le 08-06-2009 à 17:07:32    

t sur que tu connais ces liens? ton code est trèèèèès loin de ressembler aux exemples d'openweb ou d'alsacreation...
 
[HS]les balises font, c'est crade, il faut utiliser du css...
 

Code :
  1. <div style="border:1px #ff0000 solid">
  2.     <div style="float:left;border:1px #0000ff solid">
  3.       <b>WebCV</b> <a href="http://google.com">Actualité</a> <a href="http://google.com">Connaissance</a> <a href="http://google.com">Expérience</a> <a href="http://google.com">Formation</a> <a href="http://google.com">Maps</a>
  4.     </div>
  5.     <div style="float:right;border:1px #0000ff solid"">
  6.       <a href="http://www.google.fr/ig?hl=fr&source=iglk">IGoogle</a> |
  7.       <a href="https://www.google.com/accounts/Login?continue=http://www.google.fr/&hl=fr">Connexion</a>     
  8.     </div>
  9.     <div style="clear:both" />
  10.   </div>


 
ca, ca marche et c'est propre au sens html moins moche.
 
[EDIT] +1 macgawel: si namo, en plus de pondre du code à vomir, n'est pas capable de faire ce genre de positionnement, tu peux changer d'éditeur...  :jap:

Message cité 1 fois
Message édité par pataluc le 08-06-2009 à 17:25:27
Reply

Marsh Posté le 08-06-2009 à 17:08:02    

Tu fais deux listes, une qui flotte qui à droite, l'autre à gauche.
Mais il est certain que tu peux mettre tout ton code à la poubelle en même temps que Namo si c'est le logiciel qui te produit un tel code.

Reply

Marsh Posté le 08-06-2009 à 17:10:05    

[HS] j'aime quand des réponses font autant l'unanimité... :D

Reply

Marsh Posté le 08-06-2009 à 17:10:18    

pataluc a écrit :


 
ca, ca marche et c'est propre.


 
Beurk   :non:  
Je ne te souhaite d'avoir un handicap et de surfer en mode texte.
C'est pourtant simple, dès que tu as deux liens, tu dois faire une liste, et retirer les | du html

Reply

Marsh Posté le 08-06-2009 à 17:10:18   

Reply

Marsh Posté le 08-06-2009 à 17:12:43    

En fait sur namo je fais tout en mode "édition" et parfois j'vais voir ce qui s'y passe dans "html" donc oui, namo me fait un gros bordel ! grr

Message cité 1 fois
Message édité par pr0faz le 08-06-2009 à 17:13:28

---------------
Mes VenTes - Mes AchaTs
Reply

Marsh Posté le 08-06-2009 à 17:17:17    

pr0faz a écrit :

En fait sur namo je fais tout en mode "édition" et parfois j'vais voir ce qui s'y passe dans "html" donc oui, namo me fait un gros bordel ! grr


Travailles directement en mode "Source" (et tant qu'à faire, avec un bête éditeur à coloration syntaxique genre Notepad++). tu économiseras du temps, plutôt que devoir corriger un code immonde.
Ou alors, utilises Namo en mode "édition" et ne vas pas voir le code...

Reply

Marsh Posté le 08-06-2009 à 17:24:03    

David Boring a écrit :


 
Beurk   :non:  
Je ne te souhaite d'avoir un handicap et de surfer en mode texte.
C'est pourtant simple, dès que tu as deux liens, tu dois faire une liste, et retirer les | du html


 
ouep autant pour moi, c'est vrai que htmleument parlant c'est sans doute mieux, mais pt de vue accessibilité c'est pas terrible non plus...
 
 
qqchose comme ca, ca doit etre mieux:
 

Code :
  1. <style type="text/css">
  2.       ul {
  3.           border:1px #ffffff solid;
  4.           margin-left:0;
  5.       }
  6.       li { 
  7.           display:inline
  8.       }
  9.     </style>
  10.   <body>
  11.     <ul style="float:left;">
  12.       <li><b>WebCV</b>
  13.       <li><a href="http://google.com">Actualité</a></li>
  14.       <li><a href="http://google.com">Connaissance</a></li>
  15.       <li><a href="http://google.com">Expérience</a></li>
  16.       <li><a href="http://google.com">Formation</a></li>
  17.       <li><a href="http://google.com">Maps</a></li>
  18.     </ul>
  19.     <ul style="float:right;">
  20.       <li><a href="http://www.google.fr/ig?hl=fr&source=iglk">IGoogle</a></li>
  21.       <li><a href="https://www.google.com/accounts/Login?continue=http://www.google.fr/&hl=fr">Connexion</a></li>     
  22.     </ul>
  23.     <div style="clear:both" />

Reply

Marsh Posté le 08-06-2009 à 17:25:31    

Justement macgawel, j'veux bien l'utiliser en mode "édition" mais je me heurte à ce problème de lien.


---------------
Mes VenTes - Mes AchaTs
Reply

Marsh Posté le 08-06-2009 à 17:29:12    

du coup c'est bien ce qu'on disait, quite a prendre un soft qui pond du code à caractère vomitif, autant en prendre un qui tant qu'a faire, est capable de faire ce que tu lui demande...

Reply

Marsh Posté le 08-06-2009 à 17:45:40    

Ok, bon alors j'opte pour notepad++. Pis tant qu'à faire, pour aller dans le Mr propre de la propreté, je vais séparer le css du html comme ça je vais mieux m'y retrouver.


Message édité par pr0faz le 08-06-2009 à 17:45:48

---------------
Mes VenTes - Mes AchaTs
Reply

Marsh Posté le 08-06-2009 à 19:22:46    

Je n'arrive pas à trouver comment séparer le texte des liens mais en les laissant sur la même ligne...?


---------------
Mes VenTes - Mes AchaTs
Reply

Marsh Posté le 08-06-2009 à 19:50:08    

Commence par lire le code de cette liste, ensuite les suivantes deviennent plus complexes.
http://css.maxdesign.com.au/listam [...] ntal01.htm

Reply

Marsh Posté le 08-06-2009 à 19:56:57    

J'ai fait comme ça moi :
 

Code :
  1. <span class="web">Web</span>&nbsp;&nbsp;
  2. <a href="http://www.google.com"title="naviguateur">Google</a>
  3. <a href="http://www.google.com"title="naviguateur">Google</a>
  4. <a href="http://www.google.com"title="naviguateur">Google</a>
  5. </p>


 
C'est bon aussi ?


---------------
Mes VenTes - Mes AchaTs
Reply

Marsh Posté le 08-06-2009 à 20:03:24    

Ben non.
Le code html donnée sur listomatic est celui à adopter
http://www.w3.org/QA/Tips/unordered-lists

Reply

Marsh Posté le 08-06-2009 à 20:43:28    

Bizarre, j'ai mis ce code est contrairement à ma méthode, les liens ne s'affichent pas tout en haut mais il y a une marge et même avec "padding-top: 0px, margin-top: 0px," rien y fait


---------------
Mes VenTes - Mes AchaTs
Reply

Marsh Posté le 08-06-2009 à 21:11:50    

Lien1 Lien2 Lien3 Lien4 Lien5                                                                                                                                                                    Lien6 Lien7

 

C'est comme ça que j'aimerai que ça se présente. Les 5 premiers liens doivent se trouver au maximum en haut et à gauche, et les deux autres au maximum en haut et à droite


Message édité par pr0faz le 08-06-2009 à 21:12:09

---------------
Mes VenTes - Mes AchaTs
Reply

Marsh Posté le 08-06-2009 à 21:24:15    

C'est plus facile de t'aider si tu donnes le code html/css
Mais sinon, retire le float:left de la liste de gauche.
Comme le ul fait 100% par défaut, il va jusqu'au bout, et donc la liste de droite passe en dessous.


Message édité par David Boring le 08-06-2009 à 21:25:13
Reply

Marsh Posté le 08-06-2009 à 22:34:05    

Le code html/css est à cette adresse : http://css.maxdesign.com.au/listam [...] ntal01.htm
 


---------------
Mes VenTes - Mes AchaTs
Reply

Marsh Posté le 08-06-2009 à 23:41:10    

J'ai réussi à écarter les liens mais je ne trouve pas le code qui permet de metre tout en haut sans espace :
 

Code :
  1. html
  2. <ul id="menu_horizontal">
  3. <li class="bouton_gauche"><a href="#" title="aller à la section 1">item1</a></li>
  4.         <li class="bouton_gauche"><a href="#" title="aller à la section 2">item2</a></li>
  5. <li class="bouton_gauche"><a href="#" title="aller à la section 3">item3</a></li>
  6. <li class="bouton_gauche"><a href="#" title="aller à la section 4">item4</a></li>
  7.         <li class="bouton_gauche"><a href="#" title="aller à la section 5">item5</a></li>
  8. <li class="bouton_gauche"><a href="#" title="aller à la section 6">item6</a></li>
  9. <li class="bouton_droite"><a href="#" title="aller à la section 7">item7</a></li>
  10. <li class="bouton_droite"><a href="#" title="aller à la section 8">item8</a></li>
  11. </ul>


 
 

Code :
  1. CSS
  2. ul#menu_horizontal {
  3. list-style-type : none;
  4. margin-top: -20px;
  5. }
  6. ul#menu_horizontal li {
  7. padding : 0 0.3em;
  8. margin-top: 0px;
  9. }
  10. li.bouton_gauche {
  11. float : left;
  12. }
  13. li.bouton_droite {
  14. float : right;
  15. }


 
 
 
 
J'ai trouvé (CSS édité, voir en rouge)


Message édité par pr0faz le 09-06-2009 à 00:52:51

---------------
Mes VenTes - Mes AchaTs
Reply

Marsh Posté le 09-06-2009 à 17:13:08    

Je "but" sur autre chose :

 

j'aimerai non pas créer un formulaire, mais juste une zone de saisie, plus deux boutons légèrement espacés, centrés et collés sous la zone de saisie, voici les codes :

 
Code :
  1. HTML :
  2. <form action="#" method="post">
  3.    <p>
  4.        <input type="text" name="cv" id="cv" value="CV Alexandre Si****" size="50" maxlength="256" />
  5.  
  6.    <input value="MonCV.web" name="bouton1" type="submit" />
  7.    <input value="MonCV.pdf" name="bouton2" type="reset" />
  8.    </p>
  9. </form>
 
Code :
  1. CSS :
  2. input{
  3. right: 50%;
  4. left: 50%;
  5. margin-left: -25px;
  6. }
 

Avec le css, j'ai la zone de saisie bien centrée, mais les deux boutons, eux sont tellement serrés qu'ils se chevauchent, et ils se trouvent sur la gauche de la zone.

 


Message édité par pr0faz le 09-06-2009 à 17:57:58

---------------
Mes VenTes - Mes AchaTs
Reply

Marsh Posté le 09-06-2009 à 17:23:43    

euh, t'es sur de ton css la? parce que le right et left je suis pas sur... ca sert pour du positionnement absolu ou fixe, et la t'en a pas...
 
sinon c normal que tes boutons soient serrés, tu leur mets une marge de -25px, c'est à dire que tu leur dis de se décaler de 25px à gauche...


Message édité par pataluc le 09-06-2009 à 17:23:53
Reply

Marsh Posté le 09-06-2009 à 17:36:54    

Oui, effectivement, mais avec ce code css ma zone de saisie se trouve parfaitement au milieu, sans ça j'y arrive pas.


---------------
Mes VenTes - Mes AchaTs
Reply

Marsh Posté le 09-06-2009 à 17:42:10    

pr0faz a écrit :

Oui, effectivement, mais avec ce code css ma zone de saisie se trouve parfaitement au milieu

Les boutons aussi  :D  
 
Dans ton CSS, tu définis une mise en page pour tous les input. C'est à dire la zone de texte, mais aussi les boutons...
 
Une solution vite fait : donne un ID à ta zone de texte pour appliquer le CSS uniquement à elle...

Reply

Marsh Posté le 09-06-2009 à 17:51:30    

Justement, j'aimerai pouvoir définir une mise en page pour tous les input, mais je trouve pas


---------------
Mes VenTes - Mes AchaTs
Reply

Marsh Posté le 09-06-2009 à 18:26:23    

Changement de plan. Étant donné que la première page du site ne contient pratiquement pas de décor (j'aime la sobriété) exit le fichier css. Du coup, le peu de code css se trouvera dans l'html. Je cafouille beaucoup concernant les block, inline, etc, ça me fait bondir sur pas mal de question, je vais y aller par étape :

 

1ère question : heu, voici le code avant :

 


Code :
  1. HTML :
  2. <form name="f">
  3.   <table border="0" cellpadding="4" cellspacing="0">
  4.     <tbody>
  5.       <tr>
  6.         <td style="white-space: nowrap;"><font size="-1"><span style="font-weight: bold;"></span>&nbsp;&nbsp;&nbsp;
  7.         <a id="1a" class="q" href="blablabla1.htm" onclick="return qs(this);">blablabla1</a>&nbsp;&nbsp;&nbsp;
  8.         <a href="blablabla2.htm">blablabla2</a>&nbsp;&nbsp;&nbsp;
  9.         <a href="blablabla3.htm">blablabla et blablabla3</a>&nbsp;&nbsp;&nbsp;
  10.         <a href="blabla et encore bla.htm">blabla et encore bla</a></font></td>
  11.       </tr>
  12.     </tbody>
  13.   </table>
  

Ce code me crée donc 4 liens horizontaux, ma question est; comment rajouter juste un mot, à coté du premier lien "blablabla1" tout en pouvant lui apporter un "font-size, font-weight, etc" sans influer sur les 4 liens ?

 

J'aimerai aussi rajouter à ces 4 liens, 2 autres liens mais à l'autre bout cette fois-ci, à l'extrême droite, comment ça peut se faire ?

 

Puis, comment mettre ce mot, ainsi que les 4 liens, bien en haut et sur la gauche de l'écran ?

 


Il est évident que je ne me contente pas de vous poser des questions, je trouve parfois certaines réponses car la majeure partie de mon temps c'est de rechercher et non attendre que l'on me donne la réponse.

 

Mon objectif c'est de faire quelque chose de super propre avec le moins de code possible, d'où ma présence ici, afin d'être au mieux renseigner par des pro du codage ^^ (petite séance émotive)

 

dans l'attente de vos réponses, "j'vous kiss la molaire"  :)


Message édité par pr0faz le 10-06-2009 à 17:00:19

---------------
Mes VenTes - Mes AchaTs
Reply

Marsh Posté le 10-06-2009 à 00:38:22    

oups, à effacer (merci modo) ^^


Message édité par pr0faz le 10-06-2009 à 17:00:53

---------------
Mes VenTes - Mes AchaTs
Reply

Marsh Posté le 10-06-2009 à 17:03:19    

up


---------------
Mes VenTes - Mes AchaTs
Reply

Marsh Posté le 10-06-2009 à 18:59:36    

up


---------------
Mes VenTes - Mes AchaTs
Reply

Marsh Posté le 10-06-2009 à 20:56:30    

up


---------------
Mes VenTes - Mes AchaTs
Reply

Marsh Posté le 10-06-2009 à 21:27:42    

personne pour m'aider ?


---------------
Mes VenTes - Mes AchaTs
Reply

Marsh Posté le 11-06-2009 à 00:36:05    

Les tables, faut éviter quand on peut. Préfère les div.
Et puis un code propre n'utilise jamais 3 fois de suite "&nbsp;".
Je n'ai pas bien compris ce que tu voulais.
Peux-tu me faire 2 schéma sous paint avec en premier ce que tu as, et en second ce que tu veux ?
 
Merci

Reply

Marsh Posté le 11-06-2009 à 11:20:22    

J'pensais au contraire, que les tableaux c'était mieux, bon alors allons-y pour les div, mais je maîtrise pas trop cette methode, en imaginant que je veuille positionner 3, voire 4 liens à un endroit bien précis, en voulant leur apporter un espace, une police et une taille, comment s'y prendre ?

 

Pour les "&nbsp;".  en guise d'espacement, comment peut-on faire autrement ?

 

Voici un schéma de ce que j'aimerai faire :

 

http://nsa08.casimages.com/img/2009/06/11/090611111135518674.jpg

 


J'aimerai que tout ça puissent être positionné tout en haut, et que la fine barre prenne toute la largeur de l'écran.

 

Je n'arrive pas à comprendre comment faire pour apporter un style différent à chacunes de ces images sans influencer les autres. Ce cas de figure, j'ai du mal à le comprendre et ça me pose problème avec toutes les autres balises (zone de texte, bouton, etc)
 
  Je mélange souvent entre <span>?</span> class, id, <DIV>... je ne sais pas qui correspond à quoi.

Message cité 1 fois
Message édité par pr0faz le 11-06-2009 à 11:31:28

---------------
Mes VenTes - Mes AchaTs
Reply

Marsh Posté le 11-06-2009 à 11:25:40    

Code :
  1. <div style="float:left;">
  2. <a id="1a" class="q" href="blablabla1.htm" onclick="return qs(this);">blablabla1</a>       
  3. <a href="blablabla2.htm">blablabla2</a>adsf
  4. <a href="blablabla3.htm">blablabla et blablabla3</a>
  5. <a href="blabla et encore bla.htm">blabla et encore bla</a>
  6. </div>
  7. <div style="float:right">
  8. <a href="blabla">asdf</a>
  9.  <a href="bla bla">ert</a>
  10. </div>


 
Edith : l'utilisation d'un fichier css étant fortement recommandée, te permettra de gérer les marges, les espaces, etc. proprement.


Message édité par deliriumtremens le 11-06-2009 à 11:28:31
Reply

Marsh Posté le 11-06-2009 à 11:56:02    

Arf, donc si j'utilise un fichier css, j'efface de mon code html cette ligne :

 
Code :
  1. <div style="float:left; margin-top:-5px; font-family:arial; font-size:12px;">


je la remplace par :

 
Code :
  1. <div style="lien_haut"


Ensuite dans un fichier css je marque :

 
Code :
  1. .lien_haut{
  2. float:left;
  3. margin-top: -5px;
  4. font-family: arial;
  5. font-size: 12px;
  6. }


?


Message édité par pr0faz le 11-06-2009 à 11:58:04

---------------
Mes VenTes - Mes AchaTs
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed