Bonjour,
tout d'abord je me présente, je suis un nouveau venu sur le forum. Je pratique le VTT trial avec mon frère et nous voudrions réaliser un site pour présenter nos démonstrations.
Je débute donc dans la crétions d'un site simple :html / CSS.
Mon problème est que mon site fonctionne parfaitement (en fait ca a l'air) sous IE par contre sous firefox j'ai un décalage du corp;
j'ai pourtant mis une marge de 150px correspondant à ma largeur de menu. De plus lorsque j'arrive sur ma page de défilement de photos automatique les liens ne sont plus activé. Le site est pour l'instant sur http://pagesperso-orange.fr/unibikeshow/ voici le code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Unibikeshow.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="design" href="design.css" />
</head>
<body>
<div id="en_tete">
<div align="center"></div>
</div>
</div>
<div id="menu">
<div class="element_menu">
<h3>News</h3>
Soirées <ul>
<li><a href="equinoxe08.html">Equinoxe</a></li>
</ul>
A Centrale Paris
</div>
<div class="element_menu">
<ul>
<li><a href="index.html">Acceuil</a></li>
</ul>
</div>
<div class="element_menu">
<h3>Nos Shows</h3>
<ul>
<li><a href="organisation.html">Organisation</a></li>
<li><a href="structure.html">Structure</a></li>
</ul>
</div>
<div class="element_menu">
<ul>
<li><a href="pilotes.html">Nos pilotes</a></li>
</ul>
</div>
<div class="element_menu">
<h3>Réalisations</h3>
<ul>
<li><a href="photos.html">Photos</a></li>
<li><a href="videos.html">Vidéos</a></li>
</ul>
</div>
<div class="element_menu">
<ul>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div class="element_menu">
<ul>
<li><a href="partenaires.html">Partenaires</a></li>
</ul>
</div>
</div>
<div id="corps">
</br>
</br>
</br>
Vous souhaitez animer votre événement, proposer un spectacle unique, mettre en avant un stand , un produit ...</br> </br>
Comment faire?</br></br>
Faites appel à nos services</br></br>
Nous vous proposons des shows trial inédits et clés en main</br></br>
</br>
On s’occupe de tout pour vous!
</div>
<div id="pied_de_page">
</div>
</body>
</html>
/* CSS Document */
* {padding: 0; margin: 0;}
html, body {
height: 100%;
}
body
{
width: 99%;
height: 100%;
margin: auto;
margin-top: 3px;
margin bottom: 3px;
background-color: #c4cfc9;
font-family: Arial, Helvetica, sans-serif;
}
a {text-decoration: none;
color: black;
color: #222;
}
/* L'en-tête */
#en_tete
{
font-size: 14px;
width: 100%;
height: 121px;
margin: auto;
background-image: url("entete/entete.jpg");
background-position: center;
background-repeat: no-repeat;
background-color: white;
}
/* Le menu */
#menu
{
float: left;
width: 150px;
margin-top: 5px
}
.element_menu
{
background-color: #626262;
border: 2px solid black;
margin-bottom: 5px;
}
.element_menu h3
{
color: #B3B3B3;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
}
.element_menu ul
{
list-style-image: url("images/puce.png");
padding: 0px;
padding-left: 20px;
margin: 0px;
margin-bottom: 5px;
}
#corps
{
width: 84%;
height: 100%;
margin-left: 155px;
margin-bottom: 40px;
margin-top: 5px;
margin: auto;
padding: 5px;
color: black;
background-image: url("fond1.jpg");
background-position: center;
Background-repeat: no;
border: 2px solid black;
font-size: 28px;
}
#pied_de_page
{
width: 100%;
height: 100px;
margin: auto;
color: black;
background-image: url("piedpage/koxx.gif");
background-position: left;
border: 2px solid black;
font-size: 28px;
}
#photos
{
width: 84%;
height: 100%;
margin-left: 155px;
margin-bottom: 40px;
margin: auto;
padding: 5px;
color: black;
background-image: url("fond1.jpg");
background-position: center;
Background-repeat: no;
border: 2px solid black;
font-size: 18px;
}
#defilphotos {
position: relative;
width: 84%;
height: 750px;
}
#thumbs {
width: 180px;
float: left;
}
#thumbs a {
display: block;
float: right;
margin: 0 0 5px 5px;
width: 50px;
height: 50px;
border: 0px solid #000;
}
#thumbs a img {
width: 50px;
height: 50px;
border: 0;
}
#thumbs a:hover {
border-color: #ddd;
}
#thumbs a:hover img {
position: absolute;
width: auto;
height: auto;
margin-left: 20%;
top: 0;
border: 1px solid #333;
}
Par avance merci.
Modifié par tomtom26 (12 Apr 2008 - 14:22)
tout d'abord je me présente, je suis un nouveau venu sur le forum. Je pratique le VTT trial avec mon frère et nous voudrions réaliser un site pour présenter nos démonstrations.
Je débute donc dans la crétions d'un site simple :html / CSS.
Mon problème est que mon site fonctionne parfaitement (en fait ca a l'air) sous IE par contre sous firefox j'ai un décalage du corp;
j'ai pourtant mis une marge de 150px correspondant à ma largeur de menu. De plus lorsque j'arrive sur ma page de défilement de photos automatique les liens ne sont plus activé. Le site est pour l'instant sur http://pagesperso-orange.fr/unibikeshow/ voici le code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Unibikeshow.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="design" href="design.css" />
</head>
<body>
<div id="en_tete">
<div align="center"></div>
</div>
</div>
<div id="menu">
<div class="element_menu">
<h3>News</h3>
Soirées <ul>
<li><a href="equinoxe08.html">Equinoxe</a></li>
</ul>
A Centrale Paris
</div>
<div class="element_menu">
<ul>
<li><a href="index.html">Acceuil</a></li>
</ul>
</div>
<div class="element_menu">
<h3>Nos Shows</h3>
<ul>
<li><a href="organisation.html">Organisation</a></li>
<li><a href="structure.html">Structure</a></li>
</ul>
</div>
<div class="element_menu">
<ul>
<li><a href="pilotes.html">Nos pilotes</a></li>
</ul>
</div>
<div class="element_menu">
<h3>Réalisations</h3>
<ul>
<li><a href="photos.html">Photos</a></li>
<li><a href="videos.html">Vidéos</a></li>
</ul>
</div>
<div class="element_menu">
<ul>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div class="element_menu">
<ul>
<li><a href="partenaires.html">Partenaires</a></li>
</ul>
</div>
</div>
<div id="corps">
</br>
</br>
</br>
Vous souhaitez animer votre événement, proposer un spectacle unique, mettre en avant un stand , un produit ...</br> </br>
Comment faire?</br></br>
Faites appel à nos services</br></br>
Nous vous proposons des shows trial inédits et clés en main</br></br>
</br>
On s’occupe de tout pour vous!
</div>
<div id="pied_de_page">
</div>
</body>
</html>
/* CSS Document */
* {padding: 0; margin: 0;}
html, body {
height: 100%;
}
body
{
width: 99%;
height: 100%;
margin: auto;
margin-top: 3px;
margin bottom: 3px;
background-color: #c4cfc9;
font-family: Arial, Helvetica, sans-serif;
}
a {text-decoration: none;
color: black;
color: #222;
}
/* L'en-tête */
#en_tete
{
font-size: 14px;
width: 100%;
height: 121px;
margin: auto;
background-image: url("entete/entete.jpg");
background-position: center;
background-repeat: no-repeat;
background-color: white;
}
/* Le menu */
#menu
{
float: left;
width: 150px;
margin-top: 5px
}
.element_menu
{
background-color: #626262;
border: 2px solid black;
margin-bottom: 5px;
}
.element_menu h3
{
color: #B3B3B3;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
}
.element_menu ul
{
list-style-image: url("images/puce.png");
padding: 0px;
padding-left: 20px;
margin: 0px;
margin-bottom: 5px;
}
#corps
{
width: 84%;
height: 100%;
margin-left: 155px;
margin-bottom: 40px;
margin-top: 5px;
margin: auto;
padding: 5px;
color: black;
background-image: url("fond1.jpg");
background-position: center;
Background-repeat: no;
border: 2px solid black;
font-size: 28px;
}
#pied_de_page
{
width: 100%;
height: 100px;
margin: auto;
color: black;
background-image: url("piedpage/koxx.gif");
background-position: left;
border: 2px solid black;
font-size: 28px;
}
#photos
{
width: 84%;
height: 100%;
margin-left: 155px;
margin-bottom: 40px;
margin: auto;
padding: 5px;
color: black;
background-image: url("fond1.jpg");
background-position: center;
Background-repeat: no;
border: 2px solid black;
font-size: 18px;
}
#defilphotos {
position: relative;
width: 84%;
height: 750px;
}
#thumbs {
width: 180px;
float: left;
}
#thumbs a {
display: block;
float: right;
margin: 0 0 5px 5px;
width: 50px;
height: 50px;
border: 0px solid #000;
}
#thumbs a img {
width: 50px;
height: 50px;
border: 0;
}
#thumbs a:hover {
border-color: #ddd;
}
#thumbs a:hover img {
position: absolute;
width: auto;
height: auto;
margin-left: 20%;
top: 0;
border: 1px solid #333;
}
Par avance merci.
Modifié par tomtom26 (12 Apr 2008 - 14:22)