Se connecter

Informatique

Création de sites web

Sujet : Problème de compatibilité
1
Seeone
Niveau 7
24 août 2013 à 19:39:05

Bonjour, je suis en train de créer un site et sur mozila firefox le footer s'affiche juste à côté de l'image alors que sur google chrome il s'affiche au bon endroit. Savez vous pourquoi? Regardez ce lien avec chrome puis mozila: http://www.christian-animation.fr/st_sylvestre.php (ce n'est pas de la pub :fier: )
Voila le script: (ya t il des fautes?)

html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>Animation Musicale Aquitaine</title>
<META NAME="Keywords" CONTENT="animation musicale aquitaine orchestre, musique, bordeaux, landes, mariage, christian animation, aquitaine">
</head>

<body>
<header>
<center>
<h1>ANIMATION MUSICALE</h1> <br />
<h2>Région Aquitaine et Grand Sud-Ouest</h2>
<div id="nav">
<?php include("menu.php"); ?>
</center>
</div>

</header>
<br /> <br /> <br /> <br /> <br /> <br /><br /> <br />
<center>
<div>
<img src = "sylvestre.jpg" class="sylvestre" alt = "StSylvestre" />
</div>

<footer>
<div>
<section>
<article>
<address>
<em>Web Designer:<em> <br />
Nicolas Arias <br />
<a href = "mailto:aanico@hotmail.fr">
aanico@hotmail.fr</a>
</address>
© Tous Droits Réservés Nicolas Arias 2013
</article>
</section>
</div>
</footer></center></body>
</html>

css:
p
{
font-family: Comic Sans MS;
font-size: 29px;
text-shadow: 3px 3px 1px #2255ff;

}

.sylvestre
{
float: center;

}

header
{
color: #336699;
}

span
{
text-decoration: blink;
}

h1
{
font-family: Lucida Handwriting;
text-shadow: 5px 5px 2px red;
font-size: 50px;
}

h2
{
font-family: Mistral;
font-size: 50px;
color: red;
text-shadow: 4px 4px 2px #336699;
}

h3
{
font-family: Mistral;
font-size: 35px;
text-shadow: 4px 4px 3px #99ff00;
}

div
{
text-shadow: 3px 3px 1px purple;
}

body
{
background-color: #ff9900;
}

  1. soulign

{
text-decoration: underline;
}

em
{
text-decoration: underline;
}

address
{
font-family: Virtual DJ;
font-size:10px;
text-align: center;
}

footer
{
background-color: #336699;
text-align: center;
position: auto;
}

article
{
vertical-align: top;
text-align: justify;
}

img
{
float: left;
}

.nav
{
background-color: red;
}

nav a:hover
{
color: #760001;
border-bottom: 3px solid #760001;
}

nav
{
display: inline-block;
width: 740px;
text-align: right;
float: right;

}

nav ul
{
list-style-type: none;
}

nav li
{
display: inline-block;
margin-right: 15px;
float: right;
}

nav a
{
font-size: 35px;
color: #181818;
padding-bottom: 3px;
text-decoration: none;
font-family: Tempus Sans ITC;
background-color: #336699;
border: 4px solid red;
}

div#clasic
{
background-color: red;
font-size: 40px;
}

img
{
border: 7px solid red;
}

article
{
display: inline-block;
vertical-align: center;
font-size: 10px;
}

.php
{
background-color: red;

}

.commentaire
{
font-size: 30px;
font-family: Papyrus;
}

button
{
position: relative;
right: 200px;
}

.sylvestre
{
float: center;
}

Merci.

GreenAstronautz
Niveau 7
24 août 2013 à 19:55:36

:salut:

Met un "clear:both;" à ton footer, ça devrait le mettre en dessous :ok:

Quand tu as des éléments en "foat", qui sortent donc du flux, mettre un clear:both; te permet de placer cet élément en dessous des éléments en float "left" et "right".

Skyboys
Niveau 10
24 août 2013 à 20:10:16

Salut,

Alors tout d'abord, créer un site web c'est compliqué. Tout le monde n'est pas capable de le faire et ça se voit encore dans cet exemple... Tu utilises des balises dont tu ne sais surement pas à quoi elle sert. Par exemple la balise <center> n'existe plus et surtout en HTML5.

Donc j'ai corrigé ton code, mais j'ai pas supprimé les balises redondantes etc. J'ai juste réajusté ton code pour que ça s'affiche correctement partout.

Html :d) https://wall.deblan.org/x1872/html/1/
Css :d) https://wall.deblan.org/x1873/css/1/

Hésite pas si tu souhaites des explications, c'est le meilleur moyen de bien comprendre ce qu'on fait... :ok:

Seeone
Niveau 7
24 août 2013 à 20:26:15

Je vous remercie tous les 2. Jai utilisé la modification de skyboys. Merci quand meme green.
Je tiens à préciser que ce site est ancien (mon premier) et que je l'ai fait sans graphiste.
Désormais je travaille avec un ami à moi qui est graphiste. Nous sommes en train de créer notre site.
Quel logiciel de capture d'écrans me conseillez vous pour vous le montrer

Skyboys
Niveau 10
24 août 2013 à 20:59:58

Tu peux juste utiliser un screen de ton écran avec l'outil "Capture" de Windows.. et utiliser un hebergeur d'image gratuit.

Seeone
Niveau 7
24 août 2013 à 21:06:56

Je sais que c'est bizarre mais je n'ai pas outil de capture; je suis sous vista :snif: Ya t il un combinaison Ctrl ou alt-F....?
https://www.noelshack.com/2013-34-1377371007-fond-d-ecran-craken.png
https://www.noelshack.com/2013-34-1377371033-banniere.jpg
https://www.noelshack.com/2013-34-1377371077-fond-ecran-cercle-avec-texte.png
C'est mon ami qui les a fait. Qu'en pensez vous? car nous faisons aussi de la création de logo, bannière, images...

Skyboys
Niveau 10
24 août 2013 à 22:53:38

Ton ami n'est pas graphiste, tout simplement.

Skyboys
Niveau 10
24 août 2013 à 22:54:02

Ou alors il est très mauvais.

Seeone
Niveau 7
24 août 2013 à 22:57:58

il débute, mais cest si mauvais que ça?

Skyboys
Niveau 10
25 août 2013 à 01:15:17

Dans le monde du web se considérer comme graphiste sans études ce n'est pas possible... Bah c'est forcément un peu bas de gamme oui.

Seeone
Niveau 7
25 août 2013 à 01:37:19

Tu vises quelqu'un?

1
Sujet : Problème de compatibilité
   Retour haut de page
Consulter la version web de cette page