I am having a couple issues with my Navigation bar. The first issue is I cannot figure out how to make the "active" size the same size as my hover. You will notice that the entire height of the navigation bar is highlighted on active.
Secondly, for some reason it isn't as apparent on codepen but in my actual situation my "main" div is on the same plane as the navbar resulting in the drop shadow to not be even and crisp. Hopefully you can see what I mean from the following image. I have tried playing with z-index with no luck.
https://codepen.io/kjpolker/pen/RMqNbL
Image is of the navigation bar itnersecting with the main div. The shadow almost "fades" out on the edge, how can I put the shadow in front?
HTML
<body>
<nav class="navigation-bar">
<img class="logo" src="images/logo.png" alt="Logo" width="100" height="100"/>
<ul>
<li class="active">TAB 1</li>
<li>TAB 2</li>
<li>TAB 3</li>
<li>TAB 4</li>
<li>TAB 5</li>
</ul>
</nav>
<main class="main">
<article class="summary">
<p></p>
</article>
<article id="image">
<img src="images/map.png" alt="" width="80%" height="80%" />
</article>
</main>
</body>
CSS
* {margin:0;padding:0;box-sizing:border-box}
html, body {text-align: center;}
body {
background-image: url(../images/BG.jpg); background-size: 100% 100%; background-position: top left; background-repeat: repeat;
justify-content: center; /* horizontal alignment / centering */
align-items: flex-start; /* prevents the #menu to fill the remaining height of the body */
}
.navigation-bar {
opacity: .9;
text-align: center;
width: 100%;
height: 120px;
background: #2A2A2A;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.7), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
/*
-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
*/
}
.logo {
float: left;
margin-left: 5%;
margin-right: 5%;
margin-top: 10px;
}
/* used with 100% wrapper */
ul {
display: inline;
display: flex; /* displays children inline */
width: 60%;
height: 120px;
list-style: none;
background: #2A2A2A;
}
li {
flex: 1; /* each takes as much width as it can, i.e. 25% */
}
li:last-child {
border-left: none;
border-right: none;
}
li a {
margin-top: 30px;
display: block;
text-align: center;
font: Verdana;
font-size: 16px;
color: #EAEAEA;
text-decoration: none;
padding: 20px 0; /* This adjusts the height of the tabs */
}
li a:hover {
background: linear-gradient(#404040, #3E3E3E);
}
.active {
background: linear-gradient(#2B2B2B, #232323);
}
p {
font-family: Verdana;
font-size: 16px;
}
/* Used in Home */
.main {
opacity: .75;
color: #EAE0D2;
margin: 0 auto;
width: 85%;
height: 1000px;
margin-top: 0;
background: linear-gradient(#2B2B2B, #232323);
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
If my understanding is correct, For your first issue changing
.active {
background: linear-gradient(#2B2B2B, #232323);
}
to
.active a{
background: linear-gradient(#2B2B2B, #232323);
}
will solve the issue.
Related
I'm working on a menu list and I want to get rid of the shadow under the selected li, in this example the letter C.
This is my code so far.
html,
body {
background: #0769AD;
margin: 0 auto;
padding: 0;
}
div {
width: 400px;
margin: 0 auto;
padding: 0;
text-align: center;
}
div ul {
background: #fff;
width: 100%;
margin: 0;
padding: 0;
border-radius: 0px 0px 10px 10px;
box-shadow: rgba(255, 255, 255, 0.3) 0 1px 0, rgba(0, 0, 0, 0.3) 0 -1px 0;
box-shadow: 0 0 5px rgba(1, 1, 1, 0.7);
}
div ul li {
display: inline-block;
padding: 5px 20px;
}
.selected {
background: #0769AD;
box-shadow: inset 0px 8px 6px 0px rgba(0, 0, 0, 0.3);
}
<div>
<ul>
<li>A</li>
<li>B</li>
<li class='selected'>C</li>
<li>D</li>
</ul>
</div>
Update div ul { box-shadow: 0 -5px 5px rgba(1, 1, 1, 0.7);}
html,body{
background:#0769AD;
margin:0 auto;
padding:0;
}
div {
width:400px;
margin:0 auto;padding:0;
text-align:center;
}
div ul{
background:#fff;
width:100%;
margin:0;padding:0;
border-radius: 0px 0px 10px 10px;
box-shadow: 0 0 5px rgba(1, 1, 1, 0.7);
}
div ul li{
display:inline-block;
padding:5px 20px;
}
.selected{
background:#0769AD;
box-shadow: inset 0px 8px 6px 0px rgba(0,0,0,0.3);
position:relative;
}
.selected:after{
content:'';
display:block;
width:100%;
height:25px;
left:0;
top:0;
position:absolute;
box-shadow: 0 10px 0px #0769AD;
z-index:0;
}
<div>
<ul>
<li>A</li>
<li>B</li>
<li class='selected'>C</li>
<li>D</li>
</ul>
</div>
I have two divs. One with an image and one below with a background (semitranparent) and a text. The last div I give the css margin-top: -25px to make an overlap.
But the image in the first div is placed in between the semitranparent background and the text of the last div.
div.polaroid {
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-bottom: 25px;
}
div.container {
background-color: rgba(255,0,0,0.7);
text-align: center;
padding: 10px 20px;
margin-top: -50px;
}
<div class="polaroid">
<img src="http://originalen.com/fileadmin/user_upload/skov.jpg" alt="Norway" style="width:100%">
<div class="container">
<p>The Troll's tongue in Hardanger, Norway</p>
</div>
https://jsfiddle.net/Donslund/bsdk804p/1/
div.polaroid {
position:relative;
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-bottom: 25px;
z-index:1;
}
div.container {
position:relative;
background-color: rgba(255,0,0,0.7);
text-align: center;
margin-top: -37px;
z-index:5;
color:white;
}
<div class="polaroid">
<img src="http://originalen.com/fileadmin/user_upload/skov.jpg" alt="Norway" style="width:100%">
<div class="container">
<p>The Troll's tongue in Hardanger, Norway</p>
</div>
</div>
Here it overlaps like you wanted (I assume).
I am working in HTML and CSS and I find it difficult to rearrange my overlapping elements.
Live example on the jsFiddle
CSS:
#posts {
background: blue;
float: right;
width: 75%;
padding: 5px;
border-radius: 4px;
-webkit-box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5);
box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5);
}
#login-container {
overflow: clear;
background: white;
width: 280px;
height: 330px;
}
HTML:
<div id="content" class="container">
<div id="posts">
<div id="login-container">
<div id="login">
<h1>Member login</h1>
</div>
</div>
</div>
</div>
These two always overlap to each other when I resize my browsers window.
I wish I can post an image here but it needs 10 reps.
May I ask, where are you closing the #posts div? This might be because #login-container is inside #posts.
Look here:
http://jsfiddle.net/nxyg0xwd/4/
#posts {
float: left;
width: 100%;
margin-left: 288px;
}
You have to left float the content, and create a margin in the size of the login vid.
There is a horizontal menu in my website and items inside it have no border. but I want it to have 1px border on mouseover, so when I move the mouse on it, this newly created border moves other elements to the left, about 2px (because border-right = border-left = 1px).
this is my code
<div id="library_category_wrapper">
<ul>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
</ul>
</div>
and this is css
#library_category_wrapper ul
{
list-style: none;
float: right;
position: relative;
top:5px;
margin: auto;
}
#library_category_wrapper ul li
{
display: inline;
margin-left:8px;
padding : 4px;
}
#library_category_wrapper li:hover
{
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
border : 1px solid rgba(0, 0, 0, 0.25);
border-radius : 4px 4px 4px 4px;
box-shadow : 0 0 5px rgba(0, 0, 0, 0.4) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
text-shadow : 0 -1px 0 rgba(0, 0, 0, 0.796), 0 0 10px rgba(255, 255, 255, 0.298);
padding : 4px;
}
this is DEMO
You can simply put a transparent border on the normal state like this: http://jsfiddle.net/Pn8uw/1/
#library_category_wrapper ul li {
border : 1px solid rgba(0, 0, 0, 0);
}
You could add a 'transparent' border to the default LI state:
#library_category_wrapper ul li {
border: 1px solid transparent;
}
Demo: http://jsfiddle.net/Pn8uw/2/
You can simply reduce the padding on hover. Add the following property instead of your padding: 4px;
#library_category_wrapper li:hover {
padding: 3px;
}
fiddle
I have 2 divs a parent and a child they both have fixed width and the child has fixed height too, child div is floated left and it has box-shadow:0 1px 2px 0 rgba(0,0,0,0.4) the problem is that the parent div overlaps the child's left shadow.
I can't add margin-left to the child because its left side is aligned with the left side of a menu div above the parent div so it has to be exactly where it is.
I tried z-index, minus margin for the parent and so many other things I can't even count but nothing seems to solve the problem.
the code is:
#menu {
width: 100%;
height: 50px;
background: #252525;
margin: 0 auto 20px auto;
}
#wrapper {
background: #CCC;
width: 1195px;
margin: 0 auto;
clear: both;
overflow: auto;
background: none;
position: relative;
}
#wrapper {
overflow: hidden;
}
#db_left,
#db_right,
#db_center {
margin-right: 30px;
float: left;
}
#db_left {
width: 170px;
position: relative;
}
#db_right {
margin-right: 0 !important;
width: 315px;
}
#db_center {
width: 650px;
margin-top: 20px !important;
}
#profpic_holder {
width: 150px;
height: 150px;
padding: 10px;
position: relative;
float: left;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
<body>
<div class="wrapper">
<div class="header">
Some Content...
</div>
<div id="db_left">
<div id="profpic_holder">
<img src="#" width="150" height="150" alt="" />
</div>
<div id="profname">
</div>
</div>
<div id="db_center">
</div>
<div id="db_right">
</div>
</div>
</body>
Fixed it.
The #wrapper is overflow:hidden so nothing outside its area can be seen including the child's shadow.
All I had to do was to hide only the overflow of its top and bottom so I did this:
#wrapper{
overflow-y:hidden;
}
The way you have it
-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.4);
box-shadow:0 1px 2px rgba(0, 0, 0, 0.4);
won't have a left shadow. If you want a shadow to show up on all sides use this
-webkit-box-shadow:0 0 2px 1px rgba(0, 0, 0, 0.4);
box-shadow:0 0 2px 1px rgba(0, 0, 0, 0.4);
I hope this helps.