Auteur
yanng
yanng
Forum » » Le coin des codeurs » » responsive machinchose
Posté : 5 avr. 2013 à 17:49 
<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, date, 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 header.login -->
<div class="login">
<!-- si on est pas co on affiche -->
no_groupe_text() !login! !/!
groupe_text() Bonjour !member! !/!
<?php
if(autorisation(1))
{
?>
<form action="user.php?op=logout" method="post">
<input class="bouton_standard" value="Déconnexion" type="submit"><br>
</form>
<?php
}
else{};
?>
</div><!-- fin de la classe login -->
<!-- classe menu2 -->
<ul id="menu2">
<li><a href="index.php?op=edito">Acceuil</a></li>
<li><a href="forum.php" >Forum</a></li>
<li><a href="user.php">Votre compte</a></li>
<li><a href="download.php" >Téléchargement</a></li>
<li><a href="static.php?op=calulateur.html&npds=-1#convert" >Convertisseur px-em</a></li>
no_groupe_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, Marges, etc...
*************************************************************************/
body {
/*background: !url(!../images/body/bg_body.png) #fff repeat-x;*/
background-color: #8ECDFB;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
margin: 0;
text-align: center; /* pour corriger 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:10em; left:3em; }
#menu2 a { 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; -webkit-border-radius:0.833em;}
#menu2 a:hover { background0000EF; colorFFF; border0099cc 0.4em solid; text-decoration:none; padding:0.833em;
margin-right:0.833em; border-radius:0.833em; -moz-border-radius:0.833em; -webkit-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; -webkit-border-radius:0.833em;}
#menu2 li { float:left; }
#header_top{
background:!url(!"../images/Header/header_top.png") no-repeat;
height: 2.5em;
width: 80em;
}
#header { /* Ici - Le Header Complet avec Image de Fond */
background: !url(!../images/Header/header.jpg);
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 dans Site dans le Header*/
position: absolute;
color: #FFFFFF;
top: 0.85em;
left: 36em;
font-size: 1.70em;
}
#header .online { /*Positionnement du online dans 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
Cet article provient de NPDS
https://www.npds.org/viewtopic.php?topic=25783&forum=5