28172 sujets

CSS et mise en forme, CSS3

Problème de mise en forme sous Firefox, Chrome et IE

Bonjour à tous,

Je suis un novice en programmation et j essaye, tant bien que mal, de coder mon propre site; non sans déboires ...
Tout marche pour le mieux sous Safari alors qu il y a des problemes d affichage sous les autres navigateurs ...
=) Le menu deborde ss Chrome
=) Le meme menu n´affiche pas l image des liens sous en "a:hover" avec Firefox
=) et cela pose aussi probleme ds IE

Voici mon code HTML :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="X-UA-Compatible" content="IE=8" />
<title>I-Novateur</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type= "text/css">
</style>
<!--[if IE]>
<link rel="stylesheet" media="screen" type="text/css" title="feuille de style pour IE" href="css/style_ie.css" />
<![endif]-->

</head>


<body>
<div id="conteneur">
<div id="entete">

<p>
<h>
<a href="http://i-novateur.fr/ACCEDER"><span class="ACCEDER">ACCEDER A TON COMPTE</span></a>
<a href="http://i-novateur.fr"><img src="images/logo.jpeg" alt="titre"/></a>
</h>
</p>
</div>

<div id="enhaut"><a href="ACCROCHE">ACCROCHE</div>
<div id="contenu">
<div id="gauche">
<ul>
<li><a href="#" title="Lien 1">Lien 1</a></li>

<li><a href="#" title="Lien 2">Lien 2</a></li>
<li><a href="#" title="Lien 3">Lien 3</a></li>
</ul>
</div>
<div id="centre">CENTRE</div>
<div class="clr">L</div>
</div>
</div>


<div id="enbas">
<table>
<tr>
<td><a href="http://www.mon-pret-etudiant.com/la_societe"><span class="Lasociete1">La soci&eacute;t&eacute;</span></a></td>
<td><span class="trait">|</span></td>
<td><a href="http://www.mon-pret-etudiant.com/Mentions legales"><span class="Lasociete2">Mentions l&eacute;gales</span></a></td>
<td><span class="trait">|</span></td>
<td><a href="http://www.mon-pret-etudiant.com/Contact"><span class="Lasociete3">Contact</span></a></td>
<td><span class="trait">|</span></td>
<td><a href="http://www.mon-pret-etudiant.com/Partenaires"><span class="Lasociete4">Partenaires</span></a></td>
</tr>
</table>
</div>
</body>



et voici mon code CSS:


<style type= "text/css">

body {
font-family: Tahoma, Arial, Verdana, sans-serif;
font-size: 12px;
text-align: center;
}

div{
margin: 2px;
/* définition de bordure par defaut pour tous les blocs */
}

#entete
{
background: url("") no-repeat;
border:none;
height:30px;
width:970px;
margin: 0 auto;
}

#entete a
{
text-decoration:none;
font-size:18px;
font-family:verdana, serif;
color:#c938ba;
padding-right:15px;
position: absolute;
left: 155px;
top:25px;
border:none;
}

#entete a:hover
{
text-decoration:underline;
}

#entete a:hover ul
{
border-bottom:3px solid black;
}

.ACCEDER
{
text-decoration:none;
text-align:left;
color: #c938ba;
padding:left:0px;
border:0px black solid;
}

#entete img
{
display:block;
position:fixed;
left:955px;
top:10px;
padding-left:px;
border:none;
}



#conteneur {
width:970px;
/* redéfinition de bordure */
margin: 0 auto; /* pour centrer tout le contenu de la page */
}

#contenu {
width:970px;
margin:auto;
margin-top: 10px;
margin-bottom:10px;
}



#enhaut {
overflow:auto;
width:960px;
height:125px;
margin-top: 10px;
font-family: verdana, serif;
font-size: 22px;
text-decoration:none;
color:black;
background-color:#ff9728;
background: url("images/pdgaccrochebis.jpeg");
}


#enhaut a
{
overflow:auto;
display:block;
text-decoration:none;
color:black;
font-family: verdana,serif;
padding-top:25px;
}



#contenu {
width:970px;
margin:auto;
margin-top: 10px;
margin-bottom:10px;
}

#gauche {
float:left;
width:260px;
height:333px;
margin-right: 4px;
margin-top: 2px;
margin-bottom:2px;
}


#gauche ul {
list-style: none;
margin: 0;
padding: 0;
}

#gauche li a {
overflow:auto;
height: 105px;
width: 260px;
text-decoration:none;
}

#gauche li a:link, #menugauche li a:visited {
color: #CCCCCC;
display: block;
background: url("images/menugauche1.gif") no-repeat;
text-decoration:none;
padding: 9px 0 0 19px;
color:black;
}

#gauche li a:hover {
overflow:auto;
text-decoration:underline;
display: block;
background: url("images/menugauche2.gif") no-repeat;
text-decoration:none;
padding: 9px 0 0 19px;
}

#centre {
float:left;
overflow:auto;
width:692px;
height:336px;
margin-left: 2px;
margin-bottom:2px;
background-color:#4b63ff;
background: url("images/pdgcentre.gif") no-repeat;
font-family: verdana, serif;
font-weight: bold;
font-size:22px;
color:white;
}

#enbas {
clear:both;
width:970px;
height:40px;
margin:auto;
margin: 2px;
overflow:auto;
margin:auto;
background: url("images/pdgbis1.gif") no-repeat;
text-align:;
vertical-align:;
}


#enbas table {
margin: ;
text-decoration: none;
color: black;
}

#enbas table td {
}


#enbas table td a{
text-decoration: none;
color: black;
font-family:"comic sans ms", verdana, arial;
font-size:14px;
padding-top:px;
}

#enbas table td a:hover{
text-decoration: underline;
color:black;}

#enbas table td{
border: 4 px solid black;
vertical-align: 5px;
padding-top:8px;
}

.Lasociete1{
display:block;
vertical-align: bottom;
text-align:right;
padding-right:0px;
padding-left:220px;
width:140px;
}

.Lasociete2{
display:block;
text-align:center;
padding-right:0px;
padding-left:0px;
width:120px;
border: ;
}

.Lasociete3{
display:block;
text-align:center;
padding-right:0px;
padding-left:0px;
width:70px;
border:;
}

.Lasociete4{
display:block;
text-align:center;
padding-right:0px;
padding-left:0px;
width:90px;
border:;
}


.trait{
display:blocK;
vertical-align: bottom;
text-align:right;
padding:right:4px;
padding:left:4px;
width:10px;
border:;
}

.clr {
clear: both;
font-size:0;
line-height:0;
border: 0px;
}

</style>


Cela fait des heures que je cherche sur differents forums et malgre mes nombreuses lectures je ne trouve rien : auriez-vous la gentillesse de me suggérer une solution ??
Merci d avance Smiley smile
Adrien
Waw, ça fait un sacré code tout ça !
Je pense que pour commencer tu devrais mettre ton code entre les balises codes, ce serait beaucoup plus lisible pour ceux qui veulent t'aider (coloration syntaxique, indentation...)

Alors déjà, pour les bugs d'IE : j'ai vu que tu avais un commentaire conditionnel incluant une feuille de styles spéciale IE.
Existe-elle déjà ou bien tu ne l'as pas encore faite ?
Je te préviens : IE risque de te poser des problèmes Smiley langue

Ton menu déborde ? Je parie que les flottants sont sont un peu responsables.
Lis cet article, il devrait t'aider.

Sinon, à part ça, pourrais-tu détailler l'histoire des images avec les a:hover ?
Par exemple, faire des captures d'écran ?(j'avoue que sans rendu graphique, j'ai du mal...)

Voilà, j'espère t'avoir (un peu) aidé Smiley smile
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien "Aide" qui apparaît tout en haut du forum est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Sujet clos
Aller à