Problème format de page
isabelleavanzini
Messages postés
6
Date d'inscription
Statut
Membre
Dernière intervention
-
isabelleavanzini Messages postés 6 Date d'inscription Statut Membre Dernière intervention -
isabelleavanzini Messages postés 6 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J'ai créé un site, sur mon ordinateur la taille est parfaite mais sur d'autres c'est complètement désordonné ou tout simplement décalé.
J'ai utilisé beaucoup de " position: absolute;
left: 718px;
top: 470px; "
Et j'ai bien suivi (je crois) le cours "Comment faire une page ayant la même hauteur que le navigateur ?" du site du zero à cette adresse "http://www.siteduzero.com/tutoriel-3-145147-comment-faire-une-page-ayant-la-meme-hauteur-que-le-navigateur.html".
Mais je ne vois toujours pas quelle est le problème.
Merci d'avance.
J'ai créé un site, sur mon ordinateur la taille est parfaite mais sur d'autres c'est complètement désordonné ou tout simplement décalé.
J'ai utilisé beaucoup de " position: absolute;
left: 718px;
top: 470px; "
Et j'ai bien suivi (je crois) le cours "Comment faire une page ayant la même hauteur que le navigateur ?" du site du zero à cette adresse "http://www.siteduzero.com/tutoriel-3-145147-comment-faire-une-page-ayant-la-meme-hauteur-que-le-navigateur.html".
Mais je ne vois toujours pas quelle est le problème.
Merci d'avance.
A voir également:
- Problème format de page
- Format epub - Guide
- Format factory - Télécharger - Conversion & Codecs
- Impossible de supprimer une page word - Guide
- Hp usb disk storage format tool - Télécharger - Stockage
- Format apfs - Guide
2 réponses
place ton code ici ainsi que le css
Développeur VB6, VBS, VBA, VB.NET, C#, HTML, PHP, JAVASCRIPT, SQL.
Développeur VB6, VBS, VBA, VB.NET, C#, HTML, PHP, JAVASCRIPT, SQL.
CODE HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="google-site-verification" content="Ra3QXFis5KYutj_iZgLfWz6qM5P4U3o_zcLrwN0VYMI" />
<title>IsabelleAvanzini</title>
<link href="WEBSITE.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script type="text/javascript" src="menu.js"></script>
<div id="en_tete">
<img src="../Images/BANNIERE.png" href="WEBSITE.html"/><!-- Ici on mettra la bannière -->
</div>
<div id="menufr">
<ul id="menu">
<li class="bouton_gauche"><a href="index.html">Accueil</a></li>
<li class="bouton_gauche"><a href="BIO.html"> Biographie </a> </li>
<li class="bouton_gauche"><a href="">Médiathèque</a>
<ul>
<li><a href="IMA.html">Images</a></li>
<li><a href="VID.html">Vidéos</a></li>
</ul>
</li>
<li class="bouton_droite"><a href="GAL.html">Galerie Achat</a>
</li>
<li class="bouton_droite"><a href="CONT.html">Contactez-moi</a></li>
</ul>
<!-- Ici on mettra le menu -->
</div>
<div id="corps">
<iframe src="https://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fisabelleavanzini.com<%3B%3Fphp echo urlencode(get_permalink($post->ID)); ?>&layout=standard&show_faces=false&width=450&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:25px"></iframe> <iframe id= "co" allowtransparency = "true" frameborder = "0" scrolling = "no"
src = "http://platform.twitter.com/widgets/tweet_button.html"
le style = "width: 130px; height: 50px;" > </iframe>
<h1>Actualité</h1> <script id="script" class="script"language="JavaScript" type="text/javascript">
<!--
//chemin vers les images
src = ["../Images/VOYr.jpg", "../Images/LUMV.jpg", "../Images/SYM.jpg", "../Images/AFRI.jpg"]
//temp de chaque image
duration = 3;
//ne rien toucher en dessous
ads=[]; ct=0;
function switchAd() {
var n=(ct+1)%src.length;
if (ads[n] && (ads[n].complete || ads[n].complete==null)) {
document["Ajout_Image"].src = ads[ct=n].src;
}
ads[n=(ct+1)%src.length] = new Image;
ads[n].src = src[n];
setTimeout("switchAd()",duration*1000);
}
function liens(){
location.href = url[ct];
} onload = function(){
if (document.images)
switchAd();
}
//-->
</script>
<div id="script" alt="script" align="">
<a onmouseover="status=url[ct];return true;" onmouseout="status=''">
<img class="Ajout_Image" name="Ajout_Image" src="../Images/VOYr.jpg" border="0" id="Ajout_Image"></a>
</div>
<ul id="CAKY">
<p>- 12 Juin 2011 - fest. des arts au jardin Faramine - expo et <br/>lecture poétique en cie de Saadi Younis Bahri (français et arabe) sur <br/>le thème "JARDINS" <br/>("au coeur du jardin d'IsA") - Entrée gratuite au sein du jardin mais<br/> "au chapeau" pour les artistes en animation<br/>
Regardez la vidéo sur Daylimotion <a href="https://www.dailymotion.com/video/xi17we">ICI</a>. <br/>
- Tournée lectures poétiques et musicales en région centre.<br/>
- AMBOISE du 2 au 17/06/2012 Salon d'Art "les écritures d'IsA".<br/>
- Proposition : Stage d'été inscriptions 0238440260 - <br/>Stage pour tous les âges au <br/>jardin ou bords de Loire afin d'échanger et partager entre générations en <br/>juillet ou août 2011. (travail sur la couleur et la matière)<br/>
</ul>
<ul id="CAK">
- Ateliers d'IsA en centres de loisirs (St Ay et Meung sur Loire) <br/>préparation Festival des Arts au Jardin 2012 avec les enfants <br/>inscrits aux ateliers.<br/>
- Projet : Salon méditerranéen de la poésie Montpellier 2012 en <br/>cie de Salih calligraphe<br/>
- Réalisation d'un livre poétique d'artistes traduit <br/>en arabe par Saadi Younis Bahri et calligraphié par Salih.
</ul>
</div>
<div id="pied_de_page">
Copyright © 2011-2012 Isabelle Avanzini . Tous droits réservés | Une création Grégory Avanzini
</div>
</body>
</html>
CODE CSS:
body{
margin: 0px;
padding: 0px;
outline: 0px;
background-image: url("../Images/ARRIERE2.png");
}
#en_tete, menufr, corps, pied_de_page{
background-color : rgb(178, 26, 99);
height: 100%;
width: 100%;
}
menufr{
background-color : #f5f5f5;
}
#menu, #menu ul /* Liste */
{
padding : 0; /* pas de marge intérieure */
margin : 0; /* ni extérieure */
list-style : none; /* on supprime le style par défaut de la liste */
line-height : 21px; /* on définit une hauteur pour chaque élément */
text-align : center; /* on centre le texte qui se trouve dans la liste */
}
#menu /* Ensemble du menu */
{
font-weight : bold; /* on met le texte en gras */
font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
font-size : 12px; /* hauteur du texte : 12 pixels */
position: absolute;
left: 4px;
top: 165px;
border : 3px solid black;
}
#menu a /* Contenu des listes */
{
display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
padding : 0; /* aucune marge intérieure */
background : #f5f5f5; /* couleur de fond */
color : black; /* couleur du texte */
text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
width : 144px; /* largeur */
}
#menu li /* Elements des listes */
{
float : left;
/* pour IE qui ne reconnaît pas "transparent" */
border-right : 1px solid #fff; /* on met une bordure blanche à droite de chaque élément */
}
/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li
{
border-right: 1px solid black ; /* on met une bordure transparente à droite de chaque élément */
}
#menu li ul /* Sous-listes */
{
position: absolute; /* Position absolue */
width: 144px; /* Largeur des sous-listes */
left: -999em; /* Hop, on envoie loin du champ de vision */
background-color : #f5f5f5;
}
#menu li ul li /* Éléments de sous-listes */
{
/* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
background-color : #f5f5f5; /* on met une bordure blanche en haut de chaque élément d'une sous liste */
}
/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li ul li
{
border : 1px solid black;
border-top : 1px solid black;
}
#menu li ul ul
{
margin : -22px 0 0 144px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */
/* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
border-left: 1px solid #fff ; /* Petite bordure à gauche pour ne pas coller ... */
}
/* IE ne reconnaissant pas le sélecteur ">" ... je me répète ;-) */
html>body #menu li ul ul
{
border-left : 1px solid black ; /* on met une bordure transparente sur la gauche de chaque élément */
}
iframe
{
float : right;
position: absolute;
left: 718px;
top: 470px;
}
p{
text-align : left;
padding : 20px;
font-size : large;
font :"Trebuchet MS", "Arial Black", Arial, Verdana, serif;
}
h1{
text-align : left;
padding : 10px;
position: absolute;
left: 100px;
top: 190px;
}
h7{
padding : 5px;
text-decoration: underline;
}
#pied_de_page{
color : black;
text-align : center;
background-color : rgb(182, 40, 99);
position: absolute;
left: 370px;
top: 650px;
}
a:visited
{
color : black;
}
a{
color : black;
}
a:hover
{
color: rgb(232, 162, 43)
}
ul#menu a:hover{
color : rgb(232, 162, 43)
}
iframe#co{
float : right;
position: absolute;
left: 610px;
top: 470px;
}
.Ajout_Image{
position: absolute;
left: 1164px;
top: 212px;
}
ul#CAK{
font-size : large;
position: absolute;
left: 570px;
top: 287px;
}
ul#CAKY{
font-size : large;
position: absolute;
left: 0px;
top: 250px;
}
#menu li:hover ul, #nav li.sfhover ul {
left: auto;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="google-site-verification" content="Ra3QXFis5KYutj_iZgLfWz6qM5P4U3o_zcLrwN0VYMI" />
<title>IsabelleAvanzini</title>
<link href="WEBSITE.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script type="text/javascript" src="menu.js"></script>
<div id="en_tete">
<img src="../Images/BANNIERE.png" href="WEBSITE.html"/><!-- Ici on mettra la bannière -->
</div>
<div id="menufr">
<ul id="menu">
<li class="bouton_gauche"><a href="index.html">Accueil</a></li>
<li class="bouton_gauche"><a href="BIO.html"> Biographie </a> </li>
<li class="bouton_gauche"><a href="">Médiathèque</a>
<ul>
<li><a href="IMA.html">Images</a></li>
<li><a href="VID.html">Vidéos</a></li>
</ul>
</li>
<li class="bouton_droite"><a href="GAL.html">Galerie Achat</a>
</li>
<li class="bouton_droite"><a href="CONT.html">Contactez-moi</a></li>
</ul>
<!-- Ici on mettra le menu -->
</div>
<div id="corps">
<iframe src="https://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fisabelleavanzini.com<%3B%3Fphp echo urlencode(get_permalink($post->ID)); ?>&layout=standard&show_faces=false&width=450&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:25px"></iframe> <iframe id= "co" allowtransparency = "true" frameborder = "0" scrolling = "no"
src = "http://platform.twitter.com/widgets/tweet_button.html"
le style = "width: 130px; height: 50px;" > </iframe>
<h1>Actualité</h1> <script id="script" class="script"language="JavaScript" type="text/javascript">
<!--
//chemin vers les images
src = ["../Images/VOYr.jpg", "../Images/LUMV.jpg", "../Images/SYM.jpg", "../Images/AFRI.jpg"]
//temp de chaque image
duration = 3;
//ne rien toucher en dessous
ads=[]; ct=0;
function switchAd() {
var n=(ct+1)%src.length;
if (ads[n] && (ads[n].complete || ads[n].complete==null)) {
document["Ajout_Image"].src = ads[ct=n].src;
}
ads[n=(ct+1)%src.length] = new Image;
ads[n].src = src[n];
setTimeout("switchAd()",duration*1000);
}
function liens(){
location.href = url[ct];
} onload = function(){
if (document.images)
switchAd();
}
//-->
</script>
<div id="script" alt="script" align="">
<a onmouseover="status=url[ct];return true;" onmouseout="status=''">
<img class="Ajout_Image" name="Ajout_Image" src="../Images/VOYr.jpg" border="0" id="Ajout_Image"></a>
</div>
<ul id="CAKY">
<p>- 12 Juin 2011 - fest. des arts au jardin Faramine - expo et <br/>lecture poétique en cie de Saadi Younis Bahri (français et arabe) sur <br/>le thème "JARDINS" <br/>("au coeur du jardin d'IsA") - Entrée gratuite au sein du jardin mais<br/> "au chapeau" pour les artistes en animation<br/>
Regardez la vidéo sur Daylimotion <a href="https://www.dailymotion.com/video/xi17we">ICI</a>. <br/>
- Tournée lectures poétiques et musicales en région centre.<br/>
- AMBOISE du 2 au 17/06/2012 Salon d'Art "les écritures d'IsA".<br/>
- Proposition : Stage d'été inscriptions 0238440260 - <br/>Stage pour tous les âges au <br/>jardin ou bords de Loire afin d'échanger et partager entre générations en <br/>juillet ou août 2011. (travail sur la couleur et la matière)<br/>
</ul>
<ul id="CAK">
- Ateliers d'IsA en centres de loisirs (St Ay et Meung sur Loire) <br/>préparation Festival des Arts au Jardin 2012 avec les enfants <br/>inscrits aux ateliers.<br/>
- Projet : Salon méditerranéen de la poésie Montpellier 2012 en <br/>cie de Salih calligraphe<br/>
- Réalisation d'un livre poétique d'artistes traduit <br/>en arabe par Saadi Younis Bahri et calligraphié par Salih.
</ul>
</div>
<div id="pied_de_page">
Copyright © 2011-2012 Isabelle Avanzini . Tous droits réservés | Une création Grégory Avanzini
</div>
</body>
</html>
CODE CSS:
body{
margin: 0px;
padding: 0px;
outline: 0px;
background-image: url("../Images/ARRIERE2.png");
}
#en_tete, menufr, corps, pied_de_page{
background-color : rgb(178, 26, 99);
height: 100%;
width: 100%;
}
menufr{
background-color : #f5f5f5;
}
#menu, #menu ul /* Liste */
{
padding : 0; /* pas de marge intérieure */
margin : 0; /* ni extérieure */
list-style : none; /* on supprime le style par défaut de la liste */
line-height : 21px; /* on définit une hauteur pour chaque élément */
text-align : center; /* on centre le texte qui se trouve dans la liste */
}
#menu /* Ensemble du menu */
{
font-weight : bold; /* on met le texte en gras */
font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
font-size : 12px; /* hauteur du texte : 12 pixels */
position: absolute;
left: 4px;
top: 165px;
border : 3px solid black;
}
#menu a /* Contenu des listes */
{
display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
padding : 0; /* aucune marge intérieure */
background : #f5f5f5; /* couleur de fond */
color : black; /* couleur du texte */
text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
width : 144px; /* largeur */
}
#menu li /* Elements des listes */
{
float : left;
/* pour IE qui ne reconnaît pas "transparent" */
border-right : 1px solid #fff; /* on met une bordure blanche à droite de chaque élément */
}
/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li
{
border-right: 1px solid black ; /* on met une bordure transparente à droite de chaque élément */
}
#menu li ul /* Sous-listes */
{
position: absolute; /* Position absolue */
width: 144px; /* Largeur des sous-listes */
left: -999em; /* Hop, on envoie loin du champ de vision */
background-color : #f5f5f5;
}
#menu li ul li /* Éléments de sous-listes */
{
/* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
background-color : #f5f5f5; /* on met une bordure blanche en haut de chaque élément d'une sous liste */
}
/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li ul li
{
border : 1px solid black;
border-top : 1px solid black;
}
#menu li ul ul
{
margin : -22px 0 0 144px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */
/* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
border-left: 1px solid #fff ; /* Petite bordure à gauche pour ne pas coller ... */
}
/* IE ne reconnaissant pas le sélecteur ">" ... je me répète ;-) */
html>body #menu li ul ul
{
border-left : 1px solid black ; /* on met une bordure transparente sur la gauche de chaque élément */
}
iframe
{
float : right;
position: absolute;
left: 718px;
top: 470px;
}
p{
text-align : left;
padding : 20px;
font-size : large;
font :"Trebuchet MS", "Arial Black", Arial, Verdana, serif;
}
h1{
text-align : left;
padding : 10px;
position: absolute;
left: 100px;
top: 190px;
}
h7{
padding : 5px;
text-decoration: underline;
}
#pied_de_page{
color : black;
text-align : center;
background-color : rgb(182, 40, 99);
position: absolute;
left: 370px;
top: 650px;
}
a:visited
{
color : black;
}
a{
color : black;
}
a:hover
{
color: rgb(232, 162, 43)
}
ul#menu a:hover{
color : rgb(232, 162, 43)
}
iframe#co{
float : right;
position: absolute;
left: 610px;
top: 470px;
}
.Ajout_Image{
position: absolute;
left: 1164px;
top: 212px;
}
ul#CAK{
font-size : large;
position: absolute;
left: 570px;
top: 287px;
}
ul#CAKY{
font-size : large;
position: absolute;
left: 0px;
top: 250px;
}
#menu li:hover ul, #nav li.sfhover ul {
left: auto;
}