Bonjour !
Je suis nouveau sur le forum, mais je fréquente le site depuis un petit moment déjà, laissez-moi vous dire que vos articles sont super !
A part ça, j'ai un léger problème avec un code CSS ou avec un code xHTML (je ne sais pas lequel des deux rate).
Voici les différents codes :
xHTML :
Et le CSS
La faille include n'est pas encore sécurisée, et le JavaScript n'est pas encore intégré.
J'ai essayé de faire comme ici : http://limpid.nl/lab/css/fixed/header-and-footer mais mon code ne marche pas sous IE, alors que le leur est bon. Je ne vois absolument pas ou est le problème. Pourriez-vous m'aider ? Merci !
PS : je cherche à reproduire le design de Steam, c'est pour cela que de nombreux hacks CSS sont utilisés (emplacement différent suivant si le navigateur est IE ou Firefox, et j'essaye d'être bon au pixel près
)
Les boutons sont faits avec cette méthode
Modifié par Iso (11 Jan 2008 - 19:15)
Je suis nouveau sur le forum, mais je fréquente le site depuis un petit moment déjà, laissez-moi vous dire que vos articles sont super !
A part ça, j'ai un léger problème avec un code CSS ou avec un code xHTML (je ne sais pas lequel des deux rate).
Voici les différents codes :
xHTML :
<?php if (isset($_GET['page'])) {$page=$_GET['page'];}
else {$page='magasin';}?>
<!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">
<head>
<title>Steam Skin</title>
<link rel="stylesheet" media="screen" type="text/css" title="Style" href="style.css" />
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<!--<script type="text/javascript" src="javascript.js"></script>-->
</head>
<body>
<div id="header">
<div id="barre_titre">
<div id="titre">STEAM - dupojean</div>
<div id="boutons"><img src="images/reduire.gif" alt="Réduire la fenêtre" /><img src="images/fermer.gif" alt="Fermer la fenêtre" /></div>
</div>
<div id="barre_menus">
<div id="menus"><a href="#" onclick="javascript:menu('fichier');">Fichier</a><a href="#" onclick="javascript:menu('vue');">Vue</a><a href="#" onclick="javascript:menu('jeux');">Jeux</a><a href="#" onclick="javascript:menu('aide');">Aide</a></div>
<!--<div id="sous_menus"></div>-->
</div>
<div id="onglets">
<ul>
<li<?php if ($page==magasin) {echo " id=\"ouvert\"";}?>><a href="index.php?page=magasin">Magasin</a></li>
<li<?php if ($page==communaute) {echo " id=\"ouvert\"";}?>><a href="index.php?page=communaute">Communauté</a></li>
<li<?php if ($page==mes_jeux) {echo " id=\"ouvert\"";}?>><a href="index.php?page=mes_jeux">Mes jeux</a></li>
<li<?php if ($page==mon_media) {echo " id=\"ouvert\"";}?>><a href="index.php?page=mon_media">Mon média</a></li>
<li<?php if ($page==outils) {echo " id=\"ouvert\"";}?>><a href="index.php?page=outils">Outils</a></li>
</ul>
</div>
</div>
<div id="footer"><a href="index.php?page=out&url=www.steampowered.com" id="actualites">Actualités</a><a href="#" id="amis">Amis</a><a href="#" id="serveurs">Serveurs</a><a href="#" id="paramametres">Paramètres</a><a href="index.php?page=out&url=support.steampowered.com" id="support">Support</a></div>
<div id="corps"><?php include($page.'.php');?></div>
</body>
</html>Et le CSS
body{
overflow:visible !important;
overflow:hidden;
margin:0px;
padding:68px 0px 78px 0px;
background-color:#494E49;
color:#D8DED3;
font-family:tahoma;
font-size:11px;
cursor:default;
}
#header{
position:fixed !important;
position:absolute;
top:0px;
left:0px;
width:100%;
height:68px;
}
#footer{
position:fixed !important;
position:absolute;
bottom:0px;
left:0px;
width:100%;
height:78px;
background-image:url('images/bordure.gif');
background-repeat:repeat-x;
background-position:bottom;
background-color:#464646;
}
#corps{
height:100%;
overflow:auto;
}
a{
color:#D8DED3;
text-decoration:none;
cursor:default;
}
a:hover{
color:#C4B550
}
#barre_titre{
width:100%;
height:17px;
padding-top:4px;
background-color:#5A6A50;
}
#barre_titre #titre{
float:left;
margin-left:6px !important;
margin-left:3px;
}
#barre_titre #boutons{
float:right;
margin-right:3px;
}
#barre_menus{
width:100%;
height:20px;
padding-top:5px;
background-image:url('images/bordure.gif');
background-repeat:repeat-y;
background-color:#464646;
}
#barre_menus #menus{
margin-left:8px;
}
#barre_menus #menus a{
float:left;
display:block;
padding:0px 4px;
}
#barre_menus #sous_menus{
position:absolute;
top:42px;
left:0px;
width:300px;
height:300px;
background-color:#2F312D;
border:1px solid #686A65;
}
#onglets ul{
margin:0px;
padding:0px;
list-style-type:none;
}
#onglets{
width:100%;
height:22px;
margin:0px;
padding:0px;
background-image:url('images/bordure.gif');
background-repeat:repeat-y;
background-color:#464646;
}
#onglets ul{
margin-left:0px !important;
margin-left:-3px;
padding:0px;
}
#onglets li{
float:left;
margin-left:3px;
margin-right:-1px;
min-width:66px;
width:auto !important;
width:66px;
background-image:url("images/onglet_droite.gif");
background-repeat:no-repeat;
background-position:right top;
}
#onglets #ouvert{
background-image:url("images/onglet_droite_ouvert.gif");
}
#onglets a{
display:block;
height:18px;
padding-top:4px;
padding-left:9px;
padding-right:9px;
background-image:url("images/onglet_gauche.gif");
background-repeat:no-repeat;
background-position:left top;
}
#onglets #ouvert a{
background-image:url("images/onglet_gauche_ouvert.gif");
color:#C4B550;
}La faille include n'est pas encore sécurisée, et le JavaScript n'est pas encore intégré.
J'ai essayé de faire comme ici : http://limpid.nl/lab/css/fixed/header-and-footer mais mon code ne marche pas sous IE, alors que le leur est bon. Je ne vois absolument pas ou est le problème. Pourriez-vous m'aider ? Merci !
PS : je cherche à reproduire le design de Steam, c'est pour cela que de nombreux hacks CSS sont utilisés (emplacement différent suivant si le navigateur est IE ou Firefox, et j'essaye d'être bon au pixel près
)Les boutons sont faits avec cette méthode
Modifié par Iso (11 Jan 2008 - 19:15)
), on se tournera plutôt vers position: fixed, et un mécanisme de dégradation gracieuse pour IE6 qui ne comprend pas la valeur "fixed" pour la propriété position.
