Imprimer la Page

Forum-webmaster

Technique - programmation => HTML / CSS / XHTML => Message commencé par: dattik le le 02-06-2009 a 02:35:21

Titre: [Résolu]Allongement horizontal de la page
Posté par: dattik le le 02-06-2009 a 02:35:21

Hello !

Me revoilà avec une autre question ^.^

Voici déjà en screens mon problème =

Ce que j'ai actuellement :

http://img145.imageshack.us/img145/1007/hered.png

Ce que je désire avoir :

http://img145.imageshack.us/img145/8479/herecopie.png

Donc comme vous l'aurez compris,je souhaiterais écarter un peu plus les blocs sur les côtés afin d'écrire un peu plus au centre,malheureusement en regardant ma fiche de style,je m'y suis vite perdue,j'ai tenter de changer certaines valeurs,mais cela n'a rien changé,alors si peut-être quelqu'un a une idée de la manière dont il faut s'y prendre,je suis preneur ;D

Titre: Re:Allongement de la page ?
Posté par: KB le le 02-06-2009 a 12:27:46

Salut,
on n'a pas le code source de ta page mais il suffit de modifier la largeur de la div que tu veux modifier.
width: XXX px ou %;

Titre: Re:[Résolu]Allongement horizontal de la page
Posté par: dattik le le 02-06-2009 a 20:01:49

Je peux avoir + de détails ? :p

Titre: Re:[Résolu]Allongement horizontal de la page
Posté par: Lilian le le 02-06-2009 a 21:43:46

Bonsoir,

On peut avoir le code source ... que tu peux mettre en ligne directement afin de pouvoir t'aider correctement :)

Merci par avance.

Titre: Re:[Résolu]Allongement horizontal de la page
Posté par: dattik le le 02-06-2009 a 23:23:46

Ma feuille de style CSS =

Code:

/* Mise en forme du body */

body { background-color:#ffffff; background-image:url(../images/bg.gif); background-position: top; background-repeat: repeat-x; margin: 0px 0px 0px 0px;}

/* ID(#) - Mise en forme de la page en DIV - */

#header { margin-top: 0px; margin-left: auto; margin-right: auto; margin-bottom:0; height:153px; width: 888px; background-image:url(../images/header.jpg); padding: 0px 0px 0px 0px;}

#menu { margin-top:0; margin-left:auto; margin-right:auto; margin-bottom:0; height: 44px; width: 671px; padding-left: 109px; padding-right: 108px;}

#sheader { margin-top: 0px; margin-left: auto; margin-right: auto; margin-bottom:0; height:24px; width: 888px;}

#contenuBg {margin-top:0; margin-left:auto; margin-right:auto; margin-bottom:0; height:auto; width: 888px; padding: 0px 0px 0px 0px;}

#boiteMenuG{float: left; width: 207x; height: auto; margin-top: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;}
#boiteMenuG a:link {color: #556074; text-decoration: none;}
#boiteMenuG a:visited {color: #556074; text-decoration: none;}
#boiteMenuG a:hover {color: #556074; text-decoration: underline;}
#boiteMenuG p {font-size: 11px;}

#boiteTexte{float: left; width: 427px; height: auto; padding: 0px 0px 0px 0px; padding-left: 14px; padding-right: 33px;}

#boiteMenuD{float: left; width: 207px; height: auto; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;}
#boiteMenuD a:link {color: #ffffff; text-decoration: none;}
#boiteMenuD a:visited {color: #ffffff; text-decoration: none;}
#boiteMenuD a:hover {color: #ffffff; text-decoration: underline;}

#footer {margin-top:0; margin-left:auto; margin-right:auto; margin-bottom:0; height: 67px; width: 100%; background: url(../images/bgFooter.gif) repeat-x; text-align:center; background-color: #fff;}
#menufooter {margin-top:0; margin-left:auto; margin-right:auto; margin-bottom:0; height: 40px; width: 778px; text-align:left; padding-left: 110px;}
#menufooter p {font-size: 11px;}

.spacer {
clear: both;
}

/* CLASS - Mise en forme des textes */

p {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #556074;}

ul { padding:0; margin:auto; margin: 0px 0px 0px 0px;}
ul li { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #333333; display:inline; list-style-type: none; }

.imagePositionGauche { padding-right :20px; float:left;}

/* Titre */

.titre {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; color: #2d93c1; font-weight: bold;}
.soustitre {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; color: #7db339; font-weight: bold;}
.titreMenu {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #ffffff; font-weight: bold;}
.titreMenuB {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #2c91c0; font-weight: bold; margin: 0px 0px 0px 0px; padding-left: 30px; background: url(../images/menuBg.gif) repeat-y;}

/* Autre textes */

.texte {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #556074;}
.textePetit {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #556074;}

.elementMenu {background-color: #fff; background: url(../images/menuE.gif) no-repeat; height: 21px; width: 162px; margin: 0px 0px 0px 0px; padding-top:7px; padding-left: 45px; padding-bottom: 0px;}
.elementMenuV {background-color: #fff; background: url(../images/bgMenuGV.gif) no-repeat; height: 17px; width: 177px; margin: 0px 0px 0px 0px; padding-top:4px; padding-left: 30px; padding-bottom: 0px;}
.elementMenuB {background-color: #fff; background: url(../images/bgMenuGB.gif) no-repeat; height: 17px; width: 177px; margin: 0px 0px 0px 0px; padding-top:4px; padding-left: 30px; padding-bottom: 0px;}

.tiret {background: url(../images/tiret.gif) no-repeat; height: 1px; width: 207px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;}
.tiretD {background: #e2e3e4 url(../images/tiretPx.gif) repeat; height: 1px; width: 207px; margin: 0px 0px 0px 0px;}

/* Liens par défault */

a:link {color: #2ca1d7; text-decoration: underline;}
a:visited {color: #2ca1d7; text-decoration: underline;}
a:hover {color: #2ca1d7; text-decoration: none;}

/* Liens pour MENU DES ONGLETS - Doir être appliqué sur la cellule <td> ou tableau est non sur le texte*/

.menu a:link { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #fff; text-decoration: none;}
.menu a:visited {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #fff; text-decoration: none;}
.menu a:hover {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #fff; text-decoration: underline;}
.menu{font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #fff; text-decoration: none; text-align:center;}

.menuPadding {padding-top: 10px; margin: 0px 0px 0px 0px; vertical-align:top; background: url(../images/boutonNActif.gif) no-repeat;}
.menuSeparateur {padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; width: 1px;}

/* Liens pour le menu vertical RUBRIQUE - Doir être appliqué sur la cellule <td> ou tableau ou DIV est non sur le texte*/

.rubriqueD a:link { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #5e7a1c; text-decoration: none; font-weight: bold;}
.rubriqueD a:visited {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #5e7a1c; text-decoration: none; font-weight: bold;}
.rubriqueD a:hover {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #383c47; text-decoration: none; font-weight: bold;}
.rubriqueD{font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #383c47; text-decoration: none; text-align:left; font-weight: bold;}

ul{border:0; margin:0; padding:0;}

#pagination-digg li{
border:0; margin:0; padding:0;
font-size:11px;
list-style:none;
margin-right:2px;
}
#pagination-digg a{
border:solid 1px #9aafe5
margin-right:2px;
}
#pagination-digg .previous-off, #pagination-digg .next-off {
border:solid 1px #DEDEDE
color:#888888
display:block;
float:left;
font-weight:bold;
margin-right:2px;
padding:3px 4px;
}
#pagination-digg .next a, #pagination-digg .previous a {
font-weight:bold;
}
#pagination-digg .active{
background:#2e6ab1;
color:#FFFFFF;
font-weight:bold;
display:block;
float:left;
padding:4px 6px;
}
#pagination-digg a:link, #pagination-digg a:visited {
color:#0e509e
display:block;
float:left;
padding:3px 6px;
text-decoration:none;
}
#pagination-digg a:hover{
border:solid 1px #0e509e
}

/* A appliquer a form */

.formulaire {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #4e4e4e; border: 0px; background-color: #fff; margin: 0px 0px 0px 0px; padding-top: 15px; padding-left:17px;}
.boiteFormulaire {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #6f6f6f; border: 1px solid #e2e3e4; background-color: #fff; padding-top:2px; padding-bottom:2px; padding-left: 5px; font-weight:normal;}
.formMenu {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#6f6f6f; font-weight:normal; margin: 0px 0px 0px 0px}

Titre: Re:[Résolu]Allongement horizontal de la page
Posté par: dattik le le 02-06-2009 a 23:29:26

Mon HTML =

http://dattic.free.fr/HTML.txt (http://dattic.free.fr/HTML.txt)

Titre: Re:[Résolu]Allongement horizontal de la page
Posté par: Lilian le le 03-06-2009 a 00:10:58

Il aurait été plus facile de tout mettre ensemble, possible ?

Merci par avance.

Titre: Re:[Résolu]Allongement horizontal de la page
Posté par: dattik le le 03-06-2009 a 01:02:25

Qu'entends-tu par tout mettre ensemble ? :s

Car j'ai essayer de poster les 2 codes en mêmes temps mais on me signale que le post est trop grand :/

Titre: Re:[Résolu]Allongement horizontal de la page
Posté par: dattik le le 03-06-2009 a 11:27:33

Je résume donc;

Mon HTML =

http://dattic.free.fr/HTML.txt (http://dattic.free.fr/HTML.txt)

Mon CSS =

http://dattic.free.fr/CSS.txt (http://dattic.free.fr/CSS.txt)

Titre: Re:[Résolu]Allongement horizontal de la page
Posté par: bormat le le 03-06-2009 a 14:53:31

ça aurais était mieux la page tout simplement ou un fichier mht
sinon juste en mettant des width
http://bormat2.free.fr/aide%20au%20d%C3%83%C2%A9velopement/webmaster/html.htm

Titre: Re:[Résolu]Allongement horizontal de la page
Posté par: dattik le le 03-06-2009 a 16:04:26

Impressionnant,peux tu me dire quels choses as-tu modifier exactement :p ?

Titre: Re:[Résolu]Allongement horizontal de la page
Posté par: bormat le le 03-06-2009 a 18:29:05

je me suis pas embetté en fait j'ai utliser komposer lol
sinon tu met des width t au div qui contient le texte pour qu'il prenne toute la place
et tu agrandit celui qui contient celui qui contient le texte

Titre: Re:[Résolu]Allongement horizontal de la page
Posté par: dattik le le 03-06-2009 a 18:57:56

Je place mes width juste après la div ?

Titre: Re:[Résolu]Allongement horizontal de la page
Posté par: bormat le le 03-06-2009 a 19:14:01

?non de cette façon
<div style="width:99999999999999999px">blabla<div>

et tu remplace le 999999999 par tes chiffre mais tu as qu'a prendre ma page c'est plus simple

Titre: Re:[Résolu]Allongement horizontal de la page
Posté par: dattik le le 03-06-2009 a 22:07:56

Le problème avec ta page c'est qu'elle m'affiche ceci =

http://img25.imageshack.us/img25/7662/pbagain.jpg (http://img25.imageshack.us/img25/7662/pbagain.jpg)

Alors que puis-je faire -.- ?

Titre: Re:[Résolu]Allongement horizontal de la page
Posté par: bormat le le 04-06-2009 a 16:23:20

tu reduit un peu la largeur du milieu pour que ça rentre