Aller au contenu

  • Pas encore inscrit ?

    Pourquoi ne pas vous inscrire ? C'est simple, rapide et gratuit.
    Pour en savoir plus, lisez Les avantages de l'inscription... et la Charte de Zébulon.
    De plus, les messages que vous postez en tant qu'invité restent invisibles tant qu'un modérateur ne les a pas validés. Inscrivez-vous, ce sera un gain de temps pour tout le monde, vous, les helpeurs et les modérateurs ! :wink:

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

IL-MAFIOSO

Par IL-MAFIOSO
dans Programmation

 Partager

Messages recommandés

IL-MAFIOSO Full Patch Member

IL-MAFIOSO

Posté(e)
Posté(e) (modifié)

Bonjour à tous,

 

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

 

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 :P

 

Merci.

Modifié par IL-MAFIOSO
Lien vers le commentaire
Partager sur d’autres sites

IL-MAFIOSO Full Patch Member

IL-MAFIOSO

Posté(e)
  • Auteur
Posté(e) (modifié)

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 :P

Modifié par IL-MAFIOSO
Lien vers le commentaire
Partager sur d’autres sites
Greywolf Tera Power Extrem Member

Greywolf

Posté(e)
Posté(e)

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

Lien vers le commentaire
Partager sur d’autres sites
KewlCat Devil Member !

KewlCat

Posté(e)
Posté(e)

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

Lien vers le commentaire
Partager sur d’autres sites
IL-MAFIOSO Full Patch Member

IL-MAFIOSO

Posté(e)
  • Auteur
Posté(e) (modifié)

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é par KewlCat
Lien vers le commentaire
Partager sur d’autres sites
KewlCat Devil Member !

KewlCat

Posté(e)
Posté(e)

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.

Lien vers le commentaire
Partager sur d’autres sites
IL-MAFIOSO Full Patch Member

IL-MAFIOSO

Posté(e)
  • Auteur
Posté(e) (modifié)

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é par IL-MAFIOSO
Lien vers le commentaire
Partager sur d’autres sites
Greywolf Tera Power Extrem Member

Greywolf

Posté(e)
Posté(e)

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>

Lien vers le commentaire
Partager sur d’autres sites

Rejoindre la conversation

Vous pouvez publier maintenant et vous inscrire plus tard. Si vous avez un compte, connectez-vous maintenant pour publier avec votre compte.
Remarque : votre message nécessitera l’approbation d’un modérateur avant de pouvoir être visible.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.

×
 Partager
Aller sur la liste des sujets

  • En ligne récemment   0 membre est en ligne

    • Aucun utilisateur enregistré regarde cette page.
×
×
  • Créer...