28112 sujets

CSS et mise en forme, CSS3

Menu déroulant site internet ISN

Bonsoir à toutes et à tous,

Dans le cadre de mon projet final d'ISN, j'ai décidé de réaliser un site support pour la présentation d'un programme python.J'ai très bientôt terminé ce site néanmoins je rencontre une difficulté avec mon menu déroulant. En effet, les sous menus ne s'affichent pas entièrement et surtout ils ne sont alignés verticalement. J'ai cherché différentes techniques de résolution mais rien de concluant. Je vous joint donc ci-contre les codes html et css de mon site :
<DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css"/>
        <title></title>
    </head>
    
    <body>
        <div id="bloc_page">
            <header>
                <div id="titre_principal">
                    <div id="logo">
                        <a href="Site web ISN.html"><img src="https://image.noelshack.com/fichiers/2019/17/6/1556400426-concepts-conception-chimie-1284-3956.gif" alt="logo"/></a>
                        <h1>Phymico</h1>   
                    </div>						
                    <h2>site Physique-Chimie</h2>
                </div>
            <nav>   
			    <ul id="menu-déroulant">
                    <li><a href="#">La Physique</a>
                        <ul>
                            <li><a href="histoire ordinateur.html">L'histoire</a></li>
                            <li><a href="composants ordinateur.html">Son fonctionnement</a></li>
                            <li><a href="#">Les systèmes d'exploitations</a></li>
                        </ul>
                    </li>
                    <li><a href="#">La Chimie</a>
                        <ul>
                            <li><a href="programmepython.html">Calcul de pH</a></li>
                            <li><a href="composants tablette.html">Son fonctionnement</a></li>
                            <li><a href="systèmes d'exploitation tablette.html">Les systèmes d'exploitation</a></li>
                        </ul>
                    </li>
                    <li><a href="que choisir.html">Nos partenaires</a></li>
                    <li><a href="#">A quoi ça sert ?</a>
                        <ul>
                            <li><a href="top tablette.html">Le top tablettes</a></li>
                            <li><a href="top PC portable.html">Le top PC portables</a></li>
                            <li><a href="top PC fixe.html">Le top PC de bureau</a></li>
                        </ul>
                    </li>
                </ul>
           </nav>
		   </header>
            
			<div align="center">
			  <div class="contener_slideshow">
		       <div class="contener_slide">
			    <div class="slid_1"><img src="https://image.noelshack.com/fichiers/2019/15/5/1555100821-chemistry-874157664.jpg" alt="chimie"></div>
                <div class="slid_2"><img src="https://image.noelshack.com/fichiers/2019/15/5/1555101244-physics-header.jpg" alt="formules"></div>
				<div class="slid_3"><img src="https://image.noelshack.com/fichiers/2019/15/6/1555184421-14763-math-news.jpg"alt="goutte"></div>
               </div>
              </div>
            </div>
            <div id="descriptionbannière">
                    <u>Notre programme python du moins</u>
                    <a href="programmepython.html" class="bouton"Cliquer></a>
                </div>
            </div>
            
            <section>
                <article>
                    <h1><center><strong><u>Informatiko</u></strong></center></h1>
                    <p>Bienvenue à toutes et à tous</p>
		            <p>Ce site.</p>
				<p>Afin de mettre .</p>
					<p>Ainsi, .</p>
					<p>Petit bonus </p>
		        </article>
                <aside>
                    <h1><center><b><u>Retrouvez nous aussi</u></b></center></h1>
					<center><img src="https://image.noelshack.com/fichiers/2019/19/6/1557601996-carte-de-france2.gif" alt="carte"><center>
					<p>cours de programmation python en lien avec des expériences aussi bien de physique que de chimie<p>
                </aside>
            </section>
			<footer>
				<div id=réseaux_sociaux>
                    <p><img src="https://image.noelshack.com/fichiers/2019/19/6/1557605495-twitter.gif" alt="twitter" />
					<img src="https://image.noelshack.com/fichiers/2019/19/6/1557606105-icones-rondes-du-reseau-social-1319-158.gif" alt="instagram" />
					<img src="https://image.noelshack.com/fichiers/2019/19/6/1557606145-snao.gif" alt="snapchat" />
					<img src="https://image.noelshack.com/fichiers/2019/19/6/1557606192-sans-titre-5.gif" alt="pinterest" />
					<img src="https://image.noelshack.com/fichiers/2019/19/6/1557606297-6.gif" alt="facebook"></p>
                </div>
            </footer>
        </div>
    </body>
</html>


body{
    background-color:#DFF7C9;
	width : 100%;
	height : 100%;
    font-family: 'Caslon old face';
    color: #000000;
}

#bloc_page{
    width: 900px;
    margin: auto;
}

header{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

#titre_principal{
    display: flex;
    flex-direction: column;
	position: absolute; top: 15px; left: 30px;
	
}

#logo{
    display: flex;
    flex-direction: row;
    align-items: baseline;
}

#logo img{
    width: 60px;
    height: 60px;
	vertical-align: middle;
}

header h1{
    font-family: 'hestina';
	color : black;
	text-shadow : 2px 2px 4px #000000;
    font-size: 2.8em;
    font-weight: normal;
    margin: 0 0 0 10px;
}

header h2{
    font-family: 'hestina';
	color : black;
    font-size: 1.2em;
	padding-left : 70px;
    margin-top: -13px;
    font-weight: normal;
}

nav ul{
    list-style-type: none;
    display: flex;
}

nav li{
    margin-right: 15px;
}

nav a{
    font-size: 11px;
    color: #663333;
    padding-bottom: 5px;
    text-decoration: none;
}

nav a:hover{
    color: #181818;
    border-bottom: 3px solid #760001;
}

#menu-déroulant, #menu-déroulant ul{
	position : absolute; 
	top: 35px; 
	left: 386px;
    padding:20px;
    margin:0;
    list-style:none;
    text-align:center;
}
#menu-déroulant li{
    display:inline-block;
	height: 40px;
	width: 195px;
	vertical-align: middle;
	position: relative;
    border-radius:2px 2px 2px 2px;
	box-shadow : 2px 2px 2px;
}
#menu-déroulant ul li{
    display:inherit;
    border-radius:0;
}
#menu-déroulant ul li:hover{
    border-radius:0;
}
#menu-déroulant ul li:last-child{
    border-radius:0 0 8px 8px;
}
#menu-déroulant ul{
    position:absolute;
	z-index:1000;
    max-height:0;
    left: 0;
    right: 0;
    overflow:hidden;
    -moz-transition: .8s all .3s;
    -webkit-transition: .8s all .3s;
    transition: .8s all .3s;
}
#menu-déroulant li:hover ul{
    max-height: 15em;
}

/*background liens menus*/
#menu-déroulant li:first-child{
    background-color: #CCCC99;
}
#menu-déroulant li:nth-child(2){
    background-color: #CCCC99;
}
#menu-déroulant li:nth-child(3){
	background-color: #CCCC99;
}

#menu-déroulant li:last-child{
    background-color: #CCCC99;
}

/*background liens sous menus*/
#menu-déroulant li:first-child li{
    background-color:#993333;
}
#menu-déroulant li:nth-child(2) li{
    background-color:#993333;
}

#menu-déroulant li:last-child li{
    background-color:#993333;
}
/*background liens menu et sous menus au survol */
#menu-déroulant li:first-child:hover, #menu-déroulant li:first-child li:hover{
    background:#993333;
}
#menu-déroulant li:nth-child(2):hover, #menu-déroulant li:nth-child(2) li:hover{
    background:#993333;
}
#menu-déroulant li:last-child:hover, #menu-déroulant li:last-child li:hover{
    background:#993333;
}
/* a href**/
#menu-déroulant a{
    text-decoration:none;
    display:block;
    color:#FFFFFF;
    font-family:'Open Sans Condensed-Light', sans-serif;
	font-size: 16px;
	margin-top: 12px;
}
#menu-déroulant ul a{
    padding:8px 0;
}
#menu-déroulant li:hover li a{
    color:#FFFFFF;
    text-transform:inherit;
}
#menu-déroulant li:hover a, #menu-déroulant li li:hover a{
    color:#000;
}

.contener_slideshow
{
  width:1100px;
  height:200px;
  margin-top: 110px;
  margin-left: -100px;
  overflow: hidden;
  position: relative;
 }
.slid_1, .slid_2, .slid_3
{
  position: absolute;
  width:1100px;
  height:200px;
}
.slid_1{left: 0px;}
.slid_2{left: 1100px;}
.slid_3{left: 2200px;}

.contener_slide
{
  width: 1100px;
  height: 200px;
  left:0px;
  position: absolute;
  -webkit-animation-duration: 8s;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-name: anim_slide;
  -moz-animation-duration: 8s;
  -moz-animation-iteration-count:infinite;
  -moz-animation-name: anim_slide;
  animation-duration: 8s;
  animation-iteration-count:infinite;
  animation-name: anim_slide;
}
@-webkit-keyframes anim_slide 
{
  0% {left:0px;}
  22% {left:0px;}
  33% {left:-1100px;}
  45% {left:-1100px;}
  66% {left:-2200px;}
  90% {left:-2200px;}
}
@-moz-keyframes anim_slide 
{
  0% {left:0px;}
  22% {left:0px;}
  33% {left:-1100px;}
  45% {left:-1100px;}
  66% {left:-2200px;}
  90% {left:-2200px;}
}
@-ms-keyframes anim_slide 
{
  0% {left:0px;}
  22% {left:0px;}
  33% {left:-1100px;}
  45% {left:-1100px;}
  66% {left:-2200px;}
  90% {left:-2200px;}
}
@keyframes anim_slide 
{
  0% {left:0px;}
  22% {left:0px;}
  33% {left:-1100px;}
  45% {left:-1100px;}
  66% {left:-2200px;}
  90% {left:-2200px;}
}

#descriptionbannière{
	position: absolute;
	z-index: 2;
    border-radius: 5px 5px 5px 5px;
    width: 1090px;
    height: 33px;
	margin-top:-55px;
	margin-left:-100px;
    padding-top: 15px;
    padding-left: 10px;
    background-color: rgba(24,24,24,0.8);
    color: white;
    font-size: 0.9em;    
}

.bouton{
    height: 26px;
	width : 80px;
    position: absolute;
    right: 10px;
    bottom: 8px;
    background: #333366;
	border : 1px solid #ccc;
    font-size: 1.2em;
	border-radius : 4px;
    text-align: center;
    padding: 3px 0px 3px 0px;
    color: black;
    box-shadow: 2px 2px 4px #999;
}

section{
    display: flex;
    margin-bottom: 20px;
}

article h1, aside h1{
    font-family: Hestina;
	text-shadow : 2px 2px 4px #000000;
    font-size: 25px;
	margin-top: 10px;
}

article, aside{
    text-align: justify;
}

article{
	height: 100%;
	margin-top: 8px;
    margin-left: 123px;
	margin-right : 60px;
	padding : 10px;
	border-radius : 8px 8px 8px 8px;
	border-image: url('https://image.noelshack.com/fichiers/2019/15/6/1555191568-sans-titre-3.jpg');
    flex: 3;
	background-color:rgba(255,255,255,0.6);
}

.ico_categorie{
    vertical-align: middle;
    margin-right: 8px;
}

article p{
    font-size: 17px;
}
aside{
	margin-top: 8px;
	margin-right: 125px;
    flex: 1.2;
    position: relative;
    background-color: #CCCC99;
    box-shadow: 0px 2px 5px #1c1a19;
    border-radius: 5px;
    padding: 10px;
    color: white;
    font-size: 0.9em;
	height: 350px;
}

footer{
    display: flex;
    background-image: url('https://image.noelshack.com/fichiers/2019/18/6/1557006412-13454042-fond-chimie-modeles-de-molecules-et-des-formules-a-main-levee-illustration.jpg');
	width: 100%;
	font-size: 'Chapaza';
	margin-top: 8px;
}

footer p{
	text-align: center;
}

#réseaux_sociaux img
{
	padding: 25px;
}


J'espère que vous pourrez me venir rapidement en aide puisque je dois rendre mon dossier complet le 2 juin.

Merci d'avance
Bonne soirée à vous
Modérateur
Et l'eau,

j'ai shooté beaucoup de tes styles (pour y voir plus clair). C'est une piste à suivre. Tu feras le reste. Pas d'accent ou autres fantaisies dans les noms de classes ou id ou etc. Si tu as des sous sous menu, il va falloir revoir les sélecteurs. Sinon, tu peux laisser comme ça. 

nav ul, nav li{  
  list-style-type: none;
  margin:0;
  padding:0;
}
nav > ul{
    display: flex;
}

nav li{
    margin-right: 15px;
}

#menu-deroulant li{
  position:relative;
}

#menu-deroulant li > ul{
  position:absolute;
  display:none;
}

#menu-deroulant li:hover > ul{
  display:block;
}


Ton site que tu fais en python, tu utilises quoi ? Django ? Flask ? Cherrypy ?
Modifié par niuxe (13 May 2019 - 21:08)
Bonsoir,
Tout d’abord merci beaucoup pour votre réponse et votre aide, je vais tester ça demain. En ce qui concerne le logiciel, j’utilise Geany sous conseils de mes professeur.
Au temps pour moi. En fait j’utilise ce logiciel pour créer mon programme python. À côté de ça je copierai uniquement le code sur mon code html pour l’exposer mais mon site n’est qu’un support de présentation puisque mon professeur estime qu’il est très compliqué de lier les deux à notre niveau.
Modérateur
Geany est un éditeur et non pas un framework python.... Dans les éditeurs pythons, il y en a vraiment de bien :
- atom (editeur et semi ide avec sa pléthore de plugins ^^)
- pycharm (c'est un IDE et non un éditeur. Il est totalement gratuit pour la version communautaire)
- visual studio code
- pydev (IDE totalement gratuit. Mais il faut une machine de dingue pour le faire tourner.... Pourquoi ? C'est une base Eclipse)
- etc.
Modérateur
dbordeaux a écrit :
Au temps pour moi. En fait j’utilise ce logiciel pour créer mon programme python. À côté de ça je copierai uniquement le code sur mon code html pour l’exposer mais mon site n’est qu’un support de présentation puisque mon professeur estime qu’il est très compliqué de lier les deux à notre niveau.


ah ok
Mais dans les cas où j’utiliserais un de ces logiciels, qu’est ce qu’il me permettrait d’améliorer dans mon projet final ? Parce qu’en cours nos deux professeurs nous ont seulement présenté Geany, quelques algorithmes de base puis nous sommes directement passés à notre premier mini projet.
Modérateur
dbordeaux a écrit :
Mais dans les cas où j’utiliserais un de ces logiciels, qu’est ce qu’il me permettrait d’améliorer dans mon projet final ? Parce qu’en cours nos deux professeurs nous ont seulement présenté Geany, quelques algorithmes de base puis nous sommes directement passés à notre premier mini projet.


Ta productivité. Que ce soit Atom, Sublime Text ou Visual studio code, ce sont de très bons éditeurs. Au boulot, j'utlise Atom/Sublim/vim et notepad++ de temps à autres. En ce qui concerne les IDE, c'est très intéressants puisque tu as des fonctionnalités intéressantes comme le déboguage, l'intégration d'un outil de versionnement, ou encore un outil de discussion avec une base de données ou etc.. Je te déconseille tout de même un IDE dans un premier temps. Pourquoi ? Ces outils te facilitent la vie mais en contre partie, tu perds en mémoire (ta mémoire => cellules grises). C'est à dire que demain, tu dois revenir sur un simple éditeur ou un bloc note, tu vas être perdu et tu te souviendras plus des méthodes à utiliser pour tel ou tel objet basique (list/dic/str/int/os/subprocess/urllib/etc./etc.).

ps : essaye les et ne te laisse pas imposer un outil.
Modifié par niuxe (13 May 2019 - 21:37)
Sujet clos
Aller à