un soussi au niveau de mon design

Sujet résolu

16 août 2006 à 0:08:17

Bonjour

J'ai un petit soucci sur mon design avec Ie et FireFox. J'ai fait mon design en fonction de IE et quand essay avec FireFox toutle design est décalé
merci de m'aider

mon site est http://laliguedes3c.ifrance.com/

Sitevolution

16 août 2006 à 8:22:45

ca serait bien si tu nous donner au moins ta page ou tes pages de CSS !

Benji

16 août 2006 à 11:08:17

fait le d'abord sous firefox et ensuite tu fait un hack pour IE avec un IFie endif ...

gundam

16 août 2006 à 12:09:59

dac ma page css pour ma page acceuil est

body
{
background-color: black;
color: white;
width: 920px;
margin: auto;
margin-top: 20px;
margin-left: 30px;
margin-right: 20px;
margin-bottom: 20px;
}

#en_tete
{
font-family: pamela, "Blackadder ITC", arial;
font-size: 50px;
border: 2px solid #F60E0E;
margin-bottom: 40px;
padding-left: 50px;
width: 470px;
margin-left: 230px;
color: #F60E0E;
border-style: rigde;
background-color: #3593F4;
height: 65px;
}

#corps
{
margin-left: 50px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
text-transform: capitalize;
margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
padding: 25px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
margin-right: 30px;
font-family: pamela,"Blackadder ITC", arial;
font-size: 35px;
color: white;
border: red;
border-style: inset;
background-color: #000000;
padding-left: 10px;
padding-right: 10px;
}

#pied_de_page
{
font-family: pamela,"Blackadder ITC", arial;
font-size: 20px;
border: 2px solid #3593F4;
margin-bottom: 40px;
padding-left: 50px;
width: 420px;
margin-left: 230px;
color: #3593F4;
border-style: inset;
background-color: #FFFFFF;
}

.CC
{
padding-left: 100px;
color: red;
}

et voici le css du menu

#pmenu
{
float: left; /* Le menu flottera à gauche */
margin-left: 40px;
margin-right: 60px;
}

#date
{
background-color: #FFFFFF;
border: 2px solid #3593F4;
color: #3593F4;
margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
border-style: inset;
padding-left: 10px;
border: 2px solid #3593F4;
width: 170px; /* Très important : donner une taille au menu */
}

#date1
{
background-color: #FFFFFF;
border: 2px solid #3593F4;
color: #3593F4;
margin-bottom: 0px; /* Pour éviter que les éléments du menu ne soient trop collés */
border-style: inset;
padding-left: 10px;
border: 2px solid #3593F4;
width: 170px; /* Très important : donner une taille au menu */
margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
}

.element_menu
{
background-color: #FFFFFF;
border: 2px solid #3593F4;
color: #3593F4;
margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
border-style: inset;
padding-left: 10px;
width: 170px; /* Très important : donner une taille au menu */
}

#pmenu1
{
float: left; /* Le menu flottera à gauche */
margin-left: 70px;
margin-right: 120px;
}

.element_menu2
{
background-color: #FFFFFF;
border: 2px solid #3593F4;
color: #3593F4;
margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
border-style: inset;
padding-left: 10px;
width: 170px; /* Très important : donner une taille au menu */
}

.element_menu1
{
background-color: #FFFFFF;
border: 2px solid #3593F4;
color: #3593F4;
margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
border-style: inset;
padding-left: 10px;
width: 170px; /* Très important : donner une taille au menu */
}

.menuP
{
text-decoration: underline;
color: red;
}

#livreor
{
background-color: #FFFFFF;
border: 2px solid #3593F4;
color: #3593F4;
margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
border-style: inset;
padding-left: 10px;
width: 170px; /* Très important : donner une taille au menu */
}

et pour le hack je voudrai bien que tu explique coment faire car je debute
merci

Gregoo

16 août 2006 à 12:45:41

Je crois que tu peux rééditer ton message pour découvrir les joies des balises

...et de la mise en forme automatique créant un accès de lisibilité à ton post.

Grumpfement,
Gregoo

gundam

16 août 2006 à 12:52:18

oki tu pe m'expliquer comment elles fonctionnent stp

Sitevolution

16 août 2006 à 12:54:35

édites ton précédent message et tu verras une liste déroulante "Code" juste au dessus du cadre ou tu écris !
sélectionnes le code CSS puis choisis "CSS" dans la liste déroulante "Code", fais de même avec le code HTML en choisissant "HTML3 dans la liste déroulante !

Gregoo

16 août 2006 à 13:04:35

Salut,
tiens abreuve toi de la bonne connaissance et découvre toi même la formule "Zér0 point energy" par M@teo21.

Rambaldiement,
Gregoo

gundam

16 août 2006 à 13:12:51

d'accord merci sitevolution

Mon code html est le suivant

<!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" >
<head>
<title>Bienvenue sur la Ligue Des 3C !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <link rel="stylesheet" media="screen" type="text/css" title="page_accueil" href="siteweb.css" />
</head>
<body>

<div id="en_tete">

<div class="nom_du_site">
<p>La Ligue Des 3C</p>
</div>

</div>

<div id="menu">
<?php
// Puis on inclue le menu
include("menu.php");
?>
</div>

</br></br></br></br></br></br></br></br></br></br></br></br></br></br>

<div id="corps">

   <p>
   Vous voici arrivez dans l'univers que nous avons crée, n'ayez pas peur de vous y aventurer. et venez vivre
   le dernier combat opposant le Bien et le Mal, pour savoir QUI decideras de l'avenir de la Terre. </br>
   <img src="sanstitre_2.jpg" alt="notre logo" /></a> </br>
   Tout ce qui est raconté sur ce site n'est que pur fiction, mélant réalité et imagination.
</p>

   </div>
</div>

<div id="pied_de_page">

<div class="auteur_du_site">
Le site a été crée par Conan avec aide de <br/><span class="CC">Clara et Calvin</span>
</div>

</body>
</html>

Le menu est

<div id="pmenu">

<div id="date">

<?php
echo 'Aujourd\\'hui, nous sommes le : ' . date('d/m/Y');
?></br>
<?php
echo 'Il est ' . date('H \\H\\e\\u\\r\\e\\s,i\\m\\n');
?>
</div>

<div id="date1">
<ul>
<li><a href="index.php">page d'accueil</a></li>
</ul>
</div>

<div class="element_menu">
<h3> <span class="menuP">Personnage</span></h3> 
<ul>
<li><span class="perso"><a href="siteacphp/clara.php">CLARA</a></span></li> 
<li><span class="perso"><a href="siteacphp/calvin.php">CALVIN</a></span></li>
<li><span class="perso"><a href="siteacphp/conan.php">CONAN</a></span></li>
</ul>
</div>
</div>

<div id="pmenu1">

<div class="element_menu2">
<h3> <span class="menuP">La Ligue</span> et <span class="menuP">La Confrerie</span></h3>
<ul>
<li><a href="siteacphp/laligue.php">La Ligue</a></li>
<li><a href="siteacphp/LaConfrerie.php">La Confrerie</a></li>
   </ul>
</div>

<div class="element_menu1">
<h3> <span class="menuP">CHAPITRES</span></h3>
<ul>
<li><a href="siteacphp/prologue.php">Prologue</a></li>
<li><a href="siteacphp/pchap1.php">Chapitre 1 à 5</a></li>
   <li><a href="siteacphp/pchap2.php">Chapitre 6 à 10</a></li>
   </ul>
</div>
</div>

   <div id="livreor">
<ul>
<li><a href="livreor.php">Livre D'Or</a></li>
</ul>
</div>

Et le css est pour la page acceuil

body
{
background-color: black;
color: white;
width: 920px;
margin: auto;
margin-top: 20px;
margin-left: 30px;
margin-right: 20px;
margin-bottom: 20px;
}
#en_tete
{
font-family: pamela, "Blackadder ITC", arial;
font-size: 50px;
border: 2px solid #F60E0E;
margin-bottom: 40px;
padding-left: 50px;
width: 470px;
margin-left: 230px;
color: #F60E0E;
border-style: rigde;
background-color: #3593F4;
height: 65px;
}

#corps
{
margin-left: 50px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
text-transform: capitalize;
margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
padding: 25px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
margin-right: 30px;
font-family: pamela,"Blackadder ITC", arial;
font-size: 35px;
color: white;
border: red;
border-style: inset;
background-color: #000000;
padding-left: 10px;
padding-right: 10px;
}

#pied_de_page
{
font-family: pamela,"Blackadder ITC", arial;
font-size: 20px;
border: 2px solid #3593F4;
margin-bottom: 40px;
padding-left: 50px;
width: 420px;
margin-left: 230px;
color: #3593F4;
border-style: inset;
background-color: #FFFFFF;
}

.CC
{
padding-left: 100px;
color: red;
}

et pour le menu

#pmenu
{
float: left; /* Le menu flottera à gauche */
margin-left: 40px;
margin-right: 60px;
}

#date
{
background-color: #FFFFFF;
border: 2px solid #3593F4;
color: #3593F4;
margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
border-style: inset;
padding-left: 10px;
border: 2px solid #3593F4;
width: 170px; /* Très important : donner une taille au menu */
}

#date1
{
background-color: #FFFFFF;
border: 2px solid #3593F4;
color: #3593F4;
margin-bottom: 0px; /* Pour éviter que les éléments du menu ne soient trop collés */
border-style: inset;
padding-left: 10px;
border: 2px solid #3593F4;
width: 170px; /* Très important : donner une taille au menu */
margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
}

.element_menu
{
background-color: #FFFFFF;
border: 2px solid #3593F4;
color: #3593F4;
margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
border-style: inset;
padding-left: 10px;
width: 170px; /* Très important : donner une taille au menu */
}

#pmenu1
{
float: left; /* Le menu flottera à gauche */
margin-left: 70px;
margin-right: 120px;
}

.element_menu2
{
background-color: #FFFFFF;
border: 2px solid #3593F4;
color: #3593F4;
margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
border-style: inset;
padding-left: 10px;
width: 170px; /* Très important : donner une taille au menu */
}

.element_menu1
{
background-color: #FFFFFF;
border: 2px solid #3593F4;
color: #3593F4;
margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
border-style: inset;
padding-left: 10px;
width: 170px; /* Très important : donner une taille au menu */
}

.menuP
{
text-decoration: underline;
color: red;
}

#livreor
{
background-color: #FFFFFF;
border: 2px solid #3593F4;
color: #3593F4;
margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
border-style: inset;
padding-left: 10px;
width: 170px; /* Très important : donner une taille au menu */
}

gundam

17 août 2006 à 1:54:50

Je vous remercie de votre aide a tous mais j'ai trouvez mon probleme

Sitevolution

17 août 2006 à 11:01:57

n'oublies pas de mettre ton sujet en résolu !