Je travaille actuellement sur un nouveau site mais j'éprouve quelques difficultés à passer des Table aux feuilles de styles.
Voici mon code :
CODE
<!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" lang="fr">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}
#header {
height: 90px;
background-color: #FFFFFF;
border:1px dotted #CCCCCC;
}
#sconteneur{
position: relative;
margin-top:18px;
width: 100%;
}
#conteneur {
position: relative;
width: 99%;
height:80%;
background-color:#FFFFFF;
margin-left:5px;
margin-right:5px;
}
div.centre {
position: relative;
background-color:#FCB0DB;
margin-left: 0%;
margin-right: 0%;
border:1px solid #CC3399;
border-bottom:1px;
padding:3px;
margin-top: 0px;
width:30%;
}
div.scentre {
position: relative;
background-color:#FFFFFF;
margin-left: 0%;
margin-right: 0%;
border:1px solid #CC3399;
padding:3px;
margin-top: 0px;
width:98%;
}
#gauche {
position: absolute;
left:0;
width: 16.5%;
padding:0px;
margin-top: -4px;
}
.sgauche{
border:1px solid #CC3399;
color:#000000;
text-decoration:none;
font-size:12px;
text-align:center;
}
#droite {
position: absolute;
right:0;
width: 16.5%;
padding:0px;
margin-top: -4px;
}
.sdroite{
border:1px dotted #CCCCCC;
}
#pied {
height: 30px;
background-color: #99CC99;
}
.menugauche {
list-style-type: none;
margin: 0;
padding:3px;
text-align:left;
}
.menugauche li {
margin-bottom: 5px;
}
.menugauche a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
.menugauche a:hover {
text-decoration: none;
}
.menudroit {
list-style-type: none;
margin: 0;
padding:3px;
text-align:left;
}
.menudroit li {
margin-bottom: 5px;
}
.menudroit a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
.menudroit a:hover {
text-decoration: none;
}
p, span {margin: 0 0 10px 0;}
ul#menu li ul{
display:none;
}
ul#menu li:hover>ul{
display:block;
}
ul#menu{
margin:0px;
padding:0px;
list-style:none;
width:100%;
color:#FFFFFF;
float:left;
font-size:10px;
}
ul#menu hr{
margin-right: 4px;
margin-left: 4px;
}
ul#menu li{
float:left;
display:block;
padding:2px 1px;
width:16.5%;
}
ul#menu li.first{
padding-left:0px;
}
ul#menu li.last{
padding-right:0px;
}
ul#menu li a{
display:block;
padding:2px 6px;
border:1px solid #CC3399;
color:#000000;
background:#FCB0DB;
text-decoration:none;
font-size:12px;
text-align:center;
}
ul#menu li a:hover{
border-top-color:#F0F0F0;
border-left-color:#F0F0F0;
border-right-color:#999999;
border-bottom-color:#999999;
background:#FFFFFF;
}
ul#menu ul{
position:absolute;
background:#FFFFFF;
list-style:none;
margin-top:2px;
margin-left:0px;
margin-right:0px;
margin-bottom:0px;
padding:0px;
width:inherit;
z-index:1;
border:1px solid #CCCCCC;
}
ul#menu ul ul{
top:0px;
left:155px;
z-index:2;
}
ul#menu ul li{
position:relative;
float:none;
margin:0px;
padding:0px;
_display:inline;
width:100%;
}
ul#menu ul li a{
display:block;
margin:0px;
padding:0px;
width:96%;
border:none;
color:#000000;
height:auto;
}
ul#menu ul li a span{
display:block;
width:100%;
_width:100%;
padding:2px 6px 0px 0px;
margin:0px 0px;
border:none;
cursor:hand;
background:#FFFFFF;
text-align:left;
}
ul#menu ul li a.next:hover span{
background-position: -160px 50%;
border:1px solid #CCCCCC;
}
ul#menu ul li a:hover span{
background-color:#FFFFFF;
color:#FFFFFF;
border:none;
background:#CCCCCC;
}
ul#menu ul li.first{
padding-left:0px;
}
ul#menu ul li.first a{
padding-top:0px;
}
ul#menu ul li.last{
padding-right:0px;
}
ul#menu ul li.last a{
padding-bottom:0px;
background:url(imgmenuencascade/m1.gif) no-repeat left bottom;
}
/*
p{
margin-left:170px;
}
*/
</style>
<script type="text/javascript">
function hover(obj){
if(document.all){
UL = obj.getElementsByTagName('ul');
if(UL.length > 0){
sousMenu = UL[0].style;
if(sousMenu.display == 'none' || sousMenu.display == ''){
sousMenu.display = 'block';
}else{
sousMenu.display = 'none';
}
}
}
}
function setHover(){
LI = document.getElementById('menu').getElementsByTagName('li');
nLI = LI.length;
for(i=0; i < nLI; i++){
LI[i].onmouseover = function(){
hover(this);
}
LI[i].onmouseout = function(){
hover(this);
}
}
}
</script>
</head>
<body onLoad="setHover()">
<div id="conteneur">
<div id="header">
<br/><br/>Header<br/><br/><br/>
</div>
<ul id="menu">
<li class="first">
<a href="#">Accueil</a>
<ul>
<li class="first"><a href="#"><span> Menu1</span></a></li>
<li><a href="#"><span> Menu2</span></a></li>
<li class="last"><a href="#"><span> Menu3</span></a></li>
</ul>
</li>
<li>
<a href="#">Mon Compte</a>
<ul>
<li class="first"><a href="#"><span> Menu4</span></a></li>
<li><a href="#"><span> Menu5</span></a></li>
<li><a href="#"><span> Menu6</span></a></li>
<li class="last"><a href="#"><span> Menu7</span></a></li>
</ul>
</li>
<li class="last">
<a href="#">Rechercher</a>
<ul>
<li class="first"><a href="#"><span> Menu8</span></a></li>
<li><a href="#"><span> Menu9</span></a></li>
<li class="last"><a href="#"><span> 10</span></a></li>
</ul>
</li>
</ul>
<br />
<div id="sconteneur">
<div id="centre">
<div class="centre">
<span class="titre">Inscription</span><br />
</div>
<div class="scentre">
Login : <input type="texte" size="20" maxlength="25" />
</div>
</div>
</div>
</div>
</body>
</html>
J'aimerais présenter un peu mieux mon début de formulaire. Par exemple que "Login" prenne au moins 30% avec un fond bleu par exemple.
J'essais tant bien que mal avec des span mais il refuse de s'agrandir. Avec div ca marche si c'est ca, je vais avoir autant de Div que de TD ce que je ne veux pas.
Une idée?
merci
Portekoi
), évite la divite ou la spanite à l'infini, évite les <br/> qui servent à créer des espaces blancs entre les éléments, apprends à différencier les éléments "en-ligne" et les éléments "bloc" parce que c'est le B-A-BA du CSS, etc etc..
CSS pas évident quand même ^_^