Probleme placement image fixe et contenu hauteur variable

Bonjour,

Je n'arrive pas à obtenir ce que je souhaite en css, parcourant tous les jours le net, je me suis enfin décidé à posté un message sur ce forum.
Je souhaite avoir cette mise en page:
[-----header-----]
[-including-]
[------footer-----]

header: image fixe 1024x101 toujours en haut de l'écran selon tout navigateurs et toutes résolutions
centre: largeur fixe (198 pour menu | 826 pour including) mais la hauteur varie selon la fenetre du navigateur
footer: image fixe 1024x31 toujours en bas de l'écran selon tout navigateurs et toutes résolutions

Comme toute la largeur est fixe, j'aimerais que tout l'ensemble soit centré.

C'est surtout la hauteur variable que je n'arrive pas à fixé car j'utilise du php pour inclure dynamiquement des pages dans "including" mais si ces pages s'affichent a leur taille normale (par exemple un tableau d'une hauteur de 1000px va s'afficher totalement et non avec un scroll sur le coté)

Voila, j'espère que j'ai été assez clair, si vous avez besoin d'autres informations, n'hésitez pas. Merci d'avance

Bonjour,

Avez-vous essayer via le modèle Alsacreations suivant :
http://css.alsacreations.com/modeles/modele9.htm ?

En enlevant le menu horizontal, le résultat devrait être celui voulu.

Cordialement,
Mikiman

mini a écrit :
image fixe 1024x101

Arf, un site en 1024px de large. C'est le meilleur moyen pour avoir une barre de défilement horizontale inutile sur un écran en 1024px de large (petit indice: ce n'est pas parce que l'écran fait 1024 que la fenêtre du navigateur permet d'afficher 1024px de contenu ).

mini a écrit :
toujours en haut de l'écran selon tout navigateurs

Il faut alors utiliser position: fixed. Ce ne sera pas compatible IE6, mais tant pis pour papy IE6.
Si vraiment on souhaite quelque chose de compatible IE6, il faudra rajouter un script JavaScript pour ce dernier (et uniquement pour lui, via un commentaire conditionnel qui va bien). C'est assez lourd à mettre en place et pas toujours très convaincant, donc je déconseillerais plutôt cette approche.

Enfin, signalons que, pour un site orienté «contenu», rogner sur l'espace d'affichage disponible pour le contenu en figeant des éléments aussi mineurs qu'un en-tête et un pied de page, c'est plutôt une bêtise. Pour des applications web, par contre, ça peut se justifier (par exemple s'il s'agit de conserver certains outils importants toujours visibles).

mini a écrit :
C'est surtout la hauteur variable que je n'arrive pas à fixé car j'utilise du php pour inclure dynamiquement des pages dans "including" mais si ces pages s'affichent a leur taille normale (...)

Si ces pages s'affichent à leur taille normale...? Je crois que tu as oublié de finir ta phrase, et donc de décrire ton problème!

Peut-on voir ce que tu as réalisé pour l'instant? De préférence (non, pardon, obligatoirement) quelque part en ligne?

Re-bonjour,

Merci pour vos réponses, j'ai refais plusieurs essais mais les éléments ne font que se mettre partout et surtout ne restent pas juste dans la fenetre de base.

-------Voici mon code css---------

body
{
  height:100%;
  width:100%;
  margin:0px;
}

#header
{
  background-image:url(pictures/framework/picture_01.gif);
  height:101px;
  width:1024px;
  position:fixed;
}

#main
{
  position:relative;
  width:1024px;
  margin:0 auto;
  background-color:#FFFFFF;
}

#menu
{
  background-color:#FFFFFF;
  border-right-color:#000000;
  border-right-width:2;
  position:absolute;
  width:198px;
  margin:0 auto;
}

#including
{
  margin-left:198px;
  width:826px;
  border-right-color:#FFFF00;
  border-right-width:1;
  overflow:auto;
  padding:10;
  background-repeat:no-repeat;
}

#footer
{
  background-image:url(pictures/framework/picture_04.gif);
  position:fixed;
  bottom:0;
  height:31px;
  width:1024px;
  text-align:center;
  display:inline;
}

.including a
{
  text-decoration:none;
}

.including a:hover
{
  text-decoration:underline;
}

.including table
{
  margin-top:2;
  margin-bottom:2;
}

.menu a
{
  text-decoration:none;
  color:#000000;
  padding:0;
}

.menu a:hover
{
  text-decoration:underline;
  cursor:pointer;
}

.menu li
{
  list-style-type:none;
}

-----Et voici mon code de la page index-----------

<?php
	session_start();
?>

<html>
<head>
	<title>nom_du_site</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>

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

	<div id="header">

	</div>
<div id="main">
	<div id="menu">
		<br>
		<div class="menu">
		<li><a href="index.php?dir=&page=welcome">Welcome</a></li><br><br>
		<img src="pictures/framework/menu1.gif"><br><br>
		<li><a href="index.php?dir=&page=delta_gr">company Group</a></li>
		<li><a href="index.php?dir=&page=delta_ch">company China</a></li>
		<li><a href="index.php?dir=&page=delta_news">company News</a></li>
		<li><a href="index.php?dir=&page=recruitments">Recruitments</a></li><br><br>
		<img src="pictures/framework/menu2.gif"><br><br>
		<li><a href="index.php?dir=&page=catalog">Catalog</a></li>
		<li><a href="index.php?dir=&page=search">Find a product</a></li>
		<li><a href="index.php?dir=&page=new_products">New Products</a></li>
		<li><a href="index.php?dir=&page=promotions">Promotions</a></li><br><br>
		<img src="pictures/framework/menu3.gif"><br><br>
		<li><a href="index.php?dir=&page=tech_info">Technical Informations</a></li>
		<li><a href="index.php?dir=&page=after_sales">After Sales Service</a></li>
		<br><br>
		<li><a href="index.php?dir=&page=partner">Partner space</a></li>
		</div>
	</div>

	<div id="including">
		<div class="including">
		<?php
			$page=isset($_GET['page']) ? htmlentities($_GET['page']) : "welcome";
			include(.$page.".php");
		?>
		</div>
	</div>
</div>
	<div id="footer">
		<a href="mailto:aaaa@company.com">aaaa@company.com</a>
	</div>


</body>
</html>

---------

Je ne peux vous envoyer de lien du site car je travaille en local et il n'est pas encore disponible. Il maque donc les images mais vous pouvez les remplacer par des fonds avec les couleurs voulues.

En effet j'ai oublié de terminer ma phrase tout a l'heure !! mais je voulais dire que mon contenu ne reste pas fixe et s'agrandit à la taille de la page chargé.

Merci de votre aide en tout cas, a toute
Modifié par mini (18 Jun 2008 - 10:28)

Re,

1. Il manque un Doctype à ton code HTML. Très très mauvais plan. À lire:
http://css.alsacreations.com/Bases-et-indispensables/DTD-comment-choisir

2. Le bloc div#including s'étend en hauteur en fonction de son contenu, c'est cela le problème? Si c'est le cas, a) ça ne devrait pas être considéré comme un problème (c'est figer la hauteur d'un bloc de contenu qui est problématique, pas l'inverse) et b) c'est normal, car le bloc en question n'a pas de hauteur (propriété CSS height).

Si je puis me permettre: oublier pour l'instant les velléités d'en-tête et pied de page «fixes», et de conteneur figé en hauteur. Ça donne généralement de mauvais sites, surtout si on ne maitrise pas les différentes options techniques (gestion de position: fixed, par exemple).

C'est a nouveau moi,

Merci pour l'info du doctype, je l'ai rajouté.
Je ne peux pas fixer un height a mon contenu car je veux que sa hauteur varie selon les fenetre, j'ai essayé de fixer la position en définissant un bottom et un top mais ca ne le prend pas en compte.

Comment ferais tu pour avoir l'entete et le pied page fixe et que le contenu/menu adaptent leur hauteur en fonction de la fenetre ouverte?

A bientot

Bonjour,

J'ai oublié de le signaler hier: pourrais-tu corriger ton message ci-dessus (trois messages plus haut) pour encadrer les portions de code par les balises [ code] et [ /code]? (Sans espace après le crochet ouvrant.) Cela rend le forum plus lisible. Merci d'avance. Pour corriger un message, il faut utiliser le bouton «éditer» en haut à droite du message en question.

mini a écrit :
Je ne peux pas fixer un height a mon contenu car je veux que sa hauteur varie selon les fenetre, j'ai essayé de fixer la position en définissant un bottom et un top mais ca ne le prend pas en compte.

C'est possible en positionnant le bloc en absolu, et en utilisant à la fois top et bottom, effectivement. Ça ne sera pas compris par papy Internet Explorer 6 (mais à priori ça passera avec IE7).

mini a écrit :
Comment ferais tu pour avoir l'entete et le pied page fixe et que le contenu/menu adaptent leur hauteur en fonction de la fenetre ouverte?

Hé bien en général je ne le fais pas, car je considère que c'est un mauvais choix de design dans la plupart des cas.
Si je dois le faire, je peux passer par du positionnement fixe de l'en-tête et du pied de page (position: fixed), et laisser le contenu principal prendre toute la hauteur et être recouvert par l'en-tête et le pied de page lorsqu'il défile. Si j'ai un en-tête de 100px de haut et un pied de page de 50px de haut, je donnerais un padding-top: 110px et un padding-bottom: 60px au contenu principal.
Je ne positionne pas le bloc de contenu en absolu (avec par exemple position: absolute; top: 110px; bottom: 60px;), car utiliser une barre de défilement interne (overflow: auto) est plutôt mauvais pour l'ergonomie du site, surtout s'il s'agit du contenu principal.

Et dans tous les cas, il faudra largement adapter pour papy IE6. C'est à dire, pour faire simple, lui adresser des correctifs CSS via un commentaire conditionnel qui va bien, afin de basculer vers un affichage plus classique (bloc central dont la hauteur dépend du contenu, en-tête et pied de page non fixes).

Enfin, en règle générale je tâche de me rappeler que la fenêtre du navigateur est un média non paginé, et qu'il n'y a aucune raison de tout contraindre dans la hauteur du viewport. D'ailleurs, très rares sont les sites grand public qui le font. Les navigateurs font un très bon boulot pour afficher une barre de défilement globale, facilement utilisable (clic maintenu sur la barre, clic sur des boutons en haut et en bas, molette de la souris, flèches du clavier, divers raccourcis clavier...); je leur fais donc confiance, à eux ainsi qu'aux visiteurs.

OK tres bien, merci! Tu as raison je vais lacher cette idée, c'est vrai que ce n'est pas tres utile et ca me fais pas avancer beaucoup sur mon site ducoup

Tu sais si les border-color-right et autres sont pris en compte sur IE ? Je n'ai pas l'impression, j'aimerais avoir une ligne jaune sur le coté droit de mon contenu.

Autre chose, tu disais dans ta premiere reponse que choisir une largeur de 1024px n'était pas tres idéale. Généralement, quelle largeur les sites internet utilisent?

A toute

mini a écrit :
Tu sais si les border-color-right et autres sont pris en compte sur IE ?

J'imagine que non, vu que border-color-right n'existe pas.
Tu devrais plutôt utiliser:
- border-right-color
- ou plus simplement border-right.