Bonjour à tous,
Voila je suis débutant en css, html, php etc ;-).
Je dois réaliser un site pour un projet de fin d'année.
J'ai commencé par tenter de réaliser la charte graphique de ma page d'accueil. J'obtiens qqch qui me plait bien...jusqu'à ce que je tente de diminuer la dimension de ma fenêtre.
En effet, j'ai travaillé en affichant ma fenêtre en grand mais quant je réduit ma fenêtre, tout les éléments bougent!!!
J'ai cherché pendant un petit temps sans rien trouvé. Etant donné que je n'ai pas énormément de temps je me suis dit que vous pourriez m'aider plus vite.
Voila mon code actuel (vous pourrez remarquer qu'il n'est pas énorme).
J'en profite pour vous faire part d'un autre problème (moins important et que je devrais pouvoir corriger après quelques recherches): je veux inclure un menu dans un <div> qui contient deja une image. Probleme:le menu se place tout en bas de l'image et je ne comprends pas pq.
Voici mon code CSS:
body
{
margin: 0;
text-align: left;
}
div
{
margin-left:auto;
margin-right: auto;
}
h1
{
margin-left:auto;
margin-right:auto;
text-align:center;
text-color:white;
font-family:arial;
font-size:10pt;
}
#zone2 /*Baniere bleue-ciel horizontale*/
{
position:absolute;
top:5%;
left:15%;
height:150px;
width:70%;
z-index:1;
}
#zone2 p
{
position: absolute; /* placement du texte par-dessus l'image */
top: 60px;
left: 350px;
font-size: 1.3em;
font-weight: bold;
color: white;
}
#zone2 img
{
/* l'image occupe toute la place de son bloc conteneur */
width : 100%;
height: 100%;
}
#zone3 /*Baniere bleue-ciel dégradée verticale*/
{
position:absolute;
top:27%;
left:190px;
width:16%;
height:350px;
z-index:3;
}
#zone3 img
{
/* l'image occupe toute la place de son bloc conteneur */
width : 100%;
height: 100%;
}
#zoneban /* Baniere bleue-grise verticale*/
{
position:absolute;
top:27%;
left:210px;
width:15%;
height:350px;
z-index:3;
}
#zoneban img
{
/* l'image occupe toute la place de son bloc conteneur */
width : 100%;
height: 100%;
}
#zoneban1 /* Baniere bleue-grise horizontale*/
{
position:absolute;
top:23%;
left:210px;
height:40px;
width:859px;
z-index:4;
}
#zoneban1 img
{
/* l'image occupe toute la place de son bloc conteneur */
width : 100%;
height: 100%;
}
#zonebanbrunevert /* Baniere bleue-grise verticale*/
{
position:absolute;
top:27%;
left:915px;
width:15%;
height:350px;
z-index:3;
}
#zonebanbrunehor /* Baniere bleue-grise horizontale*/
{
position:absolute;
top:30%;
left:399px;
z-index:3;
}
#zoneban ul
{
list-style:none; /*Retire les puces initialement présentes*/
padding: 0px;
margin: 0px;
}
#zoneban a
{
display:block;
left:0px;
top:0px;
text-decoration:none;
font: bold 15px Verdana,Arial,Helvetica,sans-serif;
color:#000000;
z-index:4;
}
a:hover
{
color:#BOOO1F;
z-index:4;
}
#menu1
{
top: 0px;
padding-left: 0px;
}
#menu1:hover
{
top: 0px;
}
et voila le code .inc que j'inclu simplement dans ma page d'acceuil:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Vitrine des cadeaux originaux de la ville de Mons</title>
</head>
<body>
<div id="zone2">
<img src="../images/baniere_hor.jpeg" alt="">
<p>Mons, ville des cadeaux originaux</p>
</div>
<div id="zone3">
<img src="../images/baniere_rouge.jpeg" alt="">
</div>
<div id="zoneban">
<img src="../images/ban-rouge-vert.jpeg" alt="">
<ul>
<li><a id="menu1" href="#">Menu 1</a></li>
<li><a id="menu2" href="#">Menu 2</a></li>
<li><a id="menu3" href="#">Menu 3</a></li>
<li><a id="menu4" href="#">Menu 4</a></li>
<li><a id="menu5" href="#">Menu 5</a></li>
<li><a id="menu6" href="#">Menu 6</a></li>
</ul>
</div>
<div id="zoneban1">
<img src="../images/ban-rouge-hor.jpeg" alt="">
</div>
<div id="zonebanbrunevert">
<img src="../images/ban-brune-vert.jpeg" alt="">
</div>
<div id="zonebanbrunehor">
<img src="../images/ban-brune-hor.jpeg" alt="">
</div>
</body>
</html>
Si vous trouvez que je programme mal n'hésitez pas à me le dire. Mon code doit être "parfait" car il sera repris plus tard par qqn d'autre.
Merci pour votre aide.
Jean-François
Configuration: Windows XP
Internet Explorer 6.0
juif1985
