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

Le premier forum francophone sur l'éditeur de pages Web multiplateforme (Linux, Mac OS X, Windows) qui monte… KompoZer, héritier de Nvu, permet de créer vos pages Web graphiquement (wysiwyg) sans aucune connaissance du langage HTML.

Modérateur : chinon37

ToutiWeb
Lézard à collerette
Messages : 327
Inscription : 19 août 2008, 17:51

Message par ToutiWeb »

Bonjour !
1000 Mercis Fabrice c'est ... euh ... exceptionnelle ton aide : merci :oops:

J'ai changé le menu ... et fait des bidouillages merci c'est fou ce qu'on peut faire quand même je ne savais pas qu'avec ces options là on pouvait avoir cet effet là !! :shock: époustouflant ! :lol:

Pour le code css du dessus que tu as changé je suis en train d'essayer de comprendre ce que ça change ... je le mettrais une fois que j'aurais pigé !
dois-laisser les annotations que tu as mises dans le code ou est-ce pour m'aider à le comprendre ?

hier soir gagea n'arrivait pas à acceder à mon dernier post j'espère que j'ai pas fait une boulette...et que c'est passé ...
Merci de m'avoir prévenue Gagea !!


à bientôt ! je repars y travailler ! :lol:




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
Tyrannosaurus Rex
Messages : 2390
Inscription : 26 juin 2006, 12:50

Message par Fabrice.Tres.Net »

De rien, c'est la magie des css... 10jours de boulot :lol:

C'est pour cela, qu'il est important de bien séparer contenu et présentation...(d'ailleurs tu as/ou avais un style dans le body en html :shock: )

En un coup de cuillère à pot de css, tu changes le fond, la couleur de toutes tes pages...

Pour le menu, j'ai juste ajouté au survol du lien (a :hover) une grosse bordure à gauche + un petit décalage...

Les commentaires doivent faciliter la lecture, tu peux retirer ceux pour les points assimilés.
ToutiWeb
Lézard à collerette
Messages : 327
Inscription : 19 août 2008, 17:51

Message par ToutiWeb »

De rien, c'est la magie des css... 10jours de boulot :lol:
ouf sans le smilleys je t'aurais cru :oops: :lol: MERCI
C'est pour cela, qu'il est important de bien séparer contenu et présentation...(d'ailleurs tu as/ou avais un style dans le body en html :shock: )

En un coup de cuillère à pot de css, tu changes le fond, la couleur de toutes tes pages...
J'avais quoi ? un style css pour définir le body ? et c'est pas bien de mémoire il devait dire les textes ...Etc non ?
Pour le menu, j'ai juste ajouté au survol du lien (a :hover) une grosse bordure à gauche + un petit décalage...

Les commentaires doivent faciliter la lecture, tu peux retirer ceux pour les points assimilés.
en tout cas merci j'ai épluché cette fonction pour bien la comprendre car séparément je connaissais toutes les options mais je ne savais pas qu'on pouvait les rassembler pour faire cet effet là ! il devait me manquer notamment le (a :hover)
je me suis permise de changer les couleurs ...
mais j'ai tout gardé j'adore !
MERCI

d'accord je bûche encore sur le code ! :wink:
ben oui car vu que tu as modifié le menu après je suppose que je dois le garder vu que j'aime ... mais tu as écris "conflit avec float right */"
et franchement là je pige pas ... donc c'est pour ça que je ne l'ai pas mis encore je bûche ... car perso en le mettant ce code je n'ai pas vu de changements ...sauf pour les titres et sous-titre :P

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
Tyrannosaurus Rex
Messages : 2390
Inscription : 26 juin 2006, 12:50

Message par Fabrice.Tres.Net »

Je parle de cela dans le code de la page...

Code : Tout sélectionner

</head>
<body style="color: rgb(255, 204, 51); background-color: black;"
 alink="#b30000" link="#00cccc" vlink="#ffcc33">
cela doit se mettre dans le fichier css...sinon le fond sera toujours celui indiqué dans le style du body "html"
Fabrice.Tres.Net
Tyrannosaurus Rex
Messages : 2390
Inscription : 26 juin 2006, 12:50

Message par Fabrice.Tres.Net »

#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;
}

si ton élément, ici le menu est flottant, tu ne peux pas le positionner avec top et/ou left qui sont pour le psoitionnement en fixé, absolue ou relatif! En flottant l'élément se (le navigateur) positionne à droite ou gauche dans le flux courant, et non pas par rapport à un ancêtre. D'ailleurs tu peux changer leur valeur, leur position ne changera pas, du moins sous webdevelopper.
Mais avec d'autres navigateurs, cela peut poser des problèmes: Que fais-je de cette double déclaration contradictoire?
ToutiWeb
Lézard à collerette
Messages : 327
Inscription : 19 août 2008, 17:51

Message par ToutiWeb »

Fabrice.Tres.Net a écrit :#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;
}

si ton élément, ici le menu est flottant, tu ne peux pas le positionner avec top et/ou left qui sont pour le psoitionnement en fixé, absolue ou relatif! En flottant l'élément se (le navigateur) positionne à droite ou gauche dans le flux courant, et non pas par rapport à un ancêtre. D'ailleurs tu peux changer leur valeur, leur position ne changera pas, du moins sous webdevelopper.
Mais avec d'autres navigateurs, cela peut poser des problèmes: Que fais-je de cette double déclaration contradictoire?
j'ai pas tout pigé (je fais donc des essais) mais avant quelle est la différence entre ce code que tu m'as donné précédement dans le post :
#menu {
background:#222;
padding:1em 2em;
float: right;
top: 340px;
left: 600px;

margin-top: 220px;
font-size: small;
text-align: left;
width:180px;
}
avec celui-ci que tu viens de me donner ... et qui si je comprends bien est celui de ma page actuel ...
#menu {
background-repeat: no-repeat;
float: right;
/* top: 340px;
left: 600px;
conflit avec float right */[/color]

margin-top: 220px;
height: 240px;
font-size: small;
text-align: left;
width: 199px;
}
Merci d'avance ! car là pour les essais lorsque j'enlève float right le menu n'est plus où il faudrait alors du coup je vais voir si en enlevant ce que j'ai mis en orange ...ce que ça fait réèllement ...

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
Tyrannosaurus Rex
Messages : 2390
Inscription : 26 juin 2006, 12:50

Message par Fabrice.Tres.Net »

/* ceci est du commentaire
et n'est pas analysé */
/* et */ repèrent le début et la fin des commentaires

La 1ère fois je n'avais pas vu cette erreur, je l'ai donc corrigé en la mettant en commentaire!
ToutiWeb
Lézard à collerette
Messages : 327
Inscription : 19 août 2008, 17:51

Message par ToutiWeb »

waouw bizarre... j'ai enlever les left et right mais ça ne bouge pas de place mon menu ... remarque ouf maintenant faut que je comprenne pourquoi :lol:
je bûche je bûche !
bon allez j'y retourne à la suite !
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
Lézard à collerette
Messages : 327
Inscription : 19 août 2008, 17:51

Message par ToutiWeb »

voilà fabrice j'ai tout tou revu ton code ...
et la seule dernière chose que je pige pas c'est (ce qui est en rouge ):
/* 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;
}
car lorsque je ne precise pas la hauteur (comme c'est le cas actuellement car je voulais tester aussi pour comprendre)
lorsque j'agrandis le div "emplacementspages" (en écrivant ou comme pour le moment en sautant des lignes) le design en haut à droite se décale .... = l'entête par rapport au menu ...
pas chez vous ?
alors c'est vrai que si je ne précise pas la hauteur ça serait moins galère pour mes futures pages qui sont souvent longues en hauteur ... mais vu que mon design est correct en ce moment j'ai pas non plus envie de tout recommencer .... :roll:


En tout cas merci j'avance à grands pas ! :wink:

edit : par contre depuis que j'ai changé les style css ... avec tes bouts de codes ...lorsque sous kompozer je regarde les css puis que je reviens sur ma page elle est décalée sur la gauche et c'est galère ... je vais éteindre et rallumer en espérant que ce n'est qu'un beug ... :cry:
deuxième edit :
ahhh non finalement une fois en ligne ça ne le fait plus ça le fait uniquement sur kompozer (ce qui ne me facilite pas les choses pour écrire ...) mais une fois en ligne ça n'a plus l'air de le faire ...exemple avec cette première page faite sur le modèle de ma page accueil ...
http://toutiweb.free.fr/aidedeToutiWeb.php
qu'en pensez-vous ? je peux enfin faire mon site sur le même modèle ou pas ?
si vous me dites que c'est à peu prêt bien comme ça je me lance sinon je continue d'y travailler ...

à part ça petite question (suivant la réponse je posterais un autre poste pour ne pas rallonger celui-ci) y'a-t-il moyen de proposer un changement de style en .php ? ça me faciliterait la tâche ... pour le répéter sur tout mes pages ....
(comme je l'avais fais en haut dans l'entete auparavant ...)
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
Tyrannosaurus Rex
Messages : 2390
Inscription : 26 juin 2006, 12:50

Message par Fabrice.Tres.Net »

Attention, tu as une div de classe body ! C'est un GROS risque de confusion avec la balise body. Même pas sûr que ce soit valide.
Je l'ai remplacé par un id page
Voilà un html revu et mis en forme par Tidy pour faciliter la lecture:

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="fr">
<head>
    <meta content="text/html; charset=iso-8859-1" http-equiv="content-type">
    <title>Modèle de pages ToutiWeb</title>
    <link rel="stylesheet" href="modToutiWeb.css" type="text/css">
</head>
<body>
    <div id="page">
        <div id="entete">
            texte entete
        </div>
        <div id="menu">
            <a href="utiledeToutiWeb.php">Ut ' île</a><br>
             <a href="lascrapoeufsrizdetoutiweb.php">La scrap ' oeufs riz</a><br>
            La pixel ' mania<br>
             <a href="tutoriels.php">Tutoriels</a><br>
            ToutiWebises<br>
             <a href="realisationsdetoutiweb.php" target="_blank">Nos réalisations</a><br>
            <a href="coupdecoeurToutiWeb.php">Nos coups de coeurs</a><br>
             <a href="aidedeToutiWeb.php">Participez !</a><br>
             <a href=
            "http://www.i-services.net/membres/livredor/livredor.php?uid=131311&sid=76078"
            target="_blank">Livre d'or</a><br>
             <a href="news.php">News</a><br>
             <a href="pikam/indexpikam.php" target="_blank">Pikam</a><br>
             <a href="credits.php">Crédits</a>
        </div>

        <div id="emplacementpages">
            <h1>Modèle de page ToutiWeb</h1>
        </div>

        <div id="pied">
            <a href="http://toutiWeb.free.fr" target="_blank">Site créé et géré par ToutiWeb</a>
        </div>
    </div>
</body>
</html>
ToutiWeb
Lézard à collerette
Messages : 327
Inscription : 19 août 2008, 17:51

Message par ToutiWeb »

Fabrice.Tres.Net a écrit :Attention, tu as une div de classe body ! C'est un GROS risque de confusion avec la balise body. Même pas sûr que ce soit valide.
Je l'ai remplacé par un id page
Voilà un html revu et mis en forme par Tidy pour faciliter la lecture:

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="fr">
<head>
    <meta content="text/html; charset=iso-8859-1" http-equiv="content-type">
    <title>Modèle de pages ToutiWeb</title>
    <link rel="stylesheet" href="modToutiWeb.css" type="text/css">
</head>
<body>
    <div id="page">
        <div id="entete">
            texte entete
        </div>
        <div id="menu">
            <a href="utiledeToutiWeb.php">Ut ' île</a><br>
             <a href="lascrapoeufsrizdetoutiweb.php">La scrap ' oeufs riz</a><br>
            La pixel ' mania<br>
             <a href="tutoriels.php">Tutoriels</a><br>
            ToutiWebises<br>
             <a href="realisationsdetoutiweb.php" target="_blank">Nos réalisations</a><br>
            <a href="coupdecoeurToutiWeb.php">Nos coups de coeurs</a><br>
             <a href="aidedeToutiWeb.php">Participez !</a><br>
             <a href=
            "http://www.i-services.net/membres/livredor/livredor.php?uid=131311&sid=76078"
            target="_blank">Livre d'or</a><br>
             <a href="news.php">News</a><br>
             <a href="pikam/indexpikam.php" target="_blank">Pikam</a><br>
             <a href="credits.php">Crédits</a>
        </div>

        <div id="emplacementpages">
            <h1>Modèle de page ToutiWeb</h1>
        </div>

        <div id="pied">
            <a href="http://toutiWeb.free.fr" target="_blank">Site créé et géré par ToutiWeb</a>
        </div>
    </div>
</body>
</html>
pfff je suis désolée mais je n'ai pas l'impression d'avoir changé tes codes ...
à quoi vois ton une balise body et une div body ?
c'est pour celà que ça me déforme tout sur kompozer dès que je regarde les css ?
une id page ...
<div id="page">
ça remplace ceci ?
* {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);
}
voili voilou pour le moment pour essayer de piger ... ça suffira :lol: :oops:
non car le dernier bout de code que tu m'as donné ... les dimensions sont les mêmes mais tout dépasse et ça je peux le voir car il manque le fond de page ... comme ceci :
Image
désolée de t'embêter avec tout ça en plus tu n'as pas que moi à aider ... :?
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
Lézard à collerette
Messages : 327
Inscription : 19 août 2008, 17:51

Message par ToutiWeb »

MERCI encore 1000 fois Fabrice de ton aide !!! :wink:
allez j'ai bossé depuis tout à l'heure...si je n'ai sans le faire exprès pas fait de grosses âneries ... et si cette page vous plaît ...
http://toutiweb.free.fr/aidedeToutiWeb.php
et qu'il n'y a rien ou pas grand chose à revoir alors je me lancerais car je pense avoir trouvé le modèle pour toutes mes pages ...
qu'en dites-vous ? :o

encore merci de votre patience et de votre aide !

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
Tyrannosaurus Rex
Messages : 2390
Inscription : 26 juin 2006, 12:50

Message par Fabrice.Tres.Net »

Je pense que tu n'as pas dû mettre le bon fichier ou il faut réajuster le php.
Au niveau html, tu as de nouveau:

Code : Tout sélectionner

<body style="color: rgb(255, 204, 51); background-color: black;"
 alink="#b30000" link="#00cccc" vlink="#ffcc33"><div class="body"><div
 id="entete">texte entete</div>
au lieu de

Code : Tout sélectionner

</head>
<body>
    <div id="page">
        <div id="entete"> 
Il reste l'erreur sur le body dans le fichier css, cela devra ressembler à
body {
border: 3px dashed yellow; /* aide pour la visualiser */
background-color: black;
}

#page { /* c'est page qui est correct, et non .body */
width: 600px;
height: 600px;
background-position: center center;
background-repeat: no-repeat;
margin-left: 18%;
background-image: url(styles/defaut/designToutiWeb.gif);
}
Pour styliser les titres de niveau 2 H2, il n'y a pas besoin de classe par défaut, en css on met directement qlq chose comme:
h2 { color: blue;
font-size: 120%;
border : 1px solid blue;
}
ToutiWeb
Lézard à collerette
Messages : 327
Inscription : 19 août 2008, 17:51

Message par ToutiWeb »

coucou hé bien moi qui pensais avoir été attentive ... pfiouuu désolée
bon voilà j'ai revue ma copie je pense :lol:
l'ennui c'est que le design n'apparaît plus sur cette page au moins ...
pour être sûre j'ai crée une deuxième feuille de style il y en aura une pour mon index et une pour toutes mes autres pages ...sinon je crois qu'il y aura toujours des erreurs trop vite fait à faire ...
http://toutiweb.free.fr/essai.php

sinon pour les h2 les div class par défaut c'est ce que j'ai fais avec les paragraphes ou est-ce différent ?
je vais tenter de corriger : merci !

bonne soirée !

edit: j'ai fais ce que j'ai pu mais apparement j'ai pas du mettre tes bouts de codes magiques au bon endroit ...vu que rien ne se passait si je faisais pile poil ça j'ai bidouillé... du coup ben y'a merdouille et fitzouille mais je regarderais ça au calme demain...MERCI pour tout !

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3
GAUNCE
Iguane
Messages : 652
Inscription : 19 déc. 2004, 00:48

Message par GAUNCE »

Fabrice.Tres.Net a écrit : Pour styliser les titres de niveau 2 H2, il n'y a pas besoin de classe par défaut, en css on met directement qlq chose comme:
h2 { color: blue;
font-size: 120%;
border : 1px solid blue;
}
Je viens d'apprendre quelque chose?
Si je veux plusieurs balises h1 différentes, il suffit de mettre des paramètres entre {}?
Y a t'il d'autre balises où l'on peut agir de même?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3
Ma configuration
Si tu es dans l'obscurité, viens sur ce forum pour t'éclairer (proverbe Landais)
" La libertat qu'ei lo camin "
Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 2 invités