Mise en place d'un trombinoscope

**solorac** · 26/08/2008, 16h01

Bonjour la Communauté,

Je suis en train de réaliser un site pour supporter mon équipe de football amateur de chez moi, je voudrais réaliser un trombinoscope sur une page avec par ordre : 2 entraineurs sur la meme ligne, en dessous 2 gardiens, en dessous 6 défenseurs (2 lignes), en dessous 6 milieux (2 lignes) et 6 attaquants (2 lignes).

Le problème vient du fait que lorsque je fais ma mise en place tout se chevauche, car j'ai sur le coté 3 boutons de navigation.

Je vous joins mon code html et le code css, pourriez vous me dire comment ordonner de façon optimale ?

Toutes les photos font 200 lar et 250 haut.

Voici le html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<body>
	<div id="corps">
 
		<div id="site">
			<h1>TROMBINOSCOPE DE L'EQUIPE <BR>DE DIVISION D'HONNEUR</h1>
<div id="trombi"><p align="left">GARDIENS</p>
 
			<div class="bouton"><img src="Images/B-class.jpg" /><br><br>
			<img src="Images/B-resul.jpg" /><br><br>
			<img src="Images/B-class.jpg" /><br><br>
			<img src="Images/B-don.jpg" />
 
			</div>
			</div>
		</div>
	</div>
</body>

Et voici la css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
body {background-color: #ADA9AC;font-family : arial, cursive, Georgia, Times, serif;font-size :80%; color: #000;}
 
#corps {position: static;
    margin-left: auto; 
    margin-right: auto; 
    width: 886px;
	height:1028; 
	text-align: center; 
    background-image: url(Images/backcorps.png); background-repeat:no-repeat;}
 
#site{
width:700px;
height:910px;
    text-align: left;
	margin-top:130px;
	margin-left:130px;
	margin-right:130px;
	text-align:justify;}
 
#trombi{
width:500px;
height:600px;
    text-align: left;
	margin-top:10px;
	margin-left:130px;
	margin-right:130px;
	text-align:justify;}
 
 
.bouton{
float:left;
width:100px;
height:600px;
text-align: center;
margin-left:5px; margin-top:200px;}
 
 
h1 {font-family :arial;font-size : 200%; color : black; text-align: center;line-height: 40px; padding :0; margin:0;}
h2 {font-family :arial;font-size : 75%; color : black; text-align: center;padding :0; margin:0;}
h3 {font-family :arial;font-size : 135%; color : black; text-align: center;padding :0; margin:0;}

J'aimerai que l'ensemble des photos se situent plus à droite sur la page du site, de façon à faire le pendant des 4 boutons de navigations.

Merci pour votre aide

**Erwan31** · 26/08/2008, 17h12

Tu as pas une plage en ligne parce que là...c'est un peu juste, d'autant plus qu'il manque le code des poste de footballer.

Ta structuration n'est pas tout à fait pertinente, il vaut mieux passer par une liste non-ordonnée pour le menu, ce qui donne.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
	<h1>TROMBINOSCOPE DE L'EQUIPE DE DIVISION D'HONNEUR</h1>
	<ul id="menu">
    	<li><img src="Images/B-class.jpg" height="50" width="50" alt="equipe 1" /></li>
        <li><img src="Images/B-class.jpg" height="50" width="50" alt="equipe 2" /></li>           
        <li><img src="Images/B-class.jpg" height="50" width="50" alt="equipe 3" /></li>		
	</ul>
<div id="trombi">
<h2>Gardiens</h2>
	<ul id="menu">
    	<li>gardien 1</li>
        <li>gardien 2</li>           
	</ul>
<h2>Enraineurs</h2>
	<ul id="menu">
    	<li>gardien 1</li>
        <li>gardien 2</li>           
	</ul>
<h2>Défenseurs </h2>
	<ul id="menu">
    	<li>Défenseurs 1</li>
    	<li>Défenseurs 2</li>
        <li>Défenseurs 2</li>           
    	<li>Défenseurs 1</li>
        <li>Défenseurs 2</li>           
        <li>Défenseurs 2</li>           
	</ul>
</div>

Avec éventuellement une liste ordonnée (OL) si l'ordre a un sens à l'intérieur de chaque liste. Si le nombre de gardien/defenseurs/... est censé être connu, une suite de paragraphe pourra remplacer la liste non-ordonnée ceci afin d'éviter de la verbosité (liste de x...) superflue dans les logiciels de synthèse vocale.

> Ne pas oublier de donner un alt à chaque image (du nom due la rub. ici)
> des dimensions aux images
> Tu as un mélange de syntaxe HTML et XML (tes br sont écris en HTML)
N'utiliser les br (break) que pour forcer une coupure de ligne.
> Pour des raison de lisibilité, privilégier les texte en minuscule (même pour les titres) et passer les titres en capitale via la propriété CSS text-transform si c'est nécessaire.
> Ne pas oublier la famille de police générique en fin de liste et éventuellement des polices alternatives au cas ou le système de l'internaute n'est pas pourvu de la première police :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

font-family :Arial, Helvetica, Sans-serif

**solorac** · 27/08/2008, 12h01

Merci pour ton aide. Je vais essayer sous cette forme.

Mise en place d'un trombinoscope

CSS

Vue hybride

Discussions similaires

Partager

Partager