Mise en page
Résolu
bluenette
Messages postés
213
Date d'inscription
Statut
Membre
Dernière intervention
-
arthezius Messages postés 3538 Date d'inscription Statut Membre Dernière intervention -
arthezius Messages postés 3538 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je ne comprends pas pourquoi lorsque je tape du texte dans mon cadre blanc : " Notre gîte se trouve.... pourpre", http://www.perigordgite.fr/gite.html mes images en dessous disparaissent, au lieu de descendre plus bas sur la page.
Code HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Le gite de la famille Borie. Gite rural dans le Perigord, idéal pour passer d'agréables vacances" />
<meta name="keyword" content="Gite, Perigord, Borie, Jean Michel, Claire, Location, Semaine, Week-end, campagne, vacances, beaumont, monpazier, pas cher, chèque vacances, agréable, calme, silencieux, animaux, enfants, 5, 6, 4, 3, 2, deux, trois, quatre, cinq, six, personnes, piscine, chauffage, chauffée" />
<title>Le gîte de la famille Borie.</title>
<link rel="stylesheet" media="screen" type="text/css" title="Design espace" href="style.css" />
</style>
</head>
<body>
<div id="bandeau">
<p><a href="gite.html"><img src="menu_01.png" alt="Le gîte" /></a> <a href="environnement.html"><img src="menu_02.png" alt="Environnement" /></a> <a href="tarifs.html"><img src="menu_03.png" alt="Tarifs" /></a> <a href="contact.html"><img src="menu_04.png" alt="Contact" /></a></p>
</div>
<div id="contenu">
<p> Notre gîte est situé dans le Périgord pourpre.
</p>
</div>
<div id="Diapo1">
<table height="300" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td><img src="images/Fashion_01.jpg" /></td>
<td><img src="images/Fashion_02.jpg" /></td>
<td><img src="images/Fashion_03.jpg" /></td>
</tr>
</table>
</div>
</body>
</html>
Code CSS :
body
{
background:url(images/fond_ecran.jpg),top center,fixed, repeat-y;
}
a img
{
border:none;
}
div#bandeau
{
position:absolute;
top:100px;
left:-40px;
width:100%;
height: 100px;
background: url(fond_bandeau.jpg) repeat-x;
}
div#bandeau p
{
margin: 20px 0px;
text-align: center;
position: relative;
z-index: 20;color: #3b1801;
}
div#bandeau p img
{
margin: 0px 10px;
}
/*div#bandeau h1,div#bandeau h1 a:link,div#bandeau h1 a:visited
{
color: #3b1801;
text-decoration: none;
}
div#bandeau h1 a:hover
{
text-decoration: underline;
}
div#bandeau h1 a
{
margin: 0px 10px;
}*/
div#contenu
{
width: 700px;
position: absolute;
top: 380px;
left: 68%;
margin-left: -400px;
background: #fff;
border:2px solid #3b1801;
z-index: 20;
padding: 10px 0px;
}
div#contenu p
{
font-size: 12px;
margin: 2px 15px;
text-align: justify;
}
#Diapo1
{
position:absolute;
height:360px;
width: 700px;
left:300px;
top:430px;
overflow: auto;
}
Je ne comprends pas pourquoi lorsque je tape du texte dans mon cadre blanc : " Notre gîte se trouve.... pourpre", http://www.perigordgite.fr/gite.html mes images en dessous disparaissent, au lieu de descendre plus bas sur la page.
Code HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Le gite de la famille Borie. Gite rural dans le Perigord, idéal pour passer d'agréables vacances" />
<meta name="keyword" content="Gite, Perigord, Borie, Jean Michel, Claire, Location, Semaine, Week-end, campagne, vacances, beaumont, monpazier, pas cher, chèque vacances, agréable, calme, silencieux, animaux, enfants, 5, 6, 4, 3, 2, deux, trois, quatre, cinq, six, personnes, piscine, chauffage, chauffée" />
<title>Le gîte de la famille Borie.</title>
<link rel="stylesheet" media="screen" type="text/css" title="Design espace" href="style.css" />
</style>
</head>
<body>
<div id="bandeau">
<p><a href="gite.html"><img src="menu_01.png" alt="Le gîte" /></a> <a href="environnement.html"><img src="menu_02.png" alt="Environnement" /></a> <a href="tarifs.html"><img src="menu_03.png" alt="Tarifs" /></a> <a href="contact.html"><img src="menu_04.png" alt="Contact" /></a></p>
</div>
<div id="contenu">
<p> Notre gîte est situé dans le Périgord pourpre.
</p>
</div>
<div id="Diapo1">
<table height="300" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td><img src="images/Fashion_01.jpg" /></td>
<td><img src="images/Fashion_02.jpg" /></td>
<td><img src="images/Fashion_03.jpg" /></td>
</tr>
</table>
</div>
</body>
</html>
Code CSS :
body
{
background:url(images/fond_ecran.jpg),top center,fixed, repeat-y;
}
a img
{
border:none;
}
div#bandeau
{
position:absolute;
top:100px;
left:-40px;
width:100%;
height: 100px;
background: url(fond_bandeau.jpg) repeat-x;
}
div#bandeau p
{
margin: 20px 0px;
text-align: center;
position: relative;
z-index: 20;color: #3b1801;
}
div#bandeau p img
{
margin: 0px 10px;
}
/*div#bandeau h1,div#bandeau h1 a:link,div#bandeau h1 a:visited
{
color: #3b1801;
text-decoration: none;
}
div#bandeau h1 a:hover
{
text-decoration: underline;
}
div#bandeau h1 a
{
margin: 0px 10px;
}*/
div#contenu
{
width: 700px;
position: absolute;
top: 380px;
left: 68%;
margin-left: -400px;
background: #fff;
border:2px solid #3b1801;
z-index: 20;
padding: 10px 0px;
}
div#contenu p
{
font-size: 12px;
margin: 2px 15px;
text-align: justify;
}
#Diapo1
{
position:absolute;
height:360px;
width: 700px;
left:300px;
top:430px;
overflow: auto;
}
A voir également:
- Mise en page
- Mise en forme conditionnelle excel - Guide
- Supprimer page word - Guide
- Mise a jour chrome - Accueil - Applications & Logiciels
- Mise a jour windows 10 - Accueil - Mise à jour
- Mettre google en page d'accueil - Guide
4 réponses
Cela viens du fait que tu positionnes en absolute ton bloc avec tes images à 430px du haut.
En fait, c'est surtout a cause du bloc du dessus que ça ne va pas, vu qu'il est placé en absolute.
Place les tout les deux dans un div container qui contiendra les différents éléments de ta page, que tu placeras en absolute si tu veux.
En résumé:
Côté CSS:
J'ai pas testé mais ça devrait aller.
Le principe c'est de placer le div container ou tu veux dans la page et de la centrer. Le reste viendra se placer dedans.
#Diapo1
{
position:absolute;
height:360px;
width: 700px;
left:300px;
top:430px;
overflow: auto;
}
En fait, c'est surtout a cause du bloc du dessus que ça ne va pas, vu qu'il est placé en absolute.
Place les tout les deux dans un div container qui contiendra les différents éléments de ta page, que tu placeras en absolute si tu veux.
En résumé:
<div id="container"> <div id="contenu"></div> <div id="Diapo1"></div> </div>
Côté CSS:
div#container{
width: 700px;
position: absolute;
top: 380px;
left: 68%;
margin-left: -400px;
z-index: 20;
}
div#contenu{
background: #fff;
border:2px solid #3b1801;
padding: 10px 0px;
}
div#Diapo1{
height:360px;
width: 700px;
overflow: auto;
}
J'ai pas testé mais ça devrait aller.
Le principe c'est de placer le div container ou tu veux dans la page et de la centrer. Le reste viendra se placer dedans.
Je viens d'insérer les codes, et ça mieux oui, mais la fonction 68% a gauche ne fonctionne pas, et plus bas dans la page non plus.
Ensuite un petit acdre blanc est apparu, je ne vois pas a quel codage il correspond!
CSS :
body
{
background:url(images/fond_ecran.jpg),top center,fixed, repeat-y;
}
a img
{
border:none;
}
div#bandeau
{
position:absolute;
top:100px;
left:-40px;
width:100%;
height: 100px;
background: url(fond_bandeau.jpg) repeat-x;
}
div#bandeau p
{
margin: 20px 0px;
text-align: center;
position: relative;
z-index: 20;color: #3b1801;
}
div#bandeau p img
{
margin: 0px 10px;
}
/*div#bandeau h1,div#bandeau h1 a:link,div#bandeau h1 a:visited
{
color: #3b1801;
text-decoration: none;
}
div#bandeau h1 a:hover
{
text-decoration: underline;
}
div#bandeau h1 a
{
margin: 0px 10px;
}*/
div#container{
width: 700px;
position: absolute;
top: 380px;
left: 68%;
margin-left: -400px;
z-index: 20;
}
div#contenu{
background: #fff;
border:2px solid #3b1801;
padding: 10px 0px;
}
div#Diapo1{
height:360px;
width: 700px;
overflow: auto;
}
HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Le gite de la famille Borie. Gite rural dans le Perigord, idéal pour passer d'agréables vacances" />
<meta name="keyword" content="Gite, Perigord, Borie, Jean Michel, Claire, Location, Semaine, Week-end, campagne, vacances, beaumont, monpazier, pas cher, chèque vacances, agréable, calme, silencieux, animaux, enfants, 5, 6, 4, 3, 2, deux, trois, quatre, cinq, six, personnes, piscine, chauffage, chauffée" />
<title>Le gîte de la famille Borie.</title>
<link rel="stylesheet" media="screen" type="text/css" title="Design espace" href="style.css" />
</style>
</head>
<body>
<div id="container">
<div id="contenu"></div>
<div id="Diapo1"></div>
</div>
<div id="bandeau">
<p><a href="gite.html"><img src="menu_01.png" alt="Le gîte" /></a> <a href="environnement.html"><img src="menu_02.png" alt="Environnement" /></a> <a href="tarifs.html"><img src="menu_03.png" alt="Tarifs" /></a> <a href="contact.html"><img src="menu_04.png" alt="Contact" /></a></p>
</div>
<div id="contenu">
<p> Notre gîte est situé dans le Périgord pourpre.
</p>
</div>
<div id="Diapo1">
<table height="300" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td><img src="images/Fashion_01.jpg" /></td>
<td><img src="images/Fashion_02.jpg" /></td>
<td><img src="images/Fashion_03.jpg" /></td>
</tr>
</table>
</div>
</body>
</html>
Ensuite un petit acdre blanc est apparu, je ne vois pas a quel codage il correspond!
CSS :
body
{
background:url(images/fond_ecran.jpg),top center,fixed, repeat-y;
}
a img
{
border:none;
}
div#bandeau
{
position:absolute;
top:100px;
left:-40px;
width:100%;
height: 100px;
background: url(fond_bandeau.jpg) repeat-x;
}
div#bandeau p
{
margin: 20px 0px;
text-align: center;
position: relative;
z-index: 20;color: #3b1801;
}
div#bandeau p img
{
margin: 0px 10px;
}
/*div#bandeau h1,div#bandeau h1 a:link,div#bandeau h1 a:visited
{
color: #3b1801;
text-decoration: none;
}
div#bandeau h1 a:hover
{
text-decoration: underline;
}
div#bandeau h1 a
{
margin: 0px 10px;
}*/
div#container{
width: 700px;
position: absolute;
top: 380px;
left: 68%;
margin-left: -400px;
z-index: 20;
}
div#contenu{
background: #fff;
border:2px solid #3b1801;
padding: 10px 0px;
}
div#Diapo1{
height:360px;
width: 700px;
overflow: auto;
}
HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Le gite de la famille Borie. Gite rural dans le Perigord, idéal pour passer d'agréables vacances" />
<meta name="keyword" content="Gite, Perigord, Borie, Jean Michel, Claire, Location, Semaine, Week-end, campagne, vacances, beaumont, monpazier, pas cher, chèque vacances, agréable, calme, silencieux, animaux, enfants, 5, 6, 4, 3, 2, deux, trois, quatre, cinq, six, personnes, piscine, chauffage, chauffée" />
<title>Le gîte de la famille Borie.</title>
<link rel="stylesheet" media="screen" type="text/css" title="Design espace" href="style.css" />
</style>
</head>
<body>
<div id="container">
<div id="contenu"></div>
<div id="Diapo1"></div>
</div>
<div id="bandeau">
<p><a href="gite.html"><img src="menu_01.png" alt="Le gîte" /></a> <a href="environnement.html"><img src="menu_02.png" alt="Environnement" /></a> <a href="tarifs.html"><img src="menu_03.png" alt="Tarifs" /></a> <a href="contact.html"><img src="menu_04.png" alt="Contact" /></a></p>
</div>
<div id="contenu">
<p> Notre gîte est situé dans le Périgord pourpre.
</p>
</div>
<div id="Diapo1">
<table height="300" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td><img src="images/Fashion_01.jpg" /></td>
<td><img src="images/Fashion_02.jpg" /></td>
<td><img src="images/Fashion_03.jpg" /></td>
</tr>
</table>
</div>
</body>
</html>
Essai comme ça:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta name="description" content="Le gite de la famille Borie. Gite rural dans le Perigord, idéal pour passer d'agréables vacances" /> <meta name="keyword" content="Gite, Perigord, Borie, Jean Michel, Claire, Location, Semaine, Week-end, campagne, vacances, beaumont, monpazier, pas cher, chèque vacances, agréable, calme, silencieux, animaux, enfants, 5, 6, 4, 3, 2, deux, trois, quatre, cinq, six, personnes, piscine, chauffage, chauffée" /> <title>Le gîte de la famille Borie.</title> <link rel="stylesheet" media="screen" type="text/css" title="Design espace" href="style.css" /> </style> </head> <body> <div id="bandeau"> <p><a href="gite.html"><img src="menu_01.png" alt="Le gîte" /></a> <a href="environnement.html"><img src="menu_02.png" alt="Environnement" /></a> <a href="tarifs.html"><img src="menu_03.png" alt="Tarifs" /></a> <a href="contact.html"><img src="menu_04.png" alt="Contact" /></a></p> </div> <div id="container"> <div id="contenu"> <p> Notre gîte est situé dans le Périgord pourpre. </p> </div> <div id="Diapo1"> <table height="300" border="0" cellpadding="0" cellspacing="0" > <tr> <td><img src="images/Fashion_01.jpg" /></td> <td><img src="images/Fashion_02.jpg" /></td> <td><img src="images/Fashion_03.jpg" /></td> </tr> </table> </div> </div> </body> </html>
Merci! Je devrais poster un nouveau post, mais avec le meme code CSS que précédemment et un html comme celui ci, j'ai deux backgrounds supperposés, je ne ne sais pas pourquoi! As tu une idée? je n'ai pourtant pas deux lien vers image!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Le gite de la famille Borie. Gite rural dans le Perigord, idéal pour passer d'agréables vacances" />
<meta name="keyword" content="Gite, Perigord, Borie, Jean Michel, Claire, Location, Semaine, Week-end, campagne, vacances, beaumont, monpazier, pas cher, chèque vacances, agréable, calme, silencieux, animaux, enfants, 5, 6, 4, 3, 2, deux, trois, quatre, cinq, six, personnes, piscine, chauffage, chauffée" />
<title>Le gîte de la famille Borie.</title>
<link rel="stylesheet" media="screen" type="text/css" title="Design espace" href="style.css" />
</head>
<body>
<a href="gite.html"><img src="images/image_de_fond_accueil.jpg" width="100%" height="100%" alt="" /></a>
</body>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Le gite de la famille Borie. Gite rural dans le Perigord, idéal pour passer d'agréables vacances" />
<meta name="keyword" content="Gite, Perigord, Borie, Jean Michel, Claire, Location, Semaine, Week-end, campagne, vacances, beaumont, monpazier, pas cher, chèque vacances, agréable, calme, silencieux, animaux, enfants, 5, 6, 4, 3, 2, deux, trois, quatre, cinq, six, personnes, piscine, chauffage, chauffée" />
<title>Le gîte de la famille Borie.</title>
<link rel="stylesheet" media="screen" type="text/css" title="Design espace" href="style.css" />
</head>
<body>
<a href="gite.html"><img src="images/image_de_fond_accueil.jpg" width="100%" height="100%" alt="" /></a>
</body>
Ce qui est devant est l'image que tu met entre les balises de ton lien.
Cette image, prévu en 1000x750px est chez moi affiché en 1407x1055px a cause des dimensions a 100% (mon écran étant en 1440x900px). J'ai du coup des pixels gros comme une maison.
Je te déconseille d'utiliser une image de cette manière.
La marge que tu retrouves tout autour est un margin par défaut sur la balise body qui est de 8px tournant. Je te conseillerai plutôt de faire ta page d'accueil différemment.
<a href="gite.html"><img src="images/image_de_fond_accueil.jpg" width="100%" height="100%" alt="" /></a>
Cette image, prévu en 1000x750px est chez moi affiché en 1407x1055px a cause des dimensions a 100% (mon écran étant en 1440x900px). J'ai du coup des pixels gros comme une maison.
Je te déconseille d'utiliser une image de cette manière.
La marge que tu retrouves tout autour est un margin par défaut sur la balise body qui est de 8px tournant. Je te conseillerai plutôt de faire ta page d'accueil différemment.
Ni le bandeau blanc dailleurs
Voici le lien du fichier zip contenant tout mes fichiers: http://tests.arthezius.fr/perigordgite/perigord.zip
Tu peux les éditer avec n'importe quel blocnote ou éditeur de texte.
Perso j'utilise Bluefish, sinon Notepad++ est très bien.
Si tu veux les visualiser en local sur ton PC, je te suggère d'installer un serveur web local avec Wamp par exemple. Mais dans le cas présent, si tu le renomme en .html ça marche aussi. Il ne contient aucun code PHP.
Perso j'utilise Bluefish, sinon Notepad++ est très bien.
Si tu veux les visualiser en local sur ton PC, je te suggère d'installer un serveur web local avec Wamp par exemple. Mais dans le cas présent, si tu le renomme en .html ça marche aussi. Il ne contient aucun code PHP.