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.
Related
I'm creating a custom sider toggle for an ant design project and I'm struggling to preserve three sides (i.e top, right, left) of the box-shadow (i.e. 2px 2px 8px rgba(0, 0, 0, 0.15)) and remove the box-shadow/blur entirely from the left side. My most recent attempt is below. Any thoughts?
JSX:
<span onClick={this.toggleCollapse} className="ant-layout-sider-zero-width-trigger">
{collapsed ? <Icon type="menu-unfold" /> : <Icon type="menu-fold" />}
</span>
LESS:
.ant-layout-sider-zero-width-trigger {
background: #fff;
color: #000000a6;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.15), inset -2px 0px 0px #fff;
&:hover {
background: #fff;
}
}
btw I've seen similar questions on Stack but none worked for me after much experimentation.
An idea is to use another container and rely on some overflow:
.container {
display:inline-block;
padding:5px 5px 5px 0;
overflow:hidden;
}
.box {
width:200px;
height:50px;
background: #fff;
color: #000000a6;
box-shadow:
2px 2px 8px rgba(0, 0, 0, 0.15),
inset -2px 0px 0px #fff;
}
<div class="container">
<div class="box">
</div>
</div>
You could increase the offset of the shadow and reduce its size:
html {
background: white;
}
body {
padding: 2em;
margin: 2em;
background: yellow;
box-shadow: 4px 4px 8px -4px, inset -2px 0px 0px #fff;
}
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).
Here's a JsFiddle.
I have an transformed image and I would like to add a gradient (black to transparant) on it.
HTML :
<div class="contentwrap">
<div class="perspectiveDiv">
<img src="http://image.noelshack.com/fichiers/2014/34/1408372755-black-card.png" class="img" />
</div>
</div>
CSS :
.contentwrap {
margin: 0 auto;
max-width: 600px;
height: 100%;
display: table;
padding-top: 150px;
}
.perspectiveDiv{
perspective:750px;
position: relative;
left: 0;
top: 0;
}
.img{
position: absolute;
top: -152px;
left: 25px;
transform: rotateX(60deg);
max-width: 250px;
-webkit-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.8);;
-moz-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.8);;
box-shadow: 0 60px 45px -20px rgba(0, 0, 0, 0.8);;
-moz-border-radius: 15px;
border-radius: 16px;
background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}
Here is the kind of result that I need (made with photoshop) :
I found how to apply a gradient on a background image, but not a standard image...
Is it possible to do what I need ?
Can you help me to do it ? It could be very simple but I'm a beginner and I didn't manage to do it...
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.
I have a little problem with Firefox, this is the html
<html>
<button name="five" data-type="select" class="ui_button ui_button_normal">
<span>Pasta</span>
<div class="ui_button ui_button_normal ui_select_list">
<div class="ui_select_list_item" name="Pasta">Pasta</div>
<div class="ui_select_list_item" name="Carne">Carne</div>
<div class="ui_select_list_item" name="Verdura">Verdura</div>
<div class="ui_select_list_item" name="Pesce">Pesce</div>
<div class="ui_select_list_item" name="Dolce">Dolce</div>
<div class="ui_select_list_item" name="Frutta">Frutta</div>
<div class="ui_select_list_item" name="Caffè">Caffè</div>
</div>
</button>
</html>
and this is the CSS
.ui_select_list
{
margin: 0px !important;
height: auto !important;
padding: 10px;
}
.ui_select_list_item
{
border: 1px solid transparent;
}
.ui_select_list_item:hover
{
border: 1px solid transparent;
background-color: rgba(0, 185, 0, 0.3);
box-shadow: 0 0 2px 1px #000000;
border-radius: 10px;
}
.ui_button
{
background-color: rgba(140, 140, 140, 0.5);
border: 0 solid transparent;
border-radius: 10px 10px 10px 10px;
color: #FFFF00;
font-family: verdana, sans-serif;
font-size: 15px;
height: 32px;
line-height: 30px;
margin: 5px;
position: relative;
text-align: center;
width: 160px;
}
.ui_button_normal
{
box-shadow: 0 0 1px 4px rgba(0, 0, 0, 0.5);
}
.ui_button_normal:hover
{
background-color: rgba(180, 180, 180, 0.5);
box-shadow: 0 0 2px 5px rgba(0, 0, 0, 0.8);
}
Can be found on http://jsfiddle.net/Mak73/3YkSe/
The problem is that, on Google Chrome it works like expeted, when the mouse is over the div.ui_select_list_item the content of the div change with div.ui_select_list_item:hover.
On Firefox the :hover don't work, any idea?
It's not working because you're wrapping a <button> around the divs .. close it after the <span> and the :hover state will work ..
Jsfiddle: http://jsfiddle.net/3YkSe/2/
I suggest you try applying the following element options:
display: none;
display: inline;
I think this will do some better work in Firefox, on focus pop the
menu and display it inline, without block. This is just an idea I've
got for you to try out. Reply back if it works or not! Thanks!