Bonjour,
Comme dit je me met à la mise en page grace au css au lieu des tableaux. Cela ne me parrait pas simple...
Une première question : "quand est ce qu'on utilise la mise en page css et la mise en page tableaux..." naturellement j'ai lu des choses là dessus mais je n'y ait rien compris !!!
Ensuite j'ai commencé par une page, exemple :
Code HTML : 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
41
42
43
44
45
46
47
48
49
50
51
52
53 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <HTML> <HEAD> <TITLE>Index - css</TITLE> <META http-equiv="Content-Style-Type" content="text/css"> <STYLE type="text/css"> voir ci dessous </STYLE> </HEAD> <BODY> <DIV id="centrer"> <DIV class="borda1"></DIV> <DIV class="borda2"></DIV> <DIV class="borda3"></DIV> <DIV class="bordb1"></DIV> <DIV class="contenu"> <DIV class="image1"> <IMG src="im/singes.gif" height="300" width="223" border="0" alt=""> </DIV> <DIV class="texte"> Texte 1 <BR> - Texte 2. <BR> - Texte 3. <BR> - Texte 4. <BR> - Texte 5. </DIV> </DIV> <DIV class="bordb2"></DIV> <DIV class="bordc1"></DIV> <DIV class="bordc2"></DIV> <DIV class="bordc3"></DIV> </DIV> </BODY> </HTML>
Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 Alternative 1 : BODY { margin:0px;padding:0px;background-color:black;text-align:center }/*pour centrer*/ #centrer { margin:0px;margin-left:auto;margin-right:auto;width:1000px;text-align:left }/*pour centrer*/ .borda1 { width:43px;height:43px;position:absolute;left:0px;top:0px;background-image:url("im/bord/a1.jpg") } .borda2 { width:914px;height:43px;position:absolute;left:43px;top:0px;background-image:url("im/bord/a2.jpg") } .borda3 { width:43px;height:43px;position:absolute;left:957px;top:0px;background-image:url("im/bord/a3.jpg") } .bordb1 { width:43px;height:509px;position:absolute;left:0px;top:43px;background-image:url("im/bord/b1.jpg") } .bordb2 { width:43px;height:509px;position:absolute;left:957px;top:43px;background-image:url("im/bord/b2.jpg") } .bordc1 { width:43px;height:43px;position:absolute;left:0px;top:552px;background-image:url("im/bord/c1.jpg") } .bordc2 { width:914px;height:43px;position:absolute;left:43px;top:552px;background-image:url("im/bord/c2.jpg") } .bordc3 { width:43px;height:43px;position:absolute;left:957px;top:552px;background-image:url("im/bord/c3.jpg") } .contenu { position:absolute;left:43px;top:43px;width:914px;height:509px;background-image:url("im/singefond.gif") } .image1 { position:absolute;left:345px;top:30px;width:223px } .texte { position:absolute;width:614px;left:150px;top:340px;font-size:0.7em;color:white }
Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10 Alterative 2 .borda1 { width:43px;height:43px;float:left;background-image:url("im/bord/a1.jpg") } .borda2 { width:914px;height:43px;float:left;background-image:url("im/bord/a2.jpg") } .borda3 { width:43px;height:43px;float:left;background-image:url("im/bord/a3.jpg") } .bordb1 { width:43px;height:509px;float:left;background-image:url("im/bord/b1.jpg") } .bordb2 { width:43px;height:509px;float:right;background-image:url("im/bord/b2.jpg") } .bordc1 { width:43px;height:43px;position:absolute;left:0px;top:552px;background-image:url("im/bord/c1.jpg") } .bordc2 { width:914px;height:43px;position:absolute;left:43px;top:552px;background-image:url("im/bord/c2.jpg") } .bordc3 { width:43px;height:43px;position:absolute;left:957px;top:552px;background-image:url("im/bord/c3.jpg") }
Qu'en pensez vous ???
Pour l'alternative 1 l'affichage se fait correctement mais sous IE 6 la sélection du texte et de l'image se font bizarrement (impossible de sélectionner tout le texte)... Ce qui ne parrait pas être le cas sous FF.
Pour l'alternative 2 ce n'est pas le cas.
Merci de votre aide.
Partager