[Résolu]Footer, image et dimensions fenetre

Question

Zherus

6 Dec 2009 à 23:54

Bonsoir tout le monde,

Je viens vous demander de l'aide parce que là je sèche vraiment Smiley confus

, j'explique :

J'ai ma page avec un background de couleur #eeeeee, en footer j'ai une texture d' "herbe" qui est en repeat-x.
Voilà la texture que j'utilise:

Le problème donc est quand je redimensionne (réduis horizontalement dans le cas présent) la fenêtre du navigateur (firefox, IE, opera, chrome et safari), tout se passe bien jusqu'à arriver au contenu de la page où là la barre de défilement apparaît, quoi de plus normal ...
Sauf que à partir de ce moment plus je réduis la fenêtre et plus ma texture d'herbe se réduit et si je bouge ma barre vers la droite, il me manque un bout de texture d'herbe et j'ai la couleur de mon background à la place. Comme si ma texture s'était déplacée sur la gauche.

Je voulais illustrer avec deux autres images mais je vois que c'est limité à une seule Smiley murf

.

Voià mon code : Le footer en question est séparé du contenu, qui a une largeur fixe, car justement j'aimerai qu'il se répète sur toute la longueur de la fenêtre.

<!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" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<title>Accueil</title>
	<link rel="stylesheet" type="text/css" href="../accueil/accueil.css"/>
	<link rel="stylesheet" type="text/css" href="../javascript/css/custom-theme/jquery-ui-1.7.2.custom.css"/>
	<script type="text/javascript" src="../javascript/jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="../javascript/jquery-ui-1.7.2.custom.min.js"></script>
</head>
<body>
<!-- super_global_abstract_ left et right = pour décorer le fond avec des background image -->
	<div id="super_global_abstract_left">
		<div id="super_global_abstract_right">
			<div id="header">
			</div>
<!-- Global qui contient la navigation sur la gauche et le contenu a droite -->
			<div id="global">
				<div id="navigation">
					<ul>
						<li><a href="#" class="lien_nagiv"> lien </a><div class="img_sep"></div></li>
						<li><a href="#" class="lien_nagiv"> lien </a><div class="img_sep"></div></li>
						<li><a href="#" class="lien_nagiv" id="photos"> lien </a></li>
						<li>
						<div id="div_m" class="display_none options_menu"><a>  lien </a></div>
							<div id="div_mm" class="display_none options_down_up">
								<a href="#">  lien </a>
								<a href="#">  lien </a>
							</div>
						<div id="div_v" class="display_none options_menu"><a>  lien </a></div>
							<div id="div_vv" class="display_none options_down_up">
								<a href="#">  lien </a>
								<a href="#">  lien </a>
							</div>
						</li>
						<li><a href="#" class="lien_nagiv">  lien </a><div class="img_sep"></div></li>
						<li><a href="#" class="lien_nagiv"> lien </a><div class="img_sep"></div></li>
						<li><a href="#" class="lien_nagiv"> lien </a><div class="img_sep"></div></li>
						<li><a href="#" class="lien_nagiv"> lien </a><div class="img_sep"></div></li>
						<li><a href="#" class="lien_nagiv"> lien </a></li>
					</ul>
				</div>
<!-- Fin Navigation -->
				<div id="contenu">
					<p class="infos_connexion">Bienvenue USER !! <br /></p>
			<p><br /><br /><hr />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
				Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.
	Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</p>
	<p><br /><br /><hr />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
				Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</p>
				</div>
			</div>
<!-- Fin du Global -->
			<div id="footer">
			</div>
<!-- Fermeture des deux "super_global" -->
		</div>
	</div>
</body>
</html>

Au passage, savez vous pourquoi la balise <hr /> ne passe pas quand j'essaye de valider ma page ? Pourtant mes balises sont bien fermées, je ne pense pas que ca vienne de là ...

Voici le css:

body
{
	padding: 0px;

	font-family: Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
	font-size: 0.8em;

	background: #eeeeee  url("./fond_bleu_px.jpg") repeat-x;
}

/***** super_global_abstract_ left et right = pour décorer le fond
avec des background image *****/
#super_global_abstract_left
{
	padding: 0px;
	margin: 0px;

	background: url("./deco2.png") no-repeat 0px 0px;
}

#super_global_abstract_right
{
	padding: 0px;
	margin: 0px;

	background: url("./deco4.png") no-repeat 400px 0px;
}

#header
{
	width: 490px;
	height: 140px;

	margin-bottom: 20px;

	background: url("./header2.png") no-repeat;
}
/***** Ici je mets des marges négatives car j'ai des petits blancs sur les cotes
et en bas de mon footer
(je mets des plus grosses marges histoire d'assurer) *****/
#footer
{
	clear: both;

	height: 60px;

	margin-right: -7px;
	margin-bottom: -7px;
	margin-left: -10px;

	background: url("./herbe_footer_copie_petit2.png") repeat-x;
}

/***** Global qui contient la navigation sur la gauche
et le contenu a droite *****/
#global
{
	width: 1024px;
	margin: auto;
}

#contenu
{
	width: 770px;

	margin-bottom: 50px;
	margin-left: 240px;
	padding: 5px;

	border: 1px solid #eeeeee;
}

.infos_connexion
{
	float: right;

	width: 350px;

	margin: 5px;
	padding: 2px;
}

/***** Barre de navigation sur la gauche *****/
#navigation
{
	float: left;

	width: 230px;
	margin-top: 50px;
	padding: 0px;

	border: 1px solid #eeeeee;

	text-decoration: none;
	color: #000000;
}

#navigation ul
{
	margin: 0px;
	padding: 5px;

	list-style: none;
}

.img_sep
{
	width: 135px;
	height: 1px;

	margin: 2px 0px 2px 7px;

	background: url("./separateur_menu.png") repeat-x;
}

.lien_nagiv
{
	padding: 6px 6px 6px 10px;
	display: block;
	text-decoration: none;
	color: #000000;
}

#navigation ul li a:hover, #navigation ul li a:focus
{
	background: #ffffff;
}

Voilà, j'espère avoir été clair (sans support de test c'est plus difficile Smiley ohwell

).
Merci à ceux qui y prêteront attention.

Zherus.
Modifié par Zherus (07 Dec 2009 - 11:58)

gc-nomade

7 Dec 2009 à 01:11

un min-width:1024px; sur footer ne suffit-il pas a regler ce probleme ?

Zherus

7 Dec 2009 à 09:28

Et bien ... Oui.
En effet le min-width est bien pris en compte (je l'avais testé pourtant mais je n'avais pas obtenu le même résultat ...) et j'ai mon footer qui reste bien à sa place quand je réduis ma fenêtre.

Pour info: il restait une légère marge sur la droite, corrigée grâce à un min-width de footer supérieur au width de mon global.

En tout cas merci pour la réponse rapide et pour le coup de main !

Bonne journée.
Modifié par Zherus (07 Dec 2009 - 09:29)

Laurie-Anne

7 Dec 2009 à 09:32

Bonjour,

Le problème est-il [résolu] ?

Sujet clos

CSS et mise en forme, CSS3

[Résolu]Footer, image et dimensions fenetre