Page html dans un bloc

Question

totoche89

17 Jul 2019 à 06:05

Bonjour à tous Smiley smile

Je fait ma première page html/css. j'ai récuperé le menu que vous proposez à la page http://www.frogweb.fr/menu-deroulant-horizontal/ que j'ai réussi à modifier a ma sauce Smiley smile

j'ai ensuite réussi a faire une page de bloc:
css:


div#boite_menu {
    width:100%;
    height:50px;
    background-color:#00CCFF;
    }
div#boite_gauche {
    float:left;
    width:20%;
    height:400px;
    background-color:#FF6699;
    }
div#boite_troisD {
    width:100%;
    height:200px;
    background-color:#66CC33;
    }
div#boite_necessaire {
    width:100%;
    height:200px;
    background-color:#CC99CC;
    }
    div#boite_contenu {
    width:80%;
    height:400px;
    background-color:#FFCC00;
    float:left;
    }
div#boite_contenu:target {
    width:80%;
    height:400px;
    background-color:black;
    float:left;
    }
div#boite_piedpage {
    width:100%;
    height:50px;
    background-color:#33FF99;
    clear:both;
    }

et je voudrais des bouton du menu ouvrir une page html dans la boite div#boite_contenu mais cela ne marche pas
html


<li><a href="toto.html#boite_contenu:target">toto</a></li>

j'ai eu beau chercher sur internet je ne trouve pas, si quelqu'un pouvait m'aider cela serait sympa.
merci d'avance

Felipe

Administrateur

17 Jul 2019 à 11:25

Bonjour,

Frogweb n'est pas lié à Alsacréations (que je sache. Geoffrey Crofte a bien fait partie de l'agence .fr par contre, oui Smiley lol

) mais peu importe, un menu déroulant est un menu déroulant. Smiley smile

Sans code HTML, la chose stylée par les CSS, il va être difficile de t'aider Smiley cligne

Quelques commentaires tout de même :
- :target n'a rien à faire dans un code HTML, c'est un bout de sélecteur CSS permettant de cibler l'élément HTML lui-même ciblé par un lien (il est un peu particulier celui-là Smiley eek

). On clique sur un lien dont l'attribut href contient une ancre href="page.html#ancre", l'adresse devient donc blah.domain.com/page.html#ancre et dans cette page page.html il y a un élément avec un attribut id="ancre" (sans le #). Cet élément sera stylé par le sélecteur (et la règle) CSS :target { propriété: valeur; }
- comme sélecteurs CSS, le genre div#un_id n'est pas utile voire embêtant quand on progresse. Peu importe que ce soit une div(ision) ou span ou section ou article, on peut se contenter du sélecteur #un_id. Et plutôt que d'utiliser des id à toutes les sauces, mieux vaut ajouter des classes partout et cibler ces classes. Pas forcément besoin de changer de méthode tout de suite, mais à garder dans un coin de la tête Smiley cligne

(les sélecteurs de classes en CSS c'est la Bonne Pratique)
- des comportements complexes, c'est plutôt le boulot de JavaScript. Réaliser des trucs complexes en CSS pur, moui ça va un moment, c'est formateur mais ça fait pas tout, c'est très vite assez complexe et ça va pas être forcément accessible, contrairement à un JS bien écrit (ce qui n'est pas facile du tout non plus, certes).
Modifié par Felipe (17 Jul 2019 - 11:27)

totoche89

17 Jul 2019 à 23:09

felipe merci de m'avoir répondu voici mon code html


 <body>
<div>
	<nav>
		<ul id="menu">
			<li><a href="#"><img src="cherche.gif" alt="" />cherche</a>
				<ul>
					<li><a href="toto.html">toto</a></li>
					<li><a href="tata.html">tata</a></li>
					<li><a href="titi.html">titi</a></li>
	            </ul>
			</li>
                    <ul>
                        <li>....</li>
                       <li>......</li>
                     </ul>
                          .........
                          .........
                         ............
         </nav>
</div>
<div id="boite_gauche">
	<div id="boite_troisD">Pour la 3D</div>
	<div id="boite_necessaire">Ceci est le Nécessaire</div>
</div><div id="boite_contenu">Ceci est le contenu</div>
<div id="boite_piedpage">Ceci est le pied de page</div>
  </body>

voilà ou j'en suis dans mon fichier html. Depuis mon menu il faut afficher une page html dans la boite_contenu
( et ensuite depuis la page affichée pouvoir mettre une image dans boite_troisD et une autre page html dans la boite_necessaire mais ceci est pour plus tard Smiley smile

)

j'ai cherché pour le faire en java script, je pense que tu parle de ceci
https://forum.alsacreations.com/topic-5-47770-1-Integrer-charger-une-page-html-dans-un-blocdiv-jQuery-.html
mais alors là c'est plus dur que le css
je pense que l'on doit l'appeler comme ceci:
<link rel="stylesheet" type="text/css" href="Menu.css">
<link rel="stylesheet" type="text/js" href="Menu.js">
mais ensuite comment appeler le fichier html pour l'afficher dansla boite_contenu mystère Smiley decu

j'ai regardé comment fonctionnait le site alsacreations.com Smiley smile

, lui fonctionne en php

et encore merci de m'aider Smiley smile

Sujet clos

CSS et mise en forme, CSS3

Page html dans un bloc