28172 sujets

CSS et mise en forme, CSS3

[Résolu]Problème de poitionnement d'un td sous windows

Bonjour à tous.

Débutant en CSS, j'ai essayé de gérer mon menu en CSS (changer l'image de fond quand on survole le lien)

J'ai un soucis d'affichage du menu que je gère en CSS avec internet explorer.

J'ai testé sur firefox et ça marche bien mais une fois que je passe sous IE le menu ne garde pas son alignement.


voici un exemple

exemple 1

Mais un truc que j'ai remarqué en cherchant à résoudre le problème c'est que si j'enlève le contenu du texte central, mon menu s'aligne mieux.

exemple 2

Le plus rageant c'est que sous les dernières versions de Firefox et IE ça s'affiche bien.

Voici mon code CSS pour vous aider.


html{
	background:#8d959b;
	}

body { 
	font-size:0.8em;
	font-family:Verdana, Arial, sans-serif ;
	border:none;
	color:#00457C;
}

h1 {
	padding-top:10px;
	padding-left:40px;
	font-size:1.5em;
	color:#5E6F7D;
	font-weight:normal;
	background:url("../Images/puces/puce1.png") no-repeat;
	background-position: 5px 8px;	}
	
h2 {
	padding-top:5px;
	font-size:1.2em;
}
			
h3 {
	margin-left:20px;
	padding-top:5px;
	color:#F6AF33;
	font-size:1em;
	font-style:italic;
}
	
h3 a {
	color:#F6AF33;
}

a:hover{
	color:#5E6F7D;
}

img{
	border:none;
}

.logo {
	width:164px;
	vertical-align:bottom;
}

.header_menu {
	text-align:right;
	height:10px;	
}

.td_menu {
	text-align:left;
}

.menu1{
		margin-top:20px;
		position:absolute;
		width:440px;
		float:left;
		margin-left:155px;
		text-align:center;
		font-size:12px;	
		}
		
.menu1 a:link{
	color:#ffffff;
	padding-top:20px;
	padding-bottom:124px;
	}
	
.menu1 a:visited{/*très très important pour garder les images du menu après avoir cliqué une fois dans IE*/
	color:#ffffff; 
	padding-top:20px;
	padding-bottom:124px;
	}

.menu1 a:hover{
	color:#F6AF33;
	}

.td_menu_activites {
	background:url("../Images/logo_activites_dark2.png") no-repeat;
	text-align:center;
	vertical-align:top;
	width:111px;
	height:155px; 
	border:0;
}

.td_menu_activites a {
	color:#FFFFFF;
}

.td_menu_activites a:visited{
	color:#FFFFFF;
}

.td_menu_activites a:hover {
	background:url("../Images/logo_activites_dark1.png") no-repeat;
	display:block;
	text-align:center;
	vertical-align:top;
	width:111px;
	height:155px; 
	border:0;
	color:#F6AF33;
}

.td_menu_formations {
	background:url("../Images/logo_formations_dark2.png") no-repeat;
	text-align:center;
	vertical-align:top;
	width:111px;
	height:155px; 
	border:0;
}

.td_menu_formations a {
	color:#FFFFFF;
}

.td_menu_formations a:visited{
	color:#FFFFFF;
}

.td_menu_formations a:hover {
	background:url("../Images/logo_formations_dark1.png") no-repeat;
	display:block;
	text-align:center;
	vertical-align:top;
	width:111px;
	height:155px; 
	border:0;
	color:#F6AF33;
}

.td_menu_partenaires {
	background:url("../Images/logo_partenaires_dark2.png") no-repeat;
	text-align:center;
	vertical-align:top;
	width:111px;
	height:155px; 
	border:0;
}

.td_menu_partenaires a {
	color:#FFFFFF;
}

.td_menu_partenaires a:visited{
	color:#FFFFFF;
}

.td_menu_partenaires a:hover {
	background:url("../Images/logo_partenaires_dark1.png") no-repeat;
	display:block;
	text-align:center;
	vertical-align:top;
	width:111px;
	height:155px; 
	border:0;
	color:#F6AF33;
}

.td_menu_contacts {
	background:url("../Images/logo_contacts_dark2.png") no-repeat;
	text-align:center;
	vertical-align:top;
	width:111px;
	height:155px; 
	border:0;
}

.td_menu_contacts a {
	color:#FFFFFF;
}

.td_menu_contacts a:visited{
	color:#FFFFFF;
}

.td_menu_contacts a:hover {
	background:url("../Images/logo_contacts_dark1.png") no-repeat;
	display:block;
	text-align:center;
	vertical-align:top;
	width:111px;
	height:155px; 
	border:0;
	color:#F6AF33;
}


Voici le code html de ma page au cas ou.


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

<HEAD>
	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
	<TITLE></TITLE>
	<link rel="stylesheet" type="text/css" media="screen" href="./Styles/mit.css" />
	<link rel="shortcut icon" href="http://membres.multimania.fr/aashur/Images/Logo.ico" />
	<script src="./Js/mit.js" type="text/javascript"></script>

</HEAD>
<BODY>
	<CENTER>
		<TABLE border="0" width="800">
			<TR>
				<TD rowspan="2" class="logo">
					<A href="./index.html">
						<IMG src="./Images/logo_small.jpg" width="164"/>
					</A>
				</TD>
				<TD colspan="5" class="header_menu">
					Accueil - <A href="./plan/index.html">Plan du site</A> - <A href="./who/inex.html">Qui sommes-nous ?</A> - <A href="./contacts/index.html">Contact</A><br />
				</TD>
			</TR>
			<TR>
				<DIV class="menu1">
					<TD class="td_menu_activites" >
						<A href="./activities/index.html">activit&eacute;s</A>
					</TD>
					<TD class="td_menu_formations" >
						<A href="./formations/index.html">Formations</A>
					</TD>
					<TD class="td_menu_partenaires" >
						<A href="./partners/index.html">Partenaires</A>
					</TD>
					<TD class="td_menu_contacts">
						<A href=".contacts/index.html">Contacts</A>
					</TD>
				</DIV>
			</TR>
			<TR>
				<TD rowspan="2">
					&nbsp;
				</TD>
				<TD colspan="4" class="td_fil_arianne">
					<A href="./index">Accueil</A>
				</TD>
				<TD rowspan="2" width="150">
					&nbsp;
				</TD>
			</TR>
			<TR>
				<TD colspan="4" class="td_main">
					<br />
					bla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla bla
					<br /><br />
				</TD>
			</TR>
			<TR>
				<TD>
					&nbsp;
				</TD>
				<TD colspan="4" class="td_footer">
					<A href="./index.html">Accueil</A> - <A href="./activities/index.html">Activit&eacute;s</A> - <A href="./formations/index.html">formations</A> - <A href="./partners/index.html">Partenaires</A> - <A href="./contacts/index.html">Contacts</A>
					<br />
					<A href="./who/index.html">Qui sommes-nous ?</A> - <A href="./plan/index.html">Plan du site</A>
				</TD>
				<TD>
					&nbsp;
				</TD>
			</TR>
		</TABLE>
	</CENTER>
</BODY>
</HTML>



Voila, si quelq'un pouvait me mettre sur une piste pour résoudre ce soucis de compatibilité, je serai content Smiley cligne

Pendant ce temps, je vais continuer à chercher et si jamais je trouve une réponse je vous le ferai parvenir.

Bonne journée.
Modifié par aashur (14 Apr 2010 - 10:47)
Hello,

Avant toute chose, lire ce très bon tutoriel rédigé par Raphael devrait t'aider pas mal pour avoir de bonnes bases en XHTML (balises et sémantique) et CSS (présentation) : ton site est basé sur des tableaux, ce n'est pas forcément une bonne chose Smiley cligne

D'autre part, sur quelle version d'IE rencontres-tu des soucis ? IE5, IE6, IE7 ? Smiley smile
Modifié par Ladytron (02 Apr 2010 - 14:34)
Avec IE8.

Je vais regarder ce Tutorial et voir si je peux améliorer ma page.

Je vous tiendrai au courant ^^
Modifié par aashur (02 Apr 2010 - 14:46)
C'est encore moi.

J'essaie d'utiliser le CSS pour remplacer mes tableaux mais je me heurte à plusieurs problèmes.

voici la page d'exemple

lien

J'ai deux problèmes.

Le premier et que ma page ne se centre pas sous IE (IE8) alors que sous firefox ça le fait.

Le second et pour l'alignement des ces cellules vertes, bleue et blanche.

J'essaie de les mettre sur une même ligne mais je n'arrive pas à les "coller".

Quelqu'un pourrait m'éclairer un peu.


P.S : si vous voulez le code n'hésitez pas et je le mettrai de suite.
Bonsoir,
commence d'abord par supprimer (ou mettre ailleurs) tout ce qui se trouve avant <html> et ajoute y un doctype approprié

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">


Ca résoudra ton problème de centrage.
Voila, je fais un dernier post pour vous dire que, grâce à vos indications, j'ai réussi à finir ma présentation de page.


Un grand merci pour votre aide.
Sujet clos
Aller à