Probleme d'affichage
takumi
-
takumi -
takumi -
Bonjour,
Voila je voudrais mettre une image a droite et a gauche de mon site pour cela je le fait avec css
.fond_img_gauche {
position:absolute;
left: 0;
top: 0;
bottom:0;
width: 173px;
background-image: url("...") ;
background-repeat:repeat-y;
background-attachment:fixed;
}
.fond_img_droite {
position:absolute;
right: 0%;
top: 0%;
width: 157px;
height: 100%;
background-image: url("...") ;
}
et apres les balise <body> je met les bamise
<body>
<div class="fond_img_gauche"></div>
<div class="fond_img_droite"></div>
et apres seulement j'affiche mon site (avec d'autre balise div)
voila sa marche tres bien mais quand j'ai une page plus grande que la page qui s'affiche au debut ben quand je descend les image s'efface de coté comment je pourrai faire pour les gardé afficher.
Voila pour cela je vous montre se que j'ai essayé aussi (c'est pour cela que les deux parti du code sont different)
J'espere que vous pourrez m'aidé.
++
Voila je voudrais mettre une image a droite et a gauche de mon site pour cela je le fait avec css
.fond_img_gauche {
position:absolute;
left: 0;
top: 0;
bottom:0;
width: 173px;
background-image: url("...") ;
background-repeat:repeat-y;
background-attachment:fixed;
}
.fond_img_droite {
position:absolute;
right: 0%;
top: 0%;
width: 157px;
height: 100%;
background-image: url("...") ;
}
et apres les balise <body> je met les bamise
<body>
<div class="fond_img_gauche"></div>
<div class="fond_img_droite"></div>
et apres seulement j'affiche mon site (avec d'autre balise div)
voila sa marche tres bien mais quand j'ai une page plus grande que la page qui s'affiche au debut ben quand je descend les image s'efface de coté comment je pourrai faire pour les gardé afficher.
Voila pour cela je vous montre se que j'ai essayé aussi (c'est pour cela que les deux parti du code sont different)
J'espere que vous pourrez m'aidé.
++
A voir également:
- Probleme d'affichage
- Affichage double ecran - Guide
- Problème affichage fenêtre windows 10 - Guide
- Problème affichage page internet google chrome ✓ - Forum Google Chrome
- Windows 11 affichage classique - Guide
- Problème d'affichage/bugs graphiques sur Chrome sur Android - Forum Téléphones & tablettes Android
7 réponses
Bonjour,
Il faut voir à gérer les "height" également.
Mais il faudrait voir tout le fichier htm et css pour vérifier et trouver une solution.
A l'aveugle c'est plus compliqué.
Bonne journée,
Il faut voir à gérer les "height" également.
Mais il faudrait voir tout le fichier htm et css pour vérifier et trouver une solution.
A l'aveugle c'est plus compliqué.
Bonne journée,
oki je veux bien te le filé mais pas ici si tu veux envoi moi un mail et je t'envoi mon html le fichier css il y a pas de prob.
et si je modif les height sa marche pas car si je met une longueur qui est trop grande ben sur les page ou il y a moins le décors et plus long donc voila alors c'est le probleme inverse ^^
et si je modif les height sa marche pas car si je met une longueur qui est trop grande ben sur les page ou il y a moins le décors et plus long donc voila alors c'est le probleme inverse ^^
Voila mon code html
<html>
<head>
<LINK REL="stylesheet" HREF="style.css" TYPE="text/css">
</head>
<body background="http://www.imageshotel.org/images/Ryosuke67/imgcentre.jpg">
<div class="fond_img_gauche"></div>
<div class="fond_img_droite"></div>
<div id="cadrepage">
<div id="entete">
<center>
<H1>Project Racing</H1>
</center>
</div>
<div id="cadre">
<div id="menu">
<?php include ("liensnav_index.php");?>
</div>
<div id="conteneur"><!--hauteur min celle du menu -->
<table>
<form action="login.php" method="POST">
<tr>
<td bgcolor="#C0C0C0" colspan="2">Connection</td>
</tr>
<tr>
<td>Nom :</td>
<td><input type="text" name="nom"></td>
</tr>
<tr>
<td>Mot de passe :</td>
<td><input type="password" name="mdp"></td>
</tr>
<tr>
<td><input name=Modifier value="Connection" type=submit></td>
</form>
</table>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
</div>
<?php include ("pied_page.php");?>
</div>
</body>
</html>
et voici mon css
<style type="text/css">
<!--
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
padding: 0px;
margin: 0px;
} h2,h3 {
margin-top: 0px;
padding-top: 0px;
}
div#entete {
left:0px;
width:800px;
height:90;
top: 10px;
position: absolute;
background-color: #808080;
}
div#cadrepage {
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
position:relative;
margin-left:auto;
margin-right:auto;
top: 20px;
width:800px;
background-color: #DDDDDD;
bottom: 10px;
}
div#cadre {
width: 800px;
position: relative;
top: 150px;
}
div#menu {
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
position:absolute;
left:0px;
width:150px;
top: 0px;
background-color: #C0C0C0;
}
div#titremenu{
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
position:absolute;
left:0px;
width:150px;
background-color: #969696;
}
.menuliste li {
margin-bottom: 5px;
margin-left: 5px;
}
div#listemenu {
position:relative;
left:0px;
width:150px;
}
div#conteneur {
width: 640px;
position: static;
margin-top: 1px;
margin-left: 160px;
}
div#pieddepage {
width: 800px;
clear: both;
position: relative;
margin-top: 200px;
}
.fond_img_gauche {
position:absolute;
left: 0%;
top: 0%;
height:200%;
width: 173px;
background-image: url("http://www.imageshotel.org/images/Ryosuke67/imggauche.jpg") ;
background-repeat:repeat-y;
background-attachment:fixed;
}
.fond_img_droite {
position:absolute;
right: 0%;
top: 0%;
width: 147px;
height: 200%;
background-image: url("http://www.imageshotel.org/images/Ryosuke67/imgdroite.jpg") ;
background-attachment:fixed;
}
p {margin: 0 0 10px 0;}
a:link{text-decoration:none;color:#0033FF;}
a:visited{text-decoration:none;color:#0033FF;}
a:hover{text-decoration:none;font-weight:bold;color:#0033FF;}
-->
</style>
Voila j'espere que quelqu'un pourrai m'aidé a faire cela
MERCI et bonne journée a tous
<html>
<head>
<LINK REL="stylesheet" HREF="style.css" TYPE="text/css">
</head>
<body background="http://www.imageshotel.org/images/Ryosuke67/imgcentre.jpg">
<div class="fond_img_gauche"></div>
<div class="fond_img_droite"></div>
<div id="cadrepage">
<div id="entete">
<center>
<H1>Project Racing</H1>
</center>
</div>
<div id="cadre">
<div id="menu">
<?php include ("liensnav_index.php");?>
</div>
<div id="conteneur"><!--hauteur min celle du menu -->
<table>
<form action="login.php" method="POST">
<tr>
<td bgcolor="#C0C0C0" colspan="2">Connection</td>
</tr>
<tr>
<td>Nom :</td>
<td><input type="text" name="nom"></td>
</tr>
<tr>
<td>Mot de passe :</td>
<td><input type="password" name="mdp"></td>
</tr>
<tr>
<td><input name=Modifier value="Connection" type=submit></td>
</form>
</table>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
</div>
<?php include ("pied_page.php");?>
</div>
</body>
</html>
et voici mon css
<style type="text/css">
<!--
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
padding: 0px;
margin: 0px;
} h2,h3 {
margin-top: 0px;
padding-top: 0px;
}
div#entete {
left:0px;
width:800px;
height:90;
top: 10px;
position: absolute;
background-color: #808080;
}
div#cadrepage {
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
position:relative;
margin-left:auto;
margin-right:auto;
top: 20px;
width:800px;
background-color: #DDDDDD;
bottom: 10px;
}
div#cadre {
width: 800px;
position: relative;
top: 150px;
}
div#menu {
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
position:absolute;
left:0px;
width:150px;
top: 0px;
background-color: #C0C0C0;
}
div#titremenu{
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
position:absolute;
left:0px;
width:150px;
background-color: #969696;
}
.menuliste li {
margin-bottom: 5px;
margin-left: 5px;
}
div#listemenu {
position:relative;
left:0px;
width:150px;
}
div#conteneur {
width: 640px;
position: static;
margin-top: 1px;
margin-left: 160px;
}
div#pieddepage {
width: 800px;
clear: both;
position: relative;
margin-top: 200px;
}
.fond_img_gauche {
position:absolute;
left: 0%;
top: 0%;
height:200%;
width: 173px;
background-image: url("http://www.imageshotel.org/images/Ryosuke67/imggauche.jpg") ;
background-repeat:repeat-y;
background-attachment:fixed;
}
.fond_img_droite {
position:absolute;
right: 0%;
top: 0%;
width: 147px;
height: 200%;
background-image: url("http://www.imageshotel.org/images/Ryosuke67/imgdroite.jpg") ;
background-attachment:fixed;
}
p {margin: 0 0 10px 0;}
a:link{text-decoration:none;color:#0033FF;}
a:visited{text-decoration:none;color:#0033FF;}
a:hover{text-decoration:none;font-weight:bold;color:#0033FF;}
-->
</style>
Voila j'espere que quelqu'un pourrai m'aidé a faire cela
MERCI et bonne journée a tous
Vu ton css ce sont les backgrounds de tes div qui sont fixed. pas les div eux meme... Normal que les images disparaissent en descendant l'ascenseur.
Change "position:absolute;"
en "position:fixed;"
Change "position:absolute;"
en "position:fixed;"
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question