Aller au contenu

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


Sujets conseillés

Posté

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.

<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:

<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.

Posté

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

Posté

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.

Posté

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

à gauche un label,

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

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.

Posté

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...

Posté
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" :whistling:

Posté
Bonjour,

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

<{POST_SNAPBACK}>

Salut !

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

Posté
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 :lol:

Posté

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...

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...