f.style css:ne se "répète" pas entièrement [RES

ToutiWeb · Message par **ToutiWeb** » 05 nov. 2008, 19:29

Bonjour !

je reviens avec encore un besoin d'aide décidément ... je viens de finir (je pense et j'espère) d'appliquer sur mon index le rpojet sims ...pour lequel on m'avait aidé ... enfin bref
mon index paraît plus clean,
ma feuille de style paraît bonne,
http://toutiweb.free.fr
mais lorsque je l'appelle pour créer ce design pour d'autres pages ...
comme sur celle-ci pour le moment (les autres on verra plus tard ...)
le design du body ne se mets pas ...
http://toutiweb.free.fr/aidedeToutiWeb.php
avez-vous des explications ? logiques rationnelles ?
est-ce que ça veut dire qu'il faut que je recommence toutes mes pages de A à Z ?
MERCI d'avance !

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3

Message par **Ymai** » 05 nov. 2008, 20:25

Bonjour
Dans la feuille de style:

/* Generated by KompoZer */
.body {

au lieu de

Code : Tout sélectionner

body{

Toute la différence tient donc en un seul point.

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.3) Gecko/2008092510 Ubuntu/8.04 (hardy) Firefox/3.0.3

Fabrice.Tres.Net · Message par **Fabrice.Tres.Net** » 05 nov. 2008, 20:32

Juste une précision pour positionner des éléments...

Sur l'image suivante, j'utilise webdevelopper pour encadrer les div, et j'ai modifié le css pour repositionner le menu par rapport au bloc "body", car la div "menu" est contenue directement dans body.

J'ai agrandi également la largeur du body... j'ai mis un cadre rouge pour bien montrer le div menu !

ToutiWeb · Message par **ToutiWeb** » 05 nov. 2008, 20:36

Ymai a écrit :Bonjour
Dans la feuille de style:
/* Generated by KompoZer */
.body {
au lieu de
Code : Tout sélectionner
body{
Toute la différence tient donc en un seul point.

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.3) Gecko/2008092510 Ubuntu/8.04 (hardy) Firefox/3.0.3

merci je vais essayé de suite !
mais bon un seul truc peut éviter ça ?! je dosi vraiment me rebrancher le cerveau moi !

edit : ça marche ! mon menu est trop à droite sur la page aide ... mais c'est ça ! 1000 mercis !

Fabrice.Tres.Net a écrit :Juste une précision pour positionner des éléments...

Sur l'image suivante, j'utilise webdevelopper pour encadrer les div, et j'ai modifié le css pour repositionner le menu par rapport au bloc "body", car la div "menu" est contenue directement dans body.

J'ai agrandi également la largeur du body... j'ai mis un cadre rouge pour bien montrer le div menu !

chez moi le body ne va pas si loin sur la droite ... mais je vais tenter !
par contre ça sert à quoi de faire ça ? je suis persuadée qu'il y a une excellente raison là-dessous mais là je ne la vois pas ... désolée

(enfin ça vient peut-être du fait que j'ai une pneumonie depuis deux heures officiellement et que même si ce n'est pas grave ça doit jouer sur mon cerveau ...

)

edit : je vais essayer ça soit tout à l'heure soit demain car là je sature ...

MERCI A VOUS DEUX !

Fabrice.Tres.Net · Message par **Fabrice.Tres.Net** » 05 nov. 2008, 21:13

C'est juste pour montrer des usages de webdevelopper pour Gagea et l'homme aux échasses. En plus, cela permet d'expliquer le positionnement des éléments.
Et dans ton cas, cela peut te donner des idées.

Gagea · Message par **Gagea** » 05 nov. 2008, 23:04

Fabrice.Tres.Net a écrit :C'est juste pour montrer des usages de webdevelopper pour Gagea et l'homme aux échasses

Merci beaucoup, Fabrice, pour la démonstration.

J'ai compris l'utilisation de la webdev pour communiquer. Par contre absolute, j'en suis pas encore là. Mais, ça viendra j'espère.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3

Fabrice.Tres.Net · Message par **Fabrice.Tres.Net** » 06 nov. 2008, 00:01

Touti,
Ton body ne va pas si loin à droite car tu as un "width" de 600px !

Je t'invite à faire simuler des tailles d'écran différents pour voir comment se déplace les différents éléments sur le fond d'écran.
Tu peux simuler les tailles d'écran + grands que le tien avec Firefox (encore lui) et CTRL + (ou CTRL molette souris); CTRL 0 permet de remetrre à zéro le zoom!

Gagea,
Le positionnement traditionnel et par défaut c'est "dans le flux", les éléments se suivent ls uns les autres ( blocs ou inline).
Le float permet de forcer des éléments à droite ou à gauche des suivants (dans le flux).
De
http://css.alsacreations.com/Bases-et-i ... ses-en-CSS (une doc de référence pour tes tutos)

* Les positionnements Absolu et Fixé sortent l'élément du flux. C'est à dire qu'il n'a plus d'interaction avec les autres éléments (frères, ancètres) du document en flux courant.
* Un élément auquel on applique la propriété CSS "position" (Absolu, Fixé ou Relatif) est dit "positionné".
* Un élement hors-flux (Absolu ou Fixé) se positionne par rapport à son dernier Ancêtre positionné. Si aucun ancêtre de l'élément n'est positionné, alors celui-ci se positionne par rapport au document entier (body). On a tendance à croire qu'un élément en position absolue est toujours positionné par rapport aux côtés du documents, ce qui est faux.
* Hors bugs de navigateurs, le positionnement Absolu, Fixé ou Relatif est le seul qui permette de superposer deux éléments l'un au-dessus de l'autre
* Evitez l'emploi du positionnement hors-flux autant que possible, surtout pour les éléments de contenu. Cela complexifie les interactions et rend les contenus moins fluides (pensez que l'utilisateur pourra par exemple agrandir la taille de la police).

Dans le cas de Touti, le body est l'ancêtre du menu.
J'ai mis un positionnement absolu (absolute) car c'est + simple à comprendre, mais un relatif (relative) aurait fonctionné aussi dans ce cas.

Au lit,

Gagea · Message par **Gagea** » 06 nov. 2008, 09:35

Fabrice.Tres.Net a écrit :Je t'invite à faire simuler des tailles d'écran différents pour voir comment se déplacent les différents éléments sur le fond d'écran. Tu peux simuler les tailles d'écran + grands que le tien avec Firefox (encore lui) et CTRL + (ou CTRL molette souris); CTRL 0 permet de remetrre à zéro le zoom!

Aussi, avec le menu Redimensionner de la Webdev (encore elle)

Fabrice.Tres.Net a écrit :http://css.alsacreations.com/Bases-et-i ... ses-en-CSS (une doc de référence pour tes tutos)

J'ai rajouté un dernier paragraphe à ma page Mise en forme avec CSS : les blocs.
Merci Fabrice.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3

ToutiWeb · Message par **ToutiWeb** » 06 nov. 2008, 10:27

Fabrice.Tres.Net a écrit :Touti,
Ton body ne va pas si loin à droite car tu as un "width" de 600px !

Je t'invite à faire simuler des tailles d'écran différents pour voir comment se déplace les différents éléments sur le fond d'écran.
Tu peux simuler les tailles d'écran + grands que le tien avec Firefox (encore lui) et CTRL + (ou CTRL molette souris); CTRL 0 permet de remetrre à zéro le zoom!

oui je sais le div de 600px c'est fait exprès je ne veux pas que ça ailel plsu grand ... mais j'ai fais ça :

"Tu peux simuler les tailles d'écran + grands que le tien avec Firefox (encore lui) et CTRL + (ou CTRL molette souris); CTRL 0 permet de remetrre à zéro le zoom!"

mais je ne le vois tout de même pas autant que sur ta capture ... et encore moins à droite avec la page :
http://toutiweb.free.fr/aidedeToutiWeb.php
je vois le menu et cette page comme ceci :

à la place de ceci pour mon index (dont le feuille de style devrait se répéter pareil non?!)

je précise que pour l'instant j'en suis seulement sur cette page à la feuille de style qui se répète ensuite dès que j'aurais régler ce problème je ferais en sorte qu'elle soit plus "nette" plus "propre" ... et je pourrais enfin refaire mon site ...

MErci

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3

ToutiWeb · Message par **ToutiWeb** » 06 nov. 2008, 10:32

voilà j'ai fais les modifications je pense fabrice : merci !

ToutiWeb a écrit :
Fabrice.Tres.Net a écrit :Touti,
Ton body ne va pas si loin à droite car tu as un "width" de 600px !

Je t'invite à faire simuler des tailles d'écran différents pour voir comment se déplace les différents éléments sur le fond d'écran.
Tu peux simuler les tailles d'écran + grands que le tien avec Firefox (encore lui) et CTRL + (ou CTRL molette souris); CTRL 0 permet de remetrre à zéro le zoom!
oui je sais le div de 600px c'est fait exprès je ne veux pas que ça ailel plsu grand ... mais j'ai fais ça :
"Tu peux simuler les tailles d'écran + grands que le tien avec Firefox (encore lui) et CTRL + (ou CTRL molette souris); CTRL 0 permet de remetrre à zéro le zoom!"
mais je ne le vois tout de même pas autant que sur ta capture ... et encore moins à droite avec la page :
http://toutiweb.free.fr/aidedeToutiWeb.php
je vois le menu et cette page comme ceci :

à la place de ceci pour mon index (dont le feuille de style devrait se répéter pareil non?!)

je précise que pour l'instant j'en suis seulement sur cette page à la feuille de style qui se répète ensuite dès que j'aurais régler ce problème je ferais en sorte qu'elle soit plus "nette" plus "propre" ... et je pourrais enfin refaire mon site ...

MErci

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3

ToutiWeb · Message par **ToutiWeb** » 06 nov. 2008, 14:58

Bon vu que c'est la cata et que quand je fais l'essai de changer absolute , fix, relative ...etc c'est pire j'ai refais une page modèle pour toutes les autres dans l'espoir d'y travailler et de la rendre ok pour pouvoir enfin refaire toutes mes pages ...
qu'en pensez-vous ?
http://toutiweb.free.fr/modelepages.php

ps à fabrice : j'ai travaillé sur le h1 ça va comme ça ?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3

Gagea · Message par **Gagea** » 06 nov. 2008, 15:50

Bonjour ToutiWeb,
Par curiosité je suis allée voir ton code et j'ai vu, dans le head, plein de _moz_prolog

Code : Tout sélectionner

lang="fr"><head><meta id="_moz_prolog" content=""><meta
 id="_moz_prolog" content=""><meta id="_moz_prolog" content=""><meta
 id="_moz_prolog" content=""><meta id="_moz_prolog" content=""><meta
 id="_moz_prolog" content=""><meta id="_moz_prolog" content=""><meta
 id="_moz_prolog" content=""><meta id="_moz_prolog" content=""><meta

Comme je ne savais pas ce que c'était, j'ai fait une recherche et je suis tombé sur ce post qui l'explique un peu.
D'autre part j'ai vu que ta page index n'avait pas de balise <title></title>
Pour le reste, je n'ai pas trop compris ta mise en page ni quels sont tes problèmes. Pourquoi veux-tu que le body soit si étroit?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3

ToutiWeb · Message par **ToutiWeb** » 06 nov. 2008, 16:06

Bonjour ToutiWeb,
Par curiosité je suis allée voir ton code et j'ai vu, dans le head, plein de _moz_prolog
Code : Tout sélectionner
lang="fr"><head><meta id="_moz_prolog" content=""><meta
 id="_moz_prolog" content=""><meta id="_moz_prolog" content=""><meta
 id="_moz_prolog" content=""><meta id="_moz_prolog" content=""><meta
 id="_moz_prolog" content=""><meta id="_moz_prolog" content=""><meta
 id="_moz_prolog" content=""><meta id="_moz_prolog" content=""><meta
Comme je ne savais pas ce que c'était, j'ai fait une recherche et je suis tombé sur ce post qui l'explique un peu.

oui je sais c'est effectivement depuis que je fais du .php mais comme c'est galère et qu'à chaque enregistrement ça se remet et que je ne comprend pas à quoi sert REELEMENT TEDY ... pour le moment je me concentre sur mon site sinon il ne se refera jamais ...
MAis merci pour le lien !

D'autre part j'ai vu que ta page index n'avait pas de balise <title></title>

Merci je n'avais absolument pas vu !!!

Code : Tout sélectionner

Pour le reste, je n'ai pas trop compris ta mise en page ni quels sont tes problèmes. Pourquoi veux-tu que le body soit si étroit?

Mon problème est que lorsque je refais une nouvelle page en appellant la feuille de style elle ne s'affiche pas automatiquement

---> mais du coup j'ai refais une page modèle
et avant de commencer à tout refaire j'aurais besoin de votre avis dessus ...
http://toutiweb.free.fr/modelepages.php

et je souhaite que ça reste si étroit car je trouve bien de travailler avec cette largeur là et surtout que ça va à peu prêt sur chaque pc ...
-->faut juste que je regarde comment ma page réagira lorsque mon div "emplacementspages" s'agrandira de beaucoup avec certains contenu ...

MERCI !

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3

Fabrice.Tres.Net · Message par **Fabrice.Tres.Net** » 06 nov. 2008, 18:53

Je t'ai fait quelques modifs, mais il n'y a rien d'inquiétant.

L'intérêt d'avoir un fichier css, c'est que tu pourras facilement tout changer.

Amuse-toi à remplir les différentes parties maintenant.

Code : Tout sélectionner

/* Generated by KompoZer */
* {margin: 0; padding: 0;  }  /*suppr diff. IE,FF*/
body {
  width: 600px;
  height: 600px;
  background-position:  center center;
  background-repeat: no-repeat;
  margin-left: 18%;
  background-image: url(styles/defaut/designToutiWeb.gif);
}
h1 {
  font-size: large;
  color: #ffcc33;
  font-weight: bold;
  font-style: normal;
  text-align: center;
}
h2 {
  font-size: 1.2em; /* tu peux changer de 0.1 à 100*/
  font-weight: bold;
}
p { /* paragraphe*/
 font-size:1em; 
}
#entete {
  background-position:  center center;
  background-repeat: no-repeat;
  height: 100px;
  width: 210px;
  text-align: left;
  font-size: small;
  color: #00b500;
}
#menu {
  background-repeat: no-repeat;
  float: right;
/*  top: 340px;
  left: 600px;           conflit avec  float right  */ 
  margin-top: 220px;
  height: 240px;
  font-size: small;
  text-align: left;
  width: 199px;
}
#menu a {
  text-decoration:none;
}
#menu a:hover, #menu a:focus,  {
  background: yellow;
}

#emplacementpages {
  width: 400px;
  margin-top: 60px;
  height: 400px;   /* est-ce utile  de limiter la hauteur ?*/
  font-size: medium;
}
#pied {
  width: 600px;
  height: 50px;
  font-size: small;
  color: #ffcc33;
  text-align: center;
}

Fabrice.Tres.Net · Message par **Fabrice.Tres.Net** » 06 nov. 2008, 19:11

J'ai un peu rebidouillé la présentation de ton menu:

#menu {
background:#222;
padding:1em 2em;
float: right;
top: 340px;
left: 600px;
margin-top: 220px;
font-size: small;
text-align: left;
width:180px;
}
#menu a {
text-decoration:none;
color:#ffcc33;
}

#menu a:hover {
border-left: 10px solid #00C;
padding-left:15px;
background:yellow;
text-decoration:none;
color:#00C;}

Geckozone

f.style css:ne se "répète" pas entièrement [RES

f.style css:ne se "répète" pas entièrement [RES

Qui est en ligne ?