Question par rapport à l'alignement

Sujet résolu

Anonyme

23 janvier 2006 à 2:21:40

Bonsoir ,

D'abord je vous donne l'url : <lien url="http://www.sg93.bx.la/team.php"></lien>

Bon j'aimerais que tout les noms qui sont en rouge soit alignés les 5 premiers sur le cotes gauche et les 5 derniers cotés droit et ensuite mettre la taille en plus grande (mais sa je sais le faire

)
J'ai essayé avec les margin ... mais sa décale le footer.

Les codes :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>SG[93]</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="style.css" />
</head>
<body>
<div id="header"></div>
<div id="menu"></div>
<div class="texte">
<a href="http://www.sg93.bx.la/index.php">Accueil |</a>
<a href="http://www.sg93.bx.la/team.php">Team |</a>
<a href="http://www.sg93.bx.la/forum/">Forum |</a>
<a href="http://www.sg93.bx.la/modules/livredor/">Livre D'or |</a>
<a href="http://www.sg93.bx.la/contact.php">Contact |</a>
</div>
<div id="contenu"><br />
<p>TeaM SG93 :</p>
<div class="texte2">
<p>spartane318</p>
<p>zavatar</p>
<p>MkD</p>
<p>iron-killer</p>
<p>boufos</p>
<p>JeEzY</p>
<p>sulivan</p>
<p>Rital</p>
<p>J-jay</p>
<p>Bache</p>
</div></div>
<div id="footer"></div>
</body>
</html>

body
{
background: #000000;
background-repeat: no-repeat;
color: #FFFFFF;
margin:auto;
width: 730px;
}

html, body
{
height:auto;
height:100%;
min-height:100%;
}

#header
{
width: 727px;
height: 124px;
background-image: url("images/header.jpg");
background-repeat: no-repeat;
margin: auto;
margin-top: 20px;
}

#menu
{
width: 727px;
height: 50px;
background-image: url("images/menu.jpg");
background-repeat: no-repeat;
padding-top: 10px;
}

.texte
{
font-size: medium;
text-align: center;
margin-top: -44px;
font-family: "04_03b", Arial, Verdana, serif;
text-align: center;
}

#contenu
{
width: 100%;
height: 368px;
background-image: url("images/contenu.jpg");
background-repeat: no-repeat;
font-family: "04_03b", Arial, Verdana, serif;
margin-top: 19px;
padding-left: 10px;
text-align: center;
}

#footer
{
width: 727px;
height: 50px;
background-image: url("images/footer.jpg");
background-repeat: no-repeat;
margin-top: -48px;
}

a
{
text-decoration: none;
color: white;
margin-left: 7px;
}

a:hover
{
color: #000000;
}

a img
{
border: 0;
}

.texte2
{
text-align: center;
color: red;
font-weight: bold;
font-size: x-small;
padding-top: -30px;
}

Merci !

Oylex

23 janvier 2006 à 3:20:59

Moi j'utiliserai un tableau, l'utilisation que tu veux en faire est accepté.

Sinon, tu dois faire 2 bloc <p> et faire un float.

<p class="csspourfloatleft">
spartane318<br />
zavatar<br />
MkD<br />
iron-killer<br />
boufos
</p>
<p class="csspourfloatright">
JeEzY<br />
sulivan<br />
Rital<br />
J-jay<br />
Bache
</p>

kabuto_fr

23 janvier 2006 à 4:27:59

moi je trouve pas qu'un tableau soit indiquer.
Ca ressemble plus a une liste.

Anonyme

23 janvier 2006 à 9:50:39

C'est bon sa marche !
Seulement j'aimerais sauter une ligne entre chaque noms.
En mettant des <p> plus rien ne marche.
Il y a un moyen?

Et aussi j'aimerais mettre une infobulle à chaque nom.
Comment faire ?

strucky

23 janvier 2006 à 12:25:41

Pour sauter une ligne, tu peux la simuler en mettant un margin-bottom à tes balises li.

Pour ton info-bulle si c'est sur une balise <a>, aucun problème, si c'est sur une autre balise, ne fonctionnera pas avec IE.

Anonyme

23 janvier 2006 à 14:53:34

Citation : strucky

Pour sauter une ligne, tu peux la simuler en mettant un margin-bottom à tes balises li.

Pour ton info-bulle si c'est sur une balise <a>, aucun problème, si c'est sur une autre balise, ne fonctionnera pas avec IE.

1) j'essaye sa dés que je rentre chez moi, mais il n'y a pas de "<li>"
Le code est au dessus :

<p class="csspourfloatleft">
spartane318<br />
zavatar<br />
MkD<br />
iron-killer<br />
boufos
</p>
<p class="csspourfloatright">
JeEzY<br />
sulivan<br />
Rital<br />
J-jay<br />
Bache
</p>

2) et pour l'info-bulle justement ce n'est pas une balise <a> ! (c'est le code du dessus) ou j'aimerais que lorsque on passe la souris dessus le texte apparaisse dans un petit cadre

EDIT = le margin-bottom ne marche pas ! il ne fais que décaler le block entier de texte!

Oylex

23 janvier 2006 à 16:03:29

Bah, c'est pas un problème pour les <li>:

<ul class="csspourfloatleft">
<li>spartane318</li>
<li>zavatar</li>
<li>MkD</li>
<li>iron-killer</li>
<li>boufos</li>
</ul>
<ul class="csspourfloatright">
<li>JeEzY</li>
<li>sulivan</li>
<li>Rital</li>
<li>J-jay</li>
<li>Bache</li>
</ul>

Pour le css, c'est le même, sauf que tu peux modifier les marges de la liste en mettant des propriétés css à ul et à li.

Anonyme

23 janvier 2006 à 18:48:35

Sa marche , j'ai réussi à espacer seulement petit probleme ...
Il y a des points à chaque noms normalement alors que la y en a pas à tous! (toute la colonne de gauche et le 1er de droite) ! comme vous pouvez le voir sur le site 'url dans mon 1er post'
Ou sinon ne pas afficher les points devants sa serait mieux !
Merci

Oylex

23 janvier 2006 à 23:25:18

pour enlever les points, c'est:

ul{
list-style-type: none;
}

Anonyme

24 janvier 2006 à 0:09:21

Nikel !!
Merci

Il me manque juste pour l'info-bulle.
Si c'est possible ...

Oylex

24 janvier 2006 à 0:29:40

Pour l'info-bulle, met: <li title="contenu de l'info-bulle"> à la place des <li>.

Anonyme

24 janvier 2006 à 9:22:23

Parfait !!!
Merci beaucoup à tout le monde !
Bonne Journée.

EDIT = Ah non !, par contre il y a un bug quand on voit sur le site on voit que le texte est décalé vers le bas FF (et les noms a droite et gauche) !!
Et pareil pour : http://www.sg93.bx.la/contact.php !
Sur FF tout est décalé à gauche!