 Things not lining up, cant get my menu and my logo to appear on the same line with a video b |
| ESJAYE |
  Mar 21 2022, 09:42 AM
Post
#1
|
|
Group: Members Posts: 1 Joined: 21-March 22 Member No.: 28,290  |
Hi,
really hoping someone can help me as im sure this is a stupid error but i havent coded for about 10 years so im a bit rusty to say the least. i have a hamburger menu alligned to the left (it was supposed to be the right but thats not the end of the world) and a logo that is supposed to be centred over the top of a video background. the problem i have is that i cant seem to get both of these to appear at the top of the page, either the menu is lower down or the logo is at the bottom. Can someone spot where i have gone wrong? Many Many Thanks <!DOCTYPE html> <!-- MENU --> <html lang="en" dir="ltr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!----<title> Website Layout | CodingLab</title>----> <link rel="stylesheet" href="CSS/Style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/> <!--video--> <link rel="stylesheet" href="CSS/video.css"> <meta charset="utf-8"> <!--make centre image--> <style> .img-container { text-align: center; } </style> </head> <body> <!-- logo --> <div class="img-container"> <!-- Block parent element --> <img src="Images/headerlogo.png" alt="Bettws Lifehouse Logo" width="300"> </div> <!-- mENU --> <div class="main_box"> <input type="checkbox" id="check"> <div class="btn_one"> <label for="check"> <i class="fas fa-bars"></i> </label> </div> <div class="sidebar_menu"> <div class="logo"> <a href="#">Menu</a> </div> <div class="btn_two"> <label for="check"> <i class="fas fa-times"></i> </label> </div> <div class="menu"> <ul> <li><i class="fas fa-qrcode"></i> <a href="#">Welcome from the Directors</a> </li> <li> <i class="fas fa-link"></i> <a href="#">Upper School & Post 16</a> </li> <li> <i class="fas fa-stream"></i> <a href="#">Lower School</a> </li> <li> <i class="fas fa-calendar-week"></i> <a href="#">The Hub</a> </li> <li> <i class="fas fa-question-circle"></i> <a href="#">Policies</a> </li> <li> <i class="fas fa-sliders-h"></i> <a href="#">Services</a> </li> <li> <i class="fas fa-phone-volume"></i> <a href="#">Contact</a> </li> <li> <i class="far fa-comments"></i> <a href="#">Term Dates</a> </li> </ul> </div> <div class="social_media"> <ul> <a href="#"><i class="fab fa-facebook-f"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> <a href="#"><i class="fab fa-youtube"></i></a> </ul> </div> </div> </div> <!-- video background --> <video id="background-video" autoplay loop muted poster="https://assets.codepen.io/6093409/river.jpg"> <source src="file:///C|/Users/esjay/OneDrive/Bettws Website/Images/banner.mp4"https://www.youtube.com/watch?v=5xofDEf1ao4&t=1s"" type="video/mp4"> </video> </body> </html> |
  |
 
|
Posts in this topic
ESJAYE Things not lining up Mar 21 2022, 09:42 AM
Christian J Maybe you could use this layout as a starting poin... Mar 21 2022, 02:22 PM  |
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 7th June 2024 - 07:27 PM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC