CSS - dimensionnement de fenêtre
juif1985
Messages postés
3
Statut
Membre
-
juif1985 Messages postés 3 Statut Membre -
juif1985 Messages postés 3 Statut Membre -
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
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
A voir également:
- CSS - dimensionnement de fenêtre
- Fenetre windows - Guide
- Fenêtre hors écran windows 11 - Guide
- Fenetre de navigation privée - Guide
- Mcafee fenetre intempestive - Accueil - Piratage
- Fermer une fenetre de force - Guide
3 réponses
Merci, je connaissais déjà.
J'y ais encore jeté un oeil et je retrouve une solution que je pensais bonne.
Au lieu d'utiliser
<div id="zone3">
<img src="../images/baniere_rouge.jpeg" alt="">
</div>
il semble plutot utiliser
backround-image:(="../images/baniere_rouge.jpeg");
background-attachment:fixed;
Mais chez moi ca ne fonctionne absolument pas:
l'image ne s'affiche plus et en lieu et place de cette image je n'ai rien d'autre que le code lui-même.
Merci pour votre aide quoiqu'il en soit!
J'y ais encore jeté un oeil et je retrouve une solution que je pensais bonne.
Au lieu d'utiliser
<div id="zone3">
<img src="../images/baniere_rouge.jpeg" alt="">
</div>
il semble plutot utiliser
backround-image:(="../images/baniere_rouge.jpeg");
background-attachment:fixed;
Mais chez moi ca ne fonctionne absolument pas:
l'image ne s'affiche plus et en lieu et place de cette image je n'ai rien d'autre que le code lui-même.
Merci pour votre aide quoiqu'il en soit!
