I have to make a website for computer science at school and I have a problem with centering the menu bar. I want it to be centered around the menu button, but it puts the icon off-center the way I do it.
How can I center the entire menu around the central li element?
Here's the code:
body {
background-color: /*#C94421*/
#353535;
margin: 0;
/* reset de standard marges van de body -> geen randen links en rechts naast .menuBar div */
text-align: center;
}
.menuBar {
height: 70px;
width: 100%;
}
.menuBar img {
text-align: center;
}
.menuBar ul li {
display: inline;
padding-right: 65px;
line-height: 70px;
}
.menuBar ul li a {
color: white;
text-decoration: none;
line-height: 70px;
font-family: 'Raleway', sans-serif;
font-size: 36px;
width: 100px;
}
.menuBar a:hover {
border-bottom: 1px solid white;
}
.jumbotron .container {
height: 550px;
width: 60%;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px;
border-top: 4.5px double white;
border-bottom: 4.5px double white;
}
<!DOCTYPE html>
<html>
<head>
<title> Homepagina </title>
<link rel="stylesheet" type="text/css" href="main.css">
<link href='https://fonts.googleapis.com/css?family=Raleway:300' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
</head>
<body>
<div class="menuBar">
<ul>
<li> Over mij </li>
<li> Hobbies </li>
<li>
<img src="logoNaam.jpg">
</li>
<li> Muziek </li>
<li> Waarom informatica </li>
</ul>
</div>
<div class="jumbotron">
<div class="container">
hoi
</div>
</div>
</body>
</html>
Here are the changes in the code :
You have to add :
.menuBar ul{
padding-left: 0px;}
also relace this :
.menuBar ul li {
display: inline;
padding-right: 65px;
line-height: 70px;}
with
.menuBar ul li {
display: inline-block;
width: 150px;
padding-right: 15px;
line-height: 70px;}
Also remove width: 100px; from .menuBar ul li a
Better to reduce the font size to get it well aligned in the frame.
I got the image centered using a flexbox layout. The image is always in the exact center of the page, and the menu items flow to the left and right of the centered image.
I adjusted the font sizes and padding so that it shows up well in the demo. I also needed to change the li to div to get the menu to work semantically after the changes.
Live Demo:
body {
background-color: /*#C94421*/ #353535;
margin: 0; /* reset de standard marges van de body -> geen randen links en rechts naast .menuBar div */
text-align: center;
}
.menuBar {
height: 70px;
width: 100%;
}
.menuBar img {
text-align: center;
}
.menuBar {
display: flex;
}
.menuBar > div {
display: block;
line-height: 70px;
flex-basis: 0;
flex-grow: 1;
}
.left {
text-align: right;
}
.right {
text-align: left;
}
.menuBar > div > div {
display: inline-block;
padding: 0 15px;
}
.menuBar > div.central {
flex-basis: auto;
flex-grow: 0;
padding: 0 15px;
}
.menuBar > div a {
color: white;
text-decoration: none;
line-height: 70px;
font-family: 'Raleway', sans-serif;
font-size: 14px;
width: 100px;
}
.menuBar a:hover {
border-bottom: 1px solid white;
}
.jumbotron .container {
height: 550px;
width: 60%;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px;
border-top: 4.5px double white;
border-bottom: 4.5px double white;
}
<div class="menuBar">
<div class="left"><div> Over mij </div>
<div> Hobbies </div></div>
<div class="central"> <img src="logoNaam.jpg"> </div>
<div class="right">
<div> Muziek </div>
<div> Waarom informatica </div>
</div>
</div>
<div class="jumbotron">
<div class="container">
hoi
</div>
</div>
JSFiddle Version: https://jsfiddle.net/2ejfdoc3/1/
Related
I don't know how to align it with the logo. I'm trying to use padding but it won't work and even float maybe I would change the container size for it to work. Btw you won't be able to see the image and the li option due to overflow not allowing links so I have attached an image for more convenience
if possible maybe even tell some tips to be better in HTML
enter image description here
header {
height: 600px;
background-image:urlenter code here;
background-repeat: no-repeat;
background-size: cover;
}
.header-container {
height: 1240px;
width: 1240px;
padding-left: 3%;
}
.header-logo{
height: 150px;
width: 450px;
}
img.logo{
width: 400px;
height: 150px;
}
nav {
padding-top: 10px;
}
nav ul {
margin: 0;
padding:0;
}
nav ul li {
display: inline-flex;
margin-left: 50px;
list-style-type: none;
}
nav ul li a {
padding-bottom: 11px;
font-family: 'Raleway', sans-serif;
font-weight: bold;
font-size: 16px;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.1em;
color: #111111;
}
nav ul li a:hover {
border-bottom: 2px solid #f22222;
}
<html lang="en">
<head>
<link rel="stylesheet" href="./css/style.css">
<title>Katalyst Incorporation LLC.</title>
</head>
<body>
<header id="up">
<div class="header-container">
<nav>
<div class="header-logo">
<img class="logo" src="./img/katalyst incorporation logo.png" alt="logo">
</div>
<ul>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
If you want to make logo and menu in a line, you should add "float: left" style to your div. So your style will be this:
.header-logo {
height: 150px;
width: 450px;
float: left;
}
Then if you want change your menu vertical align you can add "margin-top: px" to your ul like this:
nav ul {
margin: 0;
padding: 0;
margin-top: 50px;
}
As logo div and ul are children of same parent,
you can make their parent i.e <nav> as display: flex to align it's children in a flex-row
Learn More on FlexBox
nav {
display: flex;
}
header {
height: 600px;
background-image: urlenter code here;
background-repeat: no-repeat;
background-size: cover;
}
.header-container {
height: 1240px;
width: 1240px;
padding-left: 3%;
}
.header-logo {
height: 150px;
width: 450px;
}
img.logo {
width: 400px;
height: 150px;
}
nav {
padding-top: 10px;
display: flex;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
display: inline-flex;
margin-left: 50px;
list-style-type: none;
}
nav ul li a {
padding-bottom: 11px;
font-family: 'Raleway', sans-serif;
font-weight: bold;
font-size: 16px;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.1em;
/* color: #ffffff; */
color: #000; /* changing this so that you can see color */
}
nav ul li a:hover {
border-bottom: 2px solid #f22222;
}
<html lang="en">
<head>
<link rel="stylesheet" href="./css/style.css">
<title>Katalyst Incorporation LLC.</title>
</head>
<body>
<header id="up">
<div class="header-container">
<nav>
<div class="header-logo">
<img class="logo" src="./img/katalyst incorporation logo.png" alt="logo">
</div>
<ul>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
I have changed the font color, so that you can see it working.
I use a div tag but my about division is still overlapping my navbar division.
This is my demo:
#import url('https://fonts.googleapis.com/css?family=Fredoka+One&display=swap');
#import url('https://fonts.googleapis.com/css?family=Lobster&display=swap');
body {
background: url(boba.jpg);
background-repeat: no-repeat;
background-size: cover;
font-family: 'Fredoka One', cursive;
}
.menu ul {
margin: 0;
padding: 0;
list-style: none;
text-align: right;
}
.menu ul {
margin: 0 auto;
width: 1170px;
padding-top: 100px;
}
.menu ul li {
float: none;
display: inline-block;
}
.menu ul li:nth-child(1) {
float: left;
}
.menu ul li:nth-child(2) {
float: left;
}
.menu ul li:nth-child(3) {
float: left;
}
.menu ul li a {
color: #262626;
font-size: 20px;
text-transform: uppercase;
text-decoration: none;
display: block;
padding: 10px 20px;
font-family: 'Fredoka One', cursive;
font-size: 23px;
}
.menu ul li a:hover {
background-color: #77DF79;
color: black;
}
#navbar {
width: 100%;
position: relative;
}
.logo {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 0;
content: "";
margin-left: -205px;
}
#descrip p {
position: absolute;
top: 55%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-size: 16px;
}
#descrip h1 {
position: absolute;
top: 25%;
left: 50%;
transform: translate(-50%, -50%);
font-family: 'Lobster', cursive;
font-size: 10vw;
}
.button {
background-image: linear-gradient(to right, #56ab2f 0%, #a8e063 51%, #56ab2f 100%);
border: none;
color: black;
font-family: 'Fredoka One', cursive;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
position: absolute;
top: 80%;
left: 50%;
transform: translate(-50%, -50%);
}
.button:hover {
background-position: right center;
}
.slicknav_menu {
font-size: 16px;
padding: 5px;
position: fixed;
right: 0;
background: none;
display: none;
}
#media (max-width: 767px) {
.slicknav_menu {
display: block;
}
.menu {
display: none;
}
body {
background-image: url(m3.jpg);
}
.button {
margin-top: 50px;
}
}
.about {}
<!DOCTYPE html>
<html>
<head>
<title>Smile to Go! </title>
<link rel="icon" href="logo1.png">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="slicknav.min.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="logo">
<img src="logo1.png" alt="">
</div>
<div class="container">
<div id="navbar">
<div class="menu">
<ul id="list">
<li> Home </li>
<li> About </li>
<li> Products </li>
<li> Branches </li>
<li> Gallery </li>
<li> Contact </li>
</div>
</div>
<div id="descrip">
<h1> Smile to Go! </h1>
<p>Smile to go milktea serves a wide variety of tasy and refreshing authentic pearl milktea drinks. uaranteed made from 100% freshly brewed loose-leaf teas of high quality for an overall healthier lifestyle. We also serve variety of iced coffees,slush,cream
and latte drinks and toppings for your freshly cool drinks!.</p>
<button type="button" class="button"> Learn More </button>
<br>
<br>
</div>
<div class="about">
<hr>
<h1> Welcome to Smile to Go!</h1>
<p> Sip up a refreshin milktea that will give you a large smile on your face!<br> Enjoy different variety of coffees, tea,slush and cream lattes. <br>Share the cool refreshing drink now to your friends and families. <br>Visit us on our stores nationwide!</p>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.slicknav.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#list').slicknav();
});
</script>
</body>
</html>
<!----- references and resources
https://www.w3schools.com/html/default.asp
https://www.facebook.com/SmileToGoHongKong/
https://www.youtube.com/channel/UCbwXnUipZsLfUckBPsC7Jog
https://www.w3schools.com/css/default.asp
https://www.youtube.com/watch?v=hp-LP8Nv18s
https://www.youtube.com/watch?v=svv7jOxaSzw
https://slicknav.io/----->
I think this will help.
#import url('https://fonts.googleapis.com/css?family=Fredoka+One&display=swap');
#import url('https://fonts.googleapis.com/css?family=Lobster&display=swap');
body {
background: url(boba.jpg);
background-repeat: no-repeat;
background-size: cover;
font-family: 'Fredoka One', cursive;
}
.menu ul {
margin: 0;
padding: 0;
list-style: none;
text-align: right;
}
.menu ul {
margin: 0 auto;
width: 1170px;
padding-top: 100px;
}
.menu ul li {
float: none;
display: inline-block;
}
.menu ul li:nth-child(1) {
float: left;
}
.menu ul li:nth-child(2) {
float: left;
}
.menu ul li:nth-child(3) {
float: left;
}
.menu ul li a {
color: #262626;
font-size: 20px;
text-transform: uppercase;
text-decoration: none;
display: block;
padding: 10px 20px;
font-family: 'Fredoka One', cursive;
font-size: 23px;
}
.menu ul li a:hover {
background-color: #77DF79;
color: black;
}
#navbar {
width: 100%;
position: relative;
}
.logo {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 0;
content: "";
margin-left: -205px;
}
#descrip{text-align:center;}
#descrip p {
text-align: center;
font-size: 16px;
}
#descrip h1 {
font-family: 'Lobster', cursive;
font-size: 10vw;
}
.button {
background-image: linear-gradient(to right, #56ab2f 0%, #a8e063 51%, #56ab2f 100%);
border: none;
color: black;
font-family: 'Fredoka One', cursive;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button:hover {
background-position: right center;
}
.slicknav_menu {
font-size: 16px;
padding: 5px;
position: fixed;
right: 0;
background: none;
display: none;
}
#media (max-width: 767px) {
.slicknav_menu {
display: block;
}
.menu {
display: none;
}
body {
background-image: url(m3.jpg);
}
.button {
margin-top: 50px;
}
}
.about {}
<!DOCTYPE html>
<html>
<head>
<title>Smile to Go! </title>
<link rel="icon" href="logo1.png">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="slicknav.min.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="logo">
<img src="logo1.png" alt="">
</div>
<div class="container">
<div id="navbar">
<div class="menu">
<ul id="list">
<li> Home </li>
<li> About </li>
<li> Products </li>
<li> Branches </li>
<li> Gallery </li>
<li> Contact </li>
</div>
</div>
<div id="descrip">
<h1> Smile to Go! </h1>
<p>Smile to go milktea serves a wide variety of tasy and refreshing authentic pearl milktea drinks. uaranteed made from 100% freshly brewed loose-leaf teas of high quality for an overall healthier lifestyle. We also serve variety of iced coffees,slush,cream
and latte drinks and toppings for your freshly cool drinks!.</p>
<button type="button" class="button"> Learn More </button>
<br>
<br>
</div>
<div class="about">
<hr>
<h1> Welcome to Smile to Go!</h1>
<p> Sip up a refreshin milktea that will give you a large smile on your face!<br> Enjoy different variety of coffees, tea,slush and cream lattes. <br>Share the cool refreshing drink now to your friends and families. <br>Visit us on our stores nationwide!</p>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.slicknav.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#list').slicknav();
});
</script>
</body>
</html>
so I will explain cause i have been in your place before ..
first you are making the elements inside #descrip position absolute and that's okay if u add position relative and a height to #descrip .. cause now the elements are flowing out of that #descrip container and that container's height is small so the about is coming after it therefore under the element
what would be better is using the margins and so on to place the element in the place u want .. read about margin auto also is really help full .. and be careful with float .. read about flex box also really helpful
I have a photo of the most recent post on my page and would like to put a small portion of text onto the top left corner of the picture. I have tried code to do so from other online resources, but none of them have worked. Can someone please check why my code isn’t working or provide an alternate method of putting text on an image?
Here is my HTML + CSS:
* {
margin: 0;
padding: 0;
}
body {
}
nav {
width: 100%;
height: 90px;
background-color: black;
display: flex;
}
nav h1 {
text-align: center;
font-family: arial;
color: white;
font-size: 44px;
line-height: 55px;
float: left;
padding: 15px 20px;
flex: 1 0 auto;
}
nav ul {
position: absolute;
right: 0;
}
nav ul li {
float: left;
list-style: none;
position: relative; /* we can add absolute position in subcategories */
padding-right: 1em;
}
nav ul li a {
display: block;
font-family: arial;
color: white;
font-size: 20px;
padding: 34px 14px;
text-decoration: none;
}
nav ul li ul {
display: none;
position: absolute;
background-color: black;
padding: 5px; /* Spacing so that hover color does not take up entire chunk */
border-radius: 0px 0px 4px 4px;
transform: translateX(1rem);
}
nav ul li:hover ul {
/* This means when li is hovered, we want the unordered list inside list item to do something. */
display: block;
}
nav ul li ul li{
width: 130px; /* increases width so that all text can be fit */
border-radius: 4px;
}
nav ul li ul li a:hover {
background-color: #ADD8E6;
a
}
.newest-review-cover img {
height: 50%;
width: 100%;
position: relative;
display: inline-block;
}
.newest-review-cover .newest-review-title {
position: absolute;
z-index: 999;
margin: 0 auto;
left: 0;
right: 0;
text-align: center;
top: 120%; /* Adjust this value to move the positioned div up and down */
background: rgba(0, 0, 0, 0.8);
font-family: Arial,sans-serif;
color: #fff;
width: 60%; /* Set the width of the positioned div */
}
<!DOCTYPE html>
<html>
<head>
<link href="header+footer.css" rel = "stylesheet" type="text/css" />
<link href="Homepage.css" rel = "stylesheet" type="text/css" />
<meta charset="utf-8">
<title> The Novel Column - Book Reviews </title>
</head>
<body>
<nav>
<h1> The Novel Column </h1>
<ul>
<li> Resources
<ul>
<li> Book Reviews </li>
<li> Quotes and Principles </li>
<li> Community Aid </li>
</ul>
</li>
<li> About Us </li>
</ul>
</nav>
<section class="newest-review-cover">
<img src="https://thenovelcolumn.com/wp-content/uploads/2019/06/the-5am-club-poster.jpg" alt="The 5AM Club">
<div class="newest-review-title">
<p> The 5AM Club </p>
</div>
</section>
</body>
</html>
Thanks in advance for your help!
For starters, you are targeting your newest-review-title class wrong in your CSS, by using a period between review and title. Change that. Also, try making your container the relative element instead of your image, like so:
.newest-review-cover {
position: relative;
}
.newest-review-cover img {
display: block;
width:100%;
}
.newest-review-title {
position: absolute;
display:block;
z-index: 999;
margin:0 auto;
text-align: center;
top: 50%;
width: 60%;
left:20%
}
This method provides an alternative solution using the CSS background image property. Then you can place your text in the div using the CSS you already had in place. You can adjust the height by adjusting the height of the div. The size of the image can be adjusted using the CSS background-size property.
* {
margin: 0;
padding: 0;
}
body {}
nav {
width: 100%;
height: 90px;
background-color: black;
display: flex;
}
nav h1 {
text-align: center;
font-family: arial;
color: white;
font-size: 44px;
line-height: 55px;
float: left;
padding: 15px 20px;
flex: 1 0 auto;
}
nav ul {
position: absolute;
right: 0;
}
nav ul li {
float: left;
list-style: none;
position: relative;
/* we can add absolute position in subcategories */
padding-right: 1em;
}
nav ul li a {
display: block;
font-family: arial;
color: white;
font-size: 20px;
padding: 34px 14px;
text-decoration: none;
}
nav ul li ul {
display: none;
position: absolute;
background-color: black;
padding: 5px;
/* Spacing so that hover color does not take up entire chunk */
border-radius: 0px 0px 4px 4px;
transform: translateX(1rem);
}
nav ul li:hover ul {
/* This means when li is hovered, we want the unordered list inside list item to do something. */
display: block;
}
nav ul li ul li {
width: 130px;
/* increases width so that all text can be fit */
border-radius: 4px;
}
nav ul li ul li a:hover {
background-color: #ADD8E6;
a
}
.newest-review-cover {
position: relative;
height: 383px;
width: 100%;
}
.newest-review-cover_bg {
background-image: url('https://thenovelcolumn.com/wp-content/uploads/2019/06/the-5am-club-poster.jpg');
height: 100%;
background-size: 100%;
background-repeat: no-repeat;
}
.newest-review-cover .newest-review.title {
position: absolute;
z-index: 999;
margin: 0 auto;
left: 0;
right: 0;
text-align: center;
top: 120%;
/* Adjust this value to move the positioned div up and down */
background: rgba(0, 0, 0, 0.8);
font-family: Arial, sans-serif;
color: #fff;
width: 60%;
/* Set the width of the positioned div */
}
<!DOCTYPE html>
<html>
<head>
<link href="header+footer.css" rel="stylesheet" type="text/css" />
<link href="Homepage.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<title> The Novel Column - Book Reviews </title>
</head>
<body>
<nav>
<h1> The Novel Column </h1>
<ul>
<li> Resources
<ul>
<li> Book Reviews </li>
<li> Quotes and Principles </li>
<li> Community Aid </li>
</ul>
</li>
<li> About Us </li>
</ul>
</nav>
<section class="newest-review-cover">
<div class="newest-review-cover_bg">
<p class="newest-review-cover_title">
The 5AM Club
</p>
</div>
</section>
</body>
</html>
HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>Nightfall Gaming</title>
<link href="C:\Users\Cam\Desktop\NightfallGaming\CSS\Stylesheet.css" rel="stylesheet" type="text/css"/>
</head>
<body bgcolor="#FFFFFF">
<div id="navbar">
<nav>
<ul>
<li>Home</li>
<li>Game News</li>
<li>Game Reviews
<ul>
<li>Xbox 360</li>
<li>Xbox One</li>
<li>PS3</li>
<li>PS4</li>
<li>PC</li>
<li>Wii</li>
</ul>
</li>
<li>Contact Us/About Us</li>
</ul>
</nav>
</div>
<div id="logo">
<img src="C:\Users\Cam\Desktop\NightfallGaming\Images\Logo.png" alt="Home">
</div>
<div id="mainbody"></div>
</body>
</html>
CSS:
body {
font-size:22px;
line-height: 32px;
color: #ffffff;
word-wrap:break-word !important;
font-family: 'Open Sans', sans-serif;
}
h1 {
font-size: 60px;
text-align: center;
color: #FFF;
}
h3 {
font-size: 30px;
text-align: center;
color: #FFF;
}
h3 a {
color: #FFF;
}
a {
color: #FFF;
}
h1 {
margin-top: 100px;
text-align:center;
font-size:60px;
font-family: 'Bree Serif', 'serif';
}
#container {
margin: 0 auto;
max-width: 890px;
}
p {
text-align: center;
}
#relatedContent {
max-width: 800px;
margin: 200px auto;
}
#relatedContent .item {
max-width: 44%;
padding: 3%;
float: left;
text-align: center;
}
#relatedContent .item a img {
max-width: 100%;
}
#navbar {
margin: 70px 350px;
background-color: #E64A19;
position: absolute;
border: 3px solid black;
text-align: center;
}
nav ul {
padding:0;
margin:0;
list-style: none;
position: relative;
}
nav ul li {
display:inline-block;
background-color: #E64A19;
right: 86px;
}
nav a {
display:block;
padding:0 10px;
color:#FFF;
font-size:20px;
line-height: 60px;
text-decoration:none;
}
nav a:hover {
background-color: #000000;
}
/* Hide Dropdowns by Default */
nav ul ul {
display: none;
position: absolute;
top: 60px;
}
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
display:inherit;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
width:170px;
float:none;
display:list-item;
position: relative;
border: 1px solid black;
}
/* Change this in order to change the Dropdown symbol */
li > a:after { content: ' +'; }
li > a:only-child:after { content: ''; }
#logo {
position: absolute;
top: 30px;
left: 70px;
}
#mainbody {
background: #141414;
width: 1500px;
height: 800px;
position: absolute;
bottom: 0px;
left: 50px;
}
I'm basically trying to get the navbar and site logo to show up on top of the 'mainbody'/background div; as of right now both of the other divs are hidden behind the 'mainbody' one.
I've seen some others posts on it but most just suggest to use float: left and clear: both as a solution, which hasn't worked in my case. Others have said it might be a positioning problem.
You need to use z-index. z-index specifies the stack order of the elements. The higher the number, the closer to the front the element will be.
Here's a simplified JSFiddle to show it in action. I took out HTML and CSS not necessary to the example, and changed the colours of the divs in order to see it more clearly.
I added 'z-index' of 0 on #mainbody, and z-index of 10 on #logo and #navbar.
I am having trouble getting my menu items to align next to my logo, within my navbar. My menu items are appearing just below my logo and to the right, the horizontal position is correct, I need to adjust the vertical position up so that the items are in line and within the navigation bar.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Serving Grace - Home</title>
<!-- Stylesheet -->
<link href="Private/stylesheet.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="content">
<nav id="nav">
<ul>
<li><img src="Logo/logo.png"/></li>
<li>Home</li>
<li>About</li>
<li>Volunteer</li>
<li>Donate</li>
<ul>
</nav>
<div id="image">
<img src="Images/Content.png"/>
</div>
<div id="info">
<img src="Images/info.png"/>
</div>
<div id="footer">
<img src="Images/Facebook.fw.png">
<img src="Images/Twitter.fw.png">
<img src="Images/Google.fw.png">
<p id="copyright">© 2013 Jeffery Evans</p>
</div>
</div>
</body>
</html>
CSS
body {
background-color: #C8C8C8;
}
#content {
width: 1090px;
height: 900px;
background-color: white;
margin-left: auto;
margin-right: auto;
box-shadow: 5px 3px 5px #888;
min-height: 100%;
position: relative;
}
#nav {
background-color: #222222;
height: 100px;
border: 1px solid black;
}
#nav li {
text-decoration: none;
display: inline;
margin: 25px 20px 10px 10px;
font-family: Arial;
color: #F59239;
position: relative;
}
#nav li a {
text-decoration: none;
color: #F59239;
font-family: Arial;
font-size: 18px;
}
#logo {
padding-right: 300px;
position: inline-block;
}
#nav li a:hover {
color: #222222;
}
#image {
top: 100px;
position: relative;
float: left;
left: 15px;
}
#info {
top: 100px;
position: relative;
float: left;
left: 30px;
}
#footer {
display: table-cell;
width: 1090px;
height: 70px;
background-color: #222222;
bottom: 0;
position: absolute;
}
#footer a {
margin-left: 15px;
}
#copyright {
color: white;
text-align: center;
vertical-align: middle;
}
instead of
#nav {
height: 100px;
}
try something like
#nav {
line-height: 100px;
}
if that doesn't work, then also try using line-height for your nav li and/or nav a
THE EASIEST WAY would be to do something just like this
#logo {
padding-top: 10px;
}
That will just push the logo down by 10px , adjust accordingly
If the logo.png is very wide, it may be pushing the menu items to the next line. I tried your code a with small gif for the logo and it worked fine (image and menu text were aligned at bottom) in both Firefox and Chrome.