Exploreur et Chrome

Version imprimable

24/02/2013, 17h29
0cool

Exploreur et Chrome

Bonjour à tous.

Novice en HTML , après avoir suivi des tutos.

Je me suis crée un petit site.

Celui ci fonctionne bien avec internet exploreur , mais j'ai deux souscis avec Chrome (et peut être les autres navigateur)

Concernant la page vidéo et le menu en bas de page de toutes les pages.

D'avance merci de votre temps et de votre aide.

L'adresse du site: bruno.0cool.fr

Cordialement.

ps: j'éspère ne pas m'être trompé de rubrique
24/02/2013, 19h43
Muchos

Bonjour et bienvenue !

Merci d'être précis dans vos questions. Ça nous permettra de mieux vous aider :)
Ex: Quelles versions des navigateurs utilisez-vous? Où se trouve précisemment le problème, sur quelles balises (éventuellement, donnez du code)? etc…

Ce que je peux vous dire pour l'instant, c'est que votre code n'est pas valide (pas de DOCTYPE par ex.) et donc peut être mal interprété. Vous l'avez réalisé avec quel logiciel?
25/02/2013, 14h32
0cool

Citation:

Envoyé par Muchos

Ex: Quelles versions des navigateurs utilisez-vous?

Je tente de créer mon site pour qu'il soit utilisable par tout les types de navigateurs.

Citation:

Envoyé par Muchos

Où se trouve précisemment le problème, sur quelles balises (éventuellement, donnez du code)? etc…

Avec un navigateur Chrome, je n'ai pas la même chose qu'avec internet exploreur.(en particulier la page "vidéos")

Citation:

Envoyé par Muchos

Ce que je peux vous dire pour l'instant, c'est que votre code n'est pas valide (pas de DOCTYPE par ex.) et donc peut être mal interprété. Vous l'avez réalisé avec quel logiciel?

Alors là , que veut tu me dire ?

Merci de votre aide
25/02/2013, 15h09
Vil'Coyote

Citation:

Alors là , que veut tu me dire ?

que ie et les autres navigateur on des soucis de d'interprétation commune. Surtout dans ce qui est le respect des normes w3c qu'ie oublis fortement. donc en gros commence par un code valide afin que les autres navigateurs ne soit pas incriminé et adapte tes dev en fonction des navigateur (css ....) si tu souhaites rendre ton site multi navigateurs comme tu le laisse entendre.
25/02/2013, 15h09
Muchos

De rien ! :ccool:
Je m'explique :

Citation:

Envoyé par Muchos

Ex: Quelles versions des navigateurs utilisez-vous?

Les navigateurs web évoluent dans le temps. Par exemple, la version d'Internet Explorer la plus récente est la 10. L'ancienne, moins performante, est la 9.
Si vous ne connaissez pas les versions des navigateurs sur lesquels vous faites les tests, ce n'est pas grave parce que je ne pense pas que votre problème vienne de là :)

Citation:

Envoyé par 0cool

Avec un navigateur Chrome, je n'ai pas la même chose qu'avec internet exploreur.(en particulier la page "vidéos")

Il faut se dire une chose : le rendu d'un site n'est jamais le même sur deux navigateurs différents, deux écrans différents, entre un PC et un Mac, etc. Donc, une différence d'apparence est normale.
Maintenant, si l'apparence est vraiment très différente, si le contenu n'est pas le même, et/ou si des fonctionnalités n'apparaissent pas, alors non ce n'est pas normal. Mais il faut nous décrire ce qui est différent. Ex: «Sous Chrome, mon menu n'apparaît pas», «Le logo est en bas alors qu'il devrait être en haut» ou alors «Il n'y a pas de vidéos affichées alors qu'il y en a sous Explorer», etc.

Citation:

Envoyé par Ocool

Alors là , que veut tu me dire ?

Le Doctype : c'est la première balise dans une page HTML. Elle sert à dire aux navigateurs dans quelle version de HTML la page est écrite. C'est très important, car sans elle, le rendu peut être très différent. Or, c'est justement votre problème, et il se trouve que vous n'avez pas de doctype.
Ce que je vous propose, c'est de mettre <!DOCTYPE html> au début d'une de vos pages, et de voir si vous avez toujours des différences.

Le logiciel : quand je regarde le code HTML de votre page, je vois qu'il a été fait avec un logiciel Microsoft — peut-être FrontPage ou Office SharePoint.
Ces logiciels font parfois un code pas terrible, qui ne fonctionnent bien que sous Internet Explorer.
25/02/2013, 15h19
Torgar

Salut,

Concernant le doctype, tu peux consulter notre FAQ pour en savoir plus ainsi que de voir les différents doctype disponible.
25/02/2013, 16h01
0cool

Citation:

Envoyé par Torgar

Salut,

Concernant le doctype, tu peux consulter notre FAQ pour en savoir plus ainsi que de voir les différents doctype disponible.

Salut, c'est fait sur toutes mes pages.

Mais j'ai toujours le même problème: ma page vidéo s'ouvre bien avec IE , mais elle complètement différente lorsque je l'ouvre avec Chrome (sur le même ordinateur) ?

Merci pour tout (je m'informe , j'apprend , je met en pratique)
25/02/2013, 16h46
Muchos

Citation:

Envoyé par 0cool

mais elle complètement différente lorsque je l'ouvre avec Chrome

Mais ça veut dire quoi "différente" ? ><
25/02/2013, 17h12
Candygirl

Bonjour,

Citation:

Envoyé par 0cool

Novice en HTML , après avoir suivi des tutos.

Je me suis crée un petit site.

Je ne sais pas quel tuto tu as suivi mais n'importe quel tuto sur l'html qui se respecte t'indiquera que Word ou Office,... est la dernière chose à utiliser pour créer son site :-/

Citation:

Envoyé par 0cool

Salut, c'est fait sur toutes mes pages.

Ton doctype est incomplet donc complètement inutile :(

Je vais te paraître peut-être un peu abrupte mais, soit tu affiches sur ton site "optimisé pour Internet Explorer" soit tu reprends tout de A à Z, en dehors d'office. Le code créé par Office (ou produit Microsoft similaire) est tellement immonde qu'il ne sert à rien de perdre son temps avec ...

Citation:

Envoyé par Candygirl

Bonjour,
Je vais te paraître peut-être un peu abrupte mais, soit tu affiches sur ton site "optimisé pour Internet Explorer" soit tu reprends tout de A à Z, en dehors d'office. Le code créé par Office (ou produit Microsoft similaire) est tellement immonde qu'il ne sert à rien de perdre son temps avec ...

Voilà mon css et mon index (j'ai tout repris),mais l'affichage n'est pas toujours bon en fonction des résolutions et tailles d'écrans.
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
  /* Je sÃ©lectionne mon image de fond */
 
html 
 
{ 
  margin:0;
  padding:0;
  background: url(image/fond.jpg) no-repeat top center ; 
  -webkit-background-size: cover; /* pour Chrome et Safari */
  -moz-background-size: cover; /* pour Firefox */
  -o-background-size: cover; /* pour Opera */
  background-size: cover; /* version standardisée */
}
 
  /* Menu horizontal */  
  #menu_horizontal
  {
  position: absolute;
  left: 0;
  top: 55%;
  width: 8em;
  margin-top: -2.5em;
  }
 
  /* Je sÃ©lectionne le format texte et paragraphe */  
  p
  {    
  font-size: 20px; /* Paragraphes de 14 pixels */
  }
 
  h1
  {    
  font-size: 40px; /* Titres de 40 pixels */
  }
 
  /* Je sÃ©lectionne les <li> du menu horizontal */
  ul#menu_horizontal li {
  display : inline;padding : 0 0.0em; /* Pour espacer les boutons entre eux */
  }
  ul#menu_horizontal {list-style-type : none; /* Car sinon les puces se placent n'importe oÃ¹ */}

index.html

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
  <!DOCTYPE HTML>
  <html>
      <head>
          <meta charset="utf-8" />
          <link rel="stylesheet" href="style.css" />
          <link rel="shortcut icon" href="favicon.ico" />
          <title>Bruno Animations</title>
 
 
 
      </head>
 
      <body>
 
</br>
</br>
</br>       
</br>
</br>
</br>
 
      <center><p>Passionné de <a href="list.html" title="la musique">musique</a> depuis mon plus jeune âge,</p></center>
      <center><p>j'ai commencé mes animations en 1976,</p></center>
      <center><p>influencé par les <a href="sono.html" title="la sonorisation">sons</a> provenant de tous horizons ...</p></center> 
      <center><p>D'abord résident de quelques Clubs,</p></center>
      <center><p>je suis très présent sur les départements de la Seine-Maritime et de l'Eure</p></center>
      <center><p>Et dans toute la FRANCE,</p></center>
      <center><p>où j'anime régulièrement.</p></center>
      <center><p>J'ai 51 ans.</p></center>
 
      <center><DIV CLASS="nono"><IMG SRC="images/nono.jpg" ></DIV></center>          
 
 
 
      <ul id="menu_horizontal">
      <li class="bouton_droite"><a href="index.html"><img src="images/accueil.png" </li> 
      <li class="bouton_droite"><a href="actu.html"><img src="images/actu.png" </li>
      <li class="bouton_droite"><a href="list.html"><img src="images/list.png" </li>
      <li class="bouton_droite"><a href="light.html"><img src="images/light.png" </li>
      <li class="bouton_droite"><a href="sono.html"><img src="images/sono.png" </li>
      <li class="bouton_droite"><a href="video.html"><img src="images/video.png" </li>
      <li class="bouton_droite"><a href="contact.html"><img src="images/contact.png" </li>
      </ul>
 
 
 
      </body>
 
 
 
 
  </html>

Je souhaite pouvoir voir mes pages correctement quel que soit la résolution d'écran.

Mon site : http://www.bruno.0cool.fr

D'avance merci.

27/02/2013, 16h20
Candygirl
Tout d'abord bravo pour ta persévérance et pour le code proposé bien plus propre :ccool:

Tu peux supprimer tous tes tags <center> qui sont dépréciés et utiliser un text-align:center sur tes p ou regarder dans la faq les différentes manières pour centrer.

Ensuite tes br sont mal écrits. C'est <br> ou <br /> en xhtml mais pas </br> de plus, si tu souhaites un espacement tu ferais mieux d'attribuer un padding-top au body plutôt qu'enchaîner les br:
Code:

1 2 3 body { padding-top:40px; /*valeur à ajuster */ }
Les images de ton menu sont aussi mal déclarées; il manque le > de fermeture et tu devrais avoir un attribut alt pour chacune d'entre elle:

<img src="images/accueil.png" alt="accueil">

Pour ta mise en page, il faudrait savoir ce que tu souhaites obtenir exactement pour pouvoir t'aider au mieux. En général, la manière la plus simple de gérer les différentes résolutions est de mettre un conteneur de largeur fixe autour de ton site et de le centrer à l'aide de margin:0 auto. Ex:
Code:

1 2 3 <div id="main"> ... contenu de tout le site ... </div>
Code:

1 2 3 4 #main { width:960px; margin:0 auto; }
27/02/2013, 16h55
Muchos
Pour réduire les images en même temps que se réduit l'écran, voici un code tout simple:
Code:

1 2 3 4 5 6 /* Minimiser les débordements des images */ img { max-width: 100%; height: auto; }
Quant à l'attribut ALT, il est très important car :
1. Il affiche un texte descriptif aux malvoyants, ou si l'image ne s'affiche pas.
2. Il donne des infos sur l'image aux moteurs de recherche.
Par exemple, pour votre photo, vous pourriez mettre :

Code:

<img src="images/nono.jpg" alt="Bruno de Bruno Animations" />
27/02/2013, 17h12
0cool

Candygirl et Muchos,
Merci, j'applique celà et reviens vers vous.
Cordialement.
27/02/2013, 22h45
rodolphebrd

A noter que dans le cas d’une image décorative, ne véhiculant aucune information, l’alternative doit être vide : alt=""
28/02/2013, 00h48
Muchos
Absolument !
À ce propos, il y a sur votre site une grande image de fond insérée avec css.
C'est embêtant pour 2 raisons :
1. Elle contient le titre du site et votre numéro de téléphone. Or, il ne seront ainsi jamais lus par les moteurs de recherche. Il vaudrait mieux utiliser du texte, ou une image insérée dans le html. Ex:
  Code:
  
  1 2 <h1><img src="logo-titre.jpg" alt="Bruno Animations" /></h1>
2. Elle est difficile à adapter à un écran réduit. Il vaudrait mieux avoir un petit background répété.

Après avoir rectifié et être reparti presque de zéro , comment positionner mes logos correctement sur les cotés droit et gauche du site et régler ègalement la hauteur de ces images qui doivent être répété dans toutes les pages?
Ci-dessous mon index.html et mon style.css
Merci

style.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
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
  /* Je sÃ©lectionne mon image de fond */
 
html 
{ 
  margin:0;
  padding:0;
  background: url(images/fond.jpg) no-repeat top center ; 
  -webkit-background-size: cover; /* pour Chrome et Safari */
  -moz-background-size: cover; /* pour Firefox */
  -o-background-size: cover; /* pour Opera */
  background-size: cover; /* version standardisée */
}
 
  /* Menu horizontal */  
  #menu_horizontal
  {
  position: absolute;
  left: 0;
  top: 55%;
  width: 8em;
  margin-top: -2.5em;
  }
 
    /* Je positionne l'image nono */
  #nono
{
   float:center;
   margin:0; padding:0;
   width: 740px;
   height: 463px;
}
  #nono img
{
   border:0; text-decoration:none;
   width: 740px;
   height: 463px;
}
 
  /* Je sÃ©lectionne le format texte et paragraphe */  
  p
  {    
  font-size: 20px; /* Paragraphes de 20 pixels */
  }
 
  h1
  {    
  font-size: 0px; /* Titres de 40 pixels */
  }
 
  /* Je sÃ©lectionne les <li> du menu horizontal */
  ul#menu_horizontal li
 {
  display : inline;padding : 0 0.0em; /* Pour espacer les boutons entre eux */
  }
  ul#menu_horizontal {list-style-type : none; /* Car sinon les puces se placent n'importe oÃ¹ */
  }
 
body
{
padding-top:100px; /*valeur à ajuster */
}
 
#main
{
  width:960px;
  margin:0 auto;
}
 
/* Minimiser les débordements des images */
img
{
	max-width: 100%;
	height: auto;
}

index.html

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
  <!DOCTYPE HTML>
 
  <html>
 
      <head>
 
          <meta charset="utf-8" />
          <link rel="stylesheet" href="style.css" />
          <link rel="shortcut icon" href="favicon.ico" />
          <title>Bruno Animations</title>
 
      </head>
 
      <body>
 
      <h1><center><img src="images/title.gif" alt="Bruno Animations" /></center></h1>
 
       <left><img src="images/logo.gif" alt="Bruno Animations" /></left>
 
       <right><img src="images/logo.gif" alt="Bruno Animations" /></right>
 
      <center><p>Passionné de <a href="list.html" title="la musique">musique</a> depuis mon plus jeune âge,</p></center>
      <center><p>j'ai commencé mes animations en 1976,</p></center>
      <center><p>influencé par les <a href="sono.html" title="la sonorisation">sons</a> provenant de tous horizons ...</p></center> 
      <center><p>D'abord résident de quelques Clubs,</p></center>
      <center><p>je suis très présent sur les départements de la Seine-Maritime et de l'Eure</p></center>
      <center><p>Et dans toute la FRANCE,</p></center>
      <center><p>où j'anime régulièrement.</p></center>
      <center><p>J'ai 51 ans.</p></center>
 
 
 
      <center><img src="images/nono.jpg" alt="Bruno de Bruno Animations" /></center>
 
 
 
      <ul id="menu_horizontal">
      <li class="bouton_droite"><a href="index.html"><img src="images/accueil.png" </li> 
      <li class="bouton_droite"><a href="actu.html"><img src="images/actu.png" </li>
      <li class="bouton_droite"><a href="list.html"><img src="images/list.png" </li>
      <li class="bouton_droite"><a href="light.html"><img src="images/light.png" </li>
      <li class="bouton_droite"><a href="sono.html"><img src="images/sono.png" </li>
      <li class="bouton_droite"><a href="video.html"><img src="images/video.png" </li>
      <li class="bouton_droite"><a href="contact.html"><img src="images/contact.png" </li>
      </ul>
 
      </body>
 
  </html>

01/03/2013, 09h51
Muchos
LEFT et RIGHT n'existent pas ! Et CENTER est déprécié (ne l'utilisez pas).
Pour positionner les éléments, utilisez CSS. Il existe de nombreuses propriétés :
- POSITION,
- FLOAT,
- TEXT-ALIGN,
- MARGIN et PADDING…
Pour positionner vos logos, ce tutoriel répond exactement à votre question \o/
01/03/2013, 17h23
0cool

Ce n'est pas pour des images de fond que je recherche le positionnement.
Je cherche comment placer mes images (photos ou autres) dans mes pages, de tel manière à que quel que soit le format de l'écran (résolution) mes images soient toujours au bon endroit.
L'exemple ci-dessous:

Code:

<IMG STYLE="position:absolute; TOP:450px; LEFT:850px; WIDTH:350px; HEIGHT:500px" SRC="images/nono-cap.gif">

, va bien pour certains formats d'écrans , mais dans d'autres cas (ecran large) , les images chevauchent le texte.
Merci.
06/03/2013, 11h52
thelvin

Hello,

Le "bon emplacement" d'habitude, c'est quelque chose du genre "ça doit être situé après ceci et avant cela."

Autrement dit un placement entièrement relatif à la position du reste, ce qui exclut le placement absolu. Un placement absolu, ça peut servir pour forcer d'afficher quelque chose en haut à droite de la page, ou en bas à gauche, ou pareil mais dans un cadre au lieu d'une page. Ce genre de choses. Toi tu veux juste que ça soit après tout le reste. Ce n'est pas un placement absolu.

Pour que tes images soient sous le <hr> il suffit de les mettre après le <hr>. Pour qu'elles soient l'une à côté de l'autre il suffit de les mettre l'une après l'autre.

Pour ajouter des marges, c'est plus compliqué, mais tu peux par exemple les mettre en display: block et float: left, ce qui te permet de mettre margin-left sur la plus à gauche pour faire de la marge à gauche, et margin-right sur chacune pour imposer une marge avec l'image à sa droite.
06/03/2013, 22h32
0cool

Hello,
N'existerai t'il pas un code pour placer les images en % par rapport à la marge de droite ou la marge de gauche voir la marge de hauteur ?
merci