Rechercher : dans
Par :

Comment positionner ma barre de défilement

Dernière réponse le 30 sep 2009 à 10:47:34 gaya_102, le 29 sep 2009 à 22:33:43 
 Signaler ce message aux modérateurs

Bonjour,
http://www.lemondedegaya.fr/produit.php

Voila je voudrais que la barre de droite mias pas celle du bas. Comment je peux faire?
Merci d'avance pour votre aide


li
{display:inline;}

.centreX
{
	position:absolute;
	left:50%;
	margin-left:-500px;
	width: 1000px;
	top:50%;
	margin-top:-276px;
	height: 552px;
	background-image : url("images/fond_page2.JPG");
	background-repeat: no-repeat;
	border :2px solid black;
	font-style: italic;
		font-family:comic sans ms, Times New Roman, Times, serif;

}
body {
	background-color: #f7d8fc;
		font-family:comic sans ms, Times New Roman, Times, serif;
	font-style: italic;}
	
	span.titre {
color: #b04cbf;

	font-size: 33px;
	text-decoration: none;
	text-align: center;
	position:absolute;
	top: 10px;
	left : 230px;
	font-style: italic;

}

a {
	color: #781d89;
font-style: italic;
	font-size: 17px;
	text-decoration: none;
	text-align: center;
} 

a:hover {
    color: #e365f6;

	font-size: 17px;
	text-decoration: none;
	text-align: center;
	font-style: italic;
}

span.slogan {
color: #7890d2;

	font-size: 17px;
	text-decoration: none;
	text-align: right;
	position:absolute;
	top: 70px;
	left: 582px;
	font-style: italic;
	margin-right:5px;
	}
	
	h1
	{
	font-size: 17px;

text-align:left;
text-decoration: underline ;
position:absolute;
top: 15px;
left:230px;
color: #7890d2;
	font-style: italic;
}
	
	
#menuHorizon {
font-size: 13px;
float:right;
margin-top:110px;
padding-left:0;
padding-right:20px;
font-style: italic;

}

#header p.texte {
margin:0px;
}
#menuHorizon li {
display:inline;
height:400px;
line-height:26px;
vertical-align:top;
left:100px;
}



.menuG {
position: relative;
	float:left;
	width:165px;
	height:390px;
	top: 250px;
		text-align: center;
	font-size: 10px;
			font-family:comic sans ms, Times New Roman, Times, serif;

	}
	
	table
{
margin: auto; /* Centre le tableau */
position: relative;
top: 50px;
   border-collapse: separate; /* Les bordures du tableau seront pas collées */
  left:20px;
 
  width:780px;
}
td
{
text-align: center; /* Tous les textes des cellules seront centrés*/
   border: 0px solid black;
}

.fenetre{
overflow: auto;
position:absolute;
  width:770px;

  top: 150px;
  left: 225px;
}

																						/* page produit*/

h2{
text-align: center; /* Pour centrer le titre */
margin-right:15px;
margin-left:5px;
font-size: 15px;
}

h3{

color: #7890d2;
font-size: 15px;
margin: 0;
}



<!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" xml:lang="fr" lang="fr">
<head>
<title>La collection faire-part mariage - le monde de gaya</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1;" />
<meta name="description" content="Vos faire-part de naissance, mariage, remerciements, stickers et tableaux personnalisés qui vous correspondent le mieux ... Aide pour vos événements : mariage/pacs, communion, anniversaire ..." />
<meta http-equiv="content-language" content="fr, en" />
<meta name="author" content="Thaon Sandrine" />
<link rel="shortcut icon" type="image/x-icon" href="gaya_files/favicon0.htm" />
<link rel="stylesheet" href="page4.css" type="text/css" media="all" />
</head>
<body>
<div class="centreX">
	<div id="header">
		<p class="texte"><strong><span class="titre">Le monde de Gaya</span> <span class="slogan">Faire-part de mariage originaux et personnalisés.</span></strong></p>
	
					<?php
include("menu.php");
?>
	
	</div>
	<div id="content">

		<ul class="menuG">
			<li><a class="gauche" href="http://www.lemondedegaya.fr/collection.php">La collection</a></li><br><br>
			<li><a class="gauche" href="http://www.lemondedegaya.fr/format.php">Les formats</a></li><br><br>
			<li><a class="gauche" href="http://www.lemondedegaya.fr/papiers.php">Les papiers</a></li><br><br>
			<li><a class="gauche" href="http://www.lemondedegaya.fr/textes.php">Idées de textes</a></li><br><br>
			<li><a class="gauche" href="http://www.lemondedegaya.fr/conditions.php">Conditions générales de ventes</a> </li>
		</ul>
		<div class="fenetre">
<br>
			<h1>La collection de faire-part de mariage </h1>
			
			<table>
   <tr>
       <td><img src="images/oui_devant_moyenne.jpg" alt="" width="230" height="163" /></a></td>
       <td><h2>Faire part dans la simplicité et le rafinement s'ouvrant horizontalement <br>
	   (Le texte à imprimer est personnalisable)</h2></td>
       
   </tr>
   
</table>
<br>
<table>
   <tr>
       <td></td>
       <td>105*148</td>
       <td>135*135</td>
       <td>160*160</td>
	   <td></td>

   </tr>
    
   <tr>
       
	   <td><h3>Papier blanc mat</h3></td>
       <td><strike>1€60</strike>&nbsp;&nbsp;&nbsp;1€45</td>
       <td><strike>1€85</strike>&nbsp;&nbsp;&nbsp;1€65</td>
       <td><strike>1€9</strike>&nbsp;&nbsp;&nbsp;1€75</td>
	   <td></td>
   </tr>
   <tr>
   
       <td><h3>Papier blanc iridescent</h3></td>
       <td><strike>1€70</strike>&nbsp;&nbsp;&nbsp;1€50</td>
       <td><strike>1€95</strike>&nbsp;&nbsp;&nbsp;1€80</td>
       <td><strike>2€10</strike>&nbsp;&nbsp;&nbsp;1€95</td>
	   <td width="100"></td>
   </tr>
</table>

			
			
		</div>
	</div>

</div>
</body>
</html>
Configuration: Windows XP
Firefox 3.0

1

kiki339, le 29 sep 2009 à 22:35:29

Redimensionne ton cadre

Répondre à kiki339

2

gaya_102, le 29 sep 2009 à 22:41:30

Ca marche pas

.fenetre{
overflow: auto;
position:absolute;
width:780px;
height: 700px;
top: 150px;
left: 225px;
}

les deux barres on complètement disparu et tout dépasse du cadre

Répondre à gaya_102

3

kiki339, le 29 sep 2009 à 22:52:21

Peut etre en changeant les valeurs

Snn supprime le et crée en un otre

Dsl de pa plus pouvoir taider

Bonne Nuit

Répondre à kiki339

4

gaya_102, le 30 sep 2009 à 10:20:47

J'ai dais des modifications mais rien n'y fais. Avez vous une idée?

<!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" xml:lang="fr" lang="fr">
<head>
<title>La collection faire-part mariage - le monde de gaya</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1;" />
<meta name="description" content="Vos faire-part de naissance, mariage, remerciements, stickers et tableaux personnalisés qui vous correspondent le mieux ... Aide pour vos événements : mariage/pacs, communion, anniversaire ..." />
<meta http-equiv="content-language" content="fr, en" />
<meta name="author" content="Thaon Sandrine" />
<link rel="shortcut icon" type="image/x-icon" href="gaya_files/favicon0.htm" />
<link rel="stylesheet" href="page4.css" type="text/css" media="all" />
</head>
<body>
<div class="centreX">
	<div id="header">
		<p class="texte"><strong><span class="titre">Le monde de Gaya</span> <span class="slogan">Faire-part de mariage originaux et personnalisés.</span></strong></p>
	
					<?php
include("menu.php");
?>
	
	</div>
	<div id="content">

		<ul class="menuG">
			<li><a class="gauche" href="http://www.lemondedegaya.fr/collection.php">La collection</a></li><br><br>
			<li><a class="gauche" href="http://www.lemondedegaya.fr/format.php">Les formats</a></li><br><br>
			<li><a class="gauche" href="http://www.lemondedegaya.fr/papiers.php">Les papiers</a></li><br><br>
			<li><a class="gauche" href="http://www.lemondedegaya.fr/textes.php">Idées de textes</a></li><br><br>
			<li><a class="gauche" href="http://www.lemondedegaya.fr/conditions.php">Conditions générales de ventes</a> </li>
		</ul>
		<div class="fenetre">
<br>
			<h1>La collection de faire-part de mariage </h1>
			
			<table>
   <tr>
       <td><img src="images/oui_devant_moyenne.jpg" alt="" width="230" height="163" /></a></td>
       <td><h2>Faire part dans la simplicité et le rafinement s'ouvrant horizontalement <br>
	   (Le texte à imprimer est personnalisable)</h2></td>
       
   </tr>
   
</table>
<br>
<table>
   <tr>
       <td></td>
       <td>105*148</td>
       <td>135*135</td>
       <td>160*160</td>
	   

   </tr>
    
   <tr>
       
	   <td><h3>Papier blanc mat</h3></td>
       <td><strike>1€60</strike>&nbsp;&nbsp;&nbsp;1€45</td>
       <td><strike>1€85</strike>&nbsp;&nbsp;&nbsp;1€65</td>
       <td><strike>1€9</strike>&nbsp;&nbsp;&nbsp;1€75</td>
	   
   </tr>
   <tr>
   
       <td><h3>Papier blanc iridescent</h3></td>
       <td><strike>1€70</strike>&nbsp;&nbsp;&nbsp;1€50</td>
       <td><strike>1€95</strike>&nbsp;&nbsp;&nbsp;1€80</td>
       <td><strike>2€10</strike>&nbsp;&nbsp;&nbsp;1€95</td>
	   
   </tr>
</table>

			<table>
   <tr>
       <td></td>
       <td>105*148</td>
       <td>135*135</td>
       <td>160*160</td>
	   

   </tr>
    
   <tr>
       
	   <td><h3>Papier blanc mat</h3></td>
       <td><strike>1€60</strike>&nbsp;&nbsp;&nbsp;1€45</td>
       <td><strike>1€85</strike>&nbsp;&nbsp;&nbsp;1€65</td>
       <td><strike>1€9</strike>&nbsp;&nbsp;&nbsp;1€75</td>
	   
   </tr>
   <tr>
   
       <td><h3>Papier blanc iridescent</h3></td>
       <td><strike>1€70</strike>&nbsp;&nbsp;&nbsp;1€50</td>
       <td><strike>1€95</strike>&nbsp;&nbsp;&nbsp;1€80</td>
       <td><strike>2€10</strike>&nbsp;&nbsp;&nbsp;1€95</td>
	   
   </tr>
</table>
<table>
   <tr>
       <td></td>
       <td>105*148</td>
       <td>135*135</td>
       <td>160*160</td>
	   

   </tr>
    
   <tr>
       
	   <td><h3>Papier blanc mat</h3></td>
       <td><strike>1€60</strike>&nbsp;&nbsp;&nbsp;1€45</td>
       <td><strike>1€85</strike>&nbsp;&nbsp;&nbsp;1€65</td>
       <td><strike>1€9</strike>&nbsp;&nbsp;&nbsp;1€75</td>
	   
   </tr>
   <tr>
   
       <td><h3>Papier blanc iridescent</h3></td>
       <td><strike>1€70</strike>&nbsp;&nbsp;&nbsp;1€50</td>
       <td><strike>1€95</strike>&nbsp;&nbsp;&nbsp;1€80</td>
       <td><strike>2€10</strike>&nbsp;&nbsp;&nbsp;1€95</td>
	   
   </tr>
</table>
			
		</div>
	</div>

</div>
</body>
</html>



li
{display:inline;}

.centreX
{
	position:absolute;
	left:50%;
	margin-left:-500px;
	width: 1000px;
	top:50%;
	margin-top:-276px;
	height: 552px;
	background-image : url("images/fond_page2.JPG");
	background-repeat: no-repeat;
	border :2px solid black;
	font-style: italic;
		font-family:comic sans ms, Times New Roman, Times, serif;

}
body {
	background-color: #f7d8fc;
		font-family:comic sans ms, Times New Roman, Times, serif;
	font-style: italic;}
	
	span.titre {
color: #b04cbf;

	font-size: 33px;
	text-decoration: none;
	text-align: center;
	position:absolute;
	top: 10px;
	left : 230px;
	font-style: italic;

}

a {
	color: #781d89;
font-style: italic;
	font-size: 17px;
	text-decoration: none;
	text-align: center;
} 

a:hover {
    color: #e365f6;

	font-size: 17px;
	text-decoration: none;
	text-align: center;
	font-style: italic;
}

span.slogan {
color: #7890d2;

	font-size: 17px;
	text-decoration: none;
	text-align: right;
	position:absolute;
	top: 70px;
	left: 582px;
	font-style: italic;
	margin-right:5px;
	}
	
	h1
	{
	font-size: 17px;

text-align:left;
text-decoration: underline ;
position:absolute;
top: 15px;
left:230px;
color: #7890d2;
	font-style: italic;
}
	
	
#menuHorizon {
font-size: 13px;
float:right;
margin-top:110px;
padding-left:0;
padding-right:20px;
font-style: italic;

}

#header p.texte {
margin:0px;
}
#menuHorizon li {
display:inline;
height:400px;
line-height:26px;
vertical-align:top;
left:100px;
}



.menuG {
position: relative;
	float:left;
	width:165px;
	height:390px;
	top: 250px;
	text-align: center;
	font-family:comic sans ms, Times New Roman, Times, serif;

	}
	
	.fenetre{
overflow: auto;
position:absolute;
  width:775px;

  top: 150px;
  left: 225px;
}
	
	table
{
margin: auto; /* Centre le tableau */
position: relative;
top: 50px;
   
  left:20px;
 
  width:705px;
}
td
{
text-align: center; /* Tous les textes des cellules seront centrés*/
   border: 0px solid black;
}



																						/* page produit*/

h2{
text-align: center; /* Pour centrer le titre */
margin-right:15px;
margin-left:5px;
font-size: 15px;
}

h3{

color: #7890d2;
font-size: 15px;
margin: 0;
}

Répondre à gaya_102

5

RAD ZONE, le 30 sep 2009 à 10:43:21

SALUT

pour bien faire il faudrait reprendre toute la mise en page ! ;-))

mais pour essayer de regler en bidouillant un peu ! rajoute un

height : 402px ;
dans le css , a la "class" fenetre

a+
♣  La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣

Répondre à RAD ZONE

6

 gaya_102, le 30 sep 2009 à 10:47:34

J'avais essayer mais j'ai du me tromper sur les dimensions.
La c'est parfait sauf que je ne voudrais pas cette barre en bas. Par contre elle n'y ai pas sur IE. Comment je peux faire pour l'enlever sous firefox?.
En tout cas merci de ton aide

Répondre à gaya_102