Barre de défilement horizontale trop longue

05 avr. 2010, 17:28

Je viens de positionner quelques éléments de mon design via CSS et j'ai remarqué que depuis la barre de défilement horizontale est trop longue par rapport à ce qui est affiché à l'écran...
Voyez plutôt: http://e-storia.info/design.php
D'où cela peut provenir ?
Je vous montre ma feuille de style, j'espère que ce sera suffisant pour que vous puissiez m'aider

Code : Tout sélectionner

/* CSS sur les balises */

body
{
	width: 960px;
	margin: auto;
	margin-top: 15px; 
	margin-bottom: 15px;
	font-family: "Trebuchet MS", serif;
	font-size: 16px;
	background-image: url("background-newspaper.gif");
}

a
{
	text-decoration: none;
}

/* Blocks composants le design */

#menu-haut
{
	width: 960px;
	height: 30px;
}

#banniere
{
	width: 960px;
	height: 150px;
	background-image: url("banniere2.jpg");
	background-repeat: no-repeat;
}

#menu-bas
{
	width: 960px;
	height: 47px;
	background-image: url("recherche.png");
	background-repeat: no-repeat;
}

#corps-haut
{
	width: 960px;
	height: 47px;
	text-align: right;
}

#corps
{
	width: 940px;
	padding: 8px;
	border: 2px solid #000000;
	background-color: #ffffff;
}

/* Espace membre */

.avatar
{
	position: relative;
	left: 650px;
	top: 25px;
}

/* Espace membre : non-connecté */

.pseudo
{
	position: relative;
	left: 768px;
	bottom: 98px;
}

.mdp
{
	position: relative;
	left: 768px;
	bottom: 103px;
}

.connexion_auto
{
	position: relative;
	left: 764px;
	bottom: 111px;
}

.connexion_auto_label
{
	color: #ffffff;
	font-size: 13px;
	position: relative;
	bottom: 2px;
}

.go
{
	position: relative;
	left: 917px;
	bottom: 213px;
}

.lien_connexion
{
	color: #ffffff;
	font-size: 13px;
	position: relative;
	left: 765px;
	bottom: 193px;
}

.lien_connexion2
{
	color: #ffffff;
}

/* Espace membre : connecté */

.pseudo
{
	color: #ffffff;
}

/* Formulaire de recherche (menu-bas) */

.formulaire_recherche
{
	position: relative;
	top: 9px;
	left: 14px;
}

.formulaire_recherche_select
{
	font-family: "Trebuchet MS", serif;
	font-weight: bold;
	font-size: 15px;
   	border: 2px solid #ffffff;
	background-color: #000000;
	color: #ffffff;
}

.formulaire_recherche_input
{
	font-family: "Trebuchet MS", serif;
	font-weight: bold;
	font-size: 15px;
	border: 2px solid #ffffff;
	background-color: #000000;
	color: #ffffff;
}

.formulaire_recherche_submit
{
	font-family: "Trebuchet MS", serif;
	font-weight: bold;
	font-size: 15px;
}

05 avr. 2010, 17:54

Je vois pas. Mais dans ces cas là, je supprime ou je mets en commentaires certaines règles de style pour voir d'où vient le problème.

05 avr. 2010, 18:25

apparemment ca vient des styles ci-dessous. Le problème c'est que si je remplace les relative par des absolute j'ai un décalage quand je baisse de résolution... et je sais pas trop comment procéder autrement :s

Code : Tout sélectionner

.pseudo
{
	position: relative;
	left: 768px;
	bottom: 98px;
}

.mdp
{
	position: relative;
	left: 768px;
	bottom: 103px;
}

.connexion_auto
{
	position: relative;
	left: 764px;
	bottom: 111px;
}

.connexion_auto_label
{
	color: #ffffff;
	font-size: 13px;
	position: relative;
	bottom: 2px;
}

.go
{
	position: relative;
	left: 917px;
	bottom: 213px;
}

.lien_connexion 
{
	color: #ffffff;
	font-size: 13px;
	position: relative;
	left: 765px;
	bottom: 193px;
}

05 avr. 2010, 18:50

Tu as tout plein d'exemples de mise en page sur http://www.alsacreations.com/
C'est le site de référence pour bien apprendre le fonctionnement des CSS

05 avr. 2010, 19:00

ok je vais y faire un tour, merci

05 avr. 2010, 20:49

bon pour ceux qui auraient le même genre de problème, j'ai vu où on était mon erreur dans la doc que tu m'as filé. J'avais placé les "class" dans des balises <p> entourant chaque élément de mon formulaire, alors que je devais simplement les mettre dans les balises <input ...> sans utiliser de block ! Bien entendu c'était pas visible sur ma feuille de style ^^ Merci pour l'excellent site, j'avais étudié ca un peu à la va vite

Barre de défilement horizontale trop longue

Qui est en ligne