Aller au contenu
Choisir la langue
Aller à la recherche

Forums des Zéros

Une question ? Pas de panique, on va vous aider !

Liste des forums

Partage

image de fond qui prend ses marge

28 octobre 2006 à 19:00:52

Bonjour a tous, voilà, j"'ai un problème:

Mon image de fond est mise dans body (c'est normale) mais le problème, c'est que a la fin de mon bas de page, mon fond continu, et j'a n'arrive pas a l'arrété au même endroit que mon bas de page, et je voudait qu'il s'y arrete même si ;le bas de page et plus grand, comment faire?

un petit screeen pour illustré

Image utilisateur

Image utilisateur

28 octobre 2006 à 21:03:16

le seul truc c'est que pour pouvoir t'aider, il nous faudrait ton code (x)HTML et surtout ton CSS. A partir de la, on avisera

28 octobre 2006 à 21:44:39

Voilà le code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>*****</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body class="corps">


<style>
.corps
{
background: url(fond.png) no-repeat ;
padding-bottom: 10cm;
}
.menu
{
float: left;
background-image: url("fondmenu.png");
padding-left: 2cm;
}
.logo
{
margin-left: 0cm;
}
body
{
background-image: url("fondpage.png") no-repeat;
}
.copyright
{
color: red;
border: groove;
padding: 5px;
text-align: center;
margin-left: 5cm;
}
.lienmenu:hover
{
background-image: url("lien.png");
margin-left: 0,5cm;
}
#sous_menu
{
margin-bottom: 10cm; /* on retire les marges intérieures et extérieures */
padding:1cm;
padding-left: 0.5cm;
padding-top: 0.5cm;
padding-bottom: 10cm;
padding-right: 0cm;
width: 20%; /* J'ai mis une largeure pour ne pas prendre toute la largeur de l'écran */
border-bottom: none; /* et on retire celle du bas */
float: left;
background: url(degrader.png) no-repeat ;
}

#sous_menu li
{
list-style-type:none; /* on enlève la puce */
margin-top: 0; /* on retire les marges intérieures et extérieures */
padding-bottom: 0.2cm;
margin-bottom: 0cm;
padding-top: 0.1cm
}
#sous_menu a
{
padding-left:1em; /* une marge intérieure gauche juste pour l'esthétique */
}

.new
{
border: 4px double black;
border-bottom: none;
background-color: rgb(227,26,34);
margin-left: 5cm;
margin-right: 2cm;
padding-top: 0cm;
margin-bottom: 0cm;
text-align: center;
}
.contenuedenew
{
border: 4px double;
background-color: write;
margin-left: 5cm;
margin-right: 2cm;
margin-top: 0cm;
border-top: 2px solid;
}
.li
{
background: url(boutonactif.png) no-repeat;
color: withe;
}
.li:hover
{
background: url(boutonactif1.png) no-repeat;
color: withe;
}
#sous_menu a
{
color: black;
}
.degrader
{
margin-left: 0cm;
}
.bou2
{
float: left;
margin-right: 0cm;
}
.bou1
{
top: 0cm;
float: top;
}
</style>
<!--jusqu'ici c'est le css, pas touche

-->
<img class="bou1" src="bou1.png"/>
<img class="bou2" src="bou2.png"/>
<p><img class="logo" src="banniere.png" alt="MJS"/></p>
<img class="bou1" src="bou1.png"/>
<img class="bou2" src="bou2.png"/>

<ul id="sous_menu">
<li class="li">
<a href="****.html"> accueil</a>
</li>
<li class="li">
<a href="#.html">présentation </a>
</li>
<li class="li">
<a href="#.html">actualité</a>
</li>
<li class="li">
<a href="lien.html">dossiers</a>
</li>
   <li class="li">
   <a href="#.html">forum</a>
   </li>
<li class="li">
<a href="#.html">sur le web</a>
</li>
   <li class="li">
   <a href="#.html">contacts</a>
   </li>
</ul>

<?php
mysql_connect("******", "*****", "******") or die (mysql_error(erreur));
mysql_select_db("*******");

$query = "SELECT * FROM citation";

$result = mysql_query($query) or die(mysql_error());

srand((double)microtime()*10000);

$num = mysql_num_rows($result);

$nb = rand(0, $num-1);

mysql_data_seek($result, $nb);

$ligne = mysql_fetch_assoc($result);

// affichage de la phrase
print($ligne['phrase']);
?>
<!--ici c'est les news, tant que le site ne sera pas sur un hébergeur, sa ne marchera pas

-->
<p>Voici les dernières news :</p>
<?php
function bbcode2html($contenu)
{
$contenu = preg_replace('!\[gras\](.+)\[/gras\]!isU','<strong>$1</strong>',$contenu);
//devinez

$contenu = preg_replace('!\[u\](.+)\[/u\]!isU','<span style="text-decoration:underline;">$1</span>',$contenu);
//devinez encore

$contenu = preg_replace('!\[italic\](.+)\[/italic\]!isU','<em>$1</em>',$contenu);
$contenu = preg_replace('!\[s\](.+)\[/s\]!isU','<span style="text-decoration:line-through;">$1</span>',$contenu);
//on peut en faire encore plein!
$contenu = preg_replace('!\[image\](.+)\[/image\]!isU','<img resizemod="on" onload="rmw_img_loaded(this)" src="$1" border="0" />',$contenu);
$contenu = preg_replace('!\[url=([\w]+?://[\w\#$%&~/.\-;:=,?@\[\]+]*?)\]([^?\n\r\t].*?)\[/url\]!is','<a href="$1" target="_blank">$2</a>',$contenu);
$contenu = preg_replace('!\[titre\](.+)\[/titre\]!isU','<h1>$1</h1>',$contenu);
$contenu = preg_replace('!\[sous-titre\](.+)\[/sous-titre\]!isU','<h3>$1</h3>',$contenu);
$contenu = preg_replace('!\[tmb\](.+)\[/tmb\]!isU','<a href="$1" target="_blank"><img src="$1" alt="Cliquez pour agrandir" title="Cliquez pour agrandir" border="0" width="150"></a>',$contenu);
$contenu = preg_replace('!\[center\](.+)\[/center\]!isU','<center>$1</center>',$contenu);
$smileys = array(":p","^^",":D",":mdr:",":o",":)");
$paths = array("/images/smiley/langue.gif","/images/smiley/HS.gif","http://www.siteduzero.com/Templates/images/smilies/heureux.png",
"/images/smiley/mort_de_rire.gif","/images/smiley/siffle.gif","/images/smiley/100t.gif");
for($i=0;$i<count($smileys);$i++) {
$contenu = str_replace($smileys[$i],'<img src='.$paths[$i].'>',$contenu); }
$contenu = preg_replace("/\[color=(.+?)\](.+?)\[\/color\]/", "<font color=$1>$2</font>", $contenu);

return $contenu;
}
?>
<?php

// On récupère les 5 dernières news
$retour = mysql_query("SELECT * FROM systemenew ORDER BY id DESC LIMIT 0, 5") or die (mysql_error());
while ($donnees = mysql_fetch_array($retour))
{
?>

<h4 class="new">
<?php echo $donnees['titre']; ?> <br />

<em>Ecrit par <?php echo $donnees['pseudo'] ?> le <?php echo date('d/m/Y \à H\hi', $donnees['timestamp']); ?></em>
</h3>

<p class="contenuedenew">

<?php
//On enlève les éventuels antislash PUIS on crée les entrées en HTML (<br />)
$content = nl2br(stripslashes($donnees['contenu']));

echo bbcode2html($content);
?>

<?php
} // Fin de la boucle des news
?>

<p class="copyright">copyright tout pourri, les image et le contenue apartienne a leur auteur respectif!!<br/>
site By alexis<br/>
<em><a href="liste_news.php">Admin</a><em></p>

</body>
</html>

Anonyme

28 octobre 2006 à 22:06:49

première fois que je vois quelqu'un utiliser des 'cm' pour définir des marges o_O

o_O

y a-t-il moyen de voir ca en ligne ?

28 octobre 2006 à 22:10:43

Tu n'as qu'à utilisr la propriété css

heigth: "xx"px;

Ca ira plus vite...
Pour les "xx", tatonne un peu pour trouver la bonne valeur....

28 octobre 2006 à 22:57:59

oui, mais le problème, c'est que je veut que si on rajoute 10 new par exemple soyon fou, que l'image suive!!

http://alexis.vuillaume.free.fr/site%20sand/MJStest2.php

voici l'adresse, je sais c'est pas sécuriser, mais c'eqst juste pour faire des test, on peut détruire les new je m'en fiche (éviter ;-))

28 octobre 2006 à 23:35:10

j'ai un problème : lorsque je vais sur ta page et que je l'enregistre sur mon ordi, j'ai que l'image de la bannière qui se télécharge, sans la bordure, je peut pas tester et effectuer de modifications valables.

EDIT : tout compte fait, je ne suis pas sur que ca soit possible en CSS

il faudrait soit faire comme je te ledis, nous donner l'image de ta bannière pour que je puisse recréer ta page en local ou alors pouvoir modifier ton CSS en ligne

29 octobre 2006 à 8:28:07

Voici mon fond:

Image utilisateur

Image utilisateur

Serait t'il possible de faire suivre sa avec un autre langage que le CSS, je pensse au javascript...

EDIT: j'ai modifier, et mon problème et presque résolue, le seul problème qui me reste, c'est que la page se prolonge en étant vide, il n'y a aucune image, regarder a cette page:
http://alexis.vuillaume.free.fr/site%20sand/MJStest2.php

29 octobre 2006 à 14:46:38

indique la taille de ton body en %

29 octobre 2006 à 16:11:52

Merci beaucoup, je vais essayer

mais esque si je rajoute des new, la page va s'augmenter?

EDIT: Je n'y arrive pas ...

30 octobre 2006 à 11:26:18

UP

30 octobre 2006 à 11:49:59

Citation : topic maker

Le Mouvement des Jeunes Socialistes (MJS) est une organisation politique de jeunesse. Nos adhérents sont âgés de 15 à 28 ans, sont lycéens, étudiants, salariés ou chômeurs et se reconnaissent dans l’idéal socialiste. Le MJS est autonome du Parti Socialiste, il décide seul de ses orientations politiques, de ses combats et désigne lui-même ses responsables.
Nos principaux combats sont la lutte contre toutes les discriminations (racistes, sexistes, homophobes et liées au handicap) ; la mise en place d’une réelle autonomie pour les jeunes quel que soit leur projet de formation ; la construction d’une Europe citoyenne, plus juste, véritable rempart contre la mondialisation libérale. Nous militons pour une société plus juste, où l’égalité des chances est la règle, où chacun a son rôle à jouer.
Dans le Doubs, nous nous retrouvons toutes les trois semaines en assemblée générale (AG). Nous y débattons en général d’un thème précis afin de confronter nos idées, de prendre des positions officielles et de préciser nos argumentaires. Ces AG sont ouvertes à tous : le MJS s’enrichit de l’apport extérieur de tous ceux qui le souhaitent.

Et dire que tu voulais nous cacher ça et d'autres trucs.

Mais c'est quoi ce tic !!!!? o_O

o_O

Un site c'est pour être visité et non pour être caché, on a le droit de s'y promené. Si tu continu comme ça...

30 octobre 2006 à 11:53:22

Ben... c'est que je suis le codeur graphiste, et elle ne voulait pas que on le divulgue avant son lancement, mais j'ai obtenue son autorisation (sa se dit :O?)

30 octobre 2006 à 11:56:43

Ok daccord... alors il paraît que t'a 12 ans ??? c'est marrant car tu l'a mitset tu as tout juste éditer après une seconde pour l'enlever et j'ai eu le temps de voir.
Alors tu habite à Besançons ?

Voilà quand on est sur un site comme ça, on ne cache pas ses informations...

PS : on dit j'ai obtenu son autorisation.

30 octobre 2006 à 12:07:41

c'est un peu hors sujet....

PS: si tu veut savoir j'ai 12ans et demi

31 octobre 2006 à 7:42:20

UP

31 octobre 2006 à 8:59:26

Je crois avoir une idée, mais je peux me tromper.
Coupe juste le haut de l'image, et utilise-le comme image de fond.
Puis mets une autre image de fond (sur le bloc le plus adapté, ou sur un nouveau si pas moyen) d'une fine 'tranche' de quelques px de haut coupée en longeur dans ton image (je suis claire ?), en repeat-y.
Diminue ton padding, ou supprime-le et remplace-le par une hauteur (ou plus exactement, une habile combinaison de height, min-height et max-height), et si nécessaire ajoute un overflow: hidden; (à utiliser avec précaution).

En espérant être utile
(PS : J'vais à l'AG du MJS 92 vendredi

)

31 octobre 2006 à 10:18:36

J'ai pas trop compris <_< peut être un petit code d'exemple m'éclairerait

31 octobre 2006 à 11:30:22

Tu supprimes la class corps de ton body, et tu englobes tout le contenu de body dans un div#corps.

body
{
background: url("fondx.png") no-repeat top left;
padding: 0;
margin: 0;
}

#corps
{
background: url("fondy.png") repeat-y top left;
margin: 13px 0 10cm 0;
float: left;
}

Avec fondx.png et fondy.png.

En espérant être utile

1 novembre 2006 à 21:02:59

Sa n'a pas résolue le problème, au contraire, sa a coller mon dégrader sur l'image de fond

En tyout cas merci de ton aide.

PS: l'adresse et ici --->
http://alexis.vuillaume.free.fr/site%20sand/MJStest2.php#.html

EDIT: Je vien de tester le site avec IE (IE tab de firefox), et le bas de page ne s'étend pas, mais les image parte n'importe ou, faut que jke répare tout sa moi :euh:

:euh:

1 novembre 2006 à 21:05:00

Ben... ce n'est pas ce que tu voulais ? Tu pourrais être plus clair ?

2 novembre 2006 à 10:38:11

Nan, se que je veut, c'est suprimer le bas de la page blanc, regarde, elle continue en bas, alors que le footer et fini...

2 novembre 2006 à 22:38:12

Up

3 novembre 2006 à 9:18:44

Aaaaah d'accord ! Ben supprime les margin-bottom et padding-bottom qui causent ça, alors.

3 novembre 2006 à 10:16:05

J'ai enlever les margin, mais sa change rien, pis, quelle margin et padding bottom!!

3 novembre 2006 à 22:17:53

UP

4 novembre 2006 à 11:26:04

UP

4 novembre 2006 à 13:02:47

ce ne seraient pas ces propriétés qui posent problème?

#sous_menu
{
padding-bottom: 10cm;
margin-bottom: 10cm;
}

4 novembre 2006 à 13:31:17

a oué, je ne l'avais pas vue, sa MARCHE niquelle, je met résolue au problème

image de fond qui prend ses marge

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.