Réaliser la bannière du site commentcamarche

begermis - 18 févr. 2010 à 11:07
avion-f16 Messages postés 19252 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 10 février 2025 - 18 févr. 2010 à 11:17
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>
A voir également:

1 réponse

Réponse 1 / 1
avion-f16 Messages postés 19252 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 10 février 2025 4 505
18 févr. 2010 à 11:17
Évites les tableaux pour la mise en page !
0

Discussions similaires

C'est quoi le site qui remplace coco chat
TP3 -
bazfile -

2 réponses
Coco chat connexion sur mobile, le tchat est fermé ?
Pisceneo -
brucine -

24 réponses
Chemin Logo du site de la Cité de l'espace
Keiios -
blux -

11 réponses