photos en colonne : tableau ou div avec positionnement absolu

Version imprimable

17/05/2009, 11h16
ml1234

photos en colonne : tableau ou div avec positionnement absolu

bonjour,
je souhaite réaliser un site avec deux ou trois colonnes dans lesquelles se trouvent de nombreuses zones alignées (photos, box avec liste,...).
je comptais réaliser une colonne gauche float left puis une colonne right float right et ensuite une colonne centre avec marge gauche et droite puis un positionnement absolu des images,...
Cependant, j'ai affiché la source de plusieurs sites et ils utilisent tous des tableaux. Voici un exemple fort similaire à ce que je désire réaliser. C'est horrible à comprendre et à modifier dans le code sans l'importer dans dreamweaver. Avec des div, je suis sûr qu'en deux minutes je change une photo par une autre... Quelle est la meilleure méthode ?

http://www.herbots.be/

quelle est la méthode la plus efficace pour faire les petits boxes avec entête bleu dans lesquels on vient mettre des listes, des images ? photoshop, fireworks, tableau html ?

merci
Marc

Bonjour

Une chose est sure : les tableaux ne sont pas faits pour de la mise en page comme le fait le site que tu mets en lien...

Donc la méthode à utiliser c'est bien le css...

Je n'utilises pas le terme div parce que je ne les utiliserait pas ici. Il ne faut pas non plus mettre des div à toutes les sauces... Un code doit respecter une certaine sémantique, c'est à dire que les bonnes balises soient utilisées au bon endroit...

Je ne passerais pas non plus par des colonnes comme tu l'indiques (attention : ceci en me basant sur l'exemple du site que tu donnes, tout va dépendre en effet de ce que tu veux réaliser exactement...).

J'utiliserais plutôt des listes (ul et li) pour faire ceci. D'autres plus compétents me dirons peut être le contraire...

Donc schématiquement une div de largeur fixe, dans laquelle on place une liste en float qui va revenir à la ligne à chaque fois qu'elle atteint le bout.

Un exemple rapide :
Code:

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 <!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> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>Document sans nom</title> <link rel="stylesheet" type="text/css" href="feuille_style.css"> <style type="text/css"> #conteneur { border:1px solid red;width:500px;overflow: hidden; } ul li { list-style-type:none;width:120px;height:50px;margin:10px;border:1px solid blue;float:left; } </style> </head> <body> <div id="conteneur"> <ul> <li> élément 1 </li> <li> élément 2 </li> <li> élément 3 </li> <li> élémént 4 </li> <li> élément 5 </li> <li> élément 6 </li> </div> </body> </html>

17/05/2009, 14h14
ml1234

re

merci 12monkey,
j'ai essayé ton code, ça crée une colonne float left avec une liste.
donc je suis censé faire une colonne right avec une liste et une colonne centre avec une liste et deux marges ?
ensuite, on peut mettre des images dans une liste comme si c'était un tableau ?
et ce n'est pas trop difficile d'avoir des images de tailles légèrement différentes ?

merci
17/05/2009, 14h49
12monkeys

Citation:

Envoyé par ml1234

merci 12monkey,
j'ai essayé ton code, ça crée une colonne float left avec une liste.
donc je suis censé faire une colonne right avec une liste et une colonne centre avec une liste et deux marges ?
ensuite, on peut mettre des images dans une liste comme si c'était un tableau ?
et ce n'est pas trop difficile d'avoir des images de tailles légèrement différentes ?

merci

Alors il se peut que je n'ai pas compris ce que tu voulais, je me suis basé, dans le site que tu indiques, sur la partie sous

Citation:

La Colombophilie Belge - Articles

:fleche: les 4 carrés bleus avec des photos à l'intérieur.

Dans mon exemple chaque li représente un de ces carrés, tu peut y mettre des images à l'intérieur...

Donc d'après ça, non tu n'est pas obligé de faire des colonnes right et centre, à moins que je n'ai pas compris ce que tu voulais...

Pour ce qui est des images, dans mon exemple la taille des li est fixée dans le css, donc il faut fixer la largeur pour que les images puissent être accueillis...

sisi, tu as bien compris, merci et je vais essayer les listes.
j'ai juste peur de ne pas pouvoir définir une taille fixe d'image pour tous les li.
en effet, les images ont des hauteurs différentes et de plus, parfois elles sont constituées d'un cadre "caption rouge et fond blanc" sur lequel j'ajoute le titre blanc et le logo dans la partie blanche (pas sûr d'être clair !)

en attendant d'y voir clair dans les listes j'ai essayé les div. De nouveau bloqué par les absolute. j'ai mis la colonne gauche en float left et relative et toutes les images en absolute. cela semble marcher. toutefois ce n'est qu'une illusion car je ne sais pas changer le placement top de chaque image et ramener le texte (left_img3_texte) dans le cadre (left_img3) :

Code:

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
<div id="maincontent">
 
  		<div id="main_colonne_gauche">
 
         	<div id="left_img_1">
         	  <img src="../pigeons_images/left_forum.png" width="204" height="228" />
       	    </div> 
 
 
       	  	<div id="left_img_2">
            	<img src="../pigeons_images/left_2_championnat.png" width="218" height="152" />
            </div>
 
        	<div id="left_img_3">
          		<img src="../pigeons_images/left_3_resultats_box.png" width="204" height="85" /> 
             </div>
 
          	 <div id="left_img_3_text">
          		<img src="../pigeons_images/left_3_resultats_texte.png" width="176" height="19" />          
             </div>
        </div>
 
 
        <div id="main_colonne_droite"> </div>
 
 
        <div id="main_centre">
          <h1>Main Content </h1>
          <p>Lorem ipsum dolor sit amet, consectetuer

Code:

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
#maincontent {
	padding-top: 10px;
	padding-right: 20px;
	padding-bottom: 10px;
	padding-left: 20px;
	line-height: 1.5;
	height: 891px;
	background-color: #CCCCCC;
}
 
#maincontent h1 {
	font-variant: small-caps;
	color: #00FFFF;
}
#main_colonne_gauche {
	float: left;
	width: 240px;
	position: relative;
}
#main_colonne_droite {
	float: right;
	width: 220px;
	height: 500px;
}
#main_centre {
	margin-right: 250px;
	margin-left: 250px;
}
 
#div left_img_1 {
	height: 228px;
	width: 204px;
	position: absolute;
	padding: 0px;
	left: 10px;
	top: 10px;
	background-color: #FFFFFF;
}
 
#div left_img_2 {
	height: 152px;
	width: 218px;
	position: absolute;
	left: 5px;
	top: 300px;
	background-color: #FFFFFF;
}
#div left_img_3 {
	height: 85px;
	width: 204px;
	position: absolute;
	left: 5px;
	top: 500px;
	background-color: #FFFFFF;
}
#div left_img_3_text {
	height: 85px;
	width: 204px;
	position: absolute;
	left: 5px;
	top: 500px;
	background-color: #FFFFFF;
}

une idée ? je galère dans ces absolute -(

merci d'avance
Marc

17/05/2009, 17h57
12monkeys

Une chose qui me saute aux yeux dans tes sélecteurs :

Ils ne s'appliquent pas parce que tu fais une petite erreur de syntaxe :

Code:

#div left_img_1

Tu sélectionne une id appelée div et le reste ne correspond à rien. C'est plutôt ça qu'il faut écrire :

Code:

div #left_img_1

Sélection de l'id #left_img_1 se trouvant dans une balise div...

Déjà ça appliquera tes positions absolute.

En lisant un peu ce forum tu verra qu'il faut utiliser avec parcimonie la position absolute... Surtout que là je ne vois pas trop pourquoi tu veux l'utiliser.

Mais bon je ne te suis pas trop dans ce que tu veux faire, tu n'aurais pas un schéma à montrer qu'on comprenne à quoi ça doit ressembler ?
17/05/2009, 19h06
ml1234

re

génial, ça marche, un grand merci.
en fait j'utilise l'icone "+" de css et pour des raisons étranges il a ajouté div alors que le code envoyé précédemment n'a jamais eu cela. comme toutes les div étaient identiques sauf positionnement top, j'ai dupliqué les bétises !

j'ai des tas d'exemples mais tu ne crois pas que celui que je t'ai envoyé est suffisamment tordu en colonnes et images de toutes tailles ???

avec les div comme je l'ai fait ce sera un travail de bénédictin mais répétitif.
avec ta méthode de liste, je ne vois pas bien comment créer tous ces div.

le positionnement absolute semble génial pour ce type de positionnement mais je n'en n'ai pas d'autre car je débute dans html et dreamweaver avec les livres de microapplication et les tuto de wisibility sur css...

les tableaux semblent pratiques aussi mais comme tu as dit, vieille technique de site web, d'où mes efforts à appliquer des div

Marc

Citation:

Envoyé par ml1234

j'ai des tas d'exemples mais tu ne crois pas que celui que je t'ai envoyé est suffisamment tordu en colonnes et images de toutes tailles ???

Ce que je ne comprends pas c'est que l'exemple que tu donnais avait 4 cadres sur 2 lignes, donc 2 cote à cote... Et l'exemple que tu as fait il y a 4 divs les uns sous les autres, c'est pour ça que je dis un petit schéma ne ferais pas de mal parce que là je ne sais pas ce que tu veux faire...

Citation:

Envoyé par ml1234

avec ta méthode de liste, je ne vois pas bien comment créer tous ces div.

Les <li> </li> remplacent les divs dans mon exemple... pas la peine de mettre des divs à toutes les sauces..

Citation:

Envoyé par ml1234

le positionnement absolute semble génial pour ce type de positionnement mais je n'en n'ai pas d'autre car je débute dans html et dreamweaver avec les livres de microapplication et les tuto de wisibility sur css...

Pour ce que j'en ai vu nul besoin de position absolute, il suffit de laisser les blocs dans leur flux naturel.

Etudie cet exemple (vite fait :aie:), la différence n'est pas grande avec ton exemple sans les inconvénients de la position absolute :
Code:

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 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 <!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> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>Document sans nom</title> <link rel="stylesheet" type="text/css" href="feuille_style.css"> <style type="text/css"> #maincontent { padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px; line-height: 1.5; height: 891px; background-color: #CCCCCC; } #maincontent h1 { font-variant: small-caps; color: #00FFFF; } #main_colonne_gauche { float: left; width: 240px; position: relative; } #main_colonne_droite { float: right; width: 220px; height: 500px; } #main_centre { margin-right: 250px; margin-left: 250px; } div #left_img_1 { height: 228px; width: 204px; margin:10px; padding: 0px; background-color: #FFFFFF; } div #left_img_2 { height: 152px; width: 218px; margin:10px; background-color: #FFFFFF; } div #left_img_3 { height: 85px; width: 204px; margin:10px; background-color: #FFFFFF; } div #left_img_3_text { height: 85px; width: 204px; background-color: #FFFFFF; } </style> </head> <body> <div id="maincontent"> <div id="main_colonne_gauche"> <div id="left_img_1"> <img src="img1.jpg" width="204" height="228" /> </div> <div id="left_img_2"> <img src="img1.jpg" width="218" height="152" /> </div> <div id="left_img_3"> <img src="img1.jpg" width="204" height="85" /> </div> <div id="left_img_3_text"> <img src="img1.jpg" width="176" height="19" /> </div> </div> <div id="main_colonne_droite"> </div> <div id="main_centre"> <h1>Main Content </h1> <p>Lorem ipsum dolor sit amet, consectetuer </div> </div> </body> </html>
Pour les inconvénients de la position absolute regarde ce que te dit Macmillenium :

Citation:

Envoyé par Macmillenium

Je ne saurais pas te dire lequel des choix est le plus pertinent pour toi, il est recommandé de garder le maximum des éléments dans le flux normal, ce que float permet.
Cela n'empêche que les positionnements fixed et absolute sont bien pratiques dans certains cas de figures (menu dynamique, superposition d'éléments etc.) mais posent énormément de contraintes pour gérer une mise en page complexe.

18/05/2009, 22h29
ml1234

merci pour ton code.
cette méthode est très pratique pour les mises à jour.
Toutefois, dans mon cas, left img3 est un box png (entête rouge avec titre "reportages" et box blanc en-dessous pour recevoir images,...) et left img3_text est une image ou un texte en png qui doit se trouver dans le box blanc.
dans ton exemple ils sont l'un au-dessus de l'autre. comment fais-tu pour les faire se superposer sans mode absolute ?

une solution serait de générer l'image totale box+image dans fireworks et coller l'image résultante png selon ta méthode.

une autre est peut-être ton autre méthode avec liste.

J'en reviens donc au lien que j'avais envoyé et aussi à yahoo.fr qui contient trois colonnes avec des tas de jolis box avec caption bleu dans lesquels on y a placé des images, listes,... aucun des box n'est aligné avec la colonne voisine. pour le moment, ces box je les fais en png.

comment on fait ces boxes et cette présentation en trois colonnes de boxes ?

je viens d'ouvrir les modèles de dreamweaver et ils semblent tous réalisés avec des tableaux. quand j'ouvre ces fichiers et que je vois la présentation qui en résulte, cela parait naturel, en tous cas plus simple que mes div absolus où j'espère ne jamais devoir en enlever un et décaller tout le reste.
Il me faudrait des semaines pour faire ces modèles avec des div.
dans quelques modèles ouverts, je n'ai même pas aperçu de div, le header, les colonnes, le footer, tout est construit en tableau.

cette méthode est-elle vraiment désuette ? si oui, pourquoi dreamweaver fait-il tous ses modèles ainsi ?

merci
Marc

Citation:

Envoyé par ml1234

Toutefois, dans mon cas, left img3 est un box png (entête rouge avec titre "reportages" et box blanc en-dessous pour recevoir images,...) et left img3_text est une image ou un texte en png qui doit se trouver dans le box blanc.
dans ton exemple ils sont l'un au-dessus de l'autre. comment fais-tu pour les faire se superposer sans mode absolute ?

Dans ce cas il faut placer #left_img_3_text à l'intérieur de #left_img_3 :
Code:

1 2 3 4 5 6 7 8 <div id="left_img_3"> <img src="img1.jpg" width="204" height="85" /> <div id="left_img_3_text"> <img src="img1.jpg" width="176" height="19" /> </div> </div>
Citation:

Envoyé par ml1234

je viens d'ouvrir les modèles de dreamweaver et ils semblent tous réalisés avec des tableaux. quand j'ouvre ces fichiers et que je vois la présentation qui en résulte, cela parait naturel, en tous cas plus simple que mes div absolus où j'espère ne jamais devoir en enlever un et décaller tout le reste.
Il me faudrait des semaines pour faire ces modèles avec des div.
dans quelques modèles ouverts, je n'ai même pas aperçu de div, le header, les colonnes, le footer, tout est construit en tableau.

cette méthode est-elle vraiment désuette ? si oui, pourquoi dreamweaver fait-il tous ses modèles ainsi ?

Oui totalement désuette...

Pourquoi Dreamweaver utilise t'il encore des tabeaux ? Je n'en sais rien, je ne connais pas ce logiciel, peut être as tu une vieille version... Peut être que les versions récentes passent par les div et le positionnement en css. Malgré le fait que pour le programme ce doit être plus difficile de proposer une mise en page en div qu'en tableaux...

bonjour,
j'essaye toujours de faire un box avec entete bleu comme le site herbots.be et yahoo.fr que je pourrais utiliser partout avec des images de tailles différentes et des titres différents (peut-être qu'il existe des spry tout faits ?). je galère évidemment toujours avec div par rapport aux tableaux.rien ne se met correctement.
le texte titre gauche et le texte titre droit devraient être sur la même ligne,
mainbox devrait s'ajuster à la taille de l'image 440x63 augmenté du caption et d'une petite marge blanche autour mais j'ai dû définir son width=449 et son height=100 pour que cela marche plus ou moins. l'image est à cheval sur la barre de titre, bref galère. en fait je ne savais pas si les div titre et image devaient être imbriqués dans un commun mainbox ou placés un en dessous de l'autre comme des div séparés.

voici le code qui aurait dû faire la même chose que la première image centrale verte sous "about the herbots-news" de herbots.be.
aurais-je dû mettre en relatif et absolute les div ?
Code:

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 .titre_gauche { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #336699; text-align: left; } .titre_droit { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; font-weight: bold; color: #336699; text-align: right; } #mainbox { border: 1.3px solid #A8B5C1; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; margin-right: auto; margin-left: auto; height: 100px; width: 449px; } #mainbox_title { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #336699; background-color: #B5CDE6; padding: 4px; }
Code:

1 2 3 4 5 6 7 8 <div id="mainbox"> <div id="mainbox_title"> <div class="titre_gauche">Main</div> <div class="titre_droit">3/30/2009</div> <div align="left"> <img src="image440x63.jpg" alt="image" align="left"> </div> </div> </div>
merci pour les conseils
Marc

Bonjour

Les balises div sont de type block, ce qui implique un retour à la ligne après eux, c'est pour ça que, combiné au text-align les deux textes n'étaient pas sur la même ligne...

Pour positionner tu n'as pas que les positions absolute, mais aussi les float par exemple... J'ai donc utilisé le float.

J'ai aussi changé un certain nombre de balises par que qu'il faut respecter une certaine sémantique comme je l'ai déjà dit dans cette discussion. Il ne faut pas mettre des div à toutes les sauces. J'ai par exemple mis une balise <h3> parce que cette partie correspond à un titre...

Voici l'exemple fait à partir du site que tu indiques :
Code:

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 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 <!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> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>Document sans nom</title> <style type="text/css"> #mainbox { border:1px solid blue; width:400px; } h3 { margin: 0; line-height: 25px; background: yellow; overflow: hidden; } #mainbox span { margin: 0 10px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #336699; } .titre_gauche { float: left; } .titre_droit { float:right; } #mainbox .img { text-align: center; margin: 10px 0; clear: both; } </style> </head> <body> <div id="mainbox"> <h3> <span class="titre_gauche">Main</span> <span class="titre_droit">3/30/2009</span> </h3> <div class="img"> <img src="img1.jpg" alt="image" /> </div> </div> </body> </html>
Tu peut même complètement te passer des div : en enlevant div id="mainbox" et en le remplaçant par une liste (ul li) si tu as plusieurs de ces boites les une derrière les autres dans ton code...

20/05/2009, 23h37
ml1234

chouette, merci beaucoup
c'est normal qu'en mode design, le jaune n'apparaisse pas mais en F12 ça marche ?

si je veux un trait sous le titre jaune, j'ajoute un div "caption" avec border sur bottom ? j'ai essayé de mettre un border bottom de 1px dans h3 mais cela apparait sur le sommet du cadre

pas de problème avec ce type de box en "#" de le recopier plusieurs fois comme un outil ou je dois créer une classe ?

tu avais mis 400px et image fait 440px donc l'image sort du cadre. c'est normal qu'il faille entrer la taille et que le box ne se mette pas tout seul à dimension ? si j'enlève width, le box occupe tout l'écran. puisque le but est de créer un outil recopiable sur une page, ne peut-on imaginer d'enlever width de mainbox et de créer un box info de type mainbox mais de taille 400 suivi d'un box reportage de type mainbox mais de taille 300... ?

merci beaucoup pour les conseils
désolé de poser autant de questions mais je sens qu'on approche du but (look yahoo ?). je trouve vraiment dur de remplacer des tableaux par des div et listes ! j'ai fait des recherches sur google "div au lieu de tableau" et cela regorge de questions sur cela.

Marc

Edit : pour le trait bleu, j'ai trouvé: il faut remplacer margin de 10 dans img par padding de 10 et mettre border 1px bleu au top de img.
pour le reste, inchangé
21/05/2009, 01h03
12monkeys
Citation:

Envoyé par ml1234

c'est normal qu'en mode design, le jaune n'apparaisse pas mais en F12 ça marche ?

Non je ne pense pas, mais tu ne regarde pas directement dans un navigateur je supposes ?

Citation:

Envoyé par ml1234

si je veux un trait sous le titre jaune, j'ajoute un div "caption" avec border sur bottom ? j'ai essayé de mettre un border bottom de 1px dans h3 mais cela apparait sur le sommet du cadre

Pourquoi vouloir alourdir le code ? Il suffit de rajouter un border-bottom au h3 :
Code:

1 2 3 4 5 6 7 h3 { margin: 0; line-height: 25px; background: yellow; overflow: hidden; border-bottom:1px solid blue; }
Si ça n'a pas fonctionné chez toi c'est que t'as du commettre une petite erreur, j'ai testé et chez moi ça marche (FF3 et IE 7)

Citation:

Envoyé par ml1234

pas de problème avec ce type de box en "#" de le recopier plusieurs fois comme un outil ou je dois créer une classe ?

En effet il faudra créer une classe, sachant que l'id doit rester unique dans le document html...

Citation:

Envoyé par ml1234

tu avais mis 400px et image fait 440px donc l'image sort du cadre. c'est normal qu'il faille entrer la taille et que le box ne se mette pas tout seul à dimension ? si j'enlève width, le box occupe tout l'écran. puisque le but est de créer un outil recopiable sur une page, ne peut-on imaginer d'enlever width de mainbox et de créer un box info de type mainbox mais de taille 400 suivi d'un box reportage de type mainbox mais de taille 300... ?

J'ai mis 400px au hasard, comme j'aurais pu mettre 500 ou 600...
Une balise de type block s'étend automatiquement au maximum de la largeur disponible, donc en fonction de la largeur de son parent.

Citation:

Envoyé par ml1234

merci beaucoup pour les conseils
désolé de poser autant de questions mais je sens qu'on approche du but (look yahoo ?). je trouve vraiment dur de remplacer des tableaux par des div et listes ! j'ai fait des recherches sur google "div au lieu de tableau" et cela regorge de questions sur cela.

Marc

Edit : pour le trait bleu, j'ai trouvé: il faut remplacer margin de 10 dans img par padding de 10 et mettre border 1px bleu au top de img.
pour le reste, inchangé

Pour le trait voir plus haut...

En effet utiliser css demande un peu de pratique, il faut lire les tutoriels, regarde ici : http://css.developpez.com/cours/