Appliquer un "calque" HTML

Utilisateur anonyme -
Utilisateur anonyme - 24 mai 2010 à 16:21

Bonjour,
J'ai une question simple mais difficile à expliquer : Je crée un site en HTML et en JavaScript par l'intermédiaire du bloc note. j'ai une dizaine de pages. J'ai sur chaque page (dans la partie HTML) une partie "design" : le menu, la bannière... et une parti contenu. Le problème c'est par exemple : si je veux faire une modification à mon menu sur l'accueil, je suis obligé d'ouvrir mes 10 pages et de faire la modification 20 fois. N'y a t-il pas un moyen pour que la structure du site s'adapte automatiquement sur toutes les pages ...
Merci de vos réponses

Afficher la suite

A voir également:

Appliquer un "calque" HTML
Editeur html - Télécharger - HTML
Calque rouge photoshop ✓ - Forum Photoshop
Br html ✓ - Forum Webmastering
Appliquer un style word - Guide
J'ai un problème avec les calques photoshop ✓ - Forum Photoshop

8 réponses

Réponse 1 / 8

notobe Messages postés 1952 Date d'inscription Statut Membre Dernière intervention 213

Il faut faire un include en php
https://openclassrooms.com/fr/courses/918836-concevez-votre-site-web-avec-php-et-mysql

Ainsi le menu est un fichier à part, incorporé automatiquement dans chaque page html.
En cas de modification du menu, il n'y a qu'un seul fichier à modifier.

<blockquote cite="Shakespeare">To be or not to be ; That is the question...</blockquote>

Utilisateur anonyme

Oki merci !

Utilisateur anonyme

dernier problème : je n'arrive pas à faire ce qui est expliqué dans ton lien... mon index n'affiche pas le menu !

notobe Messages postés 1952 Date d'inscription Statut Membre Dernière intervention 213

La page est en ligne ou encore en local ?

Si en ligne, l'extension de ton fichier est-il bien .php et non .html ?
Si en local, as-tu installé un serveur apache ? (easyphp ou winamp par exemple)

Utilisateur anonyme

Et voila ! tu as la réponse à tout ^^
effectivement je n'avais pas téléchargé easyphp !

Réponse 2 / 8

Utilisateur anonyme

----HTML---- :

<center>
<script type="text/javascript">

stuHover = function() {
var cssRule;
var newSelector;
for (var i = 0; i < document.styleSheets.length; i++)
for (var x = 0; x < document.styleSheets[i].rules.length ; x++)
{
cssRule = document.styleSheets[i].rules[x];
if (cssRule.selectorText.indexOf("LI:hover") != -1)
{
newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");
document.styleSheets[i].addRule(newSelector , cssRule.style.cssText);
}
}
var getElm = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<getElm.length; i++) {
getElm[i].onmouseover=function() {
this.className+=" iehover";
}
getElm[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" iehover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", stuHover);
</script>

<ul id="nav">

<ul>
</ul>
<li><a href="index.html">Accueil</a>
<ul>

</ul>
<li><a href="#nogo">TITRE 1</a>
<ul>

<li><a href="#nogo">SOUS-TITRE</a>
<ul>

</ul>
</li>
<li><a href="#nogo">SOUS TITRE</a>
<ul>

</ul>
</li>
<li><a href="#nogo">SOUS TITRE</a>
<ul>

</ul>
</li>

</ul>
<li><a href="#nogo">TITRE 2</a>
<ul>
<li><a href="#nogo">SOUS TITRE</a>
<ul>
<li><a href="http://Adresse du lien.html">sous sous titres</a></li>
<li><a href="http://Adresse du lien.html">sous sous titres</a></li>
<li><a href="http://Adresse du lien.html">sous sous titres</a></li>
</ul>
</li>
<li><a href="#nogo">SOUS TITRE</a>
<ul>
<li><a href="http://Adresse du lien.html">sous sous titres</a></li>
<li><a href="http://Adresse du lien.html">sous sous titres</a></li>
<li><a href="http://Adresse du lien.html">sous sous titres</a></li>
</ul>
</li>
<li><a href="#nogo">SOUS TITRE</a>
<ul>
<li><a href="http://Adresse du lien.html">sous sous titres</a></li>
<li><a href="http://Adresse du lien.html">sous sous titres</a></li>
<li><a href="http://Adresse du lien.html">sous sous titres</a></li>
</ul>
</li>

</ul>

</ul>
</ul>
</center>
<br>

-----CSS----

#nav,
#nav ul {padding:20 0 5px 0; margin:0; list-style:none; font: 15px comic sans ms; border:1px solid #000; border-color:#000; border-width:1px 1px 1px 1px; background:#ffcc66; position:relative; z-index:200;}
#nav {height:30px; width: 961px; padding:0;}

#nav li {float:left;}
#nav li li {float:left;}

* html #nav li li {float:left;}

#nav li a {display:block; float:center; color:#000; border-right:1px solid #000; border-color:#Ffcc66; margin:0 10px 0 10px; height:30px; line-height:30px; text-decoration:none; white-space:nowrap;}
#nav li li a {height:20px; line-height:20px; float:none;}

#nav li:hover {position:relative; z-index:300;}
#nav li:hover ul {left:0; top:22px;}

* html #nav li:hover ul {left:10px;}

#nav ul {position:absolute; left:-9999px; top:-9999px;}

* html #nav ul {width:1px;}

#nav li:hover li:hover > ul {left:-15px; margin-left:100%; top:-1px;}

#nav li:hover > ul ul {position:absolute; left:-9999px; top:-9999px; width:auto;}

#nav li:hover > a {text-decoration:underline; color:#;}

#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:0px; margin-left:100%; top:5px;}

#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px;}

#nav li:hover a,
#nav li:hover li:hover a,
#nav li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover li:hover li:hover a
{text-decoration:none; color:#FF0000;} /* Hover sur les liens */

#nav li:hover li a,
#nav li:hover li:hover li a,
#nav li:hover li:hover li:hover li a,
#nav li:hover li:hover li:hover li:hover li a,
#nav li:hover li:hover li:hover li:hover li:hover li a
{text-decoration:none; color:#000;} /* Les liens */

Réponse 3 / 8

Utilisateur anonyme

Merci de ton aide !

Réponse 4 / 8

dim29 Messages postés 68 Date d'inscription Statut Membre Dernière intervention 14

Bonjour !

Voilà le problème ! Il faut absolument utiliser les pages CSS !
Tu créés une page CSS en parallèle de ton HTML, qui s'adapte à toutes tes pages.
Et tu les relis dans la partie <head> de ton code HTML :
Je m'explique :

<link href="TaPageCSS.css" re="stylesheet" media="screen" />

C'est une feuille de style qui va te permettre d'appliquer l'habillage à toutes tes pages automatiquement... mais après voilà il faut connaître le langage CSS. Mais c'est la base avec HTML donc si tu connais pas le CSS il faut absolument que tu te rattrapes. ;-)

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 8

Utilisateur anonyme

Oui mais enfaite, mon site est un gros mélange des deux : par exemple mon menu est et CSS et HTML et si je veux le modifier pour ajouter une catégorie par exemple, je dois passer pas le HTML, quoi qu'il en soit ! (et c'est le cas pour 99% des menus je croit)

Réponse 6 / 8

dim29 Messages postés 68 Date d'inscription Statut Membre Dernière intervention 14

Non justement, il faut que tout ce qui est langage CSS soit répertorié dans une feuille de style extérieure à la page HTML, comme ça tes modifs HTML sont automatiquement amenées à être "mise-à-jour" au niveau du design.

Montre moi le code de ton menu si je peux t'aider.

Réponse 7 / 8

dim29 Messages postés 68 Date d'inscription Statut Membre Dernière intervention 14

Je me suis permis quelques rectifications, tu ne fermes pas tes <li>, et le <ul> englobe tous les <li> :

<ul id="nav">
<li><a href="index.html">Accueil</a></li>
<li><a href="#nogo">TITRE 1</a></li>
<li class="sous-titres"><a href="#nogo">SOUS-TITRE</a></li>
<li class="sous-titres"><a href="#nogo">SOUS TITRE</a></li>
<li class="sous-titres"><a href="#nogo">SOUS TITRE</a></li>
<li><a href="#nogo">TITRE 2</a></li>
<li class="sous-titres"><a href="#nogo">SOUS TITRE</a></li>
<li class="sous-s-t"><a href="http://Adresse du lien.html">sous sous titres</a></li>
<li class="sous-s-t"><a href="http://Adresse du lien.html">sous sous titres</a></li>
<li class="sous-s-t"><a href="http://Adresse du lien.html">sous sous titres</a></li>
<li class="sous-titres"><a href="#nogo">SOUS TITRE</a></li>
<li class="sous-s-t"><a href="http://Adresse du lien.html">sous sous titres</a></li>
<li class="sous-s-t"><a href="http://Adresse du lien.html">sous sous titres</a></li>
<li class="sous-s-t"><a href="http://Adresse du lien.html">sous sous titres</a></li>
<li class="sous-titres"><a href="#nogo">SOUS TITRE</a></li>
<li class="sous-s-t"><a href="http://Adresse du lien.html">sous sous titres</a></li>
<li class="sous-s-t"><a href="http://Adresse du lien.html">sous sous titres</a></li>
<li class="sous-s-t"><a href="http://Adresse du lien.html">sous sous titres</a></li>
</ul>

//* Si tu veux faire en sorte que tes sous-titres et tes sous-sous-titres soient d'apparence différente que celle des titres, mieux vaut créer une classe que tu paramètreras dans la page CSS (par exemple <li class="sous-titres"></li> et après dans la CSS :
.sous-titres {
...; }

</center>
<br>

-----CSS----

#nav ul {
padding: 5px;
margin: 0;
list-style:none;
font-size: 15px;
font-fammily: comic sans ms;
border:1px;
border-style: solid;
border-color:#000;
border-width: 1px;
background-color: #ffcc66;
position:relative;
z-index:200; }

#nav {
height: 30px;
width: 961px;
padding: 0; }

.sous-titres {
float: left; }

.sous-s-t {
float:left;}

.sous-titres a {
display: inline;
float:center;
color:#000;
border-right-width: 1px;
border-style: solid;
border-color: #Ffcc66;
margin:0 10px 0 10px;
line-height: 30px;
text-decoration:none;
white-space: nowrap; }

.sous-s-t a {
line-height:20px;
float:none; }

.sous-titres:hover {
position: relative;
z-index:300; }

//* Je suis désolé mais à partir de là j'ai laissé tombé, je ne comprends plus ton code.

#nav li:hover ul {left:0; top:22px;}

* html #nav li:hover ul {left:10px;}

#nav ul {
position:absolute; left:-9999px; top:-9999px;}

* html #nav ul {width:1px;}

#nav li:hover li:hover > ul {left:-15px; margin-left:100%; top:-1px;}

#nav li:hover > ul ul {position:absolute; left:-9999px; top:-9999px; width:auto;}

#nav li:hover > a {text-decoration:underline; color:#;}

#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:0px; margin-left:100%; top:5px;}

#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px;}

#nav li:hover a,
#nav li:hover li:hover a,
#nav li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover li:hover li:hover a
{text-decoration:none; color:#FF0000;} /* Hover sur les liens */

#nav li:hover li a,
#nav li:hover li:hover li a,
#nav li:hover li:hover li:hover li a,
#nav li:hover li:hover li:hover li:hover li a,
#nav li:hover li:hover li:hover li:hover li:hover li a
{text-decoration:none; color:#000;} /* Les liens */

Donc voilà, Tout le code CSS tu le mets sur une feuille de style que tu nommes par exemple "MonDesign.css" et dans le <head> de tes pages HTML tu vas mettre avant les <meta> :
<link href=".../MonDesign.css" rel="stylesheet" media="screen" />
Et là normalement si tout va bien l'habillage va s'appliquer à toutes tes pages.

Réponse 8 / 8

dim29 Messages postés 68 Date d'inscription Statut Membre Dernière intervention 14

Ah je crois avoir compris ce que tu veux dire.
Si tu veux modifier le menu côté HTML ?

Dans ce cas tu peux créer le menu dans une page HTML à part, et l'insérer dans le code de toutes tes pages par un système :
<object src="MonMenu.html" /> :-)

Utilisateur anonyme

Ouais pas bête du tout, j'essaie tout de suite ^^

Discussions similaires

la balise <br> ou <br />

question pix mot caché

Balise </br>

Espace en HTML

Votre réponse

Discussions similaires