28220 sujets

CSS et mise en forme, CSS3

Que pensez vous de ma feuille de style?

Bonjour a tous, je viens d'achever ce qui sera la structure de mon futur site, et comme je suis debutant en css j aimerai avoir votre avis sur celle ci. Je l ai tester elle est semble conforme au norme w3c. Elle a cependant encore quelques bug d'alignement sous firefox.

Merci pour votre aide

Feuille de style:

body{
font-size: 100%;
margin: 0; padding: 0;
background-color: #fff;
background-image: url(bg.gif);
background-repeat: no-repeat;
background-attachment: fixed;
}

/*Conteneur aroundis*/
.conteneur {
left: 50%;
margin-left: -380px;
position:relative;
display:block;
padding:0px;
width: 765px;
height:auto;
}

.haut .bas{margin:0;padding:0;}

.haut {
float:left;
width:765px;
height:19px;
background-image:url(HautCont.gif);
background-repeat: no-repeat;
background-position:bottom;
}

.bas{
float:left;
width:765px;
height:19px;
background: url(BasCont.gif);
background-repeat: no-repeat;
background-position:top;
}

/*bordure des tableaux speciaux*/
#AccH {
width:765px;
height:19px;
background: url(HautAcc.gif);
background-repeat: no-repeat; background-position:bottom
}

#AccB {
width:765px;
height:19px;
background: url(BasAcc.gif);
background-repeat: no-repeat;
background-position:top;
}

#PubH {
width:765px;
height:19px;
background: url(HautContPub.gif) no-repeat;
background-position:bottom;
}

/*contenu principal*/
.contenu {
float:left;
background: url(milieu.gif);
background-repeat: repeat-y;
width: 765px;
height: 100%;
}

.contenu p{
padding-left:10px;
padding-right:10px;
}

/*sous Contenus*/
.contenu dl{
float:left;
margin-left:7px;
margin-right:7px;
}

.contenu dt{
width:235px;
height:25px;
background-color: #25bf65
}

.contenu dd{
margin:0;
width:235px;
height:400px;
background-color: #c038a7;
}


/* Header en Flash */
.anim{
padding-left:0px;
padding-right:0px;
float:left;
width:765px;
height: 226px;
background: url(anim.gif);
}

/* menu horizontal */
#menu {
float:left;
width:765px;
height: 28px;
background-image: url(Bg-Menu.gif);
}

#menu ul {
height: 100%;
margin:0;
list-style-type: none;
margin-right:20px;
margin-left:20px;
background-image: url(bgmenu2.gif);
}

#menu li {display: inline;}

#menu ul li{
display: inline;
padding-left: 0;
padding-right: 0;
padding-top: 5px;
}

#menu ul li a{
padding-left: 15px;
padding-right: 15px;
padding-bottom: 18px;
padding-top: 5px;
color: #c6c6c6;
text-decoration:none ;
border-right: 2px solid #999;
font-weight: bold;
}

#menu ul li a:hover{
background-color: #fefcff;
color: #036;
}

/*Pied de page*/
#footer {
position: relative;
width:100%;
height:20px;
background-color: #2f3130
}


---------------------------------------------------------------------
xHtml

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
@import url("style.css");
</style>

</head>
<body>



<div class="conteneur">
<div class="haut" id="AccH">&nbsp;</div>
<div class="contenu">
<div class="anim">&nbsp;</div>
<div id="menu">
<ul>
<li><a href="">Prensentation</a></li>
<li><a href="">Annuaire Internet</a></li>
<li><a href="">Prensentation</a></li>
</ul>
</div>
</div>
<div class="bas" id="AccB">&nbsp;</div>
</div>


<div class="conteneur">
<div class="haut" >&nbsp;</div>
<div class="contenu">
<p>TEXTE</p>

<dl>
<dt>gfdgfdgd</dt>
<dd>hfdshkjf</dd>
</dl>

<dl>
<dt>hjkhgkfd</dt>
<dd>hfdshkjf</dd>
</dl>

<dl>
<dt>hjkhgkfd</dt>
<dd>hfdshkjf</dd>
</dl>

</div>
<div class="bas" id="ContB">&nbsp;</div>
</div>

<div class="conteneur">
<div class="haut" id="PubH">&nbsp;</div>
<div class="contenu">
<p>TEXTE</p>
</div>
<div class="bas">&nbsp;</div>
</div>
<div id="footer">&nbsp;</div>

</body>
</html>


Merci a ceux qui auront pris le temps d'arriver jusque la Smiley lol
Smiley lol
Bonjour m4nu et bienvenue sur ce forum Smiley lol

Est-ce que tu pourrais utiliser le BBCode [ code][ /code] (sans les espaces) pour formater ton code, ça sera plus lisible comme ça.

Merci !

Ici, je pense que tu dois mettre une virgule :

.haut .bas{margin:0;padding:0;}

Comme ceci :

.haut, .bas{margin:0;padding:0;}

Ta page en ligne serait un atout pour toi. Ce n'est pas tout le monde qui est prêt à reproduire ton design en local.
Sujet clos
Aller à