 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> |
  |
 
|
| Christian J |
Mar 21 2022, 02:22 PM
Post
#2
|
|
.  Group: WDG Moderators Posts: 9,648 Joined: 10-August 06 Member No.: 7 |
Maybe you could use this layout as a starting point. Note that the CSS selector names and IDs of the DIV container elements are different.
CSS: CODE #menu { background: pink; float: left; width: 25%; /* arbitrary value, as long as there's room for both menu and logo in a normal browser window */ } #logo { background: yellow; width: 300px; /* same as logo image width; */ margin: auto; /* along width the DIV width, this centers the DIV itself */ text-align: center; /* centers the image inside the DIV */ } #video { background: lime; clear: both; /* ends the floating */ text-align: center; } HTML (note the order, the floated menu must come first): CODE <div id="menu">...</div> <div id="logo">...</div> <div id="video">...</div> |
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 16th April 2024 - 02:18 AM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC