Bonjour à tous
je suis en train de creer mon site en full css. J'ai mis le template ici http://voyage.globeblog.com . Sous IE tout fonctionne très bien mais sous Firefox c un peu plus problematique :
sur la page d'accueil je n'arrive pas a aligner le div a cote de l'image ni le <p> a cote de ce dernier <div>, ils passent sous l'image ??
voici ce que ça donne sous IE et sous FF :
Voici le code html de la page :
Voici le code css :
Merci de votre aide
vxdav
je suis en train de creer mon site en full css. J'ai mis le template ici http://voyage.globeblog.com . Sous IE tout fonctionne très bien mais sous Firefox c un peu plus problematique :
sur la page d'accueil je n'arrive pas a aligner le div a cote de l'image ni le <p> a cote de ce dernier <div>, ils passent sous l'image ??
voici ce que ça donne sous IE et sous FF :
Voici le code html de la page :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>GlobeBlog</title>
<link href="/photos.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="logo"><img src="/illus-photo/coin-corne-banniere.png"> <span class="marge-gauche"><strong>
<a href="#">GLOBE BLOG</a></strong></span></div>
<div id="description"><span class="marge-gauche">PHOTO DE VOYAGE - DECOUVRIR
LE MONDE EN PHOTO</span></div>
<div id="parcours"><span class="marge-gauche"><span class="bold"><a href="#">ACCUEIL
PHOTO</a></span></span></div>
<div id="photo-du-mois"><img src="/illus-photo/vietnam-home.jpg">
<div id="commentaire-photo-du-mois"><img class="image" src="/illus-photo/coup-de-coeur.gif">
<p span class="marge-gauche"><strong>La photo coup de coeur</strong><br>
Lieu : Asie - Vietnam - Baie d'Halong<br>
Date : septembre 2004<br>
APN : Nikon CoolPix 3mp<br>
Réglage : mode scène paysage classic<br>
Photographe : <a href="#">davidb</a><br>
<br>
Album photo Vietnam [<a href="#">137 photos</a>] </p>
</div>
<p id="envoyer-photo-du-mois">
Vous souhaitez envoyer votre plus belle photo
de voyage, photo aérienne, sport, ... et être affiché sur Globeblog.com
?<br>
<br>
<a href="#">Contactez moi et envoyer votre
photo ici</a></p>
</div>
<hr>
<div id="photo-voyage">
<p span class="marge-gauche">
<strong>Photo de Voyage</strong><br>
:: <a href="#" style="text-decoration:underline">France</a> (238 photos) <br>
<a href="">Lyon</a> <font color="#FF0000">NEW</font>
- <a href="#">Millau</a> - <a href="#">Paris</a><br>
:: <a href="#" style="text-decoration:underline">Maroc</a><br>
:: <a href="page-pays-theme.html" style="text-decoration:underline">Vietnam</a> (421 photos)<br>
<a href="#">Baie d'Halong</a> - <a href="#">Hanoi</a> - <a href="#">Cao Bang</a>
</p>
</div>
<div id="photo-sport">
<p span class="marge-gauche"> <strong>Photo Sport</strong><br>
:: <a href="#">Parapente</a> (12 photos)<br>
:: <a href="#">Plongée sous marine</a> (421 photos) <br>
:: <a href="#">Chute libre</a>(421 photos) <font color="#FF0000">NEW</font><br>
</p>
</div>
<div id="photo-theme">
<p span class="marge-gauche">
<strong>Photo par thème</strong><br>
:: <a href="#">Plage</a> (38 photos) <br>
:: <a href="#">Désert</a> (11 photos) <br>
:: <a href="#">Montagne</a> (121 photos) <font color="#FF0000">NEW</font><br>
</p>
</div>
<div id="tips">
<span class="marge-gauche"><strong>Tips</strong></span><br>
<span class="marge-gauche">:: <a href="#">fonds d'écran gratuits</a> : sélection des plus belles
photos (plage, paysage, sport,...) pour votre fond d'écran</span><br>
<span class="marge-gauche">:: <a href="#">cartes postales</a> : envoyer une e-carte postale à un(e) ami(e) pour un anniversaire, une invitation au voyage,...</span>
</div>
<div id="pied">© Globeblog 2004 - 2005 | Reproduction même partielle interdite
sans autorisation de l'auteur | <a href="#">Plan</a> | <a href="#">Contact</a>
| <a href="#">Liens</a> </div>
</div>
</body>
</html>
Voici le code css :
body {
font-family:Verdana, Arial, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}
hr { clear: both; visibility: hidden; }
#container {
position: absolute;
width: 750px;
left: 50%;
margin-left: -375px;
}
#logo {
top: 0;
left: 0;
height: 30px;
background-color: #99CC33;
font-size: 20;
color: #666666;
}
#logo img {
position: absolute;
z-index:1;
margin-left:723px;
margin-top:0px;
}
#logo a {
font-size: 20;
color: #666666;
text-decoration: none;
}
#logo a:hover {
font-size: 20;
color: #666666;
text-decoration: none;
}
#description {
position: relative;
height: 20px;
background-color: #d3d3d3;
font-size: 10;
color: #666666;
padding-top: 4px;
}
#parcours {
position: relative;
height: 20px;
background-color: #f0f0f0;
font-size: 10;
color: #666666;
padding-top: 4px;
}
#parcours a {
text-decoration: underline;
color:#666666; }
#parcours a:hover { text-decoration: none; }
#parcours a:current {
text-decoration: underline;
font-weight: bold;
}
.marge-gauche {
margin-left: 5px;
margin-right: 5px;
}
#pays {
margin-top: 30px;
background-color: #f0f0f0;
float: left;
margin-left: 0px;
width: 400px;
font-size: 12;
color: #666666;
}
.bold {
font-weight: bold;
}
a {
color:#000000;
text-decoration: underline; }
a:hover { text-decoration: none; }
a.text { color:#000000; }
a.text:hover { text-decoration: none }
#photo-du-mois {
margin-top: 30;
z-index: 1;
}
#commentaire-photo-du-mois {
position: absolute;
height: 201px;
width: 200px;
background-color: #f0f0f0;
font-size: 10;
color: #666666;
margin-left: 5px;
border: solid 1px #d3d3d3 100%;
}
#commentaire-photo-du-mois img {
position: absolute;
z-index:2;
left: 155px;
top: -3px
}
#envoyer-photo-du-mois {
position: absolute;
height: 201px;
width: 140px;
margin-left: 210px;
font-size: 10;
text-align: right;
font-style : italic;
color: #666666;
}
#photo-voyage {
margin-top: 30px;
float: left;
background-color: #f0f0f0;
width: 235px;
font-size: 10;
color: #666666;
}
#photo-voyage a {
font-size: 10;
color: #000000;
text-decoration:none;
}
#photo-voyage a:hover {
font-size: 10;
color: #000000;
text-decoration:underline;
}
#photo-voyage img {
position: absolute;
margin-top:-15px;
margin-left:-22px;
}
#photo-sport {
margin-top: 30px;
background-color: #f0f0f0;
float: left;
margin-left: 22.5px;
width: 235px;
font-size: 10;
color: #666666;
}
#photo-sport img {
position: absolute;
margin-top:-15px;
margin-left:-22px;
top: 392px;
left: -95px;
}
#photo-theme {
margin-top: 30px;
background-color: #f0f0f0;
float: left;
margin-left: 22.5px;
width: 235px;
margin-botton: 10px;
font-size: 10;
color: #666666;
}
#photo-theme img {
position: absolute;
margin-top:-15px;
margin-left:-22px;
}
.image {float: right;
margin-top:-15px;
margin-right:-15px;
z-index: 3;}
#tips {
margin-top: 30px;
font-size: 10px;
color: #666666;
border: dotted 1px #d3d3d3 100%;
clear: all;
}
#pied {
margin-top: 30px;
height: 11px;
background-color: #99CC33;
font-size: 10px;
color: #333333;
text-align: center;
border: 100%;
clear: all;
}
#pied a { color:#333333; }
#pied a:hover { text-decoration: none }Merci de votre aide
vxdav
?