OVH Cloud OVH Cloud

Position d'une couche dans la fenêtre du navigateur.

15 réponses
Avatar
NyOz
Bonjour à toutes et à tous, est-ce que l'un d'entre vous sait (et pourrait
m'en faire part) quel code il faut rentrer pour qu'une couche tienne
automatiquement au milieu de la fenêtre du navigateur quelle que soit la
définition de l'écran du visiteur?

Nyoz

http://www.nyoz.fr/
http://www.syn-n-psys.com/

10 réponses

1 2
Avatar
Louise
Bonjour,
Pour une couche centrée qui s'ajuste selon la taille de la fenêtre,
voici un bon exemple:
http://meyerweb.com/eric/css/edge/complexspiral/glassy.html

Cet effet est obtenu en définissant les marges de la couche (div).

Vous pourriez faire un essai en copiant ceci dans le code Html
d'une nouvelle page, avant la balise </head>:
<style type="text/css">
<!--
div#content {margin: 5em 5em 10em 5em; border: solid #963;}
-->
</style>

Après la balise <body>, inscrire une couche avec le même id:
<div id ="content">bla bla...</div>

A tester en réduisant la taille de la fenêtre dans différents navigateurs.

Pour compléter, voir aussi cet article:
http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Centrer-les-elements-ou-un-site-web-en-CSS

Bonne journée,
Louise



"NyOz" a écrit dans le message de news:

Bonjour à toutes et à tous, est-ce que l'un d'entre vous sait (et pourrait
m'en faire part) quel code il faut rentrer pour qu'une couche tienne
automatiquement au milieu de la fenêtre du navigateur quelle que soit la
définition de l'écran du visiteur?

Nyoz

http://www.nyoz.fr/
http://www.syn-n-psys.com/


Avatar
NyOz
Désolé, mais j'ai beau essayé en modifiant à l'infinile script ca ne marche
pas. Le pire est quand je mets

<style type="text/css">
<!--
div#content {margin: 5em 5em 10em 5em; border: solid #963;}
-->
</style>

directement alors la ma page est carrément dans le coin en bas à droite de
la page et ... ne se centre pas...
Avatar
Louise
Bonjour,
Pouvez-vous publier quelque part un exemple de votre page, pour en voir
le code? Ou peut-être copier ici le début du code de votre page, au moins
jusqu'après la balise body ?

Au revoir,
Louise

"NyOz" a écrit dans le message de news:

Désolé, mais j'ai beau essayé en modifiant à l'infinile script ca ne marche
pas. Le pire est quand je mets

<style type="text/css">
<!--
div#content {margin: 5em 5em 10em 5em; border: solid #963;}
-->
</style>

directement alors la ma page est carrément dans le coin en bas à droite de
la page et ... ne se centre pas...


Avatar
NyOz
Ou, bien sûr... J'allais le faire.

Disons que le code de ma page est :

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
</head>

<body>

<div style="position: absolute; width: 823px; height: 1763px; z-index: 1;
left: 10px; top: 15px; background-image:
url('file:///C:/Documents%20and%20Settings/Nicolas%20AUZEINE/Mes%20documents/Mes%20sites%20Web/Syn%26psyS/images/background.jpg')" id="couche1">
</div>

</body>

</html>



Que dois-je rentrer?

NyOz
http://www.nyoz.fr/
Avatar
Hans Le Roy
Bonjour,

Jette un coup d'oeil à http://allmyfaqs.net/faq.pl?Center_with_CSS où les
détails de cette entreprise sont expliqués.

Bonne chance!

Hans


"NyOz" wrote in message
news:
Ou, bien sûr... J'allais le faire.

Disons que le code de ma page est :

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
</head>

<body>

<div style="position: absolute; width: 823px; height: 1763px; z-index: 1;
left: 10px; top: 15px; background-image:
url('file:///C:/Documents%20and%20Settings/Nicolas%20AUZEINE/Mes%20documents/Mes%20sites%20Web/Syn%26psyS/images/background.jpg')"
id="couche1">
</div>

</body>

</html>



Que dois-je rentrer?

NyOz
http://www.nyoz.fr/


Avatar
NyOz
Bonjour, merci pour le lien mais ne pourriez vous pas simplement me dire ce
que je devrais écrire si le code de ma page est :


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
</head>

<body>

<div style="position: absolute; width: 823px; height: 1763px; z-index: 1;
left: 10px; top: 15px; background-image:

url('file:///C:/Documents%20and%20Settings/Nicolas%20AUZEINE/Mes%20documents/Mes%20sites%20Web/Syn%26psyS/images/background.jpg')"
id="couche1">
</div>

</body>
</html>


Cela serait franchement plus simple pour moi d'avoir un exemple concret, je
saurais après l'adapter à ma page...

Merci d'avance, N. AUZEINE
Avatar
Louise
Bonjour,
A partir de votre exemple, voici une couche toujours centrée dans la page Web.
La couche est de largeur fixe, tandis que les marges varient:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
</head>

<body>
<div style="background-image: url('images/background.jpg'); left: 10px; top: 15px;
width:600px; margin: auto; float: center; z-index: 1;" id="couche1">
bla bla...
</div>
</body>
</html>

==================================================== Le même exemple, avec une largeur flexible et des marges fixes:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
</head>

<body>
<div style="background-image: url('images/background.jpg'); left: 10px; top: 15px;
margin: 5em 5em 10em 5em; float: center; z-index: 1;" id="couche1">
bla bla...
</div>
</body>
</html>

======================================================
En espérant que cela puisse vous être utile,
Louise


"NyOz" a écrit dans le message de news:

Cela serait franchement plus simple pour moi d'avoir un exemple concret, je
saurais après l'adapter à ma page...

Merci d'avance, N. AUZEINE


Avatar
NyOz
RAHHHHHHHHH ça ne vas toujours pas !!!!!!!

Merci pour les codes mais ça ne marche pas, en plus je veux uniquement avec
une largueur fixe.

J'ai posté une page test, j'ai remis la couche à la taille de l'image
823x1763, mais ça ne vas pas...

Pour les téméraires c'est ici : http://www.syn-n-psys.com/nouvellepage1.htm
Avatar
Louise
Bonjour,
J'ai changé la résolution de mon écran pour avoir le plus grand possible. Quand je
réduis la taille de la fenêtre avec la souris, votre image se tient au centre (sa
largeur est fixe). Lorsque la fenêtre devient plus petite que la largeur de l'image,
une barre de défilement s'ajoute au bas.

Mais vous voulez un autre résultat, lequel exactement ?
Au revoir,
Louise

"NyOz" a écrit dans le message de news:

RAHHHHHHHHH ça ne vas toujours pas !!!!!!!

Merci pour les codes mais ça ne marche pas, en plus je veux uniquement avec
une largueur fixe.

J'ai posté une page test, j'ai remis la couche à la taille de l'image
823x1763, mais ça ne vas pas...

Pour les téméraires c'est ici : http://www.syn-n-psys.com/nouvellepage1.htm


Avatar
NyOz
Hé bien, je veux tout simplement que la bande que constitue l'image reste au
centre de la fenêtre du navigateur, quelle que soit la résolution et la
taille de l'écran de l'utilisateur...

Vous me dites que l'image vous apparaît au centre de la fenêtre???

Car moi quand je visite la page, l'image reste à gauche de l'écran......

NyOz
http://www.nyoz.fr/
1 2