Placer correctement la barre de menu par Alexandreboudon - page 1

Bonjour,

Je me suis récemment lancé dans la création d'un site web contenant du Html/CSS et très très récemment du Java (afin de créer un menu)

Le soucis étant aujourd'hui que je n'arrive pas correctement à placer le logo ouvrant le 2ème menu (celui donc le logo est rouge), il se trouve en dessous du premier logo alors que je souhaiterai qu'il se retrouve totalement à droite de l'écran. Cela provient d'une erreur de placement que je n'arrive pas à résoudre.

De plus je recherche un logo connexion (un bonhomme dans un cercle) pour représenter l'endroit où il faudrait cliquer et l'incorporer

Auriez vous une idée de comment régler le problème et où puis-je trouver ce logo ?

Ps: je sais que le programme peut piquer les yeux mais c'est une des premières fois que je code, donc si vous avez des conseils à me fournir pour mieux le présenter je les accepterait avec plaisir.

Cordialement,

Akael

Voici le code HTML

<html>
	<head>
		<Style>
		body { font-family : Century Gothic ;
		        margin     : 0              ;}
		</Style>
		<title>untitled</title>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<meta name="generator" content="Geany 1.31" />
		<link rel="stylesheet" href="fichier.css"/>
		<title>ISNetwork</title>
	</head> 
	
	<body>
		
		<div class="video-background"> <!--gestation vidéo fond écran-->
			<div class="video-foreground">
				<iframe src="https://www.youtube.com/embed/zgg1xGSGw0s?controls=0&showinfo=0&rel=0&autoplay=1&loop=1" frameborder="0" allowfullscreen></iframe>
			</div>
		</div>	
		<div class="En-tête"> <!--Gestation en-tête-->
			<nav role='navigation'><!--Gestation menu catalogue-->
				<div id="menuToggle">
					<input type="checkbox" />
					<span></span>
					<span></span>
					<span></span>
					<ul id="menu">
					  <a href="#"><li>Home</li></a>
					  <a href="#"><li>Présentation</li></a>
					  <a href="#"><li>Actualités</li></a>
					  <a href="#"><li>Contact</li></a>
					  <a href="#"><li>Show me more</li></a>
					</ul>
				</div>
			</nav>	
			<img class="lien" src="logo310.png" alt="tonimage" border="0"><!--Gestation image-->
			<div id="myNav" class="overlay">
				<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
				<div class="overlay-content">
					<a href="#">Connexion</a>
					<a href="#">Inscription</a>
				</div>
			</div>

			<span style="font-size:30px;cursor:pointer;color:red;" onclick="openNav()">&#9776;</span>

			<script>
				function openNav() {document.getElementById("myNav").style.height = "100%";}

				function closeNav() {document.getElementById("myNav").style.height = "0%";}
			</script>	
		</div>	
	
		<div class="actualités">		
			<a class="twitter-timeline" href="https://twitter.com/search?q=patrickfournie" data-widget-id="973150307403403264">Tweets sur patrickfournie</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
			<!--frame de twitter spécial car Twitter n'autorise pas tout-->
		</div>
		
	</body>
</html>

Et le CSS

.En-tête	{ position       : fixed   		   ; /*Laisse l'en-tête toujours en haut */
			  width          : 100%    		   ; 
			  padding        : 0	   		   ; 
			  background     : #1D2632 		   ;
			  top            : 0        	   ;
			  border-bottom  : 6px solid white ; /* Dessine la barre en dessous du logo */
			  border-color   : #65BEF9         ;
			}

img.lien    { display      : block ;
              margin-left  : auto  ;
              margin-right : auto  ;
            }

.actualités	{ margin-top : 150px ;
			  text-align :center ;
			}

.bordure	{ outline-color: white  ;
			  outline-style: outset ;
			}
			
			
/*Partie menu déroulant*/
a	{ text-decoration : none            ;  /*empeche le menu d'être souligné*/
	  color           : #65BEF9         ;  /*Définit couleur menu*/
	  transition      : color 0.5s ease ;  /*Définit temps de recolorisation lettre quand souris dessus*/
	}  

a:hover	{ color: #FFFFFF ;} /*Définit recolorisation lettre quand souris dessus*/

#menuToggle { display  : block    ; /*Défini position logo*/
			  position : absolute ;
			  top      : 50px     ;
			  left     : 50px     ;
			}

#menuToggle input { display  : block   ; /*affecte la commande ouvrir le menu sur une zone*/
					width    : 40px    ; 
					height   : 32px    ;
					position : absolute;
					top      : -7px    ;
					left     : -5px    ;
					cursor   : pointer ;
					opacity  : 0       ; 
					z-index  : 2       ;
				  }


#menuToggle span { display			: block	   ;
				   width			: 33px	   ;
				   height			: 4px	   ;
				   margin-bottom    : 5px	   ;
				   position		    : relative ; 
				   background	    : #65BEF9  ;
				   z-index		    : 1		   ; /*affiche la croix*/
				   transform-origin : 4px 0px  ;
				   transition		: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), /* transforme le logo en croix*/
				   background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
				   opacity 0.55s ease		   ;
				}


#menuToggle span:nth-last-child(2) { transform-origin: 0% 100% ;} /*Empeche modification logo croix1 menu*/

#menuToggle input:checked ~ span { opacity    : 1								    ; /*Empeche modification logo croix2 menu*/
								   transform  : rotate(45deg) translate(-2px, -1px) ;
								   background : #65BEF9								;
								 }

#menuToggle input:checked ~ span:nth-last-child(3) { opacity   : 0							  ; 
												     transform : rotate(0deg) scale(0.2, 0.2) ;
												    }


#menuToggle input:checked ~ span:nth-last-child(2) { opacity   : 1								   ; /*Empeche modification logo croix3 menu*/
													 transform : rotate(-45deg) translate(0, -1px) ;
													}


#menu { position         : relative										  ; /*Reglages esthétique menu*/
		border: 2px solid #ededed;
		border-radius: 8px;
		width            : 200px										  ;
		margin           : -60px 0 0 -50px								  ;
		padding          : 40px											  ; 
		padding-top      : 80px  										  ;
		background       : #ededed										  ;	
		list-style-type  : none											  ;
		transform-origin : 0% 0%										  ;
		transform        : translate(-100%, 0) 							  ;
		transition       : transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0) ;
	  }		

#menu li { padding   : 10px 0 ;/*Modification mot dans menu*/
		   font-size : 25px   ;
		 }

#menuToggle input:checked ~ ul { transform : scale(1.0, 1.0) ; /*Affiche menu*/
							     opacity   : 1				 ;	
							   }



/*Partie CSS vidéo fond d'écran*/
.video-background 	{ position: fixed ; /*Pour que la vidéo soit bien en arrière plan*/
					  top		: 0   ; 
					  right		: 0   ; 
					  bottom	: 0   ; 
					  left		: 0   ;
					  z-index	: -99 ;
}
.video-foreground,.video-background iframe	{ position: absolute ; /*Règle emplacement vidéo*/
											  width: 100%        ;
											  height: 100%       ;
											}

/* Règle taille vidéo fond d'écran*/
@media (min-aspect-ratio: 16/9) {
  .video-foreground { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
  .video-foreground { width: 300%; left: -100%; }
}


/*Gestation menu déroulant conexion*/
.overlay	{ height           : 0%      ; /*Gestation menu déroulant connexion*/
			  width            : 100%    ;
			  position         : fixed   ;
			  background-color : #1D2632 ;
			  overflow-y	   : hidden  ; /*Cache le texte quand le menu n'est pas déroulé*/
			  transition	   : 1s      ;
}

.overlay-content	{ position  : relative ; /*Gestation positionnement texte menu connexion*/
					  top       : 15%      ;
					  width     : 100%	   ;	
					  text-align: center   ;
   
}

.overlay a { padding   : 10px    ;   /*Gestation esthétique menu*/
			 font-size : 30px    ;
			 color     : #818181 ;
			 display   : block   ;
			 transition: 0.7s    ; 
}

.overlay a:hover, .overlay a:focus {  /*Gestation changement de couleur avec la souris*/
    color: #65BEF9;
}

.overlay .closebtn 	{ position : absolute ;/*Gestation position croix pour fermer menu*/
					  top      : 20px     ;
					  right    : 45px     ;
					  font-size: 60px     ;
					}

Alexandreboudon

12 mars 2018 à 17:25:51

mootookoi

12 mars 2018 à 18:52:02

Concernant le logo rouge. Il faut que tu positionne cet élément :

<span style="font-size:30px;cursor:pointer;color:red;" onclick="openNav()">&#9776;</span>

Je te laisse le soin de trouver la réponse maintenant.

Ton code à l'air d'être un assemblage de pleins de bouts de codes trouvés à droite à gauche. Si tu veux vraiment coder, il faudra lire plus de tutoriels.

Dev Web Full Stack ( si si c'est possible )

12 mars 2018 à 19:14:08

BoOYa a écrit:

Concernant le logo rouge. Il faut que tu positionne cet élément :
<span style="font-size:30px;cursor:pointer;color:red;" onclick="openNav()">&#9776;</span>
Je te laisse le soin de trouver la réponse maintenant.

Ton code à l'air d'être un assemblage de pleins de bouts de codes trouvés à droite à gauche. Si tu veux vraiment coder, il faudra lire plus de tutoriels.

Effectivement, ce sont plusieurs bouts de programmes venant d'un peu partout.

Mais déjà la base étant de réunir ce qui est nécessaire est fait, je vais pouvoir le présenter comme il faut et bien l'organiser

Merci pour ta réponse

-
Edité par Alexandreboudon 12 mars 2018 à 19:14:27

Placer correctement la barre de menu

Placer correctement la barre de menu

Supprimer

Modérer

Signaler le message aux modérateurs