28172 sujets

CSS et mise en forme, CSS3

Problem d'affichage page css

bjr j'ai problem d'affichage que la page en css s'affihche pas même les page .css et .html dans même dossier je comprend pas ou l'erreur exactement page html s'affiche mais .css noo voila le code :

page html:
<html>
<head>
<title></title>
</head>
<body>

<div id="body">

<header>
<div id="tetiere"><img src="img/wiwiw.png"></div>
<div id="bandeau_gris"></div>

<nav>
<div id="menu" class="menu_haut">
<ul>
<li><a href="">energies renouvelables</a>
<ul>
<li><a href="#">comment </br> ça marche </a></li>
<li><a href="#">quels </br> avantages </a></li>
<li><a href="#">quel </br> prestataire </a></li>
</ul>
</li>

<li><a href="">nos <br> solutions</a>
<ul>
<li><a href="#">panneaux </br> photos</a></li>
<li><a href="#">énergie </br>éolienne</a></li>
<li><a href="#">pompes</br> à chaleur</a></li>
</ul>
</li>

<li><a href="">conseils <br>strategies</a></li>
<li><a href="">demander <br>un devis</a></li>
<li><a href="">nous <br> contacter</a></li>
</ul>
</div>
</nav>
</header>

</div>

</body>
</html>



page css:

<html>
<head>
<style>
body
{
background-color:#CCC;
}

#body
{
width: 800px;
height: 730px;
background-color:#FFF;
margin:auto;
box-shadow: 6px 6px 6px #999;
border-radius: 10px;
position:relative;
}

#tetiere
{ display:block;
width: 800px;
height: 234px;
position:absolute;;
}

#bandeau_gris
{ display:block;
width:800px;
height:20px;
background-color:#CCC;
position:absolute;
top:240px;
box-shadow: 3px 3px 3px #999;
}

#menu
{
position:relative;
top:265px;
margin-left:40px;
}

.menu_haut
{
color: #FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:13px;
text-decoration: none;
font-weight:bold;
position:relative;
}

.menu_haut li
{
float:left;
margin-left:6px;
text-decoration:none;
width:121px;
margin-top:3px;
border-radius: 5px;
}

.menu_haut a
{
display:block;
color: #FFF;
background-color:#090;
text-align:center;
text-decoration:none;
border-radius: 5px;

}

.menu_haut a:hover
{
color:#090;
background-color:#FC0;
text-align:center;
box-shadow: 3px 3px 3px 3px #999;
}

ul
{
list-style-type: none;
}

.menu_haut ul li ul {
display:none;
}

.menu_haut ul li:hover ul {
display:block;
}
.menu_haut li:hover ul li {
float:none;
}

.menu_haut li ul {
position:absolute;
}
</style>
</head>
<body>

<div id="body">

<header>
<div id="tetiere"><img src="img/wiwiw.png"></div>
<div id="bandeau_gris"></div>

<nav>
<div id="menu" class="menu_haut">
<ul>
<li><a href="">energies renouvelables</a>
<ul>
<li><a href="#">comment </br> ça marche ?</a></li>
<li><a href="#">quels </br> avantages ?</a></li>
<li><a href="#">quel </br> prestataire ?</a></li>
</ul>
</li>

<li><a href="">nos <br> solutions</a>
<ul>
<li><a href="#">panneaux </br> photovoltaiques</a></li>
<li><a href="#">énergie </br>éolienne</a></li>
<li><a href="#">pompes</br> à chaleur</a></li>
</ul>
</li>

<li><a href="">conseils <br>strategies</a></li>
<li><a href="">demander <br>un devis</a></li>
<li><a href="">nous <br> contacter</a></li>
</ul>
</div>
</nav>
</header>



</div>

</body>
</html>
Bonjour,

Essayez de rédiger plus clairement.
votre Css n'est pas attachée à votre document donc faire:

<head>
<title></title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>


Il faudrait écrire votre code avec le marquage prévu comme sur la photo.
upload/42874-adec.png
Salut,

Essai ça (en spécifiant le nom de ton fichier.css à la place de "NOM-DE-TON.CSS" dans la balise <link>):

page html:
<html>
<head>

<link type="text/css" rel="stylesheet" href="[b]NOM-DE-TON.CSS[/b]" media="all" />


<title></title>
</head>
<body>

<div id="body">

<header>
<div id="tetiere"><img src="img/wiwiw.png"></div>
<div id="bandeau_gris"></div>

<nav>
<div id="menu" class="menu_haut">
<ul>
<li><a href="">energies renouvelables</a>
<ul>
<li><a href="#">comment </br> ça marche </a></li>
<li><a href="#">quels </br> avantages </a></li>
<li><a href="#">quel </br> prestataire </a></li>
</ul>
</li>

<li><a href="">nos <br> solutions</a>
<ul>
<li><a href="#">panneaux </br> photos</a></li>
<li><a href="#">énergie </br>éolienne</a></li>
<li><a href="#">pompes</br> à chaleur</a></li>
</ul>
</li>

<li><a href="">conseils <br>strategies</a></li>
<li><a href="">demander <br>un devis</a></li>
<li><a href="">nous <br> contacter</a></li>
</ul>
</div>
</nav>
</header>

</div>

</body>
</html>



Page CSS (pourquoi mets-tu du HTML dans ton CSS ?) :

body
{
background-color:#CCC;
}

#body
{
width: 800px;
height: 730px;
background-color:#FFF;
margin:auto;
box-shadow: 6px 6px 6px #999;
border-radius: 10px;
position:relative;
}

#tetiere
{ display:block;
width: 800px;
height: 234px;
position:absolute;;
}

#bandeau_gris
{ display:block;
width:800px;
height:20px;
background-color:#CCC;
position:absolute;
top:240px;
box-shadow: 3px 3px 3px #999;
}

#menu
{
position:relative;
top:265px;
margin-left:40px;
}

.menu_haut
{
color: #FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:13px;
text-decoration: none;
font-weight:bold;
position:relative;
}

.menu_haut li
{
float:left;
margin-left:6px;
text-decoration:none;
width:121px;
margin-top:3px;
border-radius: 5px;
}

.menu_haut a
{
display:block;
color: #FFF;
background-color:#090;
text-align:center;
text-decoration:none;
border-radius: 5px;

}

.menu_haut a:hover
{
color:#090;
background-color:#FC0;
text-align:center;
box-shadow: 3px 3px 3px 3px #999;
}

ul
{
list-style-type: none;
}

.menu_haut ul li ul {
display:none;
}

.menu_haut ul li:hover ul {
display:block;
}
.menu_haut li:hover ul li {
float:none;
}

.menu_haut li ul {
position:absolute;
}

Modifié par jacraquejacroque (29 Jan 2013 - 11:23)
Sujet clos
Aller à