Réaliser la bannière du site commentcamarche
begermis
-
avion-f16 Messages postés 20368 Date d'inscription Statut Contributeur Dernière intervention -
avion-f16 Messages postés 20368 Date d'inscription Statut Contributeur Dernière intervention -
Bonjour,
je suis actuellement en conception de mon site web et je veux réaliser une banière semblable à celle de ce site.mais je n' y arrive pas alors voici mon code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<style type="text/css">.onglet, .conteneur{
width: 600px;
float: left;
clear: both;
padding: 0px;
margin: 0px;
}
.aspectGeneral{
padding-left: 10px;
padding-right: 10px;
padding-top: 4px;
padding-bottom: 4px;
text-align: center;
margin: 0px 3px 0px 0px;
cursor: pointer;
float: left;
font-weight: normal;
font-family:Times New Roman, Times, serif;
font-size: 12pt;
text-transform:uppercase;
border:0px;
}
.desactive{
color:#555555;
background-image:url('../Menu inscription choisi - Copie/zip/images/time4bed_bg.gif');
border-top: inset 2px #777777;
border-left: inset 2px #777777;
border-right: inset 2px #777777;
border-bottom: none;
}
.conteneur, .active{
background-image:url('file:///C:/Users/BEGERMIS 2011/Desktop/Sans titre-1.jpg');
}
.active{
color:orange;
border-top: outset 2px #777777;
border-left: outset 2px #777777;
border-right: outset 2px #777777;
border-bottom: none;
text-decoration:blink;
}
.conteneur{
border-top: none;
border-left: outset 2px #777777;
border-right: outset 2px #777777;
border-bottom: outset 2px #777777;
border:0px;
margin: 0px;
padding: 4px;
background-image:url('file:///C:/Users/BEGERMIS 2011/Desktop/Sans titre-1.jpg');
display:none;
}
.contenu{
display: none;
overflow: auto;
height:100px;
padding: 0px;
margin: 0px;
}
</style>
<script type="text/javascript">
<!--
/* definiton des raccourcis clavier */
/* Syntaxe :
** raccourcis["caractere"] = "idOnglet"
** /!\ Utiliser uniquement des caracteres alphanumeriques : 0-9 ; a-z /!\
** cf. ci-dessous
*************************************/
/* debut du script */
var oldOnglet=null, oldContenu=null;
var objFocus = false;
function mouseClic(objId)
{
var exp = new RegExp("[^onglet]","gi");
var n = objId.substring(objId.search(exp), objId.length);
gestionOnglets(n);
}
function gestionOnglets(code)
{
var onglet = document.getElementById("onglet"+code);
var contenu = document.getElementById("contenu"+code);
if (onglet!=null)
{
onglet.className = "active aspectGeneral";
if (contenu!=null)
contenu.style.display="block";
if (oldOnglet!=null && oldOnglet != onglet)
{
oldOnglet.className = "desactive aspectGeneral";
if (oldContenu!=null)
oldContenu.style.display="none";
}
oldOnglet = onglet;
oldContenu = contenu;
}
}
function out(objId){
if (conteneur.style.display="block")
conteneur.style.display="none";
}
function over(objId){
conteneur.style.display="block";
}
//-->
</script>
</head>
<body onkeyup="keyUp(event)">
<table cellpadding="0" cellspacing="0" style="width: 33%; height: 125px;">
<tr>
<td id="colonne">
<div class="onglet" onmouseout="out(this.id)" style="width: 578px; height: 139px">
<div class="desactive aspectGeneral" id="onglet0" onclick="mouseClic(this.id)" onmouseover="over(this.id)" style="width: 92px">
Inscription
</div>
<div class="desactive aspectGeneral" id="onglet1" onclick="mouseClic(this.id)" onmouseover="over(this.id)" style="width: 83px">
Langues</div>
<div class="desactive aspectGeneral" id="onglet2" onclick="mouseClic(this.id)" onmouseover="over(this.id)" style="width: 94px">
A propos</div>
<div class="conteneur" id="conteneur" style="width: 342px; height: 91px">
<table id="contenu0" class="style3" cellpadding="0" cellspacing="0" style="width: 100%; height: 83px;" align="center">
<tr>
<td class="style1" valign="top">
<strong>Login:</strong></td>
<td class="style1" valign="top">
<form method="post" style="width: 186px">
<input name="Text2" type="text" /></form>
</td>
</tr>
<tr>
<td class="style1" valign="top"><strong>
Password:</strong></td>
<td class="style2" valign="top">
<form method="post">
<input name="Password1" style="height: 20px" type="password" /></form>
</td>
</tr>
<tr>
<td style="width: 46px">Connexion</td>
<td>Password oublié</td>
</tr>
</table>
<p class="contenu" id="contenu1"> dsfgfg</p>
<p class="contenu" id="contenu2">ABOU<br> fgdfgh</br></p>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
je suis actuellement en conception de mon site web et je veux réaliser une banière semblable à celle de ce site.mais je n' y arrive pas alors voici mon code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<style type="text/css">.onglet, .conteneur{
width: 600px;
float: left;
clear: both;
padding: 0px;
margin: 0px;
}
.aspectGeneral{
padding-left: 10px;
padding-right: 10px;
padding-top: 4px;
padding-bottom: 4px;
text-align: center;
margin: 0px 3px 0px 0px;
cursor: pointer;
float: left;
font-weight: normal;
font-family:Times New Roman, Times, serif;
font-size: 12pt;
text-transform:uppercase;
border:0px;
}
.desactive{
color:#555555;
background-image:url('../Menu inscription choisi - Copie/zip/images/time4bed_bg.gif');
border-top: inset 2px #777777;
border-left: inset 2px #777777;
border-right: inset 2px #777777;
border-bottom: none;
}
.conteneur, .active{
background-image:url('file:///C:/Users/BEGERMIS 2011/Desktop/Sans titre-1.jpg');
}
.active{
color:orange;
border-top: outset 2px #777777;
border-left: outset 2px #777777;
border-right: outset 2px #777777;
border-bottom: none;
text-decoration:blink;
}
.conteneur{
border-top: none;
border-left: outset 2px #777777;
border-right: outset 2px #777777;
border-bottom: outset 2px #777777;
border:0px;
margin: 0px;
padding: 4px;
background-image:url('file:///C:/Users/BEGERMIS 2011/Desktop/Sans titre-1.jpg');
display:none;
}
.contenu{
display: none;
overflow: auto;
height:100px;
padding: 0px;
margin: 0px;
}
</style>
<script type="text/javascript">
<!--
/* definiton des raccourcis clavier */
/* Syntaxe :
** raccourcis["caractere"] = "idOnglet"
** /!\ Utiliser uniquement des caracteres alphanumeriques : 0-9 ; a-z /!\
** cf. ci-dessous
*************************************/
/* debut du script */
var oldOnglet=null, oldContenu=null;
var objFocus = false;
function mouseClic(objId)
{
var exp = new RegExp("[^onglet]","gi");
var n = objId.substring(objId.search(exp), objId.length);
gestionOnglets(n);
}
function gestionOnglets(code)
{
var onglet = document.getElementById("onglet"+code);
var contenu = document.getElementById("contenu"+code);
if (onglet!=null)
{
onglet.className = "active aspectGeneral";
if (contenu!=null)
contenu.style.display="block";
if (oldOnglet!=null && oldOnglet != onglet)
{
oldOnglet.className = "desactive aspectGeneral";
if (oldContenu!=null)
oldContenu.style.display="none";
}
oldOnglet = onglet;
oldContenu = contenu;
}
}
function out(objId){
if (conteneur.style.display="block")
conteneur.style.display="none";
}
function over(objId){
conteneur.style.display="block";
}
//-->
</script>
</head>
<body onkeyup="keyUp(event)">
<table cellpadding="0" cellspacing="0" style="width: 33%; height: 125px;">
<tr>
<td id="colonne">
<div class="onglet" onmouseout="out(this.id)" style="width: 578px; height: 139px">
<div class="desactive aspectGeneral" id="onglet0" onclick="mouseClic(this.id)" onmouseover="over(this.id)" style="width: 92px">
Inscription
</div>
<div class="desactive aspectGeneral" id="onglet1" onclick="mouseClic(this.id)" onmouseover="over(this.id)" style="width: 83px">
Langues</div>
<div class="desactive aspectGeneral" id="onglet2" onclick="mouseClic(this.id)" onmouseover="over(this.id)" style="width: 94px">
A propos</div>
<div class="conteneur" id="conteneur" style="width: 342px; height: 91px">
<table id="contenu0" class="style3" cellpadding="0" cellspacing="0" style="width: 100%; height: 83px;" align="center">
<tr>
<td class="style1" valign="top">
<strong>Login:</strong></td>
<td class="style1" valign="top">
<form method="post" style="width: 186px">
<input name="Text2" type="text" /></form>
</td>
</tr>
<tr>
<td class="style1" valign="top"><strong>
Password:</strong></td>
<td class="style2" valign="top">
<form method="post">
<input name="Password1" style="height: 20px" type="password" /></form>
</td>
</tr>
<tr>
<td style="width: 46px">Connexion</td>
<td>Password oublié</td>
</tr>
</table>
<p class="contenu" id="contenu1"> dsfgfg</p>
<p class="contenu" id="contenu2">ABOU<br> fgdfgh</br></p>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
A voir également:
- Réaliser la bannière du site commentcamarche
- Site de telechargement - Accueil - Outils
- Site x - Guide
- Site pour partager des photos - Guide
- Quel site remplace coco - Accueil - Réseaux sociaux
- Site comme coco - Accueil - Réseaux sociaux
