mise en page mozilla ie

Version imprimable

Bonjour je vous explique mon problème, je suis novice en html et un peu perdu
Je n'obtient pas la même mise en page avec 2 moteurs de recherche différent

pour faire simple j'ai une banderole qui défile avec mozilla le texte se met juste en dessous, avec ie il se met en plein la ligne du cadre de la banderole

Pendant que j'y suis, lorsque je vais sur le site de W3C, j'ai de erreurs du style:

Citation:

Error Line 21, Column 71: there is no attribute "SCROLLAMOUNT"

…t="140" scrolldelay="30" scrollamount="4" onmouseout="this.start()" onmouseove…

✉

You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page, see the FAQ item on valid flash.

J'ai essayé de changer le doctype mais rien n'y fais ?

Mon code:

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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
<head>
<link rel=stylesheet type="text/css" href=Fic.css>
 
<title>Site freddy jean luc </title>
 
</head>
 
<body>
<table  border="3">
        <tr width="55%">
            <td  width="15%">
            <a target="_blank" href="http://www.leboncoin.fr" ><img src="/images/baniere/1.jpg" alt="" BORDER="0" ></a>                                
                    </td>
            <td width="80%">
 
 
 
<marquee <a align="center" height="140" scrolldelay="30" scrollamount="4" onmouseout="this.start()" onmouseover="this.stop()"></a>
 
<a href="deux_roues.html">
<img border="0" src="images/baniere/2.jpg" alt="" hspace="3">
</a>
<img border="0" src="images/baniere/1.jpg" alt="" hspace="3"><a href="http://www.google.fr">
<img border="0" src="images/baniere/2.jpg" alt="" hspace="3">
<img border="0" src="images/baniere/3.jpg" alt="" hspace="3">
<img border="0" src="images/baniere/4.jpg" alt="" hspace="3">
<img border="0" src="images/baniere/5.jpg" alt="" hspace="3">
<img border="0" src="images/baniere/6.jpg" alt="" hspace="3">
<img border="0" src="images/baniere/7.jpg" alt="" hspace="3">
<img border="0" src="images/baniere/8.jpg" alt="" hspace="3">
<img border="0" src="images/baniere/9.jpg" alt="" hspace="3">
</marquee>
 
</td >
           <td width="10%">
                    <td  width="10%">
            <a target="_blank" href="http://www.leboncoin.fr" ><img src="/images/baniere/2.jpg" alt="" BORDER="0" ></a>
 
            </td>
        </tr>
 
 
</table>
 
 
<html>
<head>
<title>Project 6</title>
<style type="text/css">
body {
  behavior: url(csshover.htc);} /* WinIE behavior call */
div#nav {float: left; width: 7em; margin: -1px 0 0 -1px;
  background: #FDD;}
div#nav ul {margin: 0; padding: 0; width: 7em; background: white;
  border: 1px solid #AAA;}
div#nav li {position: relative; list-style: none; margin: 0;
  border-bottom: 1px solid #CCC;}
div#nav li:hover {background: #EBB;}
div#nav li.submenu {background: url(submenu.gif) 95% 50% no-repeat;}
div#nav li.submenu:hover {background-color: #EDD;}
div#nav li a {display: block; padding: 0.25em 0 0.25em 0.5em;
  text-decoration: none; width: 6.5em;}
div#nav>ul a {width: auto;}
div#nav ul ul {position: absolute; top: 0; left: 7em;
  display: none;}
div#nav ul.level1 li.submenu:hover ul.level2,  
div#nav ul.level2 li.submenu:hover ul.level3 {display:block;}
</style>
</head>
<body>
 
<div id="nav">
<ul class="level1">
 <li><a href="/">Home</a></li>
 <li class="submenu"><a href="">Services</a>
  <ul class="level2">
   <li><a href="">Strategy</a></li>
   <li><a href="">Optimization</a></li>
   <li><a href="">Guidance</a></li>
   <li><a href="">Training</a></li>
  </ul>
 </li>
 <li><a href="deux_roues.html">Deux Roues</a></li>
 <li class="submenu"><a href="">Publications</a>
  <ul class="level2">
   <li><a href="">Articles</a></li>
   <li class="submenu"><a href="">Tutorials</a>
    <ul class="level3">
     <li><a href="">HTML</a></li>
     <li><a href="">CSS</a></li>
     <li><a href="">SVG</a></li>
     <li><a href="">XML</a></li>
    </ul>
   </li>
   <li><a href="">White Papers</a></li>
   <li><a href="">Commentary</a></li>
  </ul>
 </li>
 <li><a href="mailto:fbb53@">Contact</a></li>
</ul>
</div>
 
</body>
</html>    
 
<div id="test"    
<!-- images centrale-->
<img src="images/images.bmp" />
</div>
 
 
<div id="compteur"
<!-- Webdezign.tutoriaux.free.fr® Compteur de visiteurs -->
<script src="http://webdezign.tutoriaux.free.fr/services/compteur_page.php?client=37655&Af=5"></script>
<!-- Fin Compteur de visiteurs® -->
</div>
 
<div id="legende"><b>Cliquer sur une photo pour aller sur la page de sa desccription.</b></div>
 
 
    </BODY></HTML>

le .css

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
h2 {
font-size: x-large;
 color: red;
 font-style:oblique
 }
 body{
 background-image :url("gifs1.gif")
 }
#test {
position:absolute;
     left: 50%;
     top: 50%;
     margin-top: -110px; /* moitié de la hauteur de l'image */
     margin-left: -195px; /* moitié de la largeur de l'image */
}
#legende {
position:absolute;
     left : 35%;
     top: 18%;
     }
 
 
#compteur {
position:absolute;
    top: 95%;
     left: 50%;
 
}    
 
 { font-size: medium;
 color: white;
 font-style:italic
 }
 p1 {
 font-size: small;
 color: white;
 font-style:italic
 }
#moncadre {
width:300px;
margin:auto;
padding:50px;
border-left:1px solid #FF0000;
border-right:1px solid #FF0000;
border-bottom:9px solid #FF0000;
border-top:9px solid #FF0000;
}

Merci de votre aide

22/04/2011, 20h16
NoSmoking
Bonjour,

Citation:

Bonjour je vous explique mon probleme, je suis novice en html et un peu perdu
Je n'obtient pas la même mise en page avec 2 moteurs de recherche différent

on parle de moteur de rendu pour ce qui te concerne

Je ne sais trop par où commencer !
- plusieurs balises html, head, title
- ouverture de balise a dans une balise marquee que tu fermes hors de la balise marquee

Code:

<marquee <a align="center" height="140" scrolldelay="30" scrollamount="4" onmouseout="this.start()" onmouseover="this.stop()"></a>

- 2 balises td ouvertes à la suite
Code:

1 2 3 4 <td width="10%"> <td width="10%"> <a target="_blank" href="http://www.leboncoin.fr" ><img src="/images/baniere/2.jpg" alt="" BORDER="0" ></a> </td>
... et surement d'autre, un véritable gageure pour les moteurs de rendu

Il est impératif de respecter le minimum pour arriver à tes fins

Il est également préférable de passer en DOCTYPE Strict, cela limite, sous réserve du respect de la bonne structure des documents, les différences...

La table d'encadrement de ta bannière peut être remplacé par des div ce qui ne fera qu'améliorer ta présentation.

Il est également préférable de mettre tous les attributs de style dans la partie style du document.

Concernant la balise marquee, bien que reconnue par les différents navigateurs, elle n'est pas conforme W3C ce qui n'est somme toute pas un drame.

Voila pour un début.... :pc:
22/04/2011, 21h53
fbb53

Merci pour ta réponse.
peux tu m'expliquer comment remplacer ma mise en page.surtout au niveau des deux td à la suite et les remplacer par un div?

Moi ce que je veux c'est un petit carré ou il y a une photo a gauche, ma banderole au milieu et une autre photo a droite , le tout sur la même ligne.

même si il y a des erreurs a la W3C mon site pourra quand même être mis en ligne?

Citation:

Envoyé par fbb53

Moi ce que je veux c'est un petit carré ou il y a une photo a gauche, ma banderole au milieu et une autre photo a droite , le tout sur la même ligne.

petit exemple

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[...]</title>
<style type="text/css">
#entete {
  height : 140px;
  border : 1px solid #e0e0e0;
  text-align : center;
}
#entete div {
  height : 100%;
  float : left;
}
#gauche {
  width : 15%;
  background-color : #fee0e0;
}
#centre {
  width : 75%;
  background-color : #e0fee0;
}
#droite {
  width : 10%;
  background-color : #e0e0fe;
}
</style>
</head>
<body>
<div id="entete">
  <div id="gauche">GAUCHE</div>
  <div id="centre">CENTRE
    <marquee height="140" scrolldelay="30" scrollamount="4" onmouseout="this.start()" onmouseover="this.stop()">
      Le texte de la balise MARQUEE...
    </marquee>
  </div>
  <div id="droite">DROITE</div>
</div>
</body>
</html>

c'est un grand classique...

23/04/2011, 00h25
12monkeys

Bonjour

Citation:

Envoyé par fbb53

peux tu m'expliquer comment remplacer ma mise en page.surtout au niveau des deux td à la suite et les remplacer par un div?

Tu peux lire ces tutoriels pour apprendre : http://css.developpez.com/cours/?pag...que-css#design
23/04/2011, 19h04
fbb53

même si il y a des erreurs a la W3C mon site pourra quand même être mis en ligne?
23/04/2011, 19h21
12monkeys

Bien sur tu peux mettre ton site en ligne. Simplement il risque d'être mal affiché par les différents navigateurs. Tout dépend bien sur aussi des erreurs que tu as. Le mieux c'est encore de les corriger...

J'ai ma banderole, mais le problème c'est que sous mozilla sa marche parfaitement mais sous internet explorer des que la première images arrive a gauche cela recommance donc on vois toujours les 5 premier photo. pouvez vous m'aider

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<marquee  align="center" height="140" scrolldelay="30" scrollamount="4" onmouseout="this.start()" onmouseover="this.stop()">
 
<a href="deux_roues.html">
<img border="0" src="images/baniere/2.jpg" alt="" hspace="3">
</a>
<img border="0" src="images/baniere/1.jpg" alt="" hspace="3"><a href="scooter.html">
<img border="0" src="images/baniere/2.jpg" alt="" hspace="3"><a href="velo.html">
<img border="0" src="images/baniere/3.jpg" alt="" hspace="3"><a href="scooter.html">
<img border="0" src="images/baniere/4.jpg" alt="" hspace="3"><a href="peugeot.html">
<img border="0" src="images/baniere/5.jpg" alt="" hspace="3"><a href="scooter.html">
<img border="0" src="images/baniere/6.jpg" alt="" hspace="3"><a href="scooter.html">
<img border="0" src="images/baniere/7.jpg" alt="" hspace="3"><a href="scooter.html">
<img border="0" src="images/baniere/8.jpg" alt="" hspace="3"><a href="scooter.html">
<img border="0" src="images/baniere/9.jpg" alt="" hspace="3"><a href="scooter.html">
</marquee>

la bonne écriture serait plutôt du style

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
<marquee  align="center" height="140" scrolldelay="30" scrollamount="4" onmouseout="this.start()" onmouseover="this.stop()">
  <a href="deux_roues.html">
    <img border="0" src="images/baniere/2.jpg" alt="" hspace="3">
  </a>
  <a href="scooter.html">
    <img border="0" src="images/baniere/1.jpg" alt="" hspace="3">
  </a>
  <a href="velo.html">
    <img border="0" src="images/baniere/2.jpg" alt="" hspace="3">
  </a>
  <a href="scooter.html">
    <img border="0" src="images/baniere/3.jpg" alt="" hspace="3">
  </a>
  <a href="peugeot.html">
    <img border="0" src="images/baniere/4.jpg" alt="" hspace="3">
  </a>
  <a href="scooter.html">
    <img border="0" src="images/baniere/5.jpg" alt="" hspace="3">
  </a>
  <a href="scooter.html">
    <img border="0" src="images/baniere/6.jpg" alt="" hspace="3">
  </a>
  <a href="scooter.html">
    <img border="0" src="images/baniere/7.jpg" alt="" hspace="3">
  </a>
  <a href="scooter.html">
    <img border="0" src="images/baniere/8.jpg" alt="" hspace="3">
  </a>
  <a href="scooter.html">
    <img border="0" src="images/baniere/9.jpg" alt="" hspace="3">
  </a>
</marquee>

il faut au moins corriger cela...