Bonjour

A y'est j'ai transformer mes vilaines frames en css

j'ai choisi de dimensionner en 1024 px de large

je voudrais savoir s'il y a possiblité de positionner l'ensemble au milieu de la page quand l'affichage est + grand, genre 1280

j'ai essayé la balise center, marche pas
mettre dans une table, marche pas non plus

avez-vous une solution ?

Merci
Merci de ta réponse

difficile de mettre un exemple en ligne, je suis en local pour le moment

pour le css utilisée, c'est celui du tuto ici

dans le tuto que m'indiques il faut utiliser une balise div pour le #global

et comme j'utilise des div aussi pour les "simili-frame", je voualis savoir si on peut mettre une div dans une div ?

Merci
Tu peux imbriquer autant de div que nécessaire. En faisant juste attention de ne pas systématiquement en mettre partout bien évidemment pour garder un code html sémantique.
Merci

Mais bon je n'y arrive pas

en ajoutant le #global, en mettant le "position" en "absolute" ou "relative", en ajoutant "margin-rigth" et "left" en "auto" dans le "global" ou le "body", etc, rien ne fonctionne Smiley sweatdrop Smiley decu

voila le code de la page de base

<!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>Document sans nom</title>
<style type="text/css">
<!--
	 
body {
	margin: 0;
	padding:0;
	position: absolute;
	width: 1024px;
	height: 605px;
	background-color: #000;
}

.logo {
	position: absolute;
	width: 200px;
	height: 175px;
	background-color: #000;
	padding: 0;
}

.bandeau {
	margin-left: 200px;
	width: 824px;
	height: 175px;
	background-color: #000;
	padding: 0;
}

.conteneur {
	height: 400px;
	width: 100%;
}

.menu {
	position: absolute;
	left: 0;
	width: 200px;
	height: 400px;
	background-color: #000;
	padding: 0;
}

.principale {
	margin-left: 200px; /* on place ce bloc à droite du bloc menu de 180px de large */
	width: 824px;
	height: 400px;
	overflow: auto; /* cette propriété va permettre le scroll de ce bloc */
	padding: 0;
}

.bas {
	width: 1024px;
	height: 1px;
	background-color: #06C;
	color: #fff;
	font-size: 4px;
	padding: 0;
}
-->
</style>
</head>

<body>
			<div class="logo">
				<?php 
				   include 'logo.html';
				?>
			</div>

			<div class="bandeau">
				<?php 
				   include 'bandeau.html';
				?>
			</div>

			<div class="menu">
				<?php 
				   include 'menu.html';
				?>
			</div>

			<div class="principale">
			  <?php 
					$pages=array(
					   'accueil'=>'page_FM',
					   'presentation'=>'1192',
					   'suite'=>'230',
					   'fin'=>'parcours'
					);
					if(isset($_GET['page']) && array_key_exists($_GET['page'],$pages))
					   include $pages[$_GET['page']].'.html';
					else
					   include 'attente.html';
				?>
			</div>

			<div class="bas">
				Cette partie basse reste fixe
			</div>
</body>

</html>


d'autre part, j'ai un petit souci d'affichage :

avec FF pas de pb, le logo est bien placé
avec IE7 le logo est placé sur le bandeau (c'est à dire décalé de 200 px vers la droite)

Je reprends ma demande :

cet ensemble de div d'une largeur totale de 1024 px est positionné automatiquement en haut à gauche, je souhaiterai qu'il soit centré

est-ce possible, et si oui comment puis-je faire ?

dernière question : à quoi sert le ".conteneur" ?

Merci
Modifié par Mustang (07 Feb 2007 - 02:08)
C'est une mise en page type Jell-0 que tu souhaites ?

Mets toute ta page html dans un div :


<body...> <div id="pagecentre">
....
</div> </body>


Puis rajoute ce code css :


#pagecentre{
	position: relative;
	width: 1024px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;}


Attention, je ne suis encore qu'un n00b en css. Je m'y mets progressivement grâce à koala64 et Florent V...
Mon conseil n'est donc pas forcément le meilleur mais, pour une mise en page type Jell-0, il fonctionne chez moi.
Dites, ça dérange si je fais un peu appel à la jugeote des gens ?
Mustang a écrit :
j'ai choisi de dimensionner en 1024 px de large

C'est une très mauvaise idée. À la rigueur, une largeur de 980px serait plus adaptée. Je vous laisse mettre une fenêtre à une largeur totale de 1024px (bordures de la fenêtre et barre de défilement compris), pour voir si ça passe avec des blocs de pile 1024px de large.

980px pour que ça passe en 1024.
760px pour que ça passe en 800.
Et dans l'idéal, un design fluide qui s'adapte à toutes les résolutions.

Vous me ferez trois Ave et un Pater.
D'ailleurs, tant qu'on parle un peu d'ergonomie, les blocs de hauteur fixe avec barre de défilement interne çayleumal.

Quelqu'un a déjà essayé de naviguer au clavier dans un bloc avec barre de défilement interne ? Avec tous les navigateurs ?

Ou bien de faire passer un site avec barre de défilement interne sur toutes les résolutions, sans jamais avoir de double barre de défilement (une pour la page entière, une pour une zone de contenu) ?

Moi je n'ai jamais réussi ni l'un, ni l'autre. Smiley smile
Florent V. a écrit :

Vous me ferez trois Ave et un Pater.


...
Rendons grâce à... Florent V.

Tu as 110% raison mais comme il voulait du 1024 et que provide t... !

Au fait Florent V... tu as capacité à conférer l'AlsaBsolution ?
Merci pour vos réponses

@ aCOSwt : Qu'appelles-tu Jell-O ?

et je vais réessayer ce que tu me suggère, bien que je crois l'avoir fait hier soir ... mais vu l'heure, je ne sais plus Smiley confused

@ Florent V. : tu as raison, je vais le mettre en 980 px de large Smiley confused


et pour le pb du logo qui se met sur le bandeau en IE avez-vous une idée ?

Merci
Modifié par Mustang (07 Feb 2007 - 12:25)
Mustang a écrit :


@ Florent V. : tu as raison, je vais le mettre en 980 px de large Smiley confused



Perdu, tu avais une chance sur deux. C'est le design fluide qu'il fallait choisir Smiley cligne
Bon la solution proposée ne fonctionne pas, il reste affiché en haut à gauche

D'autre part, mon menu étant en Flash, j'ai remplacé les adresses getUrl par "xxxxx.php?page=accueil" par exemple. Je n'ai pas indiqué de target.

et quand je teste en local, cela boucle (alors que le loop est en "false")

Smiley fache Smiley fache Smiley fache

au secoursssssssssssss Smiley sweatdrop Smiley sweatdrop Smiley bawling
clb56 a écrit :


Perdu, tu avais une chance sur deux. C'est le design fluide qu'il fallait choisir Smiley cligne


si je comprends bien le tuto de "design fluide", le site s'adapte "automatiquement" à la largeur de l'écran.

Ce n'est pas ce que je souhaite.

Je voudrais un site en 980px qui soit en haut à gauche en 1024 et qui soit en haut et centré dans le cas où la résolution de l'écran est supérieur à 1024

est-ce possible ?
Modifié par Mustang (07 Feb 2007 - 15:10)
Mustang a écrit :
si je comprends bien le tuto de "design fluide", le site s'adapte "automatiquement" à la largeur de l'écran.

C'est effectivement la solution idéale (à condition de la mettre en oeuvre de manière satisfaisante).

Si tu choisis d'avoir un site optimisé pour les résolutions 1024 et supérieures, en laissant de côté les 10-15% d'utilisateurs en 800x600, il sera bien sûr plus intelligent d'utiliser une largeur fixe qui permet un bon visionnage en 1024 (donc du 980px, ou moins si on le souhaite).

Mais clb56 rappelait que ça n'est pas une solution parfaite, loin de là, ne serait-ce que parce que le site sera peu ou pas lisible pour 10-15% des utilisateurs...

Mustang a écrit :
Je voudrais un site en 980px qui soit en haut à gauche en 1024 et qui soit en haut et centré dans le cas où la résolution de l'écran est supérieur à 1024

Il suffit de centrer horizontalement le conteneur principal. Sur un écran en 1024, il ne sera ni à gauche ni à droite, mais comme le site prendra presque toute la largeur... ça revient au même, non ?

Alsacréations a un tutoriel CSS sur le centrage des éléments ou d'un site web complet. Conseil : utiliser la technique des marges automatiques, pas le positionnement absolu.