Construire la base de son site
Fermé
pino91
Messages postés
2
Date d'inscription
dimanche 12 août 2012
Statut
Membre
Dernière intervention
13 août 2012
-
12 août 2012 à 23:10
fredconv Messages postés 122 Date d'inscription mardi 25 août 2009 Statut Membre Dernière intervention 4 décembre 2017 - 13 août 2012 à 15:33
fredconv Messages postés 122 Date d'inscription mardi 25 août 2009 Statut Membre Dernière intervention 4 décembre 2017 - 13 août 2012 à 15:33
A voir également:
- Construire la base de son site
- Site de telechargement - Guide
- Site de vente entre particulier - Guide
- Formules excel de base - Guide
- Site inaccessible - Guide
- Site de partage de photos - Guide
4 réponses
mimigenie
Messages postés
1180
Date d'inscription
dimanche 3 janvier 2010
Statut
Membre
Dernière intervention
4 août 2018
312
12 août 2012 à 23:48
12 août 2012 à 23:48
As-tu déjà un code qu'on pourrait corriger ?
Mais si tu as ta page page0 avec le menu à gauche et le contenu au centre, pour ta page1 il te suffit de prendre exactement le même code mais de changer le contenu de la zone de contenu.
Pour afficher ta page tu fais un simple lien <a href"page1.html" title="page1">page1</a>
Mais si tu as ta page page0 avec le menu à gauche et le contenu au centre, pour ta page1 il te suffit de prendre exactement le même code mais de changer le contenu de la zone de contenu.
Pour afficher ta page tu fais un simple lien <a href"page1.html" title="page1">page1</a>
pino91
Messages postés
2
Date d'inscription
dimanche 12 août 2012
Statut
Membre
Dernière intervention
13 août 2012
13 août 2012 à 00:05
13 août 2012 à 00:05
Je prend un script au hasard sur le net avec un menu à gauche. Manque plus qu'à dire aux liens du menu de gauche qu'ils doivent apparaitre sur la colonne de mon choix. Mais comment ?? :)
<html>
<head>
<style type="text/css">
/* CSS PROVENANT DU SITE https://webyo.net/ */
body {
margin:0;
padding:0;
line-height: 1.5em;
}
ul, li {
list-style: none;
margin: 0;
}
#header {
background-color: #0066cc; /* Couleur de fond */
height: 90px; /* Hauteur de l'entête */
color: #fff; /* Couleur du texte */
font-weight: bold;
}
#bloc-contenu {
float: left;
width: 100%;
}
#col-centre {
margin: 0 15% 0 20%; /* Marge droite et marge gauche */
}
#col-gauche {
float: left;
width: 20%; /* Largeur de la colonne */
margin-left: -100%; /* Marge gauche de la colonne */
background-color: #b3cce6;
}
#col-droite {
float: left;
width: 15%; /* Largeur de la colonne */
margin-left: -15%; /* Marge gauche de la colonne */
background-color: #6699cc;
}
#footer {
background-color: #2e4c6b;
clear: left;
width: 100%;
font-weight: bold;
color: #fff;
text-align: center;
padding: 4px 0;
}
.col-int {
padding: .5em 1em;
}
p, h1, pre {
margin: 0 2em 1em 1em;
}
h1 {
font-size: 120%;
padding-top: 1em;
}
</style>
</head>
<body>
<!-- DEBUT MODELE PROVENANT DU SITE https://webyo.net/ -->
<div id="conteneur">
<div id="header"><img src="images/votre-logo.gif" alt="Votre logo"
height="90" width="220"></div>
<div id="bloc-contenu">
<div id="col-centre">
<div class="col-int">
<h1><a href="http://css.webyo.net" title="Retour en page d'accueil">MODELE
DE PAGE CSS - 3 COLONNES</a></h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi.<br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
</div>
</div>
<div id="col-gauche">
<div class="col-int">
<h1>TITRE COLONNE 2</h1>
<ul>
<li><a href="" title="">Menu 1</a></li>
<li><a href="" title="">Menu 2</a></li>
<li><a href="" title="">Menu 3</a></li>
<li><a href="" title="">Menu 4</a></li>
<li><a href="" title="">Menu 5</a></li>
<li><a href="" title="">Menu 6</a></li>
</ul>
<br>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex.</p>
</div>
</div>
<div id="col-droite">
<div class="col-int">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum.</p>
</div>
</div>
<div id="footer">Pied de page</div>
</div>
<!-- FIN MODELE PROVENANT DU SITE https://webyo.net/ -->
</body>
</html>
<html>
<head>
<style type="text/css">
/* CSS PROVENANT DU SITE https://webyo.net/ */
body {
margin:0;
padding:0;
line-height: 1.5em;
}
ul, li {
list-style: none;
margin: 0;
}
#header {
background-color: #0066cc; /* Couleur de fond */
height: 90px; /* Hauteur de l'entête */
color: #fff; /* Couleur du texte */
font-weight: bold;
}
#bloc-contenu {
float: left;
width: 100%;
}
#col-centre {
margin: 0 15% 0 20%; /* Marge droite et marge gauche */
}
#col-gauche {
float: left;
width: 20%; /* Largeur de la colonne */
margin-left: -100%; /* Marge gauche de la colonne */
background-color: #b3cce6;
}
#col-droite {
float: left;
width: 15%; /* Largeur de la colonne */
margin-left: -15%; /* Marge gauche de la colonne */
background-color: #6699cc;
}
#footer {
background-color: #2e4c6b;
clear: left;
width: 100%;
font-weight: bold;
color: #fff;
text-align: center;
padding: 4px 0;
}
.col-int {
padding: .5em 1em;
}
p, h1, pre {
margin: 0 2em 1em 1em;
}
h1 {
font-size: 120%;
padding-top: 1em;
}
</style>
</head>
<body>
<!-- DEBUT MODELE PROVENANT DU SITE https://webyo.net/ -->
<div id="conteneur">
<div id="header"><img src="images/votre-logo.gif" alt="Votre logo"
height="90" width="220"></div>
<div id="bloc-contenu">
<div id="col-centre">
<div class="col-int">
<h1><a href="http://css.webyo.net" title="Retour en page d'accueil">MODELE
DE PAGE CSS - 3 COLONNES</a></h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi.<br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
</div>
</div>
<div id="col-gauche">
<div class="col-int">
<h1>TITRE COLONNE 2</h1>
<ul>
<li><a href="" title="">Menu 1</a></li>
<li><a href="" title="">Menu 2</a></li>
<li><a href="" title="">Menu 3</a></li>
<li><a href="" title="">Menu 4</a></li>
<li><a href="" title="">Menu 5</a></li>
<li><a href="" title="">Menu 6</a></li>
</ul>
<br>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex.</p>
</div>
</div>
<div id="col-droite">
<div class="col-int">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum.</p>
</div>
</div>
<div id="footer">Pied de page</div>
</div>
<!-- FIN MODELE PROVENANT DU SITE https://webyo.net/ -->
</body>
</html>
inspiring
Messages postés
1813
Date d'inscription
vendredi 28 janvier 2011
Statut
Membre
Dernière intervention
31 décembre 2018
265
13 août 2012 à 15:27
13 août 2012 à 15:27
...
<h1>TITRE COLONNE 2</h1>
<ul>
<li><a href="" title="">Menu 1</a></li>
<li><a href="" title="">Menu 2</a></li>
<li><a href="" title="">Menu 3</a></li>
<li><a href="" title="">Menu 4</a></li>
<li><a href="" title="">Menu 5</a></li>
<li><a href="" title="">Menu 6</a></li>
</ul>
<br>
...
dans cet element du menu (de gauche) tu definis les liens
ex : <li><a href="page1.html" title="">Menu 1</a></li>
sur ta page est visible "menu1" et si on clique apparait alors la "page1"
si c'etait ca bien la question
<h1>TITRE COLONNE 2</h1>
<ul>
<li><a href="" title="">Menu 1</a></li>
<li><a href="" title="">Menu 2</a></li>
<li><a href="" title="">Menu 3</a></li>
<li><a href="" title="">Menu 4</a></li>
<li><a href="" title="">Menu 5</a></li>
<li><a href="" title="">Menu 6</a></li>
</ul>
<br>
...
dans cet element du menu (de gauche) tu definis les liens
ex : <li><a href="page1.html" title="">Menu 1</a></li>
sur ta page est visible "menu1" et si on clique apparait alors la "page1"
si c'etait ca bien la question
fredconv
Messages postés
122
Date d'inscription
mardi 25 août 2009
Statut
Membre
Dernière intervention
4 décembre 2017
38
13 août 2012 à 15:33
13 août 2012 à 15:33
Salut
Petite question avant d aller plus loin,
est tu ok avec les feuilles de style (css), dois tu utiliser juste du html et css, ou bien peut tu utiliser du jquery, php etc (en gros langage statique ou dynamique )??
le le cas de html uniquement, il te faudra a chaque fois copier le meme code et changer le contenu de la colonne de droite:
dans les autres cas (language plus dynamique) tu pourrais eviter de coller recopier tout a chaque fois.
dans le cas de html uniquement: sur ta premiere page:
(ici pour l exemple je vais me restraindre a 2 pages avec 2 liens...)
dans le meme repertoire: 2 fichiers html: page1.html et page2.html
page 1
page 2
et pour la css:
tres basique mais c est tout ce dont tu as besoin
voila le code complet d'une page (bien sur la la css est incluse dans le fichier et le code tres simplifié mais fonctionnel.
Petite question avant d aller plus loin,
est tu ok avec les feuilles de style (css), dois tu utiliser juste du html et css, ou bien peut tu utiliser du jquery, php etc (en gros langage statique ou dynamique )??
le le cas de html uniquement, il te faudra a chaque fois copier le meme code et changer le contenu de la colonne de droite:
dans les autres cas (language plus dynamique) tu pourrais eviter de coller recopier tout a chaque fois.
dans le cas de html uniquement: sur ta premiere page:
(ici pour l exemple je vais me restraindre a 2 pages avec 2 liens...)
dans le meme repertoire: 2 fichiers html: page1.html et page2.html
page 1
<h1>page 1</h1> <ul class="menu"> <li><a href="page1.html" class="active">page 1</a></li> <li><a href="page2.html">page 2</a></li> </ul> <p class="content"> contenu de la page 1 contenu de la page 1 bla bla bla bla bla ..... </p>
page 2
<h1>page 1</h1> <ul class="menu"> <li><a href="page1.html">page 1</a></li> <li><a href="page2.html" class="active">page 2</a></li> </ul> <p class="content"> contenu de la page 2 bla bla bla bla bla ..... </p>
et pour la css:
<style>
.menu{float:left;display:block;width:200px;margin:right:25px;}
.content{display:block;}
</style>
tres basique mais c est tout ce dont tu as besoin
voila le code complet d'une page (bien sur la la css est incluse dans le fichier et le code tres simplifié mais fonctionnel.
<html>
<header>
<style>
.menu{float:left;display:block;width:100px;}
.content{display:block;margin-left:140px}
</style>
</header>
<body>
<h1>page 1</h1>
<ul class="menu">
<li><a href="page1.html" class="active">page 1</a></li>
<li><a href="page2.html">page 2</a></li>
</ul>
<p class="content">
contenue de la page 1
</p>
</body>
</html>
