Hauteur dynamique du fond

Bonjour à tous,

Voilà j'ai un problème avec le site que je code, c'est que le menu descend et monte selon les navigateurs... (les liens du menu).

Un autre problème est que je ne sais pas comment faire pour que le fond descende jusqu'en bas de l'écran.

Voici le lien :

http://demango.ovh.org/air_control/?page=home&lang=fr

L'image de fond que je voudrai qui descende jusqu'en bas du site quelque soit la résolution et la hauteur du navigateur :
http://demango.ovh.org/air_control/images/background.png

Pour l'instant j'ai juste mit ceci pour l'image de fond donc si la hauteur est supérieure à l'attribut height, ça casse le site :S

#back {
	background-image: url("images/background.png");
	background-repeat: repeat-y;
	width: 1000px;
	height: 625px;
}

Merci de votre aide
Modifié par Scriptiz (02 May 2008 - 17:31)

Bonjour Scriptiz,

Même si un modérateur peut effectivement supprimer ton sujet, le mieux reste de le laisser tel que posté initialement et d'y ajouter la manière dont tu as résolu le problème...histoire d'en faire profiter ceux qui éventuellement rencontreraient le même soucis...le principe de la communauté en somme...

Cdt,
Sylvain

Ok je vais le remettre D'un coté il me reste quand même un soucis

Pour le menu j'ai réglé ça en découpant en plusieurs couches plutot qu'une seule image avec des divs pour le contenu, j'ai maintenant plusieurs parties : header, menu, main et footer. Du coup je n'ai plus le problème de marges qui changeaient selon les navigateurs.

Mais pour le fond je ne sais pas comment faire d'habitude j'ai des fond qui se répetent en x (repeat-x), hors ici c'est en repeat-y et le height: 100% ne marche pas :S

Merci de votre aide.
Modifié par Scriptiz (02 May 2008 - 17:30)

J'ai trouvé une solution qui me dit de mettre un height:100%; pour le body sans quoi le height:100%; de #back reviendrait à une valeur auto.

J'ai donc mit height:100%; dans mon body, et dans mon #back (qui contient l'image de fond en repeat-y). Mais ça n'y change rien, j'ai toujours le même problème l'image ne s'allonge pas jusqu'en bas du navigateur

Alors que dans c'est exemples ça marche (le height:100%; pour le body et sur le div en question) :
http://demango.ovh.org/air_control/test.html
http://demango.ovh.org/air_control/test2.html

Je remet mes sources au cas où :
http://demango.ovh.org/air_control/?page=home&lang=fr
http://demango.ovh.org/air_control/style.css

Merci à quiconque m'aidera ^^
Modifié par Scriptiz (03 May 2008 - 11:22)

J'ai trouvé une solutio, j'applique le height:100%; sur le body mais aussi sur le html, et du coup celui du div #back marche aussi seul truc un peu lourd c'est que la hauteur est basée sur celle du navigateur sans les barres de taches et autres... donc ca reste un peu trop long mais c'est déjà beaucoup mieux

body,html {
	background-color: #888787;
	width: 1000px;
	margin: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	font-family: Arial, Helvetica, sans-serif;
	height:100%;
}

Si quelqu'un à une solution plus performante et qui prend juste la bonne hauteur je suis prenante aussi

Il ne me reste qu'un problème, sur la page du choix des langues, l'affichage en hauteur est parfait ainsi qu'en largeur, le fond s'étire bien sur toute la hauteur.
page du choix de la langue : http://demango.ovh.org/air_control/

Mais une fois sur la page du contenu (langue choisie), la hauteur est un peu plus grande que le navigateur, par contre la largeur est beaucoup trop grande alors que je l'ai mise à 1000pixels

S'il vous plait aidez-moi je ne trouve pas le problème et pourquoi cela s'allonge autant en largeur alors que sur la page du choix des langues tout est parfait

Bon vous m'avez bien aidez ^^

Après pas mal de recherches, et en mettant une bordure sur tout les divs, j'ai vus qu'un div (celui du menu) dans lequel j'ai mit un padding de 358px, était décalé sur la droite ce qui créait la zone grise.

J'ai donc retranché le padding à la width et tout marche bien merci

Bonjour Scriptiz,

Effectivement tu te débrouilles un peu seule pour le coup...et finallement tu n'avances pas si mal

Plusieures choses me "chagrine" dans ton intégration...
Ton <div id="back"> pour commencer, pourquoi ne pas appliquer ton image de fond au body directement (et supprimer ce div inutile) ?
Pourquoi ne pas te servir de <div id="center"> pour englober/centrer tout le site ?
Quelque chose dans ce style par exemple ?

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
}

body {
background:#888787 url(background.png) repeat-y center center;
font-family:Arial,Helvetica,sans-serif;
}

#center {
	width: 944px;
	margin: 0 auto;
	padding-top:20px;
	min-height:100%;
}

Pour le menu, c'est pas mal vu

Adresse et téléphone mériteraient un meilleur traitement que

<div style="float: left; margin-left: 630px; padding-top: 13px; text-align: right;">
<div style="padding-top: 13px; margin-right: 20px; text-align: right;">

Le png transparent pour le lien du pied de page n'est pas ce que tu as fait de mieux, d'autres solutions sont possibles, notamment un texte en dur dans la page plutôt qu'une image, et si tu souhaites garder l'image, tu peux éventuellement repousser ce texte hors de vue du viewport.

Il faudra aller faire un petit tour sous IE6...et faire une feuille de styles corrective pour ce navigateur à défaut de repenser ton intégration

Cdt,
Sylvain

Une réponse Merci beaucoup

Je vais appliquer tout tes conseils (du moins essayer ). Cependant pour mettre l'image de fond dans le body, je n'y arrive pas, j'avais commencé par là, mais l'image n'était pas centrée malgré le

width: 1000px; margin: auto;

Bien que le contenu était centré, l'image d'arrière-plan ne l'était pas

Mais je pense me rappeller qu'on peut donner la position de l'image non? Un background-align:top center; ou quelque chose comme ça?

Sinon pour l'image transparente je vais changer ça ok merci du conseil je vais le mettre en texte

Par contre pour l'adresse et le téléphone je ne vois pas comment faire d'autre à part un table

Merci pour tout c'est gentil de m'aider


ps: je n'ai pas IE6, mais juste IE7, et je ne sais pas comment on fait des feuilles de styles correctives :S Quelqu'un pourrait me faire un screenshot du site sous IE6? On sais faire un link style uniquement pour IE6?
Modifié par Scriptiz (03 May 2008 - 13:45)

De rien
Je suis loin d'être le spécialiste de ce forum, et mes "conseils" sont à prendre pour ce qu'ils valent

Concernant le positionnement d'un background, je t'ai mis la "version raccourcie mais c'est en bleu que cela se joue :

body {
background:#888787 url(background.png) repeat-y [#blue] center center[/#];

cela correspond à :

body {
background-color:#888787;
bacground-image: url(background.png);
background-repeat: repeat-y;
background-position:center center; (ou 50% 50% ou ce que tu veux)

Plus de détails ici

Pour les coordonnées, un tableau pourquoi pas, des blocs flottants, des listes, tu as le choix....

En ce qui concerne les correctifs à adresser à IE6 ces liens devraient pouvoir t'aidés :
La Faq
Blog&Blues

Cdt,
Sylvain

*J'oubliais pour visualiser le rendu sur différents navigateurs (et différentes versions d'IE) tu peux jeter un oeil sur Liste de ressources et tutoriels sur les Standards (catégorie "divers", en bas de listes)
Modifié par 6l20 (03 May 2008 - 15:08)

Voilà j'ai fait tout tes changements, ça marche bien et j'ai déjà moins de divs dans la structure principale merci

Cependant il reste quelque chose que je voudrais faire sur la structure, c'est aligner verticalement le bloc blanc contenant le contenu et le menu du site... c'est à dire cette partie ci : http://demango.ovh.org/air_control/images/center.png

Donc pour cela j'ai suivi le tuto d'alignement vertical en mettant :

#center {
	width: 943px;
	margin: auto;
	padding-top: 20px;
	[#red]display: table-cell;
	     vertical-align: middle;[/#]
}

Du coup tout le bloc se colle sur la marge gauche du navigateur, et il ne s'aligne même pas verticalement

J'ai tenté un text-align et autres, mais je ne sais pas quoi faire... peut-être que dans mon cas ça ne peut pas marcher

Après ça j'arrête de vous embetter promis
Modifié par Scriptiz (03 May 2008 - 16:50)

Hello Scriptiz,

Tu n'embêtes personne
Je ne comprends cependant pas très bien ce que tu tentes de faire...
(ton lien ne fonctionne pas)
Centrer verticalement ta partie texte, ton site ?
Merci d'être plus précise sur ce point

En ce qui concerne ton pied de page, c'est un peu mieux, mais ta balise alt ne devrait pas être vide selon moi.
Autre solution, ne pas utiliser d'image :
css:

#center_footer a{
	display:block;
	text-decoration:none;
	color:#5A7097;
	font-family:Arial,Helvetica,sans-serif;
	font-size:.6em;
	padding-right:10px;
	}

html:

<div id="center_footer"><a href="http://www.be-web.eu/"><strong>Designed and Coded by BE-WEB</strong></a></div>

par exemple te donnera un rendu presque "identique"

As-tu visité les liens que je t'ai fourni ? Notamment ceux pour visualiser ton (tes) site(s) sous d'autres navigateurs ?

Cdt,
Sylvain

Je suis entrain de lire les liens, je m'y perd

Par contre pour le lien en image j'aimerai gardé cette police donc comme ce n'est pas une police standard, je l'ai fait en image

Sinon pour la partie du site qui doit s'aligner verticalement sur le fond, c'est celle ci et son contenu :

http://demango.ovh.org/air_control/images/center.png

edit: je télécharge la version standalone de IE6, je ne savais pas que ça existait merci pour les liens

edit 2: ca fait mal sous IE6 déjà il gère pas la transparence des PNG, et le reste est catastrophique... je vais voir ça
Modifié par Scriptiz (03 May 2008 - 17:31)

Tu ne pourras certainement pas assimiler toutes ces informations en un jour...prends le temps

Pour le lien, je ne vois pas beaucoup de différence avec la police que tu utilises, cependant, tu fais comme bon te semble
Penses à remplir la balise alt ("lien vers"...ou ce que tu veux)
Un lien en dur dans le code (Designed and Coded by BE-WEB par exemple) ne serait pas de trop (ton image peut, être indisponible, non utilisée (navigateurs textuels par exemple), non chargée, etc...) auquel cas...ton lien est inaccessible
(tu peux utiliser un text-indent négatif pour "cacher" ce texte aux navigateur graphique)

Pour le centrage vertical, le display:table-cell est une bonne idée, mais n'est pas supporté par tous les navigateurs...IE notamment...et la question est loin d'être simple...

Il "reste" le centrage avec les marges négatives mais ce n'est pas sans risques...

a écrit :
Les marges négatives en CSS posent des problèmes sur Explorer Mac ainsi que divers problèmes lors du redimensionnement de la page (bords mangés, pas de barre de défilement horizontal quand on réduit la page, etc.). Il est donc fortement conseillé d'éviter cette méthode sauf si vous en maîtrisez les conséquences.

#center {
	position:absolute;
	left: 50%; 
	top: 50%;
	width: 944px;
	height: 558px;
	margin-top: -279px; /* moitié de la hauteur */
	margin-left: -472px; /* moitié de la largeur */
	}

Cela semble fonctionner dans ton cas.

En ce qui concerne adresse et n°, voici ce que je te propose :
css :

#coord {
float:left;
margin-right:5px;
padding:15px;
margin-left:610px;
}
#adress {
float:right;
margin-right:21px;
padding:15px;
}

html:

<div id="center_header">
	<span id="coord">
		<h3>Tel. :</h3>
			<p> +32 472 468 608<br/>
				+32 10 84 55 54
			</p>
	</span>
	<span id="adress">
		<h3>Adresse :</h3>
			<p> Av. General Monjoie, 2<br/>
				1050 Bruxelles</p>
	</span>
</div>

Ce n'est surement pas la production de l'année, mais ça fonctionne

Concernant IE6, ce n'est pas si catastrophique que ça

Je te laisse chercher comment résoudre ce petit soucis de gestion des png transparent sous IE6 et autres petites subtilités de ce navigateur

Cdt,
Sylvain

Salut, salut,

6l20 a écrit :

<div id="center_header">
	<span id="coord">
		<h3>Tel. :</h3>
			<p> +32 472 468 608<br/>
				+32 10 84 55 54
			</p>
	</span>
	<span id="adress">
		<h3>Adresse :</h3>
			<p> Av. General Monjoie, 2<br/>
				1050 Bruxelles</p>
	</span>
</div>

Si je puis-je me permettre, la balise span ne devrait contenir que des éléments 'en-ligne' ...

Sinon le plus simple est parfois d'utiliser une mini <table> !

A+

Heyoan a écrit :
Salut, salut,
Si je puis-je me permettre, la balise span ne devrait contenir que des éléments 'en-ligne' ...
A+

Tu peux tout à fait te permettre
Désolé pour cette faute d'inattention

@Scriptiz: évidemment ne pas reproduire ma bétise, et comme déjà évoqué plus haut et confirmé par Heyoan utiliser un tableau sera surement la solution la plus simple
Modifié par 6l20 (03 May 2008 - 19:52)

Merci beaucoup je vous adore, je met tout ça dans le code et j'applique vos remarques

J'ai du boulot c'est partit !!


ps: le bug d'IE6 j'ai une petite idée je vous dirais quoi Vive la chasse au bug
Modifié par Scriptiz (04 May 2008 - 10:21)