28220 sujets

CSS et mise en forme, CSS3

[resolu] Mise en page, liste et css.

salut à tous Smiley smile
je souhaite nettoyer mon code de certaine aberation qui n'ont pas lieu d'être

ici le probleme concerne une methode de mise en page pour avoir un rendu comme suit:

personne à contacter: Mr dupond
+++++++++telephone: 06 66 66 66 66
++++++++++++++fax: 06 77 77 77 77
+++++++++++++mail: machin@chose.bidule

noter qu'en placant le texte avec des espaces (dans l'exemple des +) pour aligner le tout, des defauts sont visible. On ne peut pas non plus centrer le texte car le nombre de caractere par ligne est different.

j'ai bien réussi en utilisant les margin et padding pour chaque ligne mais sa alourdi trop mon css (obliger de faire des span pour les reponse de chaque categories avec une id css pour chaque et un margin-right different pour aligner manuelement les colones)

j'ai ensuite essayer de faire differament en utilisant les liste <ul>

c'est deja bien mieux mais le probleme est que j'arrive par a faire en sorte que se soit center dans ma div ou je les insert

voila un code pour vous montrer plus en detail:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<style type="text/css" />
body {
background-color: navy;
margin: 0px;
}
#contenant {
background-color: green;
float:left;
width: 525px;
margin-left: 20px;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 0px;
text-align: center;
}
#contenu {
background-color: white;
width: 525px;
text-align: center;
}
#list1 {
background-color: silver;
list-style-type: none ;
margin: 0px;
padding: 0px;
line-height: 30px;
float: left;
text-align: right;
color : red;
}
#list2 {
background-color: silver;
list-style-type: none ;
margin: 0px;
padding: 0px;
line-height: 30px;
float: left;
text-align: left;
padding-left: 0.5cm;

}
</style>
<title>test</title>

</head>

<body>
<div id="contenant">ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
<div id="contenu">
<ul id="list1">
<li>Personne &agrave; contacter:</li>
<li>T&eacute;l&eacute;phone:</li>
<li>T&eacute;l&eacute;copie:</li>
<li>Messagerie:</li>
</ul>
<ul id="list2">
<li>Mr Dupond, Mr Durand</li>
<li>06 66 66 66 66</li>
<li>06 77 77 77 77</li>
<li><a class="blue_link" href="mailto:duponddurand@voiloo.fr" title="Nous laisser un mail">duponddurand@voiloo.fr</a></li>
</ul>
</div>
zzzzzzzzzzzzzzzzz
</div>
</body>
</html>


vous voyez donc bien que les listes ne sont pas center dans la div contenu

si quelqu'un peu m'aider Smiley smile

ou si vous pensez que cette méthode est fausse et qu'il faut faire autrement Smiley cligne

merci d'avance Smiley biggrin
Modifié par beroots (14 Nov 2005 - 13:44)
Modérateur
bonjour,
je ne sais pas si ta methode est fausse.
Je solutionnerais cette façon de presenter ta liste comme le montage dans menu flottant et son corps a droite.
De cette façon on peut garder une seule conteneur de liste et dans chaque liste les textes correspondants ensemble.
pour les separé j'utilise dans cette exemple un <span></span> que je positionne en flottant ,texte aligné a droite et en lui donnant une largeur et une marge a droite . le reste du texte se trouvant dans la liste, avec un alignement a droite vient se positionné auprés du span flottant.
le css se repetant dans chaque liste, il en resulte l'alignement visuel que tu recherche.
Ce code est plus leger, css et html du fait que j'utilise plus qu'une seule liste:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<style type="text/css" />
body {
background-color: navy;
margin: 0px;
font-family:tahoma , verdana , trebuchet;
font-size:14px;
}
#contenant {
background-color: green;
float:left;
width: 525px;
margin-left: 20px;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 0px;
text-align: center;
}
#contenu {
background-color: white;
width: 525px;
text-align: center;
}
#list1 {
background-color: silver;
list-style-type: none ;
margin: 0px;
padding-left:0;
line-height: 30px;
float: left;
text-align: left;
color : red;width:100%;
}
#list1 span {
float:left;
width:50%;
text-align:right;
margin-right:1em;
color:#008000;
}
</style>
<title>test</title>

</head>

<body>
<div id="contenant">ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
<div id="contenu">
<ul id="list1">
<li><span>Personne &agrave; contacter:</span>Mr Dupond, Mr Durand</li>
<li><span>T&eacute;l&eacute;phone:</span>06 66 66 66 66</li>
<li><span>T&eacute;l&eacute;copie:</span>06 77 77 77 77</li>
<li><span>Messagerie:</span><a class="blue_link" href="mailto:duponddurand@voiloo.fr" title="Nous laisser un

mail">duponddurand@voiloo.fr</a></li>
</ul>
</div>
zzzzzzzzzzzzzzzzz
</div>
</body>
</html>


J'espere que cela te convient. <edit> le code a ete edité, liste, centrée et
tailles et famille de polices ajoutées.
Modifié par gcyrillus (12 Nov 2005 - 22:14)
c'est pas mal je trouve Smiley cligne

je faisait un peu pres la même chose sans list avec un paragraphe et un span par ligne mais c'est au niveau du css que ça coinçais: une class pour tout les paragraphe et une id pour chaque span avec un margin-right different.

merci du coup de main

par contre c'est pas centrer dans la div et c'est l'objectif que j'ai du mal à atteindre Smiley cligne
en plus d'un navigateur à l'autre on a une petite difference sur la taille de police qui ne permet pas de centrer le tout avec les margin et padding.

je pense qu'il faut faire en sorte que la div de contenu soit centrer dans la div contenant malgré les float left des list à l'interieur

si quelqu'un à une solution Smiley biggrin
Modérateur
oups, desolé,
pour centrer corrige la largeur du span a 50%.

pour le probleme de l'affichage/la taille des police, il faut que tu indique, qu'elle police de caracteres utiliser, et eventuellement donner une tailles a cette police.

a plus.

<edit>je t'ai editer le code de mon premier poste, le span passer a 50% et police et tailles des caracteres indiquées ... au hasard.
A toi de reprendre en main le code.
Modifié par gcyrillus (12 Nov 2005 - 22:16)
Sujet clos
Aller à