Page css externe

fcalmant · Message par **fcalmant** » 21 nov. 2010, 01:27

Il est tard...mais je vois pas où??

Et une question de plus, comment faire pour que le pied de page reste visible quelle que soit la résolution du visiteur? il faudrait que les sidebar gauche et droite ainsi que le content s'adapte automatiquement. Une idée???
Infiniment merci!!!

FF_Olivier · Message par **FF_Olivier** » 21 nov. 2010, 12:09

Bon, ta page html a changé depuis ma remarque, effectivement les doublons ont disparu, MAIS il reste quand même le contenu de tout les menus du <body> dans la balise <h2> :

Code : Tout sélectionner

<h2>
     <title>Menu déroulant vertical sur clic</title>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	 <link rel="stylesheet" href="menu.css" type="text/css" />
	 <script type="text/javascript" src="functions.js"></script>

<div id="menu">

<div class="menu" id="ACCUEIL" onclick="afficheMenu(this)">
		<a href="http://www.exometeofraiture.net">ACCUEIL</a>
	</div>
	<div class="menu" id="menu1" onclick="afficheMenu(this)">
		<a href="#">JARDIN</a>
	</div>
	<div id="sousmenu1" style="display:none">

		<div class="sousmenu">
			<a href="#">2006</a>
		</div>
		<div class="sousmenu">
			<a href="#">2007</a>
		</div>
		<div class="sousmenu">
			<a href="#">2008</a>

		</div>
		<div class="sousmenu">
			<a href="#">2009</a>
                </div>
                <div class="sousmenu">
			<a href="#">2010</a>
		</div>
		<div class="sousmenu">

			<a href="#">Wallonie Bienvenue</a>
		</div>
		<div class="sousmenu">
			<a href="#">Bassin</a>
		</div>
		<div class="sousmenu">
			<a href="#">Tourbière 2006</a>

                </div>
                <div class="sousmenu">
			<a href="#">Tourbière 2007</a>
                </div>
                <div class="sousmenu">
			<a href="#">Webcam</a>
		</div>
	</div>

	
	<div class="menu" id="menu2" onclick="afficheMenu(this)">
		<a href="#">REPORTAGES</a>
	</div>
	<div id="sousmenu2" style="display:none">
		<div class="sousmenu">
			<a href="#">Les serres de Laeken</a>
		</div>
		<div class="sousmenu">

			<a href="#">Fraiture et ses environs</a>
		</div>
		<div class="sousmenu">
			<a href="#">Le jardin de Christian</a>
		</div>
                <div class="sousmenu">
			<a href="#">Les Jardins d'Annevoie</a>

		</div>
		<div class="sousmenu">
			<a href="#">Côte d'Azur 2008-1</a>
		</div>
		<div class="sousmenu">
			<a href="#">Côte d'Azur 2008-2</a>
		</div>
                <div class="sousmenu">

			<a href="#">Protection hivernale</a>
		</div>
		<div class="sousmenu">
			<a href="#">Balcon fleuri</a>
		</div>
		<div class="sousmenu">
			<a href="#">Le parc Pairi Daiza</a>

		</div>
                <div class="sousmenu">
			<a href="#">Chartreuse 2010</a>
		</div>
	</div>
	
	<div class="menu" id="menu3" onclick="afficheMenu(this)">
		<a href="#">APICULTURE</a>
	</div>

        <div id="sousmenu3" style="display:none">
		<div class="sousmenu">
			<a href="#">Mon rucher</a>
		</div>
		<div class="sousmenu">
			<a href="#">Rucher-école (ville de Huy)</a>
		</div>
         </div>

	
	<div class="menu" id="menu4" onclick="afficheMenu(this)">
		<a href="#">METEOROLOGIE</a>
	</div>
	<div id="sousmenu4" style="display:none">
		<div class="sousmenu">
			<a href="#" >Météo en direct-station</a>
		</div>
		<div class="sousmenu">

			<a href="#">Radars, satellites,...</a>
		</div>
		<div class="sousmenu">
			<a href="#">Prévisions belges</a>
		</div>
		<div class="sousmenu">
			<a href="#">Webcam du ciel</a>

		</div>
		
	</div>
        <div class="menu" id="menu5" onclick="afficheMenu(this)">
		<a href="#">ORNITHOLOGIE</a>
	</div>
	<div id="sousmenu5" style="display:none">
		<div class="sousmenu">
			<a href="#" >Mangeoire</a>

		</div>
		<div class="sousmenu">
			<a href="#">Nichoir 2008</a>
		</div>
		<div class="sousmenu">
			<a href="#">Nichoir 2009</a>
		</div>
		<div class="sousmenu">

			<a href="#">Installation webcam</a>
		</div>
                <div class="sousmenu">
			<a href="#" >Webcam</a>
		</div>
		
	</div>
        
	<div class="menu" id="menu6" onclick="afficheMenu(this)">
		<a href="#">DIVERS</a>

	</div>
        <div id="sousmenu6" style="display:none">
		<div class="sousmenu">
			<a href="#">Liens</a>
		</div>
		<div class="sousmenu">
			<a href="#">Fourre-tout</a>
		</div>

</div>

</h2>

Et notamment le début :

Code : Tout sélectionner

<title>Menu déroulant vertical sur clic</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="menu.css" type="text/css" />
<script type="text/javascript" src="functions.js"></script>

Ceci est typiquement le contenu d'un <head>… Et cela n'a rien à faire dans un <h2> ! Ni tous les menus d'ailleurs, <h2> devrait juste servir à afficher un titre de niveau 2, et c'est tout.

Avant de te préoccuper de ton CSS, je te suggère de toujours finaliser d'abord le code HTML de ta page, en le passant p. ex. à la moulinette du validateur W3C, ainsi tu seras sûr de travailler et de développer le CSS sur des bases saines.

Par exemple, il manque dans ton <head> la ligne spécifiant l'encodage de caractères utilisé :

Code : Tout sélectionner

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Ligne indispensable pour savoir quel jeu de caractères doit être affiché (je te conseille utf-8 plutôt que iso-8859-1 ou 15).

PS : belles photos sur le site, ça donne envie de se balader !

fcalmant · Message par **fcalmant** » 21 nov. 2010, 12:46

Merci Olivier! Où dois-je alors mettre mon include de munu dans la sidebar de gauche

Code : Tout sélectionner

<div id="sidebar1">
<h2><?php include ("menu.php"); ?></h2>
</div>

Message par **Ymai** » 21 nov. 2010, 12:57

Bonjour

fcalmant a écrit :Merci Olivier! Où dois-je alors mettre mon include de munu dans la sidebar de gauche
Code : Tout sélectionner
<div id="sidebar1">
<h2><?php include ("menu.php"); ?></h2>
</div>

Je me permets d'intervenir sur un fil sur lequel je n'ai encore fait qu'une brève apparition. Faute de temps.
Le "menu" du site n'a strictement aucune raison de figurer dans une structure de titre. Le menu n'est pas un titre.
Donc, quelque chose comme

Code : Tout sélectionner

<div id="sidebar1">
<?php include ("menu.php"); ?>
</div>

Serait déjà infiniment mieux.

[edit]Bon, en même temps, ça fait un peu harcèlement

) [/edit]

fcalmant · Message par **fcalmant** » 21 nov. 2010, 13:18

Ymai a écrit :Bonjour
fcalmant a écrit :Merci Olivier! Où dois-je alors mettre mon include de munu dans la sidebar de gauche
Code : Tout sélectionner
<div id="sidebar1">
<h2><?php include ("menu.php"); ?></h2>
</div>
Je me permets d'intervenir sur un fil sur lequel je n'ai encore fait qu'une brève apparition. Faute de temps.
Le "menu" du site n'a strictement aucune raison de figurer dans une structure de titre. Le menu n'est pas un titre.
Donc, quelque chose comme
Code : Tout sélectionner
<div id="sidebar1">
<?php include ("menu.php"); ?>
</div>
Serait déjà infiniment mieux.

[edit]Bon, en même temps, ça fait un peu harcèlement ) [/edit]

ça ne marche pas, ça décale tout sur la gauche... regarde le résultat
http://www.exometeofraiture.net/csstest2.php

Message par **Ymai** » 21 nov. 2010, 13:53

Bonjour

FF_Olivier a écrit :Avant de te préoccuper de ton CSS, je te suggère de toujours finaliser d'abord le code HTML de ta page, en le passant p. ex. à la moulinette du validateur W3C, ainsi tu seras sûr de travailler et de développer le CSS sur des bases saines.

Ça peut aider, bien sûr. Mais je me demande si les bases les plus saines ne partiraient pas d'une feuille de papier et d'un crayon. Un petit dessin de ce qui est souhaité finalement.
À partir de là, se demander comment positionner les différents blocs définis en utilisant ce qu'il faut de CSS.
Et malheureusement, sacrifier le code HTML existant pour repartir sur des bases saines et propres. Copier / coller le texte existant dans un éditeur de textes (style Notepad++, Geany, ...) et le réimporter bien nettoyé, sans toutes les balises html inutiles, dans la page toute neuve.

La démarche est détaillée là: http://josar.free.fr/tutoKompozer/miseEnForme5.html (et dans les pages autour)

En passant: tout ce Flash fait pédaler mon processeur. Est-ce vraiment utile pour l'objectif visé?

PS : belles photos sur le site, ça donne envie de se balader !

Le temps d'enfiler mon sac à dos et je suis à vous.

fcalmant · Message par **fcalmant** » 21 nov. 2010, 17:27

Bon voilà, j'ai un peu décrasser la base, le menu.php était en cause...ça passe la validation maintenant http://www.exometeofraiture.net/modele-css.php. Du coup, je bloque toujours pour savoir où placer mon

Code : Tout sélectionner

<?php include ("menu.php"); ?>

pour qu'il s'affiche dans la sidebar de gauche.

Message par **Ymai** » 21 nov. 2010, 19:34

Bonjour

Code : Tout sélectionner

<div id="sidebar1">
<ul id="menuGauche">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
</ul>
</div>

le fait très bien.
Donc, si menu.php contient quelque chose du même type, sa place est bien dans <div id="sidebar1"></div>
Après, il ne reste plus qu'à remplacer les "Item x" par des liens et à styler #menuGauche et ses enfants pour obtenir une présentation top nickel.

Voilà, je me suis un peu amusé (on ne peut pas être sérieux tout le temps).

Code : Tout sélectionner

#menuGauche {
  padding: 2em;
}

#menuGauche li {
  list-style-type: none;
  margin: 0.5em 0;
  border: 1px solid grey;
}

#menuGauche li a {
  text-decoration: none;
  background-color: #f00;
  color: #0ff;
  display: block;
  padding: 0 0.5em;
}

#menuGauche li a:hover {
  text-decoration: underline;
  background-color: pink;
  color: #f0f;
}

Merci de ne pas écouter ceux qui viendraient décrier le choix des couleurs: des esprits forts rodent par ici.

fcalmant · Message par **fcalmant** » 21 nov. 2010, 19:56

Mais bon, mon menu sera souvent modifié et doit apparaitre dans toutes les pages, c'est pour cela que j'ai opté pour un include php...De" plus la présence de sous menus me semble plus gérable en js. Regarde ici http://www.exometeofraiture.net/menu.php et sa css http://www.exometeofraiture.net/menu.css
Merci en tout cas de bosser sur mon problème

Message par **Ymai** » 21 nov. 2010, 20:46

fcalmant a écrit :
Mais bon, mon menu sera souvent modifié et doit apparaitre dans toutes les pages, c'est pour cela que j'ai opté pour un include php...

Toutafée. Mais rien n'empêche de mettre tout ça dans un fichier include. C'est même une excellente idée.

fcalmant a écrit :De" plus la présence de sous menus me semble plus gérable en js. Regarde ici http://www.exometeofraiture.net/menu.php et sa css http://www.exometeofraiture.net/menu.css

Argh... La démonstration est particulièrement malheureuse

: le fichier javascript contenant la fonction afficheMenu(this) n'est pas disponible. Le menu ne fonctionne donc pas.
Mais Javascript n'en est pour autant pas obligatoire. Il est tout à fait possible d'avoir un tel menu entièrement en css. Sans dépendre d'un .js
Voir, par exemple, http://fabiwan.kenobi.free.fr/css/NestedLists.html# et le menu Chinon37 (tout rapport avec un esprit fort qui roderait par ici n'est pas vraiment fortuite).
Mais cela demande certainement d'adopter une structure hiérarchique pour le menu. Quelque chose comme

Code : Tout sélectionner

<ul id="menu">
  <li>item 1</li>
  <li>Item 2
    <ul class="sousmenu">
    <li>Item 2a</li>
    <li>Item 2b</li>
    </ul>
    </li>
    <li>Item 3</li>
</ul>

fcalmant · Message par **fcalmant** » 21 nov. 2010, 22:15

Merci ymai, le chinon37 me semble en effet intéressant. Je vais essayer de plancher là-dessus! Je suis une daube malheureusement, je vais encore galérer

...
EDIT: extra ça marche!! mais pas sur ie...

Message par **Ymai** » 21 nov. 2010, 23:27

fcalmant a écrit :Merci ymai, le chinon37 me semble en effet intéressant. Je vais essayer de plancher là-dessus! Je suis une daube malheureusement, je vais encore galérer ...
EDIT: extra ça marche!! mais pas sur ie...

Effectivement, pour que ça fonctionne sous IE, il faut... un petit hack en JS, comme mentionné sur la page. J'avais même oublié que IE, ça existe encore.

Comme IE ne supporte pas le sélecteur LI:hover (sauf IE7 semble-t'il), les menus déroulants nécessitent une rustine JavaScript : ieHover.js. Pour que ce script ne soit chargé que sous IE, on utilise ce code (à placer dans le <head>) :

Code : Tout sélectionner

// this emulates the "LI:hover" CSS selector for IE
// requires a "li.hover" duplicate selector in the stylesheet
function IEpatchLiHover(name) {
    var ulList = document.getElementsByTagName("UL");
    for (var j = 0; j < ulList.length; j++) {
        //~ if (ulList[j].className == name) {
        if (ulList[j].className.indexOf(name) >= 0) {
            var liList = ulList[j].getElementsByTagName("LI");
            for (var i = 0; i < liList.length; i++) {
                // normal code
                //~ liList[i].setAttribute("onmouseover", "this.className='hover'");
                //~ liList[i].setAttribute("onmouseout", "this.className=''");
                // IE code
                liList[i].onmouseover = function() { this.className='hover' };
                liList[i].onmouseout = function() { this.className='' };
            }
        }
    }
}
//~ IEpatchLiHover("navlist"); // applies the patch to every UL.navlist
window.onload = function() { IEpatchLiHover("navlist") };

fcalmant · Message par **fcalmant** » 22 nov. 2010, 06:57

Faut-il modifier qque chose dans la feuille css pour que le patch fonctionne

Code : Tout sélectionner

(// requires a "li.hover" duplicate selector in the stylesheet)

EDIT: visiblement ça marche comme ça sur ie7 mais pas sur toutes les config...tant pis pour les pro-microsoft

fcalmant · Message par **fcalmant** » 22 nov. 2010, 17:47

Bon les gars, maintenant que la plupart des problèmes sont réglés, je repose ma question : comment faire pour que le pied de page reste visible quelle que soit la résolution du visiteur? il faudrait que les sidebars gauche et droite ainsi que le content s'adapte automatiquement. Une idée???
Merci

Message par **chinon37** » 22 nov. 2010, 20:55

Très difficile à réaliser... en effet, tu ne peux pas connaitre à l'avance si le visiteur a un écran de 13" ou un de 27"!
Et évidemment, la taille de la page n'est pas la même.
Il faudrait une dose de position fixe (css), mais ce ne sera jamais parfait.
Le plus important, àmha, est de faire des pages courtes (équivalent de 2 hauteurs d'écran 20" environ). Au delà, créer une nouvelle page.
Ainsi le pied de page sera toujours assez rapidement atteint.
Sur ton site actuel, je trouve une page d'environ 20 hauteurs d'écran: c'est beaucoup trop long!

Geckozone

Page css externe

Re: Page css externe

Re: Page css externe

Re: Page css externe

Re: Page css externe

Re: Page css externe

Re: Page css externe

Re: Page css externe

Re: Page css externe

Re: Page css externe

Re: Page css externe

Re: Page css externe

Re: Page css externe

Re: Page css externe

Re: Page css externe

Re: Page css externe

Qui est en ligne ?