28173 sujets

CSS et mise en forme, CSS3

Liens Images

Bonjour à tous, j'ai un problème car je suis en train de faire un site web et les liens de ma page reste violet quoi que je fasse alors que quand j'ouvre ma page avec FireFox elle est exactement comme je la veus, il n'y a que IE qui plante.
J'aimerai savoir pourquoi et si il y à un truc à faire pour ce genre de beug spécial IE?
Merci d'avance de votre aide.
Salut,

Bien que ta question soit un peu vague, je suppose que ton problème est lié aux liens qui ont été visités ? Dans ce cas-là, essaie ceci :
a:link, a:visited {color: blue;}
Désolé si je m'exprime mal mais non ce n'est pas sa surtout que sa marche très bien sur FireFox, j'ai demander une couleur de lien par défaut (sans avoir été visité) qui doit être verte, et après la visite ils doivent avoir la même couleur.
Mais sur IE il sont bleu avant d'avoir été visités et violet après, alors que sur FF ils sont tous le temps vert.
Je voudrais bien joindre une image de mon code CSS mais j'ai un message qui me dit que ce n'est pas une image valide quand je veu l'ajouter, car pour avoir l'igame de mon code j'ai fai un imprime écran que j'ai coller dans Paint, je ne sais pas faire autrement.
Boostafrag a écrit :
Je voudrais bien joindre une image de mon code CSS

Et un copier-coller du code concerné, tout simplement (à encadrer par les balises [ code] et [ /code] -- sans les espaces -- pour respecter la mise en forme du forum) ?
Une image ne sera pas accessible aux utilisateurs de lecteurs d'écrans, navigateurs non graphiques, ou à ceux qui auront besoin d'agrandir la taille des caractères (vue légèrement faible, écran de grande taille...). On n'utilisera donc les images que pour tout ce qui est information graphique : aperçu d'un rendu de positionnement de blocs, exemple de design à intégrer, etc.
Voici mon code CSS:

 
.menuh{
margin: 0 ;
padding: 0 ;	
list-style-type: none ;
}
.menuh li{
float: left ;
}
.menuh a{
color:#66FF66;
display:block;
text-decoration:none ;
}
.menuh a:visited{
text-decoration:none;
color:#66ff66;
}
En fait pour être plus préci encore je vous met mon code HTML suivi du code CSS complet, car si sa se trouve j'ai tous simplement une erreur dans mon code HTML mais ce qui m'étonne c'est que ce soit niquel sur FireFox.....

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 lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="description" content="Portail interactif xbox 360 : testez les jeux, informez les autres joueurs et organisez des rencontres sur le xbox live.">
		<meta name="keywords" content="xbox360,xbox 360,xboxlive,xbox live,rencontres,online,jeux,tests,tests jeux,test,jeux,news,xbox,jeux video,joueurs,communauté,commentaires,tester,testeurs,forums,forums xbox 360,testeurs,arena,arene,x360arena,x360arena.com,actualité jeux video,actualité xbox 360,tests xbox 360">
		<title>Site BOOSTA</title>
		<link rel="StyleSheet" type="text/css" href="test2.css">
	</head>
	
	<body>
		<div class="global">
			
			<div class="team">
				
			</div>
			<div class="logo">
			</div>
			
			<div class="menuhaut">
				<ul class="menuh">
					<li><a href="http://www.google.fr"><img src="accueil.gif"></a></li>
					<li><a href="forum.html"><img src="forum.gif"></a></li>
					<li><a href="lateam.html"><img src="lateam.gif"></a></li>
					<li><a href="membres.html"><img src="membres.gif"></a></li>
					<li><a href="news.html"><img src="news.gif"></a></li>
					<li><a href="livredor.html"><img src="livredor.gif"></a></li>
				</ul>		
			</div>
			<div class="centre">
				<div class="menugauche">
					<ul class="menug">
            			<li><a href="http://www.google.fr">Devenir un Boosta</a></li>
            			<li><a href="cesi.html">Devenir un Ami de la Team</a></li>
            			<li><a href="formation.html">Mascotte</a></li>
            			<li><a href="formation.html">Forum</a></li>
            			<li><a href="mailto:new_novica@hotmail.fr">Nous Contacter</a></li>
					</ul>
				</div>
				<div class="corps">
					<h1>RAINBOW SIX VEGAS</h1>
					<div class="tofvideo1">
						<a href="http://www.jeuxvideo.fr/video-rainbow-six-vegas-6217-0-0.html#"><img src="rsvegas1.bmp"></a>
					</div>
					<div>
						<p class="p1">
						Et oui le jeu le plus attendu par tous les fans de FPS<br>
						arrive &agrave; grand pas, ce n'est d'ailleurs pas sans dire<br>
						qu'il a su ce faire attendre mais sa y ai il sort le 30<br>
						novembre, quel bonheur moins d'une semaine en tous <br>
						cas en attendant cette sortie, je vous mets un lien ver un<br>
						site ou il y a environ 17 vid&eacute;os de ce jeu.<br>
						Pour sa vous avez juste &agrave; cliquer sur l'image de<br>
						Rainbow Six Vegas :
						</p>
					</div>
					
		
				</div>
			</div>
			
			<div class="pied">
					pied de page
			</div>
		</div>
	</body>
</html>



Et mon CSS:


body{
height: 100%;
margin: 0;
background: #ddd url(img/html.png);
}

.global{
width:767px;
margin: 0 auto;
padding: 0 auto;
position: relative;
background: white;
}

.team{
width:767px;
height:50px;
border: 1px ridge #66FF66;
background: url(nomteam2anime.gif);
}

.logo{
width:767px;
height:100px;
border: 1px ridge #66FF66;
background: url(banniere.gif);
}

.menuhaut{
width:767px;
height:45px;

}

.centre{
width:767px;
height:100%;
border: 1px ridge #66FF66;
padding-bottom: 500px;/* Pour éviter la superposition du pied de page et du contenu : */
overflow: auto;
text-align:left;
}

.corps{
width:584px;
float:right;
text-align:justify;
background:#e6e6e6;
}

.menugauche{
float:left;
width:180px;
height:400px;
background:black;
}

.menuh{
margin: 0 ;
padding: 0 ;	
list-style-type: none ;
}

.menuh li{
float: left ;
}

.menuh a{
color:#66FF66;
display:block;
text-decoration:none ;
}

.menuh a:visited{
text-decoration:none;
color:#66ff66;
}

.tofvideo1 img{
float:left;
width:200px;
height:180px;
}

.tofvideo1 a{
color:black;
}

.p1{
font-size:17px;
}

.pied{
width:767px;
height:40px;
border: 1px ridge #66FF66;
text-align : center;
background: yellow;
}
Les liens qui restent désespérement bleus et violets (y compris dans Firefox...) sont contenus dans la liste ayant la classe "menug". Or, seuls ceux contenus dans l'élément portant la classe "menuh" ont un style particulier, si j'en crois la feuille de style.

Il serait judicieux de définir un style de lien pour tout le document, puis ensuite pour certains éléments particuliers.

Par ailleurs, c'est un détail mais l'écriture de tes balises <img /> ne respecte pas la syntaxe XHTML.
Bonjour,

je rajouterai un autre petit détail comme mpop par rapport au sauts de lignes qui ne respectent pas non plus la syntaxe xhtml <br />
Bonjour à tous et merci pour votre aide mais sa n'a pas réglé mon problème donc j'ai tout repris à zéro et changer la mise en page et le CSS.
Je me retrouve confronter à un autre problème , je n'arrive pas à mettre une image différente pour chaques liens, j'arrive à mettre la même dans tous mais sa ne m'interresse pas car j'en ai créer un de chaque avec Photoshop.
Je joint mon code:

Html:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="description" content="Portail interactif xbox 360 : testez les jeux, informez les autres joueurs et organisez des rencontres sur le xbox live.">
		<meta name="keywords" content="xbox360,xbox 360,xboxlive,xbox live,rencontres,online,jeux,tests,tests jeux,test,jeux,news,xbox,jeux video,joueurs,communauté,commentaires,tester,testeurs,forums,forums xbox 360,testeurs,arena,arene,x360arena,x360arena.com,actualité jeux video,actualité xbox 360,tests xbox 360">
		<title>Site BOOSTA</title>
		<link rel="StyleSheet" type="text/css" href="test4.css">
	</head>
		
	<body>
			
		<div id="global">
			
			<div id="header">
				
				<div id="nomteam">
				</div>
				
				<div id="ban">
				</div>
				
				<div id="menuhead">
					<ul>
						<li><a href="http://www.google.fr"></img></a></li>
						<li><a href="forum.html"></a></li>
						<li><a href="lateam.html"></a></li>
						<li><a href="membres.html"></a></li>
						<li><a href="news.html"></a></li>
						<li><a href="livredor.html"></a></li>
					</ul>
				</div>
				
			</div><!--fin header-->
				
			<div id="centre">
					
				<div id="sidebarleft">
				</div><!--fin sidebarleft-->
					
				<div id="corps">
				</div><!--fin corps-->
					
				<div id="sidebarright">
				</div><!--fin sidebaright-->
					
			</div><!--fin centre-->
				
			<div id="feet">
			</div><!--fin feet-->	
			
		</div><!--fin global-->
			
	</body>
	
</html>



Et le CSS:


body{
height: 100%;
margin: 0;
background:black;
}

#global{
width:980px;
margin: 0 auto;
padding: 0 auto;
position: relative;
background:white;
}



#header{
width:980px;
height:190px;
border: 1px ridge #66FF66;
background: url(banniere2.gif);
}

#nomteam{
float:right;
width:760px;
height:50px;
background: url(nomteam2anime.gif);
}

#ban{
float:right;
width:760px;
height:100px;
background: url(banniere.gif);
}

#menuhead{
float:right;
width:890px;
height:40px;
}

#menuhead li{
float:left;
width:128px;
height:38px;
border: 1px ridge #66FF66;
background: url(accueil.gif);
}

ul {
float:right;
list-style-type:none;
}


#centre{
width:980px;
height:1300px;
margin-top:20px;
}

#sidebarleft{
float:left;
width:180px;
height:1000px;
border: 1px ridge #66FF66;
margin-left:4px;
}

#corps{
float:left;
width:560px;
height:1000px;
border: 1px ridge #66FF66;
margin-left:20px;
margin-right:20px;
}

#sidebarright{
float:left;
width:180px;
height:1000px;
border: 1px ridge #66FF66;
}

#feet{
width:980px;
height:50px;
border: 1px ridge #66FF66;
}



Ps:En ce qui concerne mes balise "<img> et <br>" de l'ancien code je vois bien pour le "< /br>" mais pas pour la balise "<img>"????
Le <img/> de mon premier lien n'était qu'une erreur de frappe à cause
de tous les test que j'ai fais , je l'ai retirer bien sur et sa ne change rien.....Merci d'avance à celui ou ceux qui auront une réponse a m'apporter.
Boostafrag a écrit :
Ps:En ce qui concerne mes balise "<img> et <br>" de l'ancien code je vois bien pour le "< /br>" mais pas pour la balise "<img>"????
Euh non, surtout pas "</br>" ! Les balises br et img sont auto-fermantes, il faut donc écrire :
<img src="..." alt="..." />
<br />
Ceci dit, le validateur XHTML te signalera les problèmes de balises non fermées...
Boostafrag a écrit :
Ok merci c'est cool et pour mon nouveau problème ta pas une idée? lol excuse moi mais je galère.....

Il faut pouvoir identifier chaque lien pour lui passer un style personnalisé.
HTML :
<ul id="menu">
	<li id="lienmenu1"><a href="http://www.google.fr"></img></a></li>
	<li id="lienmenu2"><a href="forum.html"></a></li>
	<li id="lienmenu3"><a href="lateam.html"></a></li>
	<li id="lienmenu4"><a href="membres.html"></a></li>
	<li id="lienmenu5"><a href="news.html"></a></li>
	<li id="lienmenu6"><a href="livredor.html"></a></li>
</ul>

CSS :
#lienmenu1 a {...}
#lienmenu2 a {...}
#lienmenu3 a {...}
#lienmenu4 a {...}
#lienmenu5 a {...}
#lienmenu6 a {...}

On peut aussi mettre les identifiants (dont les intitulés peuvent être un peu plus imaginatifs que ça...) directement sur les liens plutôt que sur les li.


Par contre, attention aux contraintes d'accessibilité ! À ce sujet :
http://forum.alsacreations.com/topic-6-13599-1-Accessibilit-dun-menu-en-image.html
J'ai mi exactement ce que tu as mis histoir de vérifier si sa marchais mais non ya rien qui change j'ai bien sur mi mes nom d'image je te monte encore mon code avec tes changements:

HTML:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="description" content="Portail interactif xbox 360 : testez les jeux, informez les autres joueurs et organisez des rencontres sur le xbox live.">
		<meta name="keywords" content="xbox360,xbox 360,xboxlive,xbox live,rencontres,online,jeux,tests,tests jeux,test,jeux,news,xbox,jeux video,joueurs,communauté,commentaires,tester,testeurs,forums,forums xbox 360,testeurs,arena,arene,x360arena,x360arena.com,actualité jeux video,actualité xbox 360,tests xbox 360">
		<title>Site BOOSTA</title>
		<link rel="StyleSheet" type="text/css" href="test4.css">
	</head>
		
	<body>
			
		<div id="global">
			
			<div id="header">
				
				<div id="nomteam">
				</div>
				
				<div id="ban">
				</div>
				
				<div id="menuhead">
					<ul>
						<li id="lienmenu1"><a href="http://www.google.fr"></a></li>
						<li id="lienmenu2"><a href="forum.html"></a></li>
						<li id="lienmenu3"><a href="lateam.html"></a></li>
						<li id="lienmenu4"><a href="membres.html"></a></li>
						<li id="lienmenu5"><a href="news.html"></a></li>
						<li id="lienmenu6"><a href="livredor.html"></a></li>

					</ul>
				</div>
				
			</div><!--fin header-->
				
			<div id="centre">
					
				<div id="sidebarleft">
				
					<div id="menusidebarleft">	
						<ul>
							<li><a href="http://www.google.fr">ACCUEIL</a></li>
							<li><a href="forum.html"></a>FORUM</li>
							<li><a href="lateam.html"></a>LA TEAM</li>
							<li><a href="membres.html"></a>MEMBRES</li>
							<li><a href="news.html"></a>NEWS</li>
							<li><a href="livredor.html"></a>LIVRE D'OR</li>
						</ul>
					</div>
					
				</div><!--fin sidebarleft-->
					
				<div id="corps">
				</div><!--fin corps-->
					
				<div id="sidebarright">
				</div><!--fin sidebaright-->
					
			</div><!--fin centre-->
				
			<div id="feet">
			</div><!--fin feet-->	
			
		</div><!--fin global-->
			
	</body>
	
</html>


Mon CSS:


body{
height: 100%;
margin: 0;
background:black;
}

#global{
width:980px;
margin: 0 auto;
padding: 0 auto;
position: relative;
background:white;
}



#header{
width:980px;
height:190px;
border: 1px ridge #66FF66;
background: url(banniere2.gif);
}

#nomteam{
float:right;
width:760px;
height:50px;
background: url(nomteam2anime.gif);
}

#ban{
float:right;
width:760px;
height:100px;
background: url(banniere.gif);
}

a:link, a:visited {
color: #66FF66;
text-decoration:none;
}

#menuhead{
float:right;
width:890px;
height:40px;
}

#menuhead ul {
float:right;
list-style-type:none;
}

#menuhead li{
float:left;
width:128px;
height:38px;
border: 1px ridge #66FF66;
}

#lienmenu1 a {background: url(accueil.gif);}
#lienmenu2 a {background: url(forum.gif);}
#lienmenu3 a {background: url(lateam.gif);}
#lienmenu4 a {background: url(membres.gif);}
#lienmenu5 a {background: url(news.gif);}
#lienmenu6 a {background: url(livredor.gif);}


#centre{
width:980px;
height:1300px;
margin-top:20px;
}

#sidebarleft{
float:left;
width:180px;
height:1000px;
border: 1px ridge #66FF66;
margin-left:4px;
}

#menusidebarleft li{
float:left;
width:140px;
height:20px;
background: url(boutonmenu.gif);
}

a #menusidebarleft{
float:left
}

#corps{
float:left;
width:560px;
height:1000px;
border: 1px ridge #66FF66;
margin-left:20px;
margin-right:20px;
}

#sidebarright{
float:left;
width:180px;
height:1000px;
border: 1px ridge #66FF66;
}

#feet{
width:980px;
height:50px;
border: 1px ridge #66FF66;
}
Tu as mis les images de fond sur les liens.
Or, l'élément a est un élément de type en-ligne, qui a la hauteur de la ligne de texte et la largeur de son contenu. Et ce contenu est absent... donc pas de contenu = un élément de dimension 0x0 = rien de visible.

On peut faire ceci :
ul#menuhead a {
	display: block;
}

Ça aidera déjà beaucoup.

Pense également à la remarque que je faisais sur les contraintes d'accessibilité. Smiley cligne
Modifié par mpop (28 Nov 2006 - 17:37)
Sujet clos
Aller à