28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Je vais pas vous faire perdre plus de temps que cela, des screens seront beaucoup plus parlant d'eux-mêmes.
http://pix.nofrag.com/4/7/2/8c908bc549b75cdaee375f8d23225.jpg
http://pix.nofrag.com/6/0/8/66633470f70d9e3918c8a0f418f06.jpg

Voici mon code html

<!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" lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<meta name="Description" content="sgtc2">
		<meta name="Robots" content="index, follow">
		<meta name="keywords" content="stargate,total,conversion,tc,mod,mods,worlds,hl2,half,life,2,source,sgc,goauld,tauri,zat">
		<meta name="revisit-after" content="1 days">
		<link rel="shortcut icon" href="http://seldoon182.free.fr/sgtc2/img/website_icon.ico">
		<link rel="stylesheet" type="text/css" href="a_data/style.css" media="screen">
		<script type="text/javascript" src="a_data/highslide.js"></script>
		<script type="text/javascript">    
			hs.graphicsDir = 'hs/graphics/';
			hs.outlineType = 'rounded-white';
		</script>
		<title>Stargate Total Conversion II | A Half-life 2 Total Conversion</title>
	</head>
	<body>
		<div id="content">
			<div id="languages">
				<ul class="flags">
					<li><a href="./index.php?lang=en"><img src="http://seldoon182.free.fr/sgtc2/img/flags_us.png" alt="us" width="18" height="12"></a></li>
					<li><a href="./index.php?lang=fr"><img src="http://seldoon182.free.fr/sgtc2/img/flags_fr.png" alt="fr" width="18" height="12"></a></li>
					<li><a href="./index.php?lang=de"><img src="http://seldoon182.free.fr/sgtc2/img/flags_de.png" alt="en" width="18" height="12"></a></li>
				</ul>
			</div>
			<div id="header">
			</div>
			<div id="top">
				<ul class="menu">
				<li><a href="index.php?pg=news">n e w s</a></li>
				<li><a href="index.php?pg=media">m e d i a</a></li>
				<li><a href="index.php?pg=download">d o w n l o a d</a></li>
				<li><a href="index.php?pg=developers">d e v e l o p e r s</a></li>
				<li><a href="index.php?pg=manual">m a n u a l</a></li>
				<li><a href="index.php?pg=faq">FAQ</a></li>
				<li><a href="index.php?pg=disclamer">d i s c l a m e r</a></li>
				<li><a href="index.php?pg=devblog">d e v b l o g</a></li>
				<li><a href="./forums/index.php">f o r u m s</a></li>
				</ul>
			</div>
			<div id="left">
				<p><b>Additional links</b></p>
				<ul class="menu_left">
				<li><a href="http://www.moddb.com/mods/stargatetc-2/downloads"><img src="http://seldoon182.free.fr/sgtc2/img/beta.png" alt="download previous beta" height="68" width="146"></a></li>
				<li><a href="http://steamcommunity.com/groups/sgtc2"><img src="http://seldoon182.free.fr/sgtc2/img/steam.png" alt="steam community group" height="82" width="146"></a></li>
				<li><a href="http://www.vossey.com"><img src="http://seldoon182.free.fr/sgtc2/img/vossey.png" alt="Vossey.com" height="31" width="146" /></a></li>
				<li><a href="http://www.moddb.com/mods/stargatetc-2"><img src="http://seldoon182.free.fr/sgtc2/img/moddb.png" alt="Stargate Total Conversion II mod for Half-Life 2" height="31" width="146"></a></li>
				</ul>	
			</div>  
			<div id="center">
				<div class="titre">
					<h2>News #15 - Un nouveau départ.</h2>
				</div>
				<p>La première beta de StargateTC 2 est disponible depuis plus de 4 mois en téléchargement gratuit, et malgré avoir été la première formation de Modeurs à proposer une Total Conversion de Stargate: Sg1 au moteur Source, la communauté n'est pas restée enthousiasme autour de cette version.. Le support, lui aussi, n'est pas allé assez loin...</p>
				<p>La Modification est, par première définition, une passion, et parfois certaines personnes s'investissent plus efficacement ailleurs. C'est le cas pour beaucoup de membres que comptait notre équipe. Depuis la sortie du patch 1.1, l'équipe de développement est entrée en crise et à subit une grande restructuration qui s'est affirmée très lourdement dans l'effectif au sein de notre équipe.</p>
				<p>Heureusement, les mauvaises nouvelles ont une fin. Nous sommes fier de vous annoncer, que nous avons repris le travail et commençons cette Mise à jour par vous confirmer le début de notre collaboration avec le célèbre site d'information sur la plate-forme Steam,  http://www.vossey.com/.  En effet, ils nous garantisse un espace d'hébergement pour notre site web et notre forum communautaire. De plus, Vossey.com nous assure des serveurs de jeux pour StargateTC 2 en version 1.1 et nos beta privée.</p>
				<p>Nous avons insisté à modifier, encore une fois, notre image pour marquer le changement qui s'est produit il y a quelques semaines. N'hésitez pas à nous communiquer vos ressentis.</p> 
				<p>StargateTC 2 est resté entre de bonnes main. Le trio resté à la tête du projet, s'investit tout comme le reste des membres encore actif au sein du projet pour offrir une prochaine expérience encore plus forte.</p> 
				<p>Maintenant que notre nouvelle équipe est stable et organisée, nous sommes, une nouvelle fois, à la recherche de personne motivée (Capable de s'investir sur un travail jusqu'à la fin de sa réalisation.). Contactez-nous à jobs@sgtc2-mod.com pour nous soumettre vos propositions, ou rendez-vous directement postuler sur notre forum pour prendre connaissances de nos besoins.</p> 
				<p>Nous recherchons d'urgence un programmeur pour continuer et enrichir notre projet.</p> 
				<p>En ce qui concerne une future beta, aucune annonce n'a encore été décidée. Cependant, depuis le début de notre restructuration, nous avons beaucoup travaillé sur le Gameplay. Même si cela ne se fera ressentir que lors de la sortie d'une prochaine version du Mod, nous vous présenterons très prochainement les nouveaux projets de Niveaux en cours de réalisation.</p> 
				<p>Comme le veux la tradition de chaque fin d'année, notre équipe est heureuse de vous souhaiter un Joyeux Noël 2008 et une très Bonne Année 2009. Tous nos vœux de bonheur.</p> 
				<p>Restez connecté.</p>
				<p>L'équipe Stargatetc2.</p> 
			</div>  
			<div id="footer">
				<div class="copyrights">
					<a href="http://a9n6287.copyrightfrance.com/">&copy 2007-2009</a> |
					<a href="index.php?pg=devteam">Stargatetc2 Developpement team</a>.
					<br />
					<a href="http://a9n6287.copyrightfrance.com/">La reproduction de ce site est interdite sans l'accord de l'auteur.
					<br />
					La reproduction du contenu de StargateTC2 est interdite sans l'accord des responsables.
					</a>
				</div>
				<div class="navigation">
					<a href="index.php?pg=news">news</a> | 
					<a href="index.php?pg=media">media</a> | 
					<a href="index.php?pg=download">download</a> | 
					<a href="index.php?pg=developers">developers</a> |
					<a href="index.php?pg=manual">manual</a> | 
					<a href="index.php?pg=faq">FAQ</a> | 
					<a href="index.php?pg=disclaimer">disclaimer</a> | 
					<a href="index.php?pg=devblog">devblog</a> | 
					<a href="./forums/index.php">forums</a>
				</div>
				<div class="stats">
					<br>
					<a href="http://www.xiti.com/xiti.asp?s=360573" title="WebAnalytics">
					<script type="text/javascript">
					<!--
					Xt_param = 's=360573&p=';
					try {Xt_r = top.document.referrer;}
					catch(e) {Xt_r = document.referrer; }
					Xt_h = new Date();
					Xt_i = '<img width="80" height="15" border="0" alt="" ';
					Xt_i += 'src="http://logv3.xiti.com/g.xiti?'+Xt_param;
					Xt_i += '&hl='+Xt_h.getHours()+'x'+Xt_h.getMinutes()+'x'+Xt_h.getSeconds();
					if(parseFloat(navigator.appVersion)>=4)
					{Xt_s=screen;Xt_i+='&r='+Xt_s.width+'x'+Xt_s.height+'x'+Xt_s.pixelDepth+'x'+Xt_s.colorDepth;}
					document.write(Xt_i+'&ref='+Xt_r.replace(/[<>"]/g, '').replace(/&/g, '$')+'" title="Internet Audience">');
					//-->
					</script>
					</a>
					<br>
				</div>
			</div>
		</div>
	</body>
</html>



Voici mon code css

body {
	font-family: verdana, arial;
	background: url(http://seldoon182.free.fr/sgtc2/img/background.jpg) no-repeat;
	background-color: #000000;
	color: #FFFFFF;
	font-size: 12px;
	margin: 0 auto;
	padding: 0;
	background-position: center 0;
}

p {
	margin: 0 0 10px 0;
	color: #CCCCCC;
}

b{
	font-size: 10px;
	color: #FFFFFF;
	font-weight: bold;
}

h2 {
	font-size: 12px;
}

img{
	border: 0;
	margin: 0;
	padding: 0;
} 

#languages {
	width: 850px;
	height: 50px;
 	margin-top: 10px;
}

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

 	text-align: right; 
}

.flags li {
	display: inline;
}

.flags img a:link, a:active, a:visited {
/* 	margin: 0 2px; */
	color: #FFFFFF;
	text-decoration: none;
}

.flags img a:hover {
	text-decoration: none;
	color: #FFFFFF;
}

#header {
	height: 160px;
	width: 850px;
	background: url(http://seldoon182.free.fr/sgtc2/img/logo.png);
}

#content {
	position: relative;
	width: 850px;
	margin: 0 auto; 
}

#top {
	height: 40px;
	width: 850px;
}

.menu {
	list-style-type: none;
	margin: 0;
	padding: 0;
	text-align: center; 
}

.menu li {
	display: inline;
}

.menu  a:link, a:active, a:visited {
	margin: 0 2px; 
	color: #CCCCCC;
	padding-right: 10px;
	text-decoration: none;
	font-size: 12px;
	font-family: verdana, arial;
}

.menu a:hover {
	text-decoration: none;
	padding-right: 10px;
	color: #FFFFFF;
}

#center {
	background-color: #1A1A1A;
	margin-left: 167px;
	padding: 25px 25px 25px 25px;
	border: 1px solid #3A3A3A;
	text-align: justify;
}

#left {
	position: absolute;
	left: 0px;
	height: 260px;
	width: 150px;
	font-size: 10px;
	background-color: #1A1A1A;
	border: 1px solid #3A3A3A;
	padding: 5px 5px 0px 5px;
	text-align: center;
}

#left img {
	margin-left: -7px;	
}

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

.menu_left li {
	margin-bottom: 5px;
}

.menu_left img a:link, a:active, a:visited{
	margin: 0 2px;
	color: #FFFFFF;
	text-decoration: none;
}

.menu_left img a:hover {
	color: #FFFFFF;
	text-decoration: none;
}

#footer {
	height: 70px;
	width: 850px;
	margin: 0px;
	margin-top: 5px;
	background-repeat: no-repeat;
	height: auto;
	float: left;
}

#footer a:link, a:active, a:visited{
	color: #2EA2E5;
	font-size: 10px ;
	font-family: verdana, arial;
	text-decoration: none;
}

#footer a:hover{
	color: #FFFFFF;
	text-decoration: none;
}

.copyrights {
	margin-left: 167px;
}

.navigation{
	margin-top: 5px;
	margin-left: 167px;
}

 .stats{
	margin-top: 5px;
	margin-bottom: 10px;
	margin-left: 167px;
	text-align: center;
}


Savez-vous ce qui cause ce problème? J'ai pas réussit à trouver de personnes ayant le même problème que moi sur la toile.

Cordialement. Alex.
Modifié par Seldoon182 (28 Dec 2008 - 19:18)
Bonjour,

Il faudrait savoir quel est le code HTML généré en JavaScript pour ce bouton. Tu as un élément SCRIPT dans un lien (pas sûr que ça soit très valide d'ailleurs, il faudrait vérifier), et cet élément génère à priori le code d'une image. Reste à savoir quel code exactement...

Pour savoir quel est le code généré, tu peux travailler avec des outils tels que Web Developer ou Firebug, deux extensions pour Firefox. Firebug devrait d'ailleurs te permettre d'inspecter les styles appliqués en temps normal et au survol pour ce lien et cette image.

Je te laisse mener l'enquête equipé de ces outils. Smiley cligne
Salut Florent,

Merci de ta réponse. Le problème, c'est que l'image était pour l'exemple, cela arrive à toutes mes images qui sont dans des liens hypertexte <a>, sauf a celles dans la class menu_left. A mon avis, c'est lié au text-align ou quelque chose du genre. J'ai fait un site en Transitional 4.0 valide W3C, mais tombant sur ce lien, j'ai décidé d'en refaire un. ^^

Un p'tit screen Firebug, mon site est développé en local.
http://pix.nofrag.com/c/a/0/9dc44361db23bb8537a8c12dc0652tt.jpg
Modifié par Seldoon182 (28 Dec 2008 - 16:54)
Mouais, la capture d'écran n'aide pas des masses. Il faudrait vérifier quels styles s'appliquent:
- au lien;
- à l'image;
- au lien lorsqu'il est survolé;
- au lien lorsqu'il est cliqué;
- à l'image lorsque le lien est survolé ou cliqué...
Soit une demi-douzaines de mini-tests à faire avec Firebug.

Ceci dit, si je relis ton code CSS je vais des erreurs grosses comme le bras dans certains selecteurs, mon petit doigt me dit que ça peut venir de là:
.menu_left img a:link, [#red]a:active, a:visited[/#] {
	...
}
#footer a:link, [#red]a:active, a:visited[/#] {
	...
}


Je pense que tu n'as pas compris l'utilisation de la virgule dans les sélecteurs CSS. Ou alors c'est une erreur d'inattention. Smiley cligne