Webmaster Hub > mise en CSS d'un <ul><li> à la place d'une table

Version complète: sur le forum Webmaster Hub : mise en CSS d'un <ul><li> à la place d'une table

Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS

slender

jeudi 20 janvier 2005 à 17:14

Bonjour,
Je ne poste pas souvent ici mais je m'y mets... Bonjour aux WRIstes.

Voilà, dans un content (pas dans une mise en page), je voudrai faire afficher deux colonnes - à gauche un label, à droite l'input ou le select permettant de rentrer les données utilisateur.

Ce code est normalement dans une table simple à 2 colonnes.

CODE

<table>
<tr><td>nom</td><td><input name = nom></td><tr>
<tr><td>prenom</td><td><input name = prenom></td><tr>
<tr><td>email</td><td><input name = email></td><tr>
</table>

je veux remplacer cette table par un <ul><li> avec un span qui détermine la largeur de la colonne de gauche de manière à aligner la colonne de droite.
Voici le code que j'ai mis au point. Il fonctionne correctement sous IE6 mais pas sous Firefox ni Opéra.
Est-ce que cette manière de coder est-elle valable? Est-il possible de la rendre efficace sous tous les navigateurs habituels?

Voilà le code:

CODE

<html>
<head>
<title>essai</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

.container {
    width:1000px;
}
.container ul, li {
    list-style-type: none;
}
.container li {
    margin-bottom: 5px;
}
.col1 {
    width:150px;
    color:#4A4A4A;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9px;
    background-color: #CCFFFF;
}
.col2 {
    padding-left:10px;
    color:#4A4A4A;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9px;
}

</style>
</head>

<body>
<div class="container">
<ul>
    <li><span class="col1">Firstname</span><span class="col2"><input name="givenname" value="" size="30" maxlength="60" type="text"> Optional</span></li>
    <li><span class="col1">Lastname</span><span class="col2"><input name="familyname" value="" size="30" maxlength="60" type="text"> Optional</span></li>
    <li><span class="col1">Real e-mail</span><span class="col2"><input name="realemail" value="portal_AT_example.com" size="30" maxlength="60" type="text"> Required</span></li>
</ul>
</div>
</body><html>

Merci aux spécialistes du CSS.

Country

jeudi 20 janvier 2005 à 17:22

Je ne suis pas un spécialiste du CSS (et loin de là) mais j'obtient un résultat pas trop mal en ajoutant float:left; dans le style de .col1

slender

jeudi 20 janvier 2005 à 17:30

good idea...
cette manoeuvre fait remonter la colonne gauche vers le haut - ce que je voulais sans le demander - et ca permet d'obtenir le résultat désiré sous firefox.
Espérons que cela permettrait d'afficher correctement sur la plupart des navigateurs.
merci en tout cas.

Ganf

jeudi 20 janvier 2005 à 17:35

Tout d'abord désolé si je répond à coté mais ça me semble important.

CITATION

à gauche un label,

Pourquoi ne pas utiliser la balise <label> ? elle est faite pour ça.

CITATION

je veux remplacer cette table par un <ul><li> avec un span

Mis à part le span qui *doit* être un <label> à la place, pourquoi vouloir remplacer le tableau par la liste ? tu as bien deux lignes de deux champs. Le tableau se justifie très bien coté HTML.
Il ne faut pas subir la mode ambiante qui banni le tableau du HTML. Le tableau c'est bien, il suffit de l'utiliser comme il faut et pas pour faire du layout de la présentation.
Ici c'est bon, tu n'as pas besoin de l'enlever. J'ai l'impression que tu te poses un problème qui n'existe pas en réalité.

Sinon, pour répondre à ta question, un élément inline (<span class=".col1">) n'a pas le droit d'avoir de taille horizontale (width). Il est donc normal que firefox et opera ne le comprennent pas. C'est MSIE qui est en tort.

slender

jeudi 20 janvier 2005 à 17:38

Oui mais le code est beaucoup plus propre sous forme <ul><li> je trouve par rapport à la table. Peut-etre que j'exagère aussi et que je tiens à tout remplacer par des blocs...

Arlette

jeudi 20 janvier 2005 à 19:29

CITATION(slender @ jeudi 20 janvier 2005, 17h14)

Bonjour,
Je ne poste pas souvent ici mais je m'y mets... Bonjour aux WRIstes.

Bonjour,
C'est sympa comme introduction, mais ici on dit "Hubiste"

Lurch

jeudi 20 janvier 2005 à 19:37

CITATION(slender @ jeudi 20 janvier 2005, 17h14)

Bonjour,
Je ne poste pas souvent ici mais je m'y mets... Bonjour aux WRIstes.

Salut !

Moi, à ta place, j'irai poser cette question sur le Forum Webmaster Hub

Dan

jeudi 20 janvier 2005 à 19:54

CITATION(slender @ jeudi 20 janvier 2005, 17h14)

Je ne poste pas souvent ici mais je m'y mets... Bonjour aux WRIstes.

Salut Slender,

Ici on prend cela à la rigolade... mais si tu vas chez eux en disant "Bonjour les Hubistes" , je pense que tu risques gros

Xavfun

jeudi 20 janvier 2005 à 22:31

Hello,

Euh pourquoi il n'y a pas de

CITATION

WRIstes.

ici ?

CITATION

mais si tu vas chez eux en disant "Bonjour les Hubistes" , je pense que tu risques gros

pourquoi ils sont méchants ces gens là ?

slender

vendredi 21 janvier 2005 à 12:24

ne vous méprenez pas, j'ai bien écrit WRIstes car il me semblait avoir reconnu quelques pseudos. Je n'ai pas encore osé le Hubistes car je n'ai posté que rarement. Comme je sais que les posts peuvent être plein d'humour et de taquineries sur les deux forums je ne me fais pas de souci.. Alors allons-y: BONJOUR les HUBISTES...

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.