Mise en page d'un site Web crée avec Web studio

A lire avant de poster !

(2 Pages)
1
2
→

Mise en page d'un site Web crée avec Web studio Noter :

#1 IL-MAFIOSO

Extrem Member

Groupe : Equipe Sécurité
Messages : 992
Inscrit(e) : 05-décembre 06

Posté 10 septembre 2008 - 10:32

Bonjour à tous,

Il y a des choses que l'on sait faire et il y en a ou on essaie de se débrouiller

Avant toute chose, Ok j'ai utilisé Web Studio pour créer cette première page. Ok, il y a nvu que j'utilise aussi mais pour créer/modifier des sites "simples". Je sais, certains diront que Web Studio est ...... mais là n'est pas le but du topic.

Le problème que je rencontre est que j'ai crée cette page que vous pouvez visualiser (c'est une esquisse) :

http://pagesperso-or.../Web/index.html

Vous vous rendrez compte que la page est alignée à gauche. De ce fait, pour peu que vous ayez un écran plus grand que le mien, la page s'affiche tout à gauche et à droite je vous laisse regarder la misère du rendu.

Dans Web Studio, il est impossible de centrer la page, voir faire en sorte qu'elle s'adapte automatiquement à la configuration de l'utilisateur. Ou bien pour éviter toute déformation qu'elle soit joliment centrée par exemple.

J'ai un peu fouiné et on parle de balises body à modifier/ajouter avec des % ,...........

En éditant le code source depuis le naviguateur, je tombe par exemple sur ceci :

</style>
</head>

<body bgcolor="#cc6633" link="#800000" vlink="#ffcc99" text="#000000" background="backg51.gif" topmargin=0 leftmargin=0>

Je ne sais pas du tout si c'est ici qu'il faille changer un truc. Toutes vous suggestions sont les bienvenues.
SVP avec des explications claires et limpides

Merci.

Ce message a été modifié par IL-MAFIOSO - 10 septembre 2008 - 10:42 .

Retour en haut of the page up there ^
Multi-citation
Répondre

#2 IL-MAFIOSO

Extrem Member

Groupe : Equipe Sécurité
Messages : 992
Inscrit(e) : 05-décembre 06

Posté 10 septembre 2008 - 01:32

Re,

J'ai lu que cette astuce pouvait marcher :

#tout {
position:fixed !important; /*pour que ça marche sous IE Mac*/
position:absolute;
margin-left:-450px; /*moitié de la largeur du site*/
left:50%;
margin-top:-285px; /*moitié de la hauteur du site*/
top:50%;
width:900px; /*largeur du site*/
height:660px; /*hauteur du site*/
}

tout = le div qui contient tout le reste. J'aimerais bien essayé mais je vois pas du tout ou intégrer ce bout de code et quoi supprimer de l'ancien

Ce message a été modifié par IL-MAFIOSO - 10 septembre 2008 - 01:33 .

Retour en haut of the page up there ^
Multi-citation
Répondre

#3 Greywolf

Modérateur

Groupe : Modérateur [Greywolf]
Messages : 9321
Inscrit(e) : 06-décembre 01

Posté 10 septembre 2008 - 02:01

Salut,

les attributs de feuille de style (css) peuvent

par exemple
cas 1

<div id="tout" style="position: fixed !important;position:absolute;margin-left:-450px;left:50%;margin-top:-285px;top:50%;width:900px;height:660px;">
...
ton code html
...
</div>

cas 2
appeler ta feuille de style via une balise link dans la section <head> de ton code html

<link rel="stylesheet" media="screen" type="text/css" title="Default" href="css/style.css" />

tu remarqueras le href= qui indique l'adresse relative du fichier css; ici dans un sous-répertoire css

et mettre ton code de mise en forme dans le fichier style.css

#tout {
position:fixed !important; /*pour que ça marche sous IE Mac*/
position:absolute;
margin-left:-450px; /*moitié de la largeur du site*/
left:50%;
margin-top:-285px; /*moitié de la hauteur du site*/
top:50%;
width:900px; /*largeur du site*/
height:660px; /*hauteur du site*/
}

en général, il est préférable de séparer le fond (HTML voire XHTML) de la forme (CSS)
Cf le topic de Dylav: http://forum.zebulon.fr/passer-du-html-sau...css-t90992.html

En essayant continuellement on finit par réussir.
Donc : plus ça rate, plus on a de chances que ça marche.

Retour en haut of the page up there ^
Multi-citation
Répondre

#4 KewlCat

Modérateur

Groupe : Modérateur [KewlCat]
Messages : 26695
Inscrit(e) : 04-décembre 00

Posté 10 septembre 2008 - 02:16

... autre possibilité : mettre le code css entre les balises <style> et </style> dans la partie head du fichier

"Le formatage est le dernier refuge de l'incompétence" (Adapté de Isaac Asimov)

Retour en haut of the page up there ^
Multi-citation
Répondre

#5 IL-MAFIOSO

Extrem Member

Groupe : Equipe Sécurité
Messages : 992
Inscrit(e) : 05-décembre 06

Posté 10 septembre 2008 - 02:30

Hello,

Merci pour ta réponse.

C'est un peu du "chinois" tout ce que tu me dit.
Je veux bien chasser tous les virus du monde, mais là les sites Web, c'est vraiment pas ma tasse.

Retour en haut of the page up there ^
Multi-citation
Répondre

#6 KewlCat

Modérateur

Groupe : Modérateur [KewlCat]
Messages : 26695
Inscrit(e) : 04-décembre 00

Posté 10 septembre 2008 - 02:50

Regarde le tout premier extrait de code que tu nous as fourni : j'y vois une balise de fin de bloc "style" juste avant la balise de fin de "head".
Ca veut dire que tu as un bloc <style> (....) </style> dans le "head" et que, par conséquent, tu peux t'en servir pour y coller tes définitions de styles (le "#tout { .... }")

"Le formatage est le dernier refuge de l'incompétence" (Adapté de Isaac Asimov)

Retour en haut of the page up there ^
Multi-citation
Répondre

#7 IL-MAFIOSO

Extrem Member

Groupe : Equipe Sécurité
Messages : 992
Inscrit(e) : 05-décembre 06

Posté 10 septembre 2008 - 02:57

Re,

Voici le head :

<html>
<head>
<!--Serif WebPlus 8.0 HTML Export-->
<!--Supports HTML 4.0-->
<meta http-equiv="Content-Type" content="text/html">
<meta name="Generator" content="Serif WebPlus 8.0">
<title>  </title>

<style type="text/css">
<!--
#PPStyle0-P
		{
		margin:0.0pt 0.0pt 0.0pt 0.0pt; text-align:center; 
		}
#PPStyle3-P
		{
		margin:0.0pt 0.0pt 0.0pt 0.0pt; text-align:center; 
		}
#PPStyle9-P
		{
		margin:0.0pt 0.0pt 0.0pt 0.0pt; text-align:justify; 
		}
#PPStyle10-P
		{
		margin:0.0pt 28.1pt 0.0pt 0.0pt; text-align:justify; 
		}
#PPStyle14-P
		{
		margin:0.0pt 0.0pt 0.0pt 0.0pt; text-align:left; 
		}
#PPStyle19-P
		{
		margin:0.0pt 28.1pt 0.0pt 0.0pt; text-align:left; 
		}
#PPStyle1-C
		{
		font-family:Arial, sans-serif; font-weight:700; font-size:24.0pt; 
		}
#PPStyle2-C
		{
		font-family:Arial, sans-serif; font-size:10.0pt; 
		}
#PPStyle4-C
		{
		font-family:Arial, sans-serif; font-weight:700; font-size:11.9pt; 
		}
#PPStyle5-C
		{
		font-family:Arial, sans-serif; font-weight:700; font-size:9.9pt; 
		}
#PPStyle6-C
		{
		font-family:Arial, sans-serif; font-weight:700; font-size:9.9pt; 
		text-decoration: underline; 
		}
#PPStyle7-C
		{
		font-family:Arial, sans-serif; font-size:9.9pt; 
		}
#PPStyle8-C
		{
		font-family:Times New Roman, serif; font-size:9.9pt; 
		}
#PPStyle11-C
		{
		font-family:Arial, sans-serif; font-weight:700; font-size:8.9pt; 
		color:#003300; 
		}
#PPStyle12-C
		{
		font-family:Arial, sans-serif; font-size:8.9pt; color:#003300; 
		}
#PPStyle13-C
		{
		font-family:Times New Roman, serif; font-size:8.9pt; 
		}
#PPStyle15-C
		{
		font-family:Arial, sans-serif; font-size:8.9pt; 
		}
#PPStyle16-C
		{
		font-family:Times New Roman, serif; font-size:8.9pt; 
		color:#003300; 
		}
#PPStyle17-C
		{
		font-family:Arial, sans-serif; font-weight:700; font-size:8.9pt; 
		}
#PPStyle18-C
		{
		font-family:Times New Roman, serif; font-weight:700; 
		font-size:8.9pt; 
		}
#PPStyle20-C
		{
		font-family:Comic Sans MS, cursive; font-weight:700; 
		font-size:10.0pt; 
		}
#PPStyle21-C
		{
		font-family:Times New Roman, serif; font-weight:700; 
		font-size:10.0pt; 
		}
#PPStyle22-C
		{
		font-family:Times New Roman, serif; font-size:11.9pt; 
		}
-->
</style>
</head>

Citation

Ca veut dire que tu as un bloc <style> (....) </style> dans le "head" et que, par conséquent, tu peux t'en servir pour y coller tes définitions de styles (le "#tout { .... }")

Ok, ce sont les définitions. Donc le fait de mettre là dedans n'importe ou dans le head suffira à formater la page complète ? Ou bien + loin je dois appeler le fameux "tout" ?

Ce message a été modifié par KewlCat - 10 septembre 2008 - 04:23 .

Retour en haut of the page up there ^
Multi-citation
Répondre

#8 KewlCat

Modérateur

Groupe : Modérateur [KewlCat]
Messages : 26695
Inscrit(e) : 04-décembre 00

Posté 10 septembre 2008 - 04:27

Pas "n'importe où" : les définitions de styles doivent être placées dans entre <style> et </style> ;-)
En CSS, ce qui se trouve entre { } définit les propriétés d'un élément. "#tout" correspond à l'élément dont l'id est "tout" (le # désigne un id, le . une classe). Donc l'élément auquel tu destines ces attributs de style doit avoir un attribut id égal à "tout".
Exemple :

<div id="tout"> bla bla bla </div>

Rappel : un "id" c'est un identifiant, donc quelque chose qui désigne un unique élément. Si plusieurs éléments doivent avoir le même style, il faut utiliser une classe.

"Le formatage est le dernier refuge de l'incompétence" (Adapté de Isaac Asimov)

Retour en haut of the page up there ^
Multi-citation
Répondre

#9 IL-MAFIOSO

Extrem Member

Groupe : Equipe Sécurité
Messages : 992
Inscrit(e) : 05-décembre 06

Posté 10 septembre 2008 - 07:13

Re,

En fait je veux que toute la page entière telle que tu peux la voir si tu as cliqué sur mon lien soit centré quel que soit la configuration du PC. Et là je suis un peu perdu.

Ce message a été modifié par IL-MAFIOSO - 10 septembre 2008 - 07:36 .

Retour en haut of the page up there ^
Multi-citation
Répondre

#10 Greywolf

Modérateur

Groupe : Modérateur [Greywolf]
Messages : 9321
Inscrit(e) : 06-décembre 01

Posté 10 septembre 2008 - 08:45

tu rajoutes le css pour l'élément *html au début de ta balise <style>

<style type="text/css">
*html {
margin-left: auto;
margin-right: auto;
width:900px;
}
.....
</style>

En essayant continuellement on finit par réussir.
Donc : plus ça rate, plus on a de chances que ça marche.

Retour en haut of the page up there ^
Multi-citation
Répondre

(2 Pages)
1
2
→

Réponse rapide

Similar Topics
Sujet	Commencé par	Statistiques	Infos sur le dernier message
BlueScreen aléatoire lors de la mise en veille	Nenuphar	9 réponses 185 vues	20 mai 2012 - 09:19 Par : Nenu-phar
[Résolu] Mise à jour Windows Update en continu 1 2	fbouba	17 réponses 530 vues	22 mai 2012 - 09:15 Par : Dylav
Création d'un site internet Quelques petites questions	Gianone	4 réponses 351 vues	05 mai 2012 - 11:42 Par : heureux?
[Résolu] Conseils pour la création d'un site 1 2 3 Différence entre site et blog	phil14	26 réponses 650 vues	07 mai 2012 - 01:22 Par : Dylav
Erreur mise à jour 1 2	b noel	10 réponses 271 vues	21 mai 2012 - 06:02 Par : b noel
Conserver la taille initiale d'un site Web	SendOg	3 réponses 185 vues	17 mai 2012 - 02:20 Par : Dylav
Page blanche 1 2 Blocage de l'ordinateur suite à une infection	Roje	17 réponses 382 vues	05 mai 2012 - 12:55 Par : Roje
[Résolu] Mise en réseau imprimante et DD externe	tolon83	4 réponses 337 vues	03 mai 2012 - 01:25 Par : Notpa
Site injoignable Problème Freebox ?	gregoroul	0 réponses 200 vues	03 mai 2012 - 07:28 Par : gregoroul
PC lent après mise en veille	sca	3 réponses 238 vues	03 mai 2012 - 09:09 Par : pear