Reprise du message précédent :
Arf, donc si j'utilise un fichier css, j'efface de mon code html cette ligne :

je la remplace par :

Ensuite dans un fichier css je marque :

?

Nan.
 
Une "class" xxx est représentée par un .xxx dans un fichier css (ou défini entre des balises <style> )
 
Donc dans le html, <div class="lient_haut"
dans ton cas.
 
"style", c'est pour des éléments qui ne font pas appel à des styles pré-définis ailleurs.

(Désolé si ça apparaît sur l'image, je ne peux pas la voir du boulot    )
Avant de te dire par quoi remplacer le tableau, il faudrait connaître le sens des liens.
S'il s'agit d'un menu ou assimilé, on peut considérer ça comme une liste (donc ul->li->a).

Il y a pas mal de tutoriels sur le net.
Voir, par exemple, Alsacréations.
 
Vite fait :
1. Blocs/"inline" :
Un journal est composé d'articles. Un article est composé de plusieurs blocs : au moins le titre (balises h1...hn) et les paragraphes (balise p).
Ce sont des blocs.
A l'intérieur d'un paragraphe, il peut y avoir des mots en gras ou en italique. Ce sont des éléments qui font partie intégrante d'un bloc. Ils sont juste mis en valeur -ou ont un sens particulier (une référence à un autre article). C'est ce qu'on appelle des éléments "inline" (si quelqu'un a une traduction correcte je suis preneur).
   Attention :
On peut donner à un bloc la propriété display:inline; pour qu'il soit intégré au texte. Ce n'est que de la présentation. Au niveau sémantique, ça reste un bloc distinct des autres blocs.
Exemple :
Une liste est composé de blocs distincts :

• bloc1
• bloc2
• bloc3

Je peux demander un affichage "inline" pour obtenir :
bloc1   bloc2    bloc3
Mais ce sera toujours reconnu comme trois blocs.
 
 
2. DIV/SPAN :
En (x)html, les balises ont une signification. C'est à dire qu'une balise titre (h1) est interprétée comme "c'est un titre".
Problème : il y a toujours des cas où on ne trouve pas de balise cohérente avec le contenu. Pour reprendre l'exemple du journal, un article est un bloc en lui-même, mais il n'y a pas de balise pour le signifier. Il arrive aussi qu'on ait besoin de marquer un élément sans qu'il ait de signification propre.
Dans ces cas-là on utilise une balise générique (qui n'a pas de sens) : un bloc div, ou un élément inline span.
 
3. Classes / Id :
Pour reprendre le journal :
Dans un journal on trouve plusieurs articles. Leur mise en page est toujours (à peu près) la même.
En html "classique" il faudrait donc définir le style, toujours le même pour tous les articles, dans la balise.
Avec le CSS on va créer une classe "article". Tous les articles seront définit comme appartenant à la classe "article" (class="article"). Et on définira la mise en page des articles dans le CSS (.article {...}).
Il peut y avoir des cas particuliers. Par exemple, il y a (en général) un seul édito. Dans ce cas, on pourrait définir le style dans la balise, mais on se retrouverait avec des éléments de présentation à deux endroit. Pas top.
Du coup, on donne à cet élément un id, qui est forcément unique sur une page, et on le définira dans le CSS p ar #unique {...}.
On peut donner à un élément une classe et un id (l'édito est aussi un article...)

perso je ne comprends pas où tu butes sur ton pb de menu horizontal, alors que dans un de tes posts plus haut (le 09-06-2009 à 17:13:08) tout semblait bon...

pataluc: ce post concernait un input de type "text" et non l'affichage de liens horizontaux ^^

macgawel : Super comme résumé ! je vais le relire histoire de bien comprendre tout ça.

On m'a dit de ne pas utiliser "&nbsp;".  si je voulais du code propre, qu'est-ce que j'dois utiliser à la place pour faire des espaces ?

il faut utiliser la propriété css margin-left.
 
Par exemple margin-left:10px pour laisser un espace à gauche de 10 pixels.

Je parlais des espaces entre chaque lien...

Bon, toute façon, ça ne va pas, ça veut pas s'adapter à toutes les résolutions !

J'reviens à mes débuts à savoir tout mettre dans le html. Donc comment peut-on arriver à ce résultat :

en pouvant apporter des modifs à "CV" sans influer sur les liens

j'ai bidouillé ca, ca me semble correspondre à ce que tu veux:
 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <title></title>
  <style type="text/css">
  <!--
    body {
      margin: 0;
      padding: 0;    
    }
    hr {
      margin: 0;
      padding: 0;
      color:blue;
      background-color: blue;
      height: 1px;
      border: 0;      
    }
    h1 {      
      float:left;
    }
    ul {
      margin: 0;
      padding: 0;
      /*border: 1px #00ff00 solid;*/
    }
    li {
      /*border: 1px #ff0000 solid;*/
      margin: 0;
      padding: 0;
      list-style-type: none;
    }
    li.left {
      float: left;
      margin-right:10px;
    }
    li.right {
      float: right;
      margin-left: 10px;
    }
  //-->
  </style>
  </head>
  <body>
  
  <h1>CV</h1>
  <ul>
    <li class="left"><a href="blablabla1.htm">Lorem</a></li>      
      <li class="left"><a href="blablabla2.htm">ipsum</a></li>
      <li class="left"><a href="blablabla3.htm">dolor</a></li>
      <li class="left"><a href="blabla et encore bla.htm">sit amet</a></li>
  
      <li class="right"><a href="blabla">consectetur</a></li>
      <li class="right"><a href="bla bla">adipiscing elit</a></li>
  </ul>
  <hr style="clear:both" />

  </body>
</html>

 
[EDIT] j'ai mis "CV" dans un h1 car je considère que c'est le titre de la page, donc sémantiquement c'est ce qui me parait logique. par contre du coup il est beaucoup trop gros, faudra le retailler. et aussi un peu adapter les marges...

Merci pataluc, ça fonctionne, et c'est meme adapté à toutes les résolutions ! j'ai que "<hr style="clear:both" />" qui ne veut pas monter de 2, voire 3px même avec "margin-top:-2px;"  
 
Je vous embête avec tout ça, mais faut vraiment qu'ça s'adapte à toutes les résolutions, sans ça, ça ressemblerait à rien.

C'est étrange, en plus du problème ci-dessus, j'essaye de rajouter une image et de la centrer, mais elle ne s'affiche pas

Remplace <hr style="clear:both" /> par <div style="clear:both" />

Toujours pareil :

<div style="clear:both" />

<img src="images/Sir-alex.png" alt="cv" />
   </body>
</html>

L'image ne s'affiche pas

up

Pour l'image c'est réglé (une bêtise de ma part) Par contre je n'arrive pas à la centrer "align:center;" alors qu'avec un "margin:left:40%;" ça fonctionne.

Autre point; je n'arrive toujours pas à faire un margin-top pour définir l'espace entre les liens et le "<hr>"

Je n'arrive toujours pas à faire un margin-top pour définir l'espace entre les liens et le "<hr>"

J'en peux plus, j'expose mon code :

Tout va super sur une résolution de 1366x768, mais alors sur une résolution de 1024x768 c'est la catastrophe ! Les liens en haut sont complètement serrés, puis les liens sur le coté droit de la zone de texte sont...sur la zone de texte !
 
Il me semble que j'ai respecté la sémantique. Quelqu'un a une solution ?

up

résolution 1366x768 :
 

 
 
Résolution 1024x768 :
 

 
Là on voit bien que ça part en cacahuète, les liens en haut se sont rapprochés, puis les 3 petits liens sont sur le input text...

 
1. Pour un affichage sur 1024 px :
- Le li "petit_lien" est positionné à 63.5% à gauche.
63.5% de 1024 => 650 px.
- Le li "zone_bouton" n'ayant pas d'information de mise en page, il prend la page complète (c'est un bloc).
- Le champ "nom" est définit avec une taille de 55. Ce qui correspond, dans ton cas, à une taille de 352 px. Il est centré.
On peut donc en déduire qu'il commence au pixel (1024/2) - (352/2) = 336 px.
Et qu'il finit à la position 688px.
 
=> Forcément, entre un champ qui finit en 688 et un lien qui commence en 650 il y a chevauchement !
 
2. Tu n'as pas l'air d'avoir bien saisi le principe des listes.
ul => définition de la liste.
li => définition d'un élément de la liste.
Dans ton cas, tu as deux solutions (c'est une question de sémantique et là-dessus je ne peux pas t'aider) :
- Tous tes éléments (INPUT et liens) font partie du même "groupe" :

<form name="f">
    <ul>
        <li class="zone_bouton"><input type="text" name="nom" size="55" maxlength="256" value="alexandre" /></li>
        <li class="zone_bouton"><input type="button" value="moncv" onclick="page1" /><input type="button" value="moncv" onclick="page1" /></li>
        <li class="petit_lien"><a href="hop">1</a></li>
        <li class="petit_lien"><a href="hop">2</a></li>
        <li class="petit_lien"><a href="hop">3</a></li>
    </ul>
</form>

- Tu as deux "groupes" distincts :

<form name="f">
    <ul class="zone_bouton">
        <li><input type="text" name="nom" size="55" maxlength="256" value="alexandre" /></li>
        <li><input type="button" value="moncv" onclick="page1" /><input type="button" value="moncv" onclick="page1" /></li>
    </ul>
    <ul class="petit_lien">
        <li><a href="hop">1</a></li>
        <li><a href="hop">2</a></li>
        <li><a href="hop">3</a></li>
    </ul>
</form>

C'est pareil, quand je réduis la page, les liens viennent chevaucher sur le input text. Puis en plus, il y a un trop grand écart entre eux (l'un en dessous de l'autre)

 
 

 
J'aimerai que les liens ne bougent pas.

je cherche partout et impossible de trouver la solution

up

dernier up du soir

c'est l'attitude à adopter quand on a pas de réponse ou c'est juste que personne passe?

up

up

1. Après reflexion, je me demande si les "petits liens" font partie de ton formulaire ?
 
2. Je ne sais pas qui t'a dit de mettre les éléments du formulaire en liste, mais c'est une erreur (en  fait, je crois que c'est moi   )
Par contre, tu peux utiliser la balise label, qui est bien utile (accessibilité, ...)
 
3. Si tu ajoutes des bordures à tes blocs, dans le CSS, tu pourras mieux voir comment ils se comportent :

.zone_bouton {
   text-align:center;
   margin-top:1%;
   border: 1px solid red;
}
.petit_lien {
   margin-left:62.2%;
   margin-top:-4.5%;
   font-size:8.5 px;
   border: 1px solid blue;
}

En gros, si je comprends bien tu as deux blocs (le formulaire en lui-même et la liste). Tu voudrais en avoir un à gauche et l'autre à droite. C'est bien ça ?

.zone_bouton {
    width:60%;
    float:left;
}
.petit_lien {
    font-size:8.5px;
    width:20%;
    float:right;
}
 
/*
On définit le label comme un bloc, ce qui permet d'avoir un champ par ligne 
Eventuellement, si tu ne veux pas afficher le label, tu peux mettre le label en
visibility:hidden.
Dans ce case, rajouter la propriété visibility:visible pour le label input 
 
Il y a certainement mieux, mais je ne me suis pas trop penché sur le problème...
*/
.zone_bouton label {
    display:block;
}

Avec ça, tu as un bloc zone-bouton aligné à gauche qui fait 60% de la page, et un bloc petits_liens aligné à droite. Tant qu'il y a de la place (i.e. tant que ta zone "petits_liens" fait moins de 40% de la page), elle sera à côté du bloc "zone_boutons"...
 
Après, soit tes liens font partie du formulaire et tu peux utiliser la balise fieldset (qui définit des blocs logiques dans un formulaire) :

<form name="f">
<fieldset  class="zone_bouton"><label>Nom<input type="text" name="nom" size="55" maxlength="256" value="alexandre" /></label>
    <input type="button" value="bouton1" onclick="page1" /><input type="button" value="bouton2" onclick="page1" />
</fieldset>
<fieldset class="petit_lien">
<ul>
    <li><a href="hop">1</a></li>
    <li><a href="hop">2</a></li>
    <li><a href="hop">3</a></li>
</ul>
</fieldset>
</form>

Soit ils ne font pas partie du formulaire et tu peux faire :

<form name="f" class="zone_bouton">
    <label>Nom<input type="text" name="nom" size="55" maxlength="256" value="alexandre" /></label>
    <input type="button" value="bouton1" onclick="page1" /><input type="button" value="bouton2" onclick="page1" />
</form>
<ul class="petit_lien">
    <li><a href="hop">1</a></li>
    <li><a href="hop">2</a></li>
    <li><a href="hop">3</a></li>
</ul>

Au passage, tu devrais définir ta font-size en em plutôt qu'en pixels (ou alors en utilisant un mot-clé comme "small" ), c'est plus "user-friendly"... Et tu devrais plutôt utiliser des id que des classes (à moins que tu aies plusieurs "zones de boutons" )

En fait la je suis complètement embrouillé. Je ne cherche pas à faire un formulaire, juste un input text et deux submit juste sous l'input text et à droite 3 liens. Comme ceci :

Seulement, je voudrais éviter à mes 3 liens de bouger quand on rétréci la fenêtre de cette façon :

O_o je découvre que tu as 2 topics pour le même problème et où des gens différents prennent du temps pour te répondre pour rien...
 
http://forum.hardware.fr/hfr/Progr [...] 3765_1.htm

 
Pourquoi pour rien ? Au contraire, j'essaye de récolter un maximum d'informations, je trouve que c'est plutôt un avantage.

macgawel, je suis embrouillé par tes explications, pas par les différentes informations ^^

C'est le formulaire qui t'embrouille ?
 
Pourtant, quand on a une balise <form>...</form>, c'est un formulaire...
 
Sinon, pour rejoindre Alekusu2, le problème c'est que les propositions qu'on te fait dans les deux topics ne sont pas forcément compatibles, au contraire.

Oui, le formulaire, enfin disons plutôt que c'est le code en général. Tu me demandes si les liens font partis du formulaire, non, pas vraiment, tant que les liens sont tout près de input text, ça me va. Voici en image l'effet désiré :

J'y arrive bien, mais je ne trouve pas la solution pour éviter à mes liens de bouger si jamais l'utilisateur était sous une autre résolution. (j'espère ne pas donner l'impression de me répéter)

font-size:8.5 px;
<-- je ne savais pas que le demi pixel existait