yanng
 108 
|  Posté : 05-04-2013 17:49
si c peut t aider, voilà mon header.html
<html>
<head>
<title>border</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/reset/reset-min.css">
<script type="text/!javascript!" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/!javascript!" src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js"></script>
</head>
<!-- partie superieure du header background" ;-->
<div id="header_top">
</div>
<!-- Debut du header avec bg, slogan, d ate, tout positioné par CSS -->
<div id="header">
<!-- classe header.slogan -->
<div class="slogan">!slogan!
</div>
<!-- classe header.date -->
<div class="date">!date!
</div>
<div class="online">!nb_online!
</div>
<!-- classe head er.login -->
<div class="login">
<! -- si on est pas co on affiche -->
< br /> no_gr oupe_text() !login! !/!
group e_text() Bonjour !member! !/!
<?php
if(autorisation(1))
{
?>
&nbs p;<form action="user.php?op=logout" method="post">
; <input class="bouton_standard" valu e="Déconnexion" type="submit"><br>
</ form>
<?php
}
else{ };
?>
</div><!-- fin de la cla sse login -->
<!-- classe menu2 -->
<ul id="menu2">
; <li><a href="index.php?op=edito">Acceuil</a> ;</li>
<l i><a href="forum.php" >Forum</a></li>
<l i><a href="user.php">Votre compte</a></li>
<l i><a href="download.php" >Téléchargement</a></li> ;
<l i><a href="static.php?op=calulateur.html&npds=-1#convert" & gt;Convertisseur px-em</a></li>
no_gr oupe_text() <li><a href="user.php?op=only_newuser" > Créer un compte</a></li> !/!
</ul>
<!-- classe logo -->
<div id="logo"> </div>
</div>
<!-- Fin du Bloc Header -->
</html>
le le css qui va avec (juste la partie header)
/************************************************************************
Parce qu'on utilise "em" en taille de font
*************************************************************************/
html {
font-size: 0.75em;
}
/************************************************************************
Aspect Général du site : Font, Textes, Mar ges, etc...
*************************************************************************/
body {
/*background: !url(!../images/body/bg_body.png)& nbsp;#fff repeat-x;*/
background-color: #8ECDF B;
font-family: Arial, Helvetica, sans-se rif;
font-weight: normal;
margin: 0;
text-align: center; /* pour corri ger un bug de centrage IE */
padding: 0;
}
#container {
text-align:left;
margin-left:auto;
margin-right:auto;
width:80em;
}
/************************************************************************
partie header
*************************************************************************/
#menu2 ; { float:left; position:absolute; top:10 em; left:3em; }
#menu2 a &nbs p; { background FFF; color0000EF; border00005A 0.4em solid; text-decoration:none; padding:0 .833em;
; margin-right :0.833em; border-radius:0.833em; -moz-border-radius:0.833em; -we bkit-border-radius:0.833em;}
;
#menu2 a:hover { bac kground0000EF; colorFFF; border0099cc 0.4em solid; text-decoration:none; padding:0.833em ;
; margin-right :0.833em; border-radius:0.833em; -moz-border-radius:0.833em; -we bkit-border-radius:0.833em;}
#menu2 a.selected { backgroundAAA; colorFFF; border0000EF 0.4em solid; text-decoration:none; padding:0.833em ;
; margin-right :0.833em; border-radius:0.833em; -moz-border-radius:0.833em; -we bkit-border-radius:0.833em;}
;
#menu2 li &nb sp; { float:left; }
#header_top{
background:!url(!"../images/Header/header_top.png")&n bsp;no-repeat;
height: 2.5em;
width: 80em;
}
#header { /* Ici - Le Header Complet avec Image de Fond */
background: !url(!../images/Header/header.jpg);& nbsp;
height: 14em;
width: 80em;
}
/*Positionnement du logo dans le Header*/
div#logo {
position: absolute;
background-image: !url(!../images/logo/logo.png);
background-repeat: no-repeat;
width: 20em;
height: 20em;
padding: 0;
left: 55em;
}
#header .login { /*Positionnement du bloc login dans le Header*/
text-align: right;
color: #FFFFFF;
top: 1.80em;
height:1em;
padding-right:2.5em;
padding-bottom:2.5em;
font-size: 1.15em;
}
#header .slogan { /*Positionnement du Slogan du Site dans le Header*/
position: absolute;
color: #FFFFFF;
top: 1.85em;
left: 1.8em;
font-size: 2.15em;
}
#header .date { /*Positionnement de la date&nbs p;dans Site dans le Header*/
position: absolute;
color: #FFFFFF;
top: 0.85em;
left: 36em;
font-size: 1.70em;
}
#header .online { /*Positionnement du online da ns le Header*/
position: absolute;
color: #FFFFFF;
top: 1.30em;
left: 5em;
font-size: 1.20em;
}
comme tu le vois, tout est en em, une image pour le header se trouve forcement dans le dossier image/header...
et tout les éléments du header sont positionable ou tu veux en modifiant le css |
