I've been putting in the work on a basic website to enhance my HTML and CSS skills. One issue that's been giving me trouble is getting some elements within a class to align in a top bar across the page.
Check out this snippet of HTML:
<body>
<!-- A logo will go here but here is some text for now -->
<h1 ID="Logo">Website</h1>
<img Class="Social" src="assets/facebook.png"/>
<img Class="Social" src="assets/twitter.png"/>
<img Class="Social" src="assets/instagram.png"/>
<img Class="Social" src="assets/snapchat.png"/>
<!-- The menu bar -->
<ul class="menu" ID="Menu_Bar">
<li Class="Menu_Item" ID="Home">
<a Class="Menu_Link" href="index.html">Home</a>
</li>
<li Class="Menu_Item" ID="About_Us">
<a Class="Menu_Link" href="about.html">About Us</a>
</li>
<li Class="Menu_Item" ID="Events">
<a Class="Menu_Link" href="events.html">Events</a>
</li>
<li Class="Menu_Item" ID="Contact">
<a Class="Menu_Link" href="contact.html">Contact Us</a>
</li>
</ul>
<!-- An image-->
<img ID="theGang" src="https://static.pexels.com/photos/126407/pexels-photo-126407.jpeg"/>
</body>
The Logo ID creates a top bar that spans the entire width of the screen, but I'm struggling to get the elements in the "Social" class to join this top bar. They seem to be positioned directly below it.
Take a look at the CSS:
/* allows elements to use the full lengths of the webpage */
* {
margin: 0px;
border: 0px;
padding: 0px;
}
body {
margin: 0px;
padding: 0px;
}
/* this is the formatting for the logo */
#Logo{
font-family: 'Germania One', cursive;
font-size: 80px;
color: #2E2F44;
background-color: #DE1B2B;
}
.Social {
float: right;
}
/*
*=== Formats the menu bar for the webpage
*===Begin===*
*/
.menu{
position: fixed;
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #2E2F44;
font-family: 'Germania One', cursive;
font-size: 20px;
}
.Menu_Item{
float: left;
}
.Menu_Item .Menu_Link {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.Menu_Item .Menu_Link:hover {
background-color: #DE1B2B;
}
/*
*===End===*
*/
/* Formats the header image, 'z-index' makes the image fall behind the nav bar */
#theGang{
position: absolute;
max-width: 100%;
height: auto;
display: none;
z-index: -1;
}