How to move image to center of div using css? - html

I tried to add margin-left : 25%; to class .four but not work. how can i do ?
.one{
width: 100%;
}
.two{
margin: 0;
padding: 0;
border: 0;
background: transparent;
float: left;
position: relative;
width: 100%;
margin-bottom: 15px;
}
.three{
float: left;
list-style: none;
color: #333;
font-size: 19px;
width: 100%;
background: #fff;
border: 1px solid #ccc;
padding: 10px 0px;
}
.four{
margin-left: 10px;
width: 246px;
height: 138px;
margin-right: 16px;
display: inline-block;
position: relative;
float: left;
}
.five{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
margin-left: auto;
margin-right: auto;
overflow: hidden;
display: block;
cursor: pointer;
}
.six{
transform: translateY(-50%);
top: 50%;
left: 0;
background-color: transparent;
display: block;
position: absolute;
}
.seven{
width: 246px;
display: block;
margin-left: auto;
margin-right: auto;
max-width: unset;
}
<div class="one">
<ul class="two">
<li class="three">
<div class="four">
<a class="five" href="">
<div class="six">
<img class="seven" src="http://kawamono.com/img/cms/Hobby/Coin%20Bank/x100828-sanrio-hellokitty-mini-bank-ylw-SET.jpg.pagespeed.ic.iSCJA9hZBG.jpg">
</div>
</a>
</div>
</li>
</ul>
</div>


Change the css of .four to this:
.four {
width: 246px;
height: 138px;
margin: 0 auto;
position: relative;
}
.one {
width: 100%;
}
.two {
margin: 0;
padding: 0;
border: 0;
background: transparent;
float: left;
position: relative;
width: 100%;
margin-bottom: 15px;
}
.three {
float: left;
list-style: none;
color: #333;
font-size: 19px;
width: 100%;
background: #fff;
border: 1px solid #ccc;
padding: 10px 0px;
}
.four {
width: 246px;
height: 138px;
margin: 0 auto;
position: relative;
}
.five {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
margin-left: auto;
margin-right: auto;
overflow: hidden;
display: block;
cursor: pointer;
}
.six {
transform: translateY(-50%);
top: 50%;
left: 0;
background-color: transparent;
display: block;
position: absolute;
}
.seven {
width: 246px;
display: block;
margin: 0 auto;
max-width: unset;
}
<div class="one">
<ul class="two">
<li class="three">
<div class="four">
<a class="five" href="">
<div class="six">
<img class="seven" src="http://kawamono.com/img/cms/Hobby/Coin%20Bank/x100828-sanrio-hellokitty-mini-bank-ylw-SET.jpg.pagespeed.ic.iSCJA9hZBG.jpg">
</div>
</a>
</div>
</li>
</ul>
</div>
I noticed that you want to center the image yet you are using float:left to .four, it is conflicting to the result you are expecting. And I changed your margins to margin:0 auto; to properly center it horizontally


You can add:
width: 100%;
To style for .four and .six, This will center the image sideways. Those divs does not have a with, so the the image will not center.
Hope this helps 😄
Oel Kristian Ek Hornnes

Related

Can't make valid responsive website because positioning

I try to make a responsive website but I tend to believe because I'm using positiong + right and left it makes me some serious problems. I need to do that without grid.
That's what happens when I make the window a little bit smaller, some of it go left: https://i.imagesup.co/images2/cdf13e4d1939b4041c55ab3b59799762e3d8f32d.png.
And when it gets to the media query it's definitely not responsive. Every change in the window size under 786px seem differently.
https://i.imagesup.co/images2/007f47c1df59bdf745a531d55c9c8965270508aa.png
Only the what inside the first white box + what's inside + what above is really responsive.
CSS
body {
margin: auto 0;
direction: rtl;
background-color:#F0F0F0;
}
.img-center {
display: block;
margin: 0 auto;
}
#img-below {
border: 5px solid white;
border-radius: 100%;
height: 8%;
width: 8%;
position: relative;
bottom: 80px;
}
h1 {
color:#0099ff;
text-align: center;
position: relative;
bottom: 120px;
font-size: 50px;
font-family: 'M PLUS Rounded 1c', sans-serif;
}
h2 {
color: gray;
font-size: 30px;
text-align: center;
font-size: 30px;
position: relative;
bottom: 157px;
font-family: 'M PLUS Rounded 1c', sans-serif;
}
.icons {
height: 50px;
width: 50px;
border: #0099ff 5px solid;
padding: 5px;
border-radius: 100%;;
margin-right: 15px;
}
#DivIcons {
display: flex;
flex-direction: row;
justify-content: center;
position: relative;
bottom: 170px;
}
p {
font-family: 'M PLUS Rounded 1c', sans-serif;
font-size: 15px;
}
article {
width: 160px;
margin-bottom: 5px;
position: relative;
bottom: 455px;
right: 397px;
}
h3 {
font-family: 'M PLUS Rounded 1c', sans-serif;
}
.square {
border:5px solid #0099ff;
height: 80px;
width: 80px;
margin-left: 20px;
border-radius: 30%;
}
.circle {
border:5px solid #0099ff;
border-radius: 100%;
height: 80px;
width: 80px;
margin-left: 20px;
}
.Pservice {
color: #0099ff;
text-align: center;
position: relative;
top: 12px;
}
#service {
display: flex;
flex-direction: row;
position: relative;
bottom: 1710px;
right: 440px;
}
#position3 {
position: relative;
bottom: 70px;
right: 157px;
}
#form {
position: relative;
bottom: 1830px;
right: 593px;
}
input {
border-radius: 6px;
}
input:nth-child(1)
{
width: 250px;
height: 20px;
margin-left: 10px;
}
input:nth-child(2)
{
width: 250px;
height: 20px;
}
#textarea {
width: 520px;
height: 250px;
margin-bottom: 10px;
}
#submit {
background-color: #0099ff;
color: white;
height: 50px;
width: 120px;
position: relative;
right: 200px;
bottom: 10px;
cursor: pointer;
}
#FirstWhite{
width: 750px;
height: 320px;
background-color: white;
margin: 0 auto;
position: relative;
bottom: 460px;
z-index: -1;
margin-bottom: 5px;
}
#AboutWhite {
width: 180px;
height: 650px;
background-color: white;
position: relative;
bottom: 1113px;
right: 385px;
z-index: -1;
}
#ServiceWhite {
width: 555px;
height: 165px;
background-color: white;
z-index: -1;
position: relative;
bottom: 1855px;
right: 580px;
}
#FooterWhite {
width: 555px;
height: 463px;
background-color: white;
z-index: -1;
position: relative;
bottom: 2292px;
right: 580px;
}
#media screen and (max-width:768px)
{
#img-main {
width: 100vw;
height: 150px;
}
#img-below {
width: 30vw;
height: 30vh;
margin-bottom: 10px;
}
h1, h2 {
font-size: 7vw;
position: relative;
bottom: 100px;
margin: 0 auto;
font-family: 'M PLUS Rounded 1c', sans-serif;
}
#flex-mobile1 {
display: flex;
flex-direction: row;
position: relative;
top: 70px;
right: 120px;
margin-top: 10px;
}
#flex-mobile2 {
display: flex;
flex-direction: row;
position: relative;
top: 150px;
left: 133px;
margin-top: 10px;
}
#FirstWhite{
width: 100vw;
height: 500px;
background-color: white;
display: block;
margin: 0 auto;
position: relative;
bottom: 490px;
z-index: -1;
margin-bottom: 5px;
}
#AboutWhite {
width: 100vw;
height: 300px;
background-color: white;
position: relative;
right: 0px;
bottom: 588px;
}
article {
position: relative;
right: 0px;
width: 85vw;
margin-right: 10px;
height: 100px;
}
#ServiceWhite
{
position: relative;
bottom: 650px;
right: 0px;
width: 100vw;
}
#service
{
position: relative;
bottom: 500px;
right: -120px;
}
#FooterWhite
{
position: relative;
bottom: 1080px;
right: 0px;
width: 100vw;
}
#form {
position: relative;
right: 0px;
bottom: 620px;
margin-right: 15px;
}
#inside-form {
position: relative;
right: 40px;
}
}
Link to Codepen

Hope this code helps you to build on top it. As of now the media query is set for 600px, you may change it to your desired break point.
* {
margin: 0;
padding: 0;
}
html {
font-size: 10px;
}
body {
background-color: #f0f0f0;
}
.container {
max-width: 800px;
margin: auto;
}
header {
position: relative;
}
.header-img {
width: 100%;
}
.rounded-img {
position: absolute;
height: 140px;
width: 140px;
border-radius: 50%;
border: 2px solid #fff;
overflow: hidden;
left: 50%;
transform: translate(-50%);
bottom: -60px;
}
.rounded-img img {
width: 100%;
height: 100%;
}
h1,
h2 {
font-family: "M PLUS Rounded 1c", sans-serif;
text-align: center;
}
.titles {
background-color: #fff;
padding-bottom: 40px;
}
h1 {
color: #0099ff;
font-size: 5rem;
padding: 60px 20px 0 20px;
}
h2 {
color: #808080;
font-size: 2.4rem;
}
.icons {
display: flex;
justify-content: center;
margin-top: 30px;
}
.icons a {
width: 40px;
height: 40px;
overflow: hidden;
margin: 0 15px;
border: 5px solid #0099ff;
padding: 10px;
border-radius: 50%;
}
.icons a img {
width: 100%;
height: 100%;
}
.content-section {
display: flex;
margin: 20px 0;
}
.article-right,
.article-left {
font-size: 1.6rem;
font-family: "M PLUS Rounded 1c", sans-serif;
}
.article-right {
order: 2;
width: 180px;
margin-left: auto;
text-align: right;
background-color: #fff;
padding: 20px;
box-sizing: border-box;
}
.article-left {
display: flex;
flex-direction: column;
flex: 1;
margin-right: 20px;
}
.article-left div {
text-align: right;
width: 100%;
background-color: #fff;
padding: 20px;
box-sizing: border-box;
}
.article-left .shapes-section {
margin-bottom: 30px;
}
.article-left .form-section {
margin-bottom: 50px;
}
#media screen and (max-width: 600px) {
.icons {
flex-wrap: wrap;
margin-top: 10px;
}
.icons a {
margin-top: 20px;
}
.content-section {
flex-direction: column;
}
.article-right,
.article-left,
.article-left .shapes-section,
.article-left .form-section {
text-align: center;
}
.article-left {
order: 2;
margin-right: 0;
}
.article-right {
margin-right: auto;
margin-bottom: 30px;
width: 100%;
}
}
<div class="container">
<header>
<img class="header-img" src="https://www.westsidemovement.com/wp-content/uploads/2018/03/Lets-Go-Scripture-800x200.jpg" alt="" />
<div class="rounded-img">
<img src="https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fblogs-images.forbes.com%2Frainerzitelmann%2Ffiles%2F2019%2F06%2FE0MG76-e1560965378507-1200x1270.jpg" alt="" />
</div>
</header>
<main>
<section class="titles">
<h1>אלברט איינשטיין</h1>
<h2>פיזיקאי תיאורטי</h2>
<div class="icons">
<a href="#">
<img src="https://cdn4.iconfinder.com/data/icons/social-media-logos-6/512/10-waze-512.png" alt="" />
</a>
<a href="#">
<img src="https://thebrightwork.com/wp-content/uploads/2014/04/facebook-icon-blue.png" alt="" />
</a>
<a href="#">
<img src="https://cdn2.iconfinder.com/data/icons/basic-thin-line-color/21/20-512.png" alt="" />
</a>
<a href="#">
<img src="https://www.trzcacak.rs/myfile/full/311-3111799_social-media-computer-icons-logo-blue-area-png.png" alt="" />
</a>
<a href="#">
<img src="https://img.icons8.com/ultraviolet/452/whatsapp.png" alt="" />
</a>
<a href="#">
<img src="https://cdn2.iconfinder.com/data/icons/thin-line-color-1/21/13-512.png" alt="" />
</a>
</div>
</section>
<section class="content-section">
<article class="article-right">
your right content
</article>
<article class="article-left">
<div class="shapes-section">
shapes content here
</div>
<div class="form-section">
form here
</div>
</article>
</section>
</main>
</div>

Center logo and fill 4 images to page?

i would like to have my logo centred to the four images. How do i do this? i would like the four images to fill the window and the logo to centre to them. I also don't want to stretch the images but would consider resizing them if needs be
.header {
background-color: black;
border-bottom: 1px solid #466995;
overflow-y: auto;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 10;
}
ul {
margin: 30px auto;
text-align: center;
}
li {
color: #FFF;
display: inline-block;
font-family: 'Oswald', sans-serif;
font-size: 16px;
text-align: left;
font-weight: 300;
text-transform: uppercase;
padding: 0 100px;
}
li:hover {
color: #DBE9EE;
}
body {
margin: 0;
}
img {
max-width: 100%;
height: auto;
}
#container {
max-width: 100%;
z-index: -100;
margin: 0;
padding: 0;
}
.containermenu {
}
.containermenu img{
width: 50%;
height: 50%;
float: left;
}
#logo {
width: 20%;
margin: 0 auto;
position: absolute;
z-index: 20;
left: 40%;
right: 40%;
}
#process img {
width: 100%;
}
#process {
width: 100%;
}
<div id="container">
<div id="logo"><img src="http://oi68.tinypic.com/2njh9id.jpg"></div>
<div class="containermenu"><img src="http://oi67.tinypic.com/vgmv80.jpg"></div>
<div class="containermenu"><img src="http://oi67.tinypic.com/vgmv80.jpg"></div>
<div class="containermenu"><img src="http://oi67.tinypic.com/vgmv80.jpg"></div>
<div class="containermenu"><img src="http://oi67.tinypic.com/vgmv80.jpg"></div>
</div>
Codepen link

To center an item perfectly in the page use the following CSS
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
EDIT: Updated Codepen

Use transform to center in css More infor here
.header {
background-color: black;
border-bottom: 1px solid #466995;
overflow-y: auto;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 10;
}
ul {
margin: 30px auto;
text-align: center;
}
li {
color: #FFF;
display: inline-block;
font-family: 'Oswald', sans-serif;
font-size: 16px;
text-align: left;
font-weight: 300;
text-transform: uppercase;
padding: 0 100px;
}
li:hover {
color: #DBE9EE;
}
body {
margin: 0;
}
img {
max-width: 100%;
height: auto;
}
#container {
max-width: 100%;
z-index: -100;
margin: 0;
padding: 0;
}
.containermenu {} .containermenu img {
width: 50%;
height: 50%;
float: left;
}
#logo {
width: 20%;
position: absolute; /*fixed*/
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#process img {
width: 100%;
}
#process {
width: 100%;
}
<div id="container">
<div id="logo">
<a href="index.html">
<img src="http://oi68.tinypic.com/2njh9id.jpg">
</a>
</div>
<div class="containermenu">
<a href="packaging.html">
<img src="http://oi67.tinypic.com/vgmv80.jpg">
</a>
</div>
<div class="containermenu">
<a href="photography.html">
<img src="http://oi67.tinypic.com/vgmv80.jpg">
</a>
</div>
<div class="containermenu">
<a href="illustration.html">
<img src="http://oi67.tinypic.com/vgmv80.jpg">
</a>
</div>
<div class="containermenu">
<a href="about.html">
<img src="http://oi67.tinypic.com/vgmv80.jpg">
</a>
</div>
</div>

Changing CSS of one element effects other element outside the div

Whenever i try to move separator up or down, the element h1 above .separator class starts moving along with the separator. Is there any easy way to get rid of this issue?
Below is my HTML/CSS Code
.banner img {
width: 100%;
height: 100%;
}
.banner {
position: relative;
margin: -0.6%
}
.OverLay {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
.OverLayContent {
width: 100%;
height: 100%;
display: table;
}
.overLayDescription {
width: 70%;
margin: 0 auto;
}
.OverLayText {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.OverLayText h1 {
margin-bottom: 5%;
color: #FFF;
font-size: 120px;
/*border-bottom: 2px solid #15a4fa;*/
}
.separator {
margin: 0 auto;
width: 50%;
background-color: #15a4fa;
height: 2px;
margin-bottom: 10.4%;
}
.OverLayText a {
color: #FFF;
border: 1px solid #15a4fa;
padding: 10px;
}
.OverLayText p {
color: #FFF;
margin-top: 2%;
margin-bottom: 3%;
}
.OverLayContent {
position: relative;
}
<div class="banner">
<img src="http://cometoart.com/wp-content/uploads/2016/03/pojo-placeholder-2.png" />
<div class="OverLay">
<div class="OverLayContent">
<div class="OverLayText">
<h1>STRICT</h1>
<dir class="separator"></dir>
<p>STRICT is a responsive theme with a a clean and minimal look.</p>
Call to action
</div>
</div>
</div>
</div>

Just because you are using .OverLayText to vertically-align:middle;.

.banner img {
width: 100%;
height: 100%;
position: relative;
}
.banner {
position: relative;
margin: -0.6%
}
.OverLay {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
.OverLayContent {
width: 100%;
height: 100%;
display: table;
}
.overLayDescription {
width: 70%;
margin: 0 auto;
}
.OverLayText {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
text-align: center;
vertically-align:middle;
}
.OverLayText h1 {
margin-bottom: 5%;
color: #FFF;
font-size: 120px;
/*border-bottom: 2px solid #15a4fa;*/
}
.separator {
/*margin: 0 auto;*/
width: 50%;
background-color: #15a4fa;
height: 2px;
/*top: 80%;*/
position: relative;
margin: auto;
text-align: center;
display: block;
}
.OverLayText a {
color: #FFF;
border: 1px solid #15a4fa;
padding: 10px;
}
.OverLayText p {
color: #FFF;
margin-top: 2%;
margin-bottom: 3%;
}
.OverLayContent {
position: relative;
}
<div class="banner">
<img src="http://cometoart.com/wp-content/uploads/2016/03/pojo-placeholder-2.png" />
<div class="OverLay">
<div class="OverLayContent">
<div class="OverLayText">
<h1>STRICT</h1>
<dir class="separator"></dir>
<p>STRICT is a responsive theme with a a clean and minimal look.</p>
Call to action
</div>
</div>
</div>
</div>

Why a gap between ul li [duplicate]

This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 6 years ago.
In the following code, I am not able to understand that why is there a small margin between the green li's Home , Products , Services , About Us, Contact
I have set the margin and padding to 0px in both .ul and .li properties. Then why is there a gap between the green li's?
*{
box-sizing:border-box;
}
html,body {
margin: 0px;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
background-color: rgba(173,192,241,1);
}
.wrapper {
height: 725px;
max-width: 960px;
margin-left: auto;
left: 0px;
top: 0px;
/* [disabled]background-color: rgba(15,26,155,1); */
margin-right: auto;
position: relative;
}
.topimage {
width: 100%;
max-width: 960px;
height: 100%;
max-height: 175px;
/* [disabled]background-color: rgba(0,102,204,1); */
position: absolute;
/* [disabled]border: thin solid rgba(255,0,0,1); */
}
.topimage img{
max-width: 100%;
max-height: 100%;
/* [disabled]margin-bottom: -9px; */
display: block;
margin-right: auto;
margin-left: auto;
border-radius: 15px 15px 0px 0px;
}
.menu {
background-color: rgba(15,26,155,1);
height: 100%;
max-height: 50px;
max-width: 960px;
position: relative;
top: 175px;
}
.list {
color: rgba(0,0,0,1);
text-decoration: none;
margin-right: auto;
margin-left: auto;
background-color: rgba(255,0,0,1);
padding: 0px;
}
.list li {
display: inline-block;
margin-right: 0px;
margin-left: 0px;
width: auto;
text-align: center;
background-color: rgba(204,255,0,1);
position: relative;
padding: 0px;
}
.content {
width: 100%;
height: 500px;
background-color: rgba(20,35,214,1);
position: relative;
top: 175px;
padding-right: 0.5%;
padding-left: 0.5%;
}
.leftcontent {
background-color: rgba(210,238,252,1);
float: left;
height: 100%;
max-height: 500px;
width: 100%;
max-width: 85%;
top: 0px;
position: relative;
border-left-color: rgba(205,205,205,1);
/* [disabled]margin-left: 0.3%; */
}
.rightcontent {
background-color: rgba(51,177,236,1);
float: right;
height: 100%;
max-height: 500px;
width: 100%;
max-width: 15%;
position: relative;
top: 0px;
/* [disabled]margin-right: 0.3%; */
}
.footer {
}
<div class="wrapper">
<div class="topimage">
</div>
<div class="menu">
<ul class="list">
<li>Home</li>
<li>Products</li>
<li>Services</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</div>
<div class="content">
<div class="leftcontent">
</div>
<div class="rightcontent">
</div>
</div>
</div>

If you have no new lines between the list elements then it works. So you could put all on one line (see snippet) or add font-size: 0; to the <ul>
ul {font-size:0;}
*{
box-sizing:border-box;
}
html,body {
margin: 0px;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
background-color: rgba(173,192,241,1);
}
.wrapper {
height: 725px;
max-width: 960px;
margin-left: auto;
left: 0px;
top: 0px;
/* [disabled]background-color: rgba(15,26,155,1); */
margin-right: auto;
position: relative;
}
.topimage {
width: 100%;
max-width: 960px;
height: 100%;
max-height: 175px;
/* [disabled]background-color: rgba(0,102,204,1); */
position: absolute;
/* [disabled]border: thin solid rgba(255,0,0,1); */
}
.topimage img{
max-width: 100%;
max-height: 100%;
/* [disabled]margin-bottom: -9px; */
display: block;
margin-right: auto;
margin-left: auto;
border-radius: 15px 15px 0px 0px;
}
.menu {
background-color: rgba(15,26,155,1);
height: 100%;
max-height: 50px;
max-width: 960px;
position: relative;
top: 175px;
}
.list {
color: rgba(0,0,0,1);
text-decoration: none;
margin-right: auto;
margin-left: auto;
background-color: rgba(255,0,0,1);
padding: 0px;
}
.list li {
display: inline-block;
margin-right: 0px;
margin-left: 0px;
width: auto;
text-align: center;
background-color: rgba(204,255,0,1);
position: relative;
padding: 0px;
}
.content {
width: 100%;
height: 500px;
background-color: rgba(20,35,214,1);
position: relative;
top: 175px;
padding-right: 0.5%;
padding-left: 0.5%;
}
.leftcontent {
background-color: rgba(210,238,252,1);
float: left;
height: 100%;
max-height: 500px;
width: 100%;
max-width: 85%;
top: 0px;
position: relative;
border-left-color: rgba(205,205,205,1);
/* [disabled]margin-left: 0.3%; */
}
.rightcontent {
background-color: rgba(51,177,236,1);
float: right;
height: 100%;
max-height: 500px;
width: 100%;
max-width: 15%;
position: relative;
top: 0px;
/* [disabled]margin-right: 0.3%; */
}
.footer {
}
<div class="wrapper">
<div class="topimage">
</div>
<div class="menu">
<ul class="list">
<li>Home</li><li>Products</li><li>Services</li><li>About Us</li><li>Contact</li>
</ul>
</div>
<div class="content">
<div class="leftcontent">
</div>
<div class="rightcontent">
</div>
</div>
</div>

Try this -
.list li {
float: left;
list-style: none;
width: auto;
text-align: center;
background-color: rgba(204,255,0,1);
position: relative;
}
Replace with above css with your existing .list li class

You can remove space created by inline-block element as with following trick.
Or you can use float instead of inline-block.
.list {
letter-spacing: -4px;
font-size: 0;
}
.list li {
display: inline-block;
vertical-align: top;
letter-spacing: 0;
font-size: 14px;
}
Or you can use float:
.list {
overflow: hidden;
}
.list li {
float: left;
}

Just add this into your code,
.list{
font-size:0;
}
.list li{
font-size:20px;
padding:0px 0px 0px 10px;
}

Elements display in front of their container, but can't be interacted with

I'm currently working on a website and have encountered an interesting problem. I have a container which holds my navbar. For some reason, this container displays behind its contents (Which it should) but mouse interaction acts as if it's in front of its contents.
JSFiddle of my current code
https://jsfiddle.net/qzsxpgrq/
HTML
<div id="navbar">
<div id="bar">
<div id="navLeft">
<div class="navL navbutton">About</div>
<div class="navL navbutton">The Team</div>
</div>
<div id="navLogo">
<div id="logo">
<img src="http://www.epicyoobed.com/res/img/navLogo.png"/>
</div>
</div>
<div id="navRight">
<div class="navR navbutton">Programs</div>
<div class="navR navbutton">Contact</div>
</div>
</div>
</div>
CSS
html {
height: 100%;
font-family: arial;
}
body {
margin: 0;
padding: 0;
background-color: #BBB;
}
#navbar {
margin: 0;
padding: 0;
height: 80px;
width: 100%;
position: fixed;
display: block;
z-index: 1;
}
#bar {
display: block;
position: fixed;
width: 100%;
height: 40px;
background-image: url("http://www.epicyoobed.com/res/img/nav.png");
}
#navRight {
margin: 0;
padding: 0;
height: 40px;
width: 45%;
position: absolute;
display: block;
float: left;
top: 0;
right: 0;
}
#navbar div div a {
display: block;
text-decoration: none;
padding-top: 5px;
color: #000;
width: 100%;
height: 100%;
font-size: 20px;
}
.current {
background-image: url("http://www.epicyoobed.com/res/img/nav_sel.png");
background-repeat: repeat-x;
}
.navL {
float: right;
}
.navR {
float: left;
}
.navbutton {
display: block;
position: relative;
width: 150px;
height: 100%;
text-align: center;
}
.navbutton:hover {
background-image: url("http://www.epicyoobed.com/res/img/nav_sel.png");
background-repeat: repeat-x;
}
#navLogo {
margin: auto;
height: 40px;
width: 100%;
position: absolute;
display: block;
z-index: 2;
}
#logo {
margin: auto;
height: 80px;
width: 80px;
}
#navLeft {
margin: 0;
padding: 0;
height: 40px;
width: 45%;
position: absolute;
display: block;
float: right;
}

Xetanai Try adding a z-index of 3 to the #navLeft and navRight.
#navLeft {
margin: 0;
padding: 0;
height: 40px;
width: 45%;
position: absolute;
display: block;
float: right;
z-index:3;
}
#navRight {
margin: 0;
padding: 0;
height: 40px;
width: 45%;
position: absolute;
display: block;
float: left;
top: 0;
right: 0;
z-index:3;
}
The issue you're experiencing is because the logo is 100% width and has a z-index of 2. Effectively placing it above the left and right containers.