Menu sans frames balises DIV
Fermé
Étienne9
Messages postés
1022
Date d'inscription
mardi 1 mars 2011
Statut
Membre
Dernière intervention
10 mai 2015
-
25 mars 2013 à 21:11
Profil bloqué - 28 mars 2013 à 10:10
Profil bloqué - 28 mars 2013 à 10:10
A voir également:
- Menu sans frames balises DIV
- Menu déroulant excel - Guide
- Div c++ - Télécharger - Langages
- Menu démarrer windows 11 - Guide
- Canon quick menu - Télécharger - Utilitaires
- Menu demarrer - Guide
14 réponses
canarder
Messages postés
1706
Date d'inscription
jeudi 28 août 2008
Statut
Membre
Dernière intervention
13 mai 2018
354
25 mars 2013 à 21:21
25 mars 2013 à 21:21
Avec du CSS.
Le plus simple au début, c'est de jouer avec la propriété float avec des margin. Mais utiliser position est mieux.
Le plus simple au début, c'est de jouer avec la propriété float avec des margin. Mais utiliser position est mieux.
Étienne9
Messages postés
1022
Date d'inscription
mardi 1 mars 2011
Statut
Membre
Dernière intervention
10 mai 2015
49
Modifié par Étienne9 le 26/03/2013 à 20:04
Modifié par Étienne9 le 26/03/2013 à 20:04
Avec du CSS et du HTML j'aimerais savoir en gros comment vous faites.
Étienne9
Messages postés
1022
Date d'inscription
mardi 1 mars 2011
Statut
Membre
Dernière intervention
10 mai 2015
49
Modifié par Étienne9 le 28/03/2013 à 08:56
Modifié par Étienne9 le 28/03/2013 à 08:56
Bonjour,
Je fais des tentatives mais pour le moment aucun succès.
Est-ce que quelqu'un peut m'aider s'il vous plaît ?
Voilà ce que j'ai fait :
Page index.php :
Page accueil.html :
document.css :
Page liens.html :
Merci beaucoup :)
Je fais des tentatives mais pour le moment aucun succès.
Est-ce que quelqu'un peut m'aider s'il vous plaît ?
Voilà ce que j'ai fait :
Page index.php :
<html> <title>Naden - Accueil</title> <?php include './pages/liens.php'; include './pages/accueil.html'; ?> </html>
Page accueil.html :
<html> <head> <link type="text/css" rel="stylesheet" href="./document.css"> </head> <body> <div class="accueil" id="droitecss"> <h1 align="center">Accueil</h1> Bonjour Toto ! </div> </body> </html>
document.css :
div#lienscss {
margin-left:5%;
}
div#droitecss {
margin-left:20%;
}
Page liens.html :
<html> <head> <link type="text/css" rel="stylesheet" href="./document.css"> </head> <body> <div class="liens" id="lienscss"> <table border="1" CELLSPACING="10" height="100%" width="10%"><tr height="5%"><td>Connexion</td><td><form method="post">Identifiant <input type="text" name="identifiant"><br>Mot de passe : <input type="password" name="mdp"><br><input type="submit" name="go" value="Se connecter"></form><a href="./inscription.php" target="droite">S'inscrire</a></td></tr> <tr height="5%"><td colspan="2"><a href="./accueil.html" target="droite">Accueil</a></td></tr> <tr height="5%"><td colspan="2">hkjhk</td></tr> <tr><td>Toto</td></tr> </table> </div> </body> </html>
Merci beaucoup :)
Salut,
Un div c'est un bloc dans lequel tu mets des choses.
A l'endroit où tu veux qu'il soit, tu mets donc
<div>
<a href="lelienverstapage.lextension">Le titre du lien</a></br>
<a href="lelienverstapage.lextension">Le titre du lien</a></br>
<a href="lelienverstapage.lextension">Le titre du lien</a></br>
<a href="lelienverstapage.lextension">Le titre du lien</a></br>
</div>
</br> sert à passer à la ligne, <a></a> sert à créer un lien, href="" sert à diriger lors du clic.
Pour animer tout ça, il te faut utiliser du css. Le site du zero t'expliquerai très bien mais hésite pas si tu veux des informations complémentaires.$
[edit]
Dans ton document.css tu peux mettre ça pour que ton lien sois souligné lors du survol :
a{
text-decoration:none; //ça veut dire normalement, le lien n'est pas souligné
color:blue; //ici tu choisis la couleur de tes liens.
}
a:hover{
text-decoration:underline; //ici ça veut dire quand ton lien est survolé, tu le soulignes.
}
Alors... Heureux ?
Varaldi Q.
Laisse moi 2 minutes que j'te trouve un autre truc...
Un div c'est un bloc dans lequel tu mets des choses.
A l'endroit où tu veux qu'il soit, tu mets donc
<div>
<a href="lelienverstapage.lextension">Le titre du lien</a></br>
<a href="lelienverstapage.lextension">Le titre du lien</a></br>
<a href="lelienverstapage.lextension">Le titre du lien</a></br>
<a href="lelienverstapage.lextension">Le titre du lien</a></br>
</div>
</br> sert à passer à la ligne, <a></a> sert à créer un lien, href="" sert à diriger lors du clic.
Pour animer tout ça, il te faut utiliser du css. Le site du zero t'expliquerai très bien mais hésite pas si tu veux des informations complémentaires.$
[edit]
Dans ton document.css tu peux mettre ça pour que ton lien sois souligné lors du survol :
a{
text-decoration:none; //ça veut dire normalement, le lien n'est pas souligné
color:blue; //ici tu choisis la couleur de tes liens.
}
a:hover{
text-decoration:underline; //ici ça veut dire quand ton lien est survolé, tu le soulignes.
}
Alors... Heureux ?
Varaldi Q.
Laisse moi 2 minutes que j'te trouve un autre truc...
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Étienne9
Messages postés
1022
Date d'inscription
mardi 1 mars 2011
Statut
Membre
Dernière intervention
10 mai 2015
49
28 mars 2013 à 09:16
28 mars 2013 à 09:16
Si vous voulez le soucis c'est que je ne peux pas inclure deux pages...
J'aimerais avoir le menu à gauche et les pages que je veux à droite.
Comment faire pour afficher mes pages à droite ? C'est ça qui me bloque...
J'aimerais avoir le menu à gauche et les pages que je veux à droite.
Comment faire pour afficher mes pages à droite ? C'est ça qui me bloque...
Dans ton html :
<div class="pagedegauche"> //le bloc correspondant à ta page de gauche
<h1>Menu</h1></br> //h1 pour dire titre1, tu peux mettre h2 ou autre (ou rien)
<a href="tonlien">Ton lien</a></br> //tes liens comme expliqué précédemment
<a href="tonlien">Ton lien</a></br>
<a href="tonlien">Ton lien</a></br>
<a href="tonlien">Ton lien</a></br>
</div>
<div class="pagededroite"> //le bloc correspondant à ta page de droite
Le contenu de ta page de droite
</div>
Dans ton fichier css
.pagedegauche{
width:25%; //largeur : 25% de ta page
min-width:200px; //largeur minimale
float:left; //il se met sur la gauche
}
.pagededroite{
width:74%; //largeur : 74% de ta page
min-width:600px; //largeur minimale
float:right; //il se met sur la droite
}
Il y a évidemment d'autres façons de faire mais si ça te convient, c'est bon !
<div class="pagedegauche"> //le bloc correspondant à ta page de gauche
<h1>Menu</h1></br> //h1 pour dire titre1, tu peux mettre h2 ou autre (ou rien)
<a href="tonlien">Ton lien</a></br> //tes liens comme expliqué précédemment
<a href="tonlien">Ton lien</a></br>
<a href="tonlien">Ton lien</a></br>
<a href="tonlien">Ton lien</a></br>
</div>
<div class="pagededroite"> //le bloc correspondant à ta page de droite
Le contenu de ta page de droite
</div>
Dans ton fichier css
.pagedegauche{
width:25%; //largeur : 25% de ta page
min-width:200px; //largeur minimale
float:left; //il se met sur la gauche
}
.pagededroite{
width:74%; //largeur : 74% de ta page
min-width:600px; //largeur minimale
float:right; //il se met sur la droite
}
Il y a évidemment d'autres façons de faire mais si ça te convient, c'est bon !
Étienne9
Messages postés
1022
Date d'inscription
mardi 1 mars 2011
Statut
Membre
Dernière intervention
10 mai 2015
49
Modifié par Étienne9 le 28/03/2013 à 09:36
Modifié par Étienne9 le 28/03/2013 à 09:36
Je laisse les deux include quand même ?
Si je comprends bien, toutes mes pages de droite devront avoir le div avec la class="pagedroite" ?
Et ma page d'accueil c'est en fait dans ma page index que je dois la mettre c'est ça ?
PS : je connais les bases, tous les <OL> balises gras <b> etc...
Si je comprends bien, toutes mes pages de droite devront avoir le div avec la class="pagedroite" ?
Et ma page d'accueil c'est en fait dans ma page index que je dois la mettre c'est ça ?
PS : je connais les bases, tous les <OL> balises gras <b> etc...
Du coup ta page include de tes liens tu la mets dans le div gauche et l'autre include dans le div droit.
en gros ça te donne ça ce que je t'ai écris :
A gauche c'est ton div gauche et à droite le droit. Tu dois mettre ce que tu veux dans ces deux div.
Varaldi Q.
Laisse moi 2 minutes que j'te trouve un autre truc...
en gros ça te donne ça ce que je t'ai écris :
________ _______________________________ | || | | || | | || | | || | | || | | || | | || | | || | |_______| | ______________________________|
A gauche c'est ton div gauche et à droite le droit. Tu dois mettre ce que tu veux dans ces deux div.
Varaldi Q.
Laisse moi 2 minutes que j'te trouve un autre truc...
Étienne9
Messages postés
1022
Date d'inscription
mardi 1 mars 2011
Statut
Membre
Dernière intervention
10 mai 2015
49
28 mars 2013 à 09:47
28 mars 2013 à 09:47
Donc en gros c'est la page index qui est coupé par les div, d'un côté je mets l'include de la page de mes liens et de l'autre l'include de l'autre page (exemple : accueil).
Quand un utilisateur clique sur un lien je n'ai pas bien compris comment ça marche...
Quand un utilisateur clique sur un lien je n'ai pas bien compris comment ça marche...
Il y a plusieurs façons de faire.
En général, tu fais une page comme ça pour ton acceuil, une autre toujours comme ça pour ton autre page etc (ce qui est le plus souvent fait).
Quand le visiteur cliquera sur un lien, il ouvrira une nouvelle page qui ressemblera fort à celle d'avant (seul le div droit changera).
En général, tu fais une page comme ça pour ton acceuil, une autre toujours comme ça pour ton autre page etc (ce qui est le plus souvent fait).
Quand le visiteur cliquera sur un lien, il ouvrira une nouvelle page qui ressemblera fort à celle d'avant (seul le div droit changera).
Étienne9
Messages postés
1022
Date d'inscription
mardi 1 mars 2011
Statut
Membre
Dernière intervention
10 mai 2015
49
28 mars 2013 à 10:02
28 mars 2013 à 10:02
Sauf que j'aimerai conserver la structure....
En fait, ne pas refaire cette structure pour toutes mes pages....
En fait, ne pas refaire cette structure pour toutes mes pages....
Ca n'est pas possible proprement.
Chaque page qui doit être affichée de cette façon doit avoir ça dans son code.
Par ailleurs, c'est comme ça qu'est fait le site de ton prof ;)
Chaque page qui doit être affichée de cette façon doit avoir ça dans son code.
Par ailleurs, c'est comme ça qu'est fait le site de ton prof ;)
Étienne9
Messages postés
1022
Date d'inscription
mardi 1 mars 2011
Statut
Membre
Dernière intervention
10 mai 2015
49
28 mars 2013 à 10:07
28 mars 2013 à 10:07
Sur toutes les pages il y a une division en deux ???
