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).
Related
I need to order my items from top-to-bottom, then left-to-right, e.g.:
1 5
2 6
3 7
4 8
However, box shadow is being cutoff. Reference the snippet: item 3's box shadow is cut off at bottom and item 4 is cut off at the top (in chrome).
There are similar questions to this, however the answers don't apply in this situation. I can't use flex on the container with flex-direction: column as this requires an explicit height and my item count is dynamic. I also can't set the items to display: inline-block as other answers suggest, since I need to control this content with flex.
.container {
column-count: 2;
column-gap: 16px;
width: 500px;
}
.item {
box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
border-radius: 3px;
margin-bottom: 16px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
break-inside: avoid-column;
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
Two other things I've tried from other similar SO questions that did not work: setting overflow: visible, adding a wrapper around the items with transparent border. Thanks for any suggestions.
Add display: inline-flex and width: 100% properties. break-inside: avoid-column property is invalid.
.container {
column-count: 2;
column-gap: 16px;
width: 500px;
margin-top: -2px;
margin-bottom: -14px;
}
.item {
box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
border-radius: 3px;
margin-top: 2px;
margin-bottom: 14px;
height: 64px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
An idea is to use a pseudo-element where you apply the box-shadow. Make sure the pseudo element doesn't span all the space so it won't get affected by the cutting (use top and bottom different from 0)
.container {
column-count: 2;
column-gap: 16px;
width: 500px;
}
.item {
border-radius: 3px;
margin-bottom: 16px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
break-inside: avoid-column;
position:relative;
z-index:0;
}
.item:before {
content:"";
position:absolute;
z-index:-1;
top:1px;
bottom:3px;
left:0;
right:0;
box-shadow:
0px 3px 1px -2px rgba(0, 0, 0, 0.2),
0px 2px 2px 0px rgba(0, 0, 0, 0.14),
0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
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.
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.
I cannot seem to get this number to align inline to the glyphicon. I want the number 3 to be pushed up more so that it lines up.
CSS
body {
background-image: url("bg1.png");
}
.icons {
margin: 0px 0px 0px 10px;
}
.well {
min-height: 20px;
padding: 20px;
margin-bottom: 20px;
background-color: #ecf0f1;
border: 1px solid transparent;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
.well blockquote {
border-color: #ddd;
border-color: rgba(0, 0, 0, 0.15);
}
.well-lg {
padding: 10px;
border-radius: 6px;
}
.well-sm {
padding: 9px;
border-radius: 3px;
}
#alertbox {
padding: 2px 2px 2px 2px;
text-align: center;
}
#topicon {
font-size: 50px;
}
#stats {
font-size: 50px;
display: inline-block;
float: right;
}
HTML
<div class="col-md-3">
<div class="well well-lg">
<div id="alertbox" class="alert alert-info">Total APIs</div>
<span id="topicon" class="glyphicon glyphicon-tasks"></span>
<span id="stats">3</span>
</div>
</div>
Screenshot
using the positioning doesnt work when scaling since the number 3 would go into the center when on a mobile phone. I need it to auto-scale i guess for smaller browsers.
If you remove the float from #stats, you could do something like this:
.well {text-align: justify;}
.well:after{content:""; width: 100%; display: inline-block; height: 0;}
span {display: inline-block; vertical-align: middle;}
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.