Aller au contenu

Allongement de la page ?

dattik

Par dattik
dans (X)HTML et CSS

 Partager

Sujets conseillés

dattik

dattik

Posté
Posté

Hello !

Me revoilà avec une autre question :hypocrite:

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

Ce que j'ai actuellement :

http://img380.imageshack.us/img380/3863/here.png

Ce que je désire avoir :

http://img380.imageshack.us/img380/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 :whistling:

SStephane

SStephane

Posté
Posté

En utilisant les propriétés css margin ou padding d'un calque placé au centre, j'ai envie de dire, maintenant, le mieux est quand même de laisser l'accès à ton code si tu veux une réponse précise; à partir d'images c'est pas gagné !

dattik

dattik

Posté
  • Auteur
Posté

Voila le contenu de ma fiche de style :

/* 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}

yuston

yuston

Posté
Posté

Il faut le code HTML avec :P

Ou du moins, les noms des éléments de ta page! Là c'est pas forcément évident de deviner à quel élément la CSS fait référence!

dattik

dattik

Posté
  • Auteur
Posté (modifié)

:smartass:

Voici donc mon 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">
<head>

  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


  <title>RapideNet.Free.Fr</title>
  <link href="css/styles.css" rel="stylesheet" type="text/css" />

  <link href="css/lightbox.css" rel="stylesheet" type="text/css" />

  <script type="text/javascript" src="scripts/lightbox.js"></script>
</head>


<body>


<div id="header"><a name="haut" id="haut"></a></div>

<div id="menu">
<table class="menu" style="height: 50px;" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">

  <tbody>
	<tr style="vertical-align: top;">

	<td class="menuPadding" style="background-image: url(images/boutonActif.gif); padding-top: 15px;" width="95">accueil</td>

	<td class="menuSeparateur"></td>

	<td class="menuPadding" width="95"><a href="page01.html">info</a></td>

	<td class="menuSeparateur"></td>

	<td class="menuPadding" width="95"><a href="page02.html">services</a></td>

	<td class="menuSeparateur"></td>

	<td class="menuPadding" width="95"><a href="page03.html">photos</a></td>

	<td class="menuSeparateur"></td>

	<td class="menuPadding" width="95"><a href="page04.html">forum</a></td>

	<td class="menuSeparateur"></td>

	<td class="menuPadding" width="95"><a href="page05.html">liens</a></td>

	<td class="menuSeparateur"></td>

	<td class="menuPadding" width="95"><a href="page06.html">contact</a></td>

  </tr>

  </tbody>
</table>

</div>

<div id="sheader"></div>

<div id="contenuBg"> 

<div id="boiteMenuG">

<p style="margin: 0px; background: transparent url(images/menuT.gif) no-repeat scroll center bottom; text-align: center; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; height: 13px; width: 207px;"></p>


<form action="" method="post" class="formulaire" style="background: transparent url(images/menuBg.gif) repeat scroll 0%; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; padding-left: 30px; padding-top: 5px; padding-bottom: 5px;">

  <p class="formMenu" style="padding-bottom: 4px;">Rechercher</p>


  <p class="formMenu" style="padding-bottom: 15px;"><input name="rechercher" value="" size="22" class="boiteFormulaire" type="texte" />  <input name="envoyer" value="ok" class="boiteFormulaire" type="submit" /></p>

	</form>


<p class="tiretD"><img src="images/tiretPx.gif" alt="tiret" height="1" width="207" /></p>


<p class="elementMenu"><a href="#">Catalogue A</a></p>


<p class="elementMenu"><a href="#">Catalogue B</a></p>


<p class="elementMenu"><a href="#">Catalogue C</a></p>


<p class="elementMenu"><a href="#">Catalogue D</a></p>


<p class="elementMenu"><a href="#">Catalogue E</a></p>


<p class="elementMenu"><a href="#">Catalogue F</a></p>


<p class="elementMenu"><a href="#">Catalogue G</a></p>


<p style="margin: 0px; background: transparent url(images/menuB.gif) no-repeat scroll center top; text-align: center; padding-bottom: 10px; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; height: 10px; width: 207px;"></p>



<p style="margin: 0px; background: transparent url(images/menuT.gif) no-repeat scroll center bottom; text-align: center; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; height: 13px; width: 207px;"></p>


<p class="titreMenuB" style="padding-bottom: 8px;">Section des membres</p>


<p class="tiret"><img src="images/tiretPx.gif" alt="tiret" height="1" width="207" /></p>


<form action="" method="post" class="formulaire" style="background: transparent url(images/menuBg.gif) repeat scroll 0%; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; padding-left: 30px; padding-top: 0px;">

  <p class="formMenu" style="padding-bottom: 4px; padding-top: 8px;">Login</p>


  <p class="formMenu" style="padding-bottom: 4px;"><input name="login" value="" size="13" class="boiteFormulaire" type="text" /></p>


  <p class="formMenu" style="padding-bottom: 4px;">Mot de passe</p>


  <p class="formMenu" style="padding-bottom: 15px;"><input name="password" value="" size="13" class="boiteFormulaire" type="password" />  <input name="envoyer" value="envoyer" class="boiteFormulaire" type="submit" /></p>

	</form>


<p style="margin: 0px; background: transparent url(images/menuB.gif) no-repeat scroll center top; text-align: center; padding-bottom: 50px; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; height: 10px; width: 207px;"></p>

  </div>


<div id="boiteTexte">

<p class="titre" style="margin: 0px;"><img src="images/fleche.gif" alt="fleche" height="9" width="19" />ACCUEIL</p>


<p style="background: transparent url(images/separateurTexte.gif) repeat-x scroll 0%; margin-top: 5px; height: 1px; width: 427px; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial;"></p>


<p><span style="text-align: justify;">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. In at purus non ipsum malesuada posuere.
Praesent ut sem ut arcutristique laoreet. Integer euismod. Integer
lorem enim, lacinia in, aliquet at, mollis non, justo. Donec facilisis,
turpis quis accumsa
tristique, elit purus faucibus purus, <a href="#">id tincidunt justo risus</a> et est. Quisque eu nisl.</span> <span style="text-align: justify;">In
sollicitudin enim sit amet felis. Quisque imperdiet mattis lacus. Donec
porta leo ac sem. Proin massa felis, tempus a, sagittis sed, rhoncus
in, pede.</span></p>


<p style="text-align: right;"><a href="#haut"><img src="images/ancre.gif" alt="ancre" border="0" height="19" width="29" /></a></p>


<p class="soustitre" style="margin: 0px;">Sed nec purus</p>


<p style="text-align: justify;"><a href="images/terre.jpg" rel="lightbox" title="terre"><img src="images/terre.jpg" alt="terre" class="imagePositionGauche" border="0" height="130" width="115" /></a>In
sollicitudin enim sit amet felis. Quisque imperdiet mattis lacus. Donec
porta leo ac sem. Proin massa felis, tempus a, sagittis sed, rhoncus
in, pede. Sed nec purus. Cras eu lorem. Nunc accumsan nunc vel nibh.
Aliquam turpis urna, consectetuer et, pulvinar et, fermentum eget,
augue.</p>


<p style="text-align: justify;">Donec facilisis, turpis quis accumsa tristique,<br />
elit purus faucibus purus, id tincidunt justo risus et est. Donec
facilisis, turpis quis accumsatristique, elit purus faucibus purus, id
tincidunt justo risus et est. Quisque eu nisl. In sollicitudin enim sit
amet felis. Quisque imperdiet mattis lacus. Donec porta leo ac sem.
Proin massa felis, tempus a, sagittis sed, rhoncus in, pede.</p>
<p style="text-align: justify;"></p>
<p style="text-align: justify;">Ceci est un test voir juste si cela est pormant.</p>
<p style="text-align: justify;">In sollicitudin enim sit amet felis.
Quisque imperdiet mattis lacus. Donec porta leo ac sem. Proin massa
felis, tempus a, sagittis sed, rhoncus in, pede. Sed nec purus. Cras eu
lorem. Nunc accumsan nunc vel nibh. Aliquam turpis urna, consectetuer
et, pulvinar et, fermentum eget, augue.
	</p>
<p style="text-align: justify;">Donec facilisis, turpis quis accumsa tristique,<br />

elit purus faucibus purus, id tincidunt justo risus et est. Donec
facilisis, turpis quis accumsatristique, elit purus faucibus purus, id
tincidunt justo risus et est. Quisque eu nisl. In sollicitudin enim sit
amet felis. Quisque imperdiet mattis lacus. Donec porta leo ac sem.
Proin massa felis, tempus a, sagittis sed, rhoncus in, pede.</p>
<p style="text-align: justify;">In sollicitudin enim sit amet felis.
Quisque imperdiet mattis lacus. Donec porta leo ac sem. Proin massa
felis, tempus a, sagittis sed, rhoncus in, pede. Sed nec purus. Cras eu
lorem. Nunc accumsan nunc vel nibh. Aliquam turpis urna, consectetuer
et, pulvinar et, fermentum eget, augue.
	</p>
<p style="text-align: justify;">Donec facilisis, turpis quis accumsa tristique,<br />

elit purus faucibus purus, id tincidunt justo risus et est. Donec
facilisis, turpis quis accumsatristique, elit purus faucibus purus, id
tincidunt justo risus et est. Quisque eu nisl. In sollicitudin enim sit
amet felis. Quisque imperdiet mattis lacus. Donec porta leo ac sem.
Proin massa felis, tempus a, sagittis sed, rhoncus in, pede.</p>
<p style="text-align: justify;">In sollicitudin enim sit amet felis.
Quisque imperdiet mattis lacus. Donec porta leo ac sem. Proin massa
felis, tempus a, sagittis sed, rhoncus in, pede. Sed nec purus. Cras eu
lorem. Nunc accumsan nunc vel nibh. Aliquam turpis urna, consectetuer
et, pulvinar et, fermentum eget, augue.
	</p>
<p style="text-align: justify;">Donec facilisis, turpis quis accumsa tristique,<br />

elit purus faucibus purus, id tincidunt justo risus et est. Donec
facilisis, turpis quis accumsatristique, elit purus faucibus purus, id
tincidunt justo risus et est. Quisque eu nisl. In sollicitudin enim sit
amet felis. Quisque imperdiet mattis lacus. Donec porta leo ac sem.
Proin massa felis, tempus a, sagittis sed, rhoncus in, pede.</p>
<p style="text-align: justify;">In sollicitudin enim sit amet felis.
Quisque imperdiet mattis lacus. Donec porta leo ac sem. Proin massa
felis, tempus a, sagittis sed, rhoncus in, pede. Sed nec purus. Cras eu
lorem. Nunc accumsan nunc vel nibh. Aliquam turpis urna, consectetuer
et, pulvinar et, fermentum eget, augue.
	</p>
<p style="text-align: justify;">Donec facilisis, turpis quis accumsa tristique,<br />

elit purus faucibus purus, id tincidunt justo risus et est. Donec
facilisis, turpis quis accumsatristique, elit purus faucibus purus, id
tincidunt justo risus et est. Quisque eu nisl. In sollicitudin enim sit
amet felis. Quisque imperdiet mattis lacus. Donec porta leo ac sem.
Proin massa felis, tempus a, sagittis sed, rhoncus in, pede.</p>
<p style="text-align: justify;">In sollicitudin enim sit amet felis.
Quisque imperdiet mattis lacus. Donec porta leo ac sem. Proin massa
felis, tempus a, sagittis sed, rhoncus in, pede. Sed nec purus. Cras eu
lorem. Nunc accumsan nunc vel nibh. Aliquam turpis urna, consectetuer
et, pulvinar et, fermentum eget, augue.
	</p>
<p style="text-align: justify;">Donec facilisis, turpis quis accumsa tristique,<br />

elit purus faucibus purus, id tincidunt justo risus et est. Donec
facilisis, turpis quis accumsatristique, elit purus faucibus purus, id
tincidunt justo risus et est. Quisque eu nisl. In sollicitudin enim sit
amet felis. Quisque imperdiet mattis lacus. Donec porta leo ac sem.
Proin massa felis, tempus a, sagittis sed, rhoncus in, pede.</p>
<p style="text-align: justify;">In sollicitudin enim sit amet felis.
Quisque imperdiet mattis lacus. Donec porta leo ac sem. Proin massa
felis, tempus a, sagittis sed, rhoncus in, pede. Sed nec purus. Cras eu
lorem. Nunc accumsan nunc vel nibh. Aliquam turpis urna, consectetuer
et, pulvinar et, fermentum eget, augue.
	</p>
<p style="text-align: justify;">Donec facilisis, turpis quis accumsa tristique,<br />

elit purus faucibus purus, id tincidunt justo risus et est. Donec
facilisis, turpis quis accumsatristique, elit purus faucibus purus, id
tincidunt justo risus et est. Quisque eu nisl. In sollicitudin enim sit
amet felis. Quisque imperdiet mattis lacus. Donec porta leo ac sem.
Proin massa felis, tempus a, sagittis sed, rhoncus in, pede.</p>
<p style="text-align: justify;">In sollicitudin enim sit amet felis.
Quisque imperdiet mattis lacus. Donec porta leo ac sem. Proin massa
felis, tempus a, sagittis sed, rhoncus in, pede. Sed nec purus. Cras eu
lorem. Nunc accumsan nunc vel nibh. Aliquam turpis urna, consectetuer
et, pulvinar et, fermentum eget, augue.
	</p>
<p style="text-align: justify;">Donec facilisis, turpis quis accumsa tristique,<br />

elit purus faucibus purus, id tincidunt justo risus et est. Donec
facilisis, turpis quis accumsatristique, elit purus faucibus purus, id
tincidunt justo risus et est. Quisque eu nisl. In sollicitudin enim sit
amet felis. Quisque imperdiet mattis lacus. Donec porta leo ac sem.
Proin massa felis, tempus a, sagittis sed, rhoncus in, pede.</p>


<p style="text-align: right;"><a href="#haut"><img src="images/ancre.gif" alt="ancre" border="0" height="19" width="29" /></a></p>

  </div>


<div id="boiteMenuD" class="rubriqueD">

<p style="margin: 0px; background: transparent url(images/menuTGV.gif) no-repeat scroll center bottom; text-align: center; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; height: 26px; width: 207px;"></p>


<p class="elementMenuV"><a href="#">Lien pratique</a></p>


<p class="elementMenuV"><a href="#">Lien pratique</a></p>


<p class="elementMenuV"><a href="#">Lien pratique</a></p>


<p class="elementMenuV"><a href="#">Lien pratique</a></p>


<p style="margin: 0px; background: transparent url(images/menuBGV.gif) no-repeat scroll center top; text-align: center; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; height: 24px; width: 207px;"></p>



<p style="margin: 10px 0px 0px; background: transparent url(images/menuTGB.gif) no-repeat scroll center bottom; text-align: center; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; height: 26px; width: 207px;"></p>


<p class="elementMenuB"><a href="#">Lien pratique</a></p>


<p class="elementMenuB"><a href="#">Lien pratique</a></p>


<p class="elementMenuB"><a href="#">Lien pratique</a></p>


<p class="elementMenuB"><a href="#">Lien pratique</a></p>


<p style="margin: 0px; background: transparent url(images/menuBGB.gif) no-repeat scroll center top; text-align: center; padding-bottom: 10px; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; height: 24px; width: 207px;"></p>



<p style="margin: 0px; background: transparent url(images/menuT.gif) no-repeat scroll center bottom; text-align: center; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; height: 13px; width: 207px;"></p>


<p class="titreMenuB" style="padding-bottom: 8px;">Partenaires</p>


<p class="tiret"><img src="images/tiretPx.gif" alt="tiret" height="1" width="207" /></p>


<p style="margin: 0px; background: transparent url(images/menuBg.gif) repeat scroll 0%; text-align: center; padding-top: 10px; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial;"><a href="#"><img src="images/partenaire1.jpg" alt="pub" border="0" height="31" width="88" /></a></p>


<p style="margin: 0px; background: transparent url(images/menuBg.gif) repeat scroll 0%; text-align: center; padding-top: 5px; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial;"><a href="#"><img src="images/partenaire2.jpg" alt="pub" border="0" height="31" width="88" /></a></p>


<p style="margin: 0px; background: transparent url(images/menuBg.gif) repeat scroll 0%; text-align: center; padding-top: 5px; padding-bottom: 0px; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial;"><a href="http://www.jfpariseau.com/" target="_blank"><img src="images/partenaire3.jpg" alt="pub" border="0" height="31" width="88" /></a></p>


<p style="margin: 0px; background: transparent url(images/menuB.gif) no-repeat scroll center top; text-align: center; padding-bottom: 50px; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; height: 10px; width: 207px;"></p>

  </div>


<p class="spacer">
</p>
</div>


<ul id="pagination-digg">

	<li class="previous-off">« Précédent</li>

	<li class="active">1</li>

	<li><a href="index2.html">2</a></li>

	<li><a href="/?page=3">3</a></li>

	<li><a href="/?page=4">4</a></li>

	<li><a href="/?page=5">5</a></li>

	<li><a href="/?page=6">6</a></li>

	<li><a href="/?page=7">7</a></li>

	<li class="next"><a href="index2.html">Suivant »</a></li>

</ul>


<div id="footer">

<div id="menufooter">

<p style="margin: 0px; padding-top: 20px;"><a href="#">Plan du site</a> | <a href="#">FAQ</a> | <a href="#">A propos</a></p>

</div>

</body>
</html>

Modifié par Monique
Merci d'utiliser codebox pour plus de 10 lignes de code :)
ayendail

ayendail

Posté
Posté

en résumé ce que tu veux c est que les menus soient sur les cotés pour pouvoir degager le centre c est cela?

SStephane

SStephane

Posté
Posté (modifié)

Re donc ;)

Je te donne quelques pistes :

mettre le contenu général à 100% de largeur :

#contenuBg -> width 100% (ou un autre valeur, mais pas de valeur fixe)

Faire suivre les colonnes des cotés dans le html, ça donne :

<div id="contenuBg">
  <div id="boiteMenuG"><div>
  <div id="boiteMenuD"><div>
  <div id="boiteTexte"></div>
  <p class="spacer"> </p>
</div>

Mettre boiteMenuD en float right dans la css

#boiteMenuD { float:right }

Virer le float sur boiteTexte, et y mettre un margin (j'ai mis 250 au pif...)

#boiteTexte 
{
 height:auto;
 margin:0 250px;
}

J'ai pas testé sur d'autres navigateurs, mais pour pas que tu dises que je triche :)

pageb.jpg

C'est pas le résultat parfait, mais c'est la méthode, en gros.

En espérant t'avoir aidé !

Modifié par SStephane
SStephane

SStephane

Posté
Posté (modifié)

la source !! :D

à vue de nez je dirais qu'il faut que tu augmentes le margin de ta boite texte, genre (au pif ) :

#boiteTexte
{
height:auto;
margin:0 250px 0 300px;
}

Modifié par SStephane
ayendail

ayendail

Posté
Posté

Bonjour, dans mon cas j'ai eu un exemple de ce qu'il fallait faire je n'ai plus le lien.

un menu a gauche d'une taille fixée par exemple 20% en float left. un corps avec une marge à gauche de la même taille et 1% en plus. (21%); soit la largeur du corps = ecran total - (la taille de chaque menu + 1 ou 2 % libre qui permettent de glisser chaque partie dans la page.)

#menu {
width:20%;
float:left;
}

#contenu

{
margin-left:21%;
width:65%;
}

#menu-droit

{
float:right;
width:20%;

}

SStephane

SStephane

Posté
Posté

Merci :)

Donc tu n'as pas tout fait, il te faut :

Mettre boiteMenuD après boiteMenuG (cad avant boiteTexte) dans le HTML

<div id="contenuBg">
  <div id="boiteMenuG"><div>
  <div id="boiteMenuD"><div>
  <div id="boiteTexte"></div>
  <p class="spacer"> </p>
</div>

Virer le width de boiteTexte (sans mettre de valeur ce sera parfait) dans le css

Et c'est tout bon !

Enfin, teste tout de même sur d'autres que Firefox, parce que j'ai fais ça dans firebug en direct :)

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...