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

IL-MAFIOSO · le 10 septembre 2008

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-orange.fr/il.mafioso/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.

Modifié le 10 septembre 2008 par IL-MAFIOSO

IL-MAFIOSO · le 10 septembre 2008

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

Modifié le 10 septembre 2008 par IL-MAFIOSO

Greywolf · le 10 septembre 2008

Salut,

les attributs de feuille de style (css) peuvent

soit se mettre dans la balise en question
soit dans un fichier css appelé par ta page

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

KewlCat · le 10 septembre 2008

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

IL-MAFIOSO · le 10 septembre 2008

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.

KewlCat · le 10 septembre 2008

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 { .... }")

IL-MAFIOSO · le 10 septembre 2008

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>

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" ? Modifié le 10 septembre 2008 par KewlCat

KewlCat · le 10 septembre 2008

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.

IL-MAFIOSO · le 10 septembre 2008

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.

Modifié le 10 septembre 2008 par IL-MAFIOSO

Greywolf · le 10 septembre 2008

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>

Connexion

Pas encore inscrit ?

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

Messages recommandés

IL-MAFIOSO

IL-MAFIOSO

Greywolf

KewlCat

IL-MAFIOSO

KewlCat

IL-MAFIOSO

KewlCat

IL-MAFIOSO

Greywolf

Rejoindre la conversation

En ligne récemment 0 membre est en ligne

Zebulon

Outils en ligne

Naviguer