Bonjour,
dernièrement j'ai réalisé une intégration xhtml/css pour un ami.
Tout fonctionne bien mais mon ami m'explique qu'il a un problème avec les hspace sur les images.
En effet quand il utilise la propriété hspace sur ses images cela ne fonctionne pas. Et celons lui le problème vient du sélecteur universel dans la feuille de style.
Existerait-il une manière pour contourner ce problème??
Merci d'avance pour votre aide.
Modifié par Adamys (11 Aug 2009 - 18:08)
dernièrement j'ai réalisé une intégration xhtml/css pour un ami.
Tout fonctionne bien mais mon ami m'explique qu'il a un problème avec les hspace sur les images.
En effet quand il utilise la propriété hspace sur ses images cela ne fonctionne pas. Et celons lui le problème vient du sélecteur universel dans la feuille de style.
Existerait-il une manière pour contourner ce problème??
Merci d'avance pour votre aide.
/*POUR LA PAGE ENTIERE
******************************************/
a img {
border: none; }
ul {
list-style: none; }
a {
text-decoration: none; }
* {
padding: 0; margin:0; }
/*BODY
******************************************/
body {
background:url(../img/background.gif) #e7890f top left repeat-x; font-size: .7em; font-family: Tahoma, Helvetica, Sans Serif; color:#FFFFFF; }
/*GLOBAL
******************************************/
div#global {
width:943px; margin:0 auto; background:url(../img/global.gif) top left repeat-y; overflow:hidden; }
/************************************************************ BANNIERE ************************************************************/
div#banniere {
background:url(../img/banniere.jpg) no-repeat top left; width:943px; height:87px; }
/*MODE : EN LIGNE PAS EN LIGNE
******************************************/
.enlignepasenligne {
padding: 50px 0 0 780px; }
/************************************************************ MENU HORIZONTAL ************************************************************/
ul#menuhorizontal {
background:url(../img/menurapide.jpg) no-repeat top left; height:46px; padding:0 0 0 70px; }
ul#menuhorizontal li { display: inline; }
ul#menuhorizontal li a span { visibility: hidden; }
ul#menuhorizontal li a { float: left; height: 46px; }
ul#menuhorizontal li#accueil a {
width: 69px; height:37px; background:url(../img/menu/accueil.gif) no-repeat top left; }
ul#menuhorizontal li#accueil a:hover {
width: 69px; height:37px; background:url(../img/menu/accueil.gif) no-repeat 0 -37px; }
ul#menuhorizontal li#mission a {
width:72px; height:37px; background:url(../img/menu/mission.gif) no-repeat top left; }
ul#menuhorizontal li#mission a:hover {
width:72px; height:37px; background:url(../img/menu/mission.gif) no-repeat 0 -37px; }
ul#menuhorizontal li#parrainage a {
width:94px; height:37px; background:url(../img/menu/parrainage.gif) no-repeat top left; }
ul#menuhorizontal li#parrainage a:hover {
width:94px; height:37px; background:url(../img/menu/parrainage.gif) no-repeat 0 -37px; }
ul#menuhorizontal li#shop a {
width:49px; height:37px; background:url(../img/menu/shop.gif) no-repeat top left }
ul#menuhorizontal li#shop a:hover {
width:49px; height:37px; background:url(../img/menu/shop.gif) no-repeat 0 -37px; }
ul#menuhorizontal li#hollow a {
width:104px; height:37px; background:url(../img/menu/hollow.gif) no-repeat top left }
ul#menuhorizontal li#hollow a:hover {
width:104px; height:37px; background:url(../img/menu/hollow.gif) no-repeat 0 -37px; }
ul#menuhorizontal li#shinigami a {
width:104px; height:37px; background:url(../img/menu/shinigami.gif) no-repeat top left }
ul#menuhorizontal li#shinigami a:hover {
width:104px; height:37px; background:url(../img/menu/shinigami.gif) no-repeat 0 -37px; }
ul#menuhorizontal li#pvp a {
width:41px; height:37px; background:url(../img/menu/pvp.gif) no-repeat top left }
ul#menuhorizontal li#pvp a:hover {
width:41px; height:37px; background:url(../img/menu/pvp.gif) no-repeat 0 -37px; }
ul#menuhorizontal li#wop a {
width:45px; height:37px; background:url(../img/menu/wop.gif) no-repeat top left }
ul#menuhorizontal li#wop a:hover {
width:45px; height:37px; background:url(../img/menu/wop.gif) no-repeat 0 -37px; }
ul#menuhorizontal li#trophee a {
width:78px; height:37px; background:url(../img/menu/trophee.gif) no-repeat top left }
ul#menuhorizontal li#trophee a:hover {
width:78px; height:37px; background:url(../img/menu/trophee.gif) no-repeat 0 -37px; }
ul#menuhorizontal li#guilde a {
width:60px; height:37px; background:url(../img/menu/guilde.gif) no-repeat top left }
ul#menuhorizontal li#guilde a:hover {
width:60px; height:37px; background:url(../img/menu/guilde.gif) no-repeat 0 -37px; }
ul#menuhorizontal li#classement a {
width:98px; height:37px; background:url(../img/menu/classement.gif) no-repeat top left }
ul#menuhorizontal li#classement a:hover {
width:98px; height:37px; background:url(../img/menu/classement.gif) no-repeat 0 -37px; }
ul#menuhorizontal li#deconexion a {
width:63px; height:37px; background:url(../img/menu/deconexion.gif) no-repeat top left }
ul#menuhorizontal li#deconexion a:hover {
width:63px; height:37px; background:url(../img/menu/deconexion.gif) no-repeat 0 -37px; }
/*ul#menuhorizontal li# a {
width:px; height:37px; background:url(../img/menu/.gif) no-repeat top left }
ul#menuhorizontal li# a:hover {
width:px; height:37px; background:url(../img/menu/.gif) no-repeat 0 -37px; }*/
/************************************************************ PANNEL DE CONNEXION ************************************************************/
div#pannelconnexion {
background:url(../img/panel.gif) no-repeat top left; width:943px; height:176px; overflow:hidden; }
/*TOP 3 DES MEILLEURS JOUEURS
******************************************/
div#pannelconnexion div#top3_joueurs {
width:150px; height:114px; font-family:Tahoma; font-size:8px; display:inline; float:left; padding:33px 0 0 57px; }
div#pannelconnexion div#top3_joueurs h2 {
display:block; margin:0 0 5px 0; line-height:1.3em; }
div#pannelconnexion div#top3_joueurs h2.premier { height:30px; }
div#pannelconnexion div#top3_joueurs h2.seconde, div#pannelconnexion div#top3_joueurs h2.troisieme { height:33px; }
/*REGROUPEMENT LOGIN/NOUVELLES
******************************************/
div#pannelconnexion div#groupe_login_nouv {
float:left; color: #fff; width:714px; height:97px; margin:36px 0 0 0; }
div#pannelconnexion div#groupe_login_nouv h2 {
font-size: 1em; margin:0 0 6px 0; }
div#pannelconnexion div#groupe_login_nouv h2 span#titre {
color:#484848; }
div#pannelconnexion div#groupe_login_nouv div#nouvelles {
margin: 0 0 0 7px; float:left; display:inline; width:497px; height:97px; overflow:hidden; }
/*ESPACE MEMBRES
******************************************/
div#pannelconnexion #groupe_login_nouv div#espacemembres {
float:left; width:161px; height:97px; margin:15px 0 0 35px; display:inline; overflow:hidden; }
div#pannelconnexion #groupe_login_nouv div#espacemembres form#connexion input#pseudo {
background:url(../img/input_text.gif) no-repeat right top; width:154px; height:26px; vertical-align: top; padding:5px 0 0 0; border:0; }
div#pannelconnexion #groupe_login_nouv div#espacemembres form#connexion input#motdepasse {
background:url(../img/input_text.gif) no-repeat right top; width:154px; height:26px; vertical-align: top; padding:5px 0 0 0; border:0; }
div#pannelconnexion #groupe_login_nouv div#espacemembres form#connexion input#ok {
background:url(../img/boutonok.gif) no-repeat top left; width:40px; height:26px; border:0; cursor:pointer; }
/************************************************************ CONTENU ************************************************************/
div#contenu {
width:938px; }
div#contenu #publicite {
background:url(../img/fond_pub.gif) no-repeat top left; width:943px; height:122px; overflow:hidden; }
div#contenu #publicite p {
padding:14px 0 0 193px; }
div#contenu #newsetcontenu {
width:889px; padding:10px 0 0 30px; overflow:hidden; }
/************************************************************ PIED DE PAGE ************************************************************/
div#pieddepage {
width:943px; height:30px; left:2px; background:url(../img/pieddepage.gif) no-repeat top left; }
div#pieddepage p#copyright {
text-align:center; font-size:0.8em; padding:13px 0 0 0; }
div#pieddepage p#copyright a { color: #e7890f; }
div#pieddepage p#copyright a:hover { color: #e7890f; font-weight:bold; }
<!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="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Bleach le jeux - Accueil du site</title>
<link rel="stylesheet" type="text/css" href="styles/base.css" media="all" />
<!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="skin/css/ie6.css" /><![endif]-->
<link rel="stylesheet" type="text/css" href="skin/css/stylesheet.css" />
</head>
<body>
<!--////////////////////////////////////////////////// CONTENEUR GLOBAL //////////////////////////////////////////////////-->
<div id="global">
<!--////////////////////////////////////////////////// BANNIERE CONNEXION/AVATAR //////////////////////////////////////////////////-->
<div id="banniere">
<p class="enlignepasenligne"><img src="skin/img/pasenligneconnexion.jpg" width="104" height="25" /></p>
</div>
<!--/////////////////////////////////////////////// MENU HORIZONTAL ///////////////////////////////////////////////-->
<ul id="menuhorizontal">
<li id="accueil"><a href="#" title="#"><span>accueil</span></a></li>
<li id="mission"><a href="#" title="#"><span>missions</span></a></li>
<li id="parrainage"><a href="#" title="#"><span>parrainage</span></a></li>
<li id="shop"><a href="#" title="#"><span>shopping</span></a></li>
<li id="shinigami"><a href="#" title="#"><span>Monde des shinigami</span></a>
<!--<li id="hollow"><a href="#" title="#"><span>Monde des arrancar</span></a></li></li>-->
<li id="pvp"><a href="#" title="#"><span>pvp</span></a></li>
<li id="wop"><a href="#" title="#"><span>wop</span></a></li>
<li id="guilde"><a href="#" title="#"><span>liste des guildes</span></a></li>
<li id="trophee"><a href="#" title="#"><span>trophee</span></a></li>
<li id="classement"><a href="#" title="#"><span>classement des joueurs</span></a></li>
<li id="deconexion"><a href="#" title="#"><span>deconexion</span></a></li>
</ul>
<!--/////////////////////////////////////////////// PANNEL DE CONNEXION ///////////////////////////////////////////////-->
<div id="pannelconnexion">
<!--/////////////////////////////////////////////// TOP 3 DES MEILLEURS JOUEURS ///////////////////////////////////////////////-->
<div id="top3_joueurs">
<h2 class="premier">
Jyuukun<br />
44992 exp. </h2>
<h2 class="seconde">
Jyuukun<br />
44992 exp. </h2>
<h2 class="troisieme">
Jyuukun<br />
44992 exp. </h2>
</div>
<div id="groupe_login_nouv">
<!--/////////////////////////////////////////////// NOUVEAUTES ///////////////////////////////////////////////-->
<div id="nouvelles">
<h2># <span id="titre">Le titre de la news</span> | 23/07/2009</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed adipiscing, elit nec consectetur dignissim,
ligula tellus tristique ante, congue scelerisque ipsum orci id quam. Fusce sit amet fermentum sem.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Praesent euismod risus vel enim tristique id mattis ante pretium.
Nunc non dolor enim, ante enim commodo quam, non molestie orci odio nec tortor. Sed volutpat arcu</p>
</div>
<!--/////////////////////////////////////////////// ESPACE MEMBRES ///////////////////////////////////////////////-->
<div id="espacemembres">
<form id="connexion" method="#" action="#">
<p>
<label for="pseudo">
<input type="text" name="pseudo" id="pseudo" value="Identifiant" onclick="if(this.value=='Identifiant')this.value='';" onblur="if(this.value=='')this.value='Identifiant';" />
</label>
</p>
<p>
<label for="motdepasse">
<input type="password" name="motdepasse" id="motdepasse" value="Mot de passe" onclick="if(this.value=='Mot de passe')this.value='';if(this.type=='text')this.type='password';" onblur="if(this.value=='')this.value='Mot de passe';" />
</label>
</p>
<p>
<input type="checkbox" name="meretenir" id="meretenir" /> <label for="meretenir">Retenir !</label>
<label for="ok">
<input type="submit" name="ok" id="ok" value="" />
</label>
</p>
</form>
</div>
</div>
</div>
<!--/////////////////////////////////////////////// CONTENU ///////////////////////////////////////////////-->
<div id="contenu">
<!--/////////////////////////////////////////////// PUBLICITE ///////////////////////////////////////////////-->
<div id="publicite">
<p><a href="#" title="#"><img src="skin/img/publicite.jpg" alt="Publicité" /></a></p>
</div>
<!--//////////////////////////////// NEWS ET CONTENU ////////////////////////////////-->
<div id="newsetcontenu">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed arcu vel justo hendrerit ornare. Maecenas dolor mauris, congue vitae, aliquet eget, dictum et, tellus. Nulla at enim. Fusce risus risus, fermentum vitae, placerat et, dictum eget, dui. Sed tempor velit id mauris.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed arcu vel justo hendrerit ornare. Maecenas dolor mauris, congue vitae, aliquet eget, dictum et, tellus. Nulla at enim. Fusce risus risus, fermentum vitae, placerat et, dictum eget, dui. Sed tempor velit id mauris.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed arcu vel justo hendrerit ornare. Maecenas dolor mauris, congue vitae, aliquet eget, dictum et, tellus. Nulla at enim. Fusce risus risus, fermentum vitae, placerat et, dictum eget, dui. Sed tempor velit id mauris.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed arcu vel justo hendrerit ornare. Maecenas dolor mauris, congue vitae, aliquet eget, dictum et, tellus. Nulla at enim. Fusce risus risus, fermentum vitae, placerat et, dictum eget, dui. Sed tempor velit id mauris.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed arcu vel justo hendrerit ornare. Maecenas dolor mauris, congue vitae, aliquet eget, dictum et, tellus. Nulla at enim. Fusce risus risus, fermentum vitae, placerat et, dictum eget, dui. Sed tempor velit id mauris.</p>
<a href="#"><img src="skin/img/defaut/arrancar-mode.jpg" hspace="20" alt="Inscription Shinigami" /></a>
<a href="#"><img src="skin/img/defaut/shinigami-mode.jpg" hspace="20" alt="Inscription Arrancar" /></a>
</div>
</div>
<!--/////////////////////////////////////////////// PIED DE PAGE ///////////////////////////////////////////////-->
<div id="pieddepage">
<!--//////////////////////////////// COPYRIGHT ////////////////////////////////-->
<p id="copyright">
© 2009-2010 Bleach Le Jeux. Ceci est un jeu de FAN - Tous droits réservés - Toutes les illustrations sont la propriété de leurs auteurs et éditeurs respectifs. Intégration XHTML/CSS réalisée par <a href="mailto:seanocean@live.fr">Sean.O</a> </p>
</div>
</div>
</body>
</html>Modifié par Adamys (11 Aug 2009 - 18:08)
