I don't know how in this case implementation margin-bottom for position: absolute element.
This is css of my element:
font-family: FuturaRoundBold;
display: none;
position: absolute;
left: 15%;
top: -5%;
color: #000;
width: 75%;
padding: 1%;
background-color: rgba(233, 233, 233, 1);
border-radius: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
-khtml-border-radius: 30px;
z-index: 2;
Thanks for any ideas!
margin-bottom will only do anything to an absolutely-positioned element if the element has no top property.
Remove the top: -5% and then your margin-bottom will work.
Or as mentioned in the comments you can also add a transparent div like this
<div class="spacer"></div>
inside your outside div
.spacer {
height: 50px;
margin: 0 0 -50px 0;
/* margin: 20px 0 -50px 0; use this if you want #container to have a 'bottom padding', in this case of 20px */
background: transparent; /* you'll need this if #container's parent element has a different background from #container itself */
}
courtesy : Joey
Related
.main-page {
width: 90%;
height: 100%;
z-index: 999;
position: relative;
}
.menu {
width: 350px;
margin: 32px 852px 171px 0;
padding: 21px 21px 0px 40px;
box-shadow: 0 3px 18px 0 rgba(35, 41, 62, 0.13);
background-color: #ffffff;
position: absolute;
float: right;
top: -50px;
left: 105px;
border-radius: 8px;
z-index: 9999;
}
{{start component}}
<div class="menu"> </div>
{{end component}}
<div class="main-page">
</div>
We want to display the menu on top of the main page but it is appearing behind parts of the main page when scrolling. How do we put the menu on top of the main page using css?
We have tried using the z-index but that did not work. We also tried adding an opacity to change the stacking context but that did not work either.
Just on top or always pinned to the top when scrolling?
I've just disabled few lines of your css and menu is on top:
.main-page {
width: 90%;
height: 100%;
/* z-index: 999; */
/* position: relative; */
}
.menu {
width: 350px;
margin: 32px 852px 171px 0;
padding: 21px 21px 0px 40px;
box-shadow: 0 3px 18px 0 rgba(35, 41, 62, 0.13);
background-color: #ffffff;
/* position: absolute; */
/* float: right; */
top: -50px;
left: 105px;
border-radius: 8px;
/* z-index: 9999; */
}
https://jsfiddle.net/k25cuax4/
Those two elements are siblings in your HTML code. However, a typical relative/absolute position pair where the absolutely positioned element is on top of the other one has position: relative for the parent element and position: absolute for the child.
So you eiter should change the HTML structure accordingly (i.e. move .menu into .main-page), or you can try to apply a negative z-index to .main-page to move it to the background. (i.e. z-index: -1).
Below is my solution for a pseudo element to ignore the padding, but it feels kind of "hacky" because I used negative margin on the pseudo element.
Is this solution is OK?
I also tried to use left: 0; top: 0;, but then I got my pseudo element positioned relative to the body of the page, not the element. Why?
CSS:
.block-header {
background-color: #3A658B;
height: 30px;
width: 100%;
line-height: 30px;
color: white;
font-size: 18px;
border-radius: 3px;
padding-left: 10px;
}
.block-header::before {
content: '';
position: absolute;
margin-left: -10px;
height: 30px;
width: 10px;
background-color: #1E3552;
border-radius: 3px 0px 0px 3px;
}
Using left: 0 is fine. That's the right method.
Except you haven't specified position: relative on the .block-header element.
Consider this:
A pseudo-element is considered a child of its DOM element.
An absolutely-positioned element is positioned relative to its nearest positioned ancestor.
When there is no positioned ancestor, the abspos element is positioned relative to the initial container (i.e., the HTML element / viewport).
.block-header {
background-color: #3A658B;
height: 30px;
line-height: 30px;
color: white;
font-size: 18px;
border-radius: 3px;
padding-left: 10px;
position: relative; /* NEW */
}
.block-header::before {
left: 0; /* NEW */
content: '';
position: absolute;
height: 30px;
width: 10px;
background-color: #1E3552;
border-radius: 3px 0px 0px 3px;
}
<div class="block-header">test</div>
See MDN for more information.
Is there any way to create the border on the left with css ?
Here is a way to do it using CSS; you are just layering a Parallelogram and a Rectangle:
.espanolIcon
{
width: 300px;
height: 100px;
padding-left: 30px;
}
.rectangle {
position: absolute;
top: 0px;
left: 200px;
width: 200px;
height: 100px;
background-color: green;
border-radius: 0px 0px 30px 40px;
}
.arrow-left {
position: absolute;
top: 0px;
width: 300px;
height: 100px;
background-color: green;
-webkit-transform: skew(22deg);
transform: skew(22deg);
border-radius: 0px 0px 30px 40px;
}
h1 {
color: white;
}
<div class="espanolIcon">
<div class="rectangle"><h1>Espanol</h1></div>
<div class="arrow-left"></div>
</div>
Use a zero-dimension :before with thick, partial borders
By adjusting the top/bottom and left/right values of border-width on the :before pseudo-element, you can effectively change the skew of the triangle. The left position can then be changed to properly align the pseudo-element.
a {
display: inline-block;
position: relative;
margin-left: 14px; /* Should counter `left` value of `a:before` */
padding: .5em 1em;
color: #fff;
font: bold 1em/1 sans-serif;
text-decoration: none;
text-transform: uppercase;
border-radius: 0 0 10px 10px;
background: #75bf41;
}
a:before {
content: '\200B'; /* zero-width non-breaking space */
display: block;
position: absolute;
top: 0;
left: -14px; /* Adjust to align */
width: 0;
height: 0;
border-width: 14px 8px; /* Adjust top/bottom and left/right to skew */
border-style: solid;
border-color: #75bf41 #75bf41 transparent transparent; /* Triangle orientation. */
}
Español
Full css could work, but you should use .png as background-image or perhaps you could use .svg as you can animate and/or change every point or pixel. You might be able to use just CSSbut it would take a lot of leveling and positioning and alot of layers of absolute and relative positioning. As Css would only change the full width of the element, and it can only be used to change the width of elements. What you can do is use .svg, you could map every pixel which could be animated.
I accomplished it using borders and pseudo elements.
<ul>
<li class="lang-item lang-item-6 lang-item-es">
::before
<a>Español</a>
</li>
</ul>
ul {
position:relative;
}
.lang-item {
text-align: right;
position: relative;
}
.lang-item a {
background: #76c53f;
padding: 15px;
color: #fff;
text-transform: uppercase;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 14px;
}
.lang-item::before {
position: absolute;
right: 101px;
top: -15px;
content: "";
display: inline-block;
border-top: 40px solid #76C541;
border-left: 40px solid transparent;
}
jsfiddle
I'm trying to add a box shadow on two elements, each with variable width. My desired result looks like this:
I've been trying to get to this result with a pseudo element covering the overlapping box shadows, but because they need to have transparency, I can't seem to find a solution in which there are neither small overlaps at the edges of the boxes nor the pseudo element adjusts to the correct width.
The top box does also not necessarily need a top border to solve my problem.
Fiddle
HTML:
<div>
<p></p>
</div>
<div>
<p></p>
</div>
SCSS:
div {
display: inline-block;
margin: 75px;
width: 200px;
height: 50px;
position: relative;
p {
position: absolute;
top: 100%;
left: 0;
height: 300px;
width: 250px;
}
&, p {
background: #ededed;
}
}
div:last-child p {
width: 150px
}
div {
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
p {
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
}
}
Edit:
Normally I wouldn't consider JS for layout but since in my particular case the boxes won't be visible until a user interaction occurs, I've used a script to solve my problem.
The script figures out if the top element is bigger than the bottom one when the dom is ready and adds a "big" or "small" class to it respectively. By knowing that, we know which element the pseudo-element's width should inherit. As long as the elements don't get resized in a way that would change which element is bigger, this works fine.
There is also a much cleaner solution without the need for JS and one pseudo element less in case one only needs box-sizing blur and no spread.
Fiddles:
Blur and spread combined (JS),
Only blur, no spread (No JS)
The end result is not quite perfect as you can see in this screenshot where all the white background is replaced with black:
When you look at the left box's top left, you can see that the border shadow has a slight curve.
Anyway, it's close enough to me.
If someone finds a solution with a similar result as in the first fiddle using only css, I would really appreciate it.
You have an easy solution for this, but it is an experimental feature and it has limited support.
Using a filter: drop shadow on the base element, the drop shadow applies to the composite result of this element, and all the descendants
div {
display: inline-block;
margin: 75px;
width: 150px;
height: 50px;
position: relative;
-webkit-filter: drop-shadow(0px 0px 5px rgba(255, 0,0,0.7));
filter: drop-shadow(0px 0px 2px red);
}
div p {
position: absolute;
top: 100%;
left: 0;
height: 300px;
width: 250px;
margin: 0px;
}
div, div p {
background: #ededed;
}
#second p {
width: 100px;
}
<div>
<p></p>
</div>
<div id="second">
<p></p>
</div>
An alternate approach, that will run in any browser, using pseudo elements for the shadows:
div {
display: inline-block;
margin: 75px;
width: 150px;
height: 50px;
position: relative;
}
div p {
position: absolute;
top: 100%;
left: 0;
height: 300px;
width: 250px;
margin: 0px;
}
div, div p {
background: #ededed;
}
#second p {
width: 100px;
}
div:after, p:after {
content: "";
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
box-shadow: 0px 0px 2px 6px rgba(0,255,0,0.7);
z-index: -10;
}
<div>
<p></p>
</div>
<div id="second">
<p></p>
</div>
An alternate approach is to clip the shadows. That is poorly suported, and needs lots of manual adjustements, but the end result is probably the best looking.
Demo working only in webkit
div {
display: inline-block;
margin: 75px;
width: 300px;
height: 50px;
position: absolute;
}
div p {
position: absolute;
top: 100%;
left: 0;
height: 100px;
width: 200px;
margin: 0px;
}
div, div p {
background: #ededed;
}
div:after, p:after {
content: "";
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
box-shadow: 0px 0px 15px 15px rgba(255,0,0,0.2);
z-index: -10;
}
p:after {
-webkit-clip-path: polygon(0% 30px, 230px 30px, 260px 60px, 100% 100%, 0% 100%);
}
div:after {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 260px 100%, 230px 80px, 0% 80px);
}
<div>
<p></p>
</div>
If you really need a plain color background instead of a background image, this shall work:
I used a div to create the empty area.
<div class="shad">
<div class="cover1"></div>
<p></p>
</div>
<div class="shad">
<div class="cover2"></div>
<p></p>
</div>
The paragraphs are set to same size as div.shad.
div.shad {
display: inline-block;
margin: 75px;
width: 250px;
height: 350px;
position: relative;
background: #ededed;
p {
position: absolute;
top: 0%;
left: 0;
width: 250px;
height: 350px;
}
.cover1 {
position: relative;
float: right;
margin-top: -2px;
margin-right: -2px;
width: 50px;
height: 50px;
background-color: white;
border-left: 2px solid rgba(0, 0, 0, 0.2);
border-bottom: 2px solid rgba(0, 0, 0, 0.2);
}
.cover2 {
position: relative;
float: right;
margin-top: 50px;
margin-right: -2px;
width: 50px;
height: 300px;
background-color: white;
border-top: 2px solid rgba(0, 0, 0, 0.2);
border-left: 2px solid rgba(0, 0, 0, 0.2);
}
}
div.shad {
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
}
I am trying to create a style using CSS and HTML. My desire style is something similar to this.
Most of things of that style have been done with pure CSS and HTML.
This is my CSS -
.filter-box {
float: left;
margin: 0 3% 0 2%;
width :29%;
> .main-cat {
background-color: #FFFFFF;
display: block;
margin-top: 25px;
padding: 10px;
position: relative;
> h3 {
margin: 0;
}
}
> .main-cat:after {
border-bottom: 15px solid rgba(0, 0, 0, 0);
border-left: 15px solid #FFFFFF;
border-top: 15px solid rgba(0, 0, 0, 0);
content: "";
height: 0;
margin-top: -15px;
position: absolute;
right: -14px;
top: 50%;
width: 0;
}
> .main-cat:first-child {
margin-top: 0;
}
> .sub-cat {
background: #FF9000;
margin-left: 25px;
margin-top: 5px;
padding: 8px 10px;
text-align: right;
> h4 {
margin: 0;
}
}
}
My problem is when I am trying to display a let border with a bold circle bullet on the left side of the sub category DIV.
Can any body tell me is this possible with pure CSS and HTML without using any image?
This is my code so far: JS BIN
Any comments would be greatly welcome.
Thank You.
Another possibilities would be to use background-image (gradients) and bullets of list-item , resized via font-size : DEMO
The CSS update could be :(see comment for explanation )
.filter-box {
background:linear-gradient(to right,
transparent 15px,
white 15px,
white 17px,
transparent 17px); /* draws the vertical bar aside list-items */
}
background:linear-gradient( /* draw orange background */
to right,
transparent 40px ,
#FF9000 40px),
linear-gradient(/* draw middle white bar */
to bottom,
transparent 49%,
white 48%,
white 52%,
transparent 51%
) right no-repeat;
background-size:
auto auto/* no need to resize first gradient */,
95% 100% /*reduce width of second gradient */;
display:list-item;/* lests get a round bullet if this is not a li */
color:white; /* give color to bullet */
font-size:2.2em;/* resize bullet */
list-style-position:inside;/* keep bullet inside element */
}
.filter-box > .sub-cat > h4 {
margin: 0;
font-size:0.6em;/* resize to a normal font-size from em value inherited */
display:inline-block;/* stands aside bullet */
text-align: right;/* align to right */
width:85%;/* keep min/max-width under control*/
}
Notice: no pseudo elements involved, gradient can be image for better compatibilitie and dispatch within main container , sub container and title for the background-color to increase compatibiliti with old browser.
As mentionned earlier , this menu/list deserve to be build from an HTML list.
Demo: http://jsfiddle.net/abhitalks/4LB5t/
CSS:
.sub-cat:before {
content: ' ';
border-left: 1px solid white;
display: inline-block;
width: 16px; height: 42px;
position: absolute;
left: 40px; margin: 0px; margin-top: -8px;
z-index: 10;
}
.sub-cat:after {
content: '';
display: inline-block;
width: 8px; height: 8px;
background-color: white;
border-radius: 50%;
position: absolute;
left: 36px; margin-top: -8px;
}
Update:
Demo 2: http://jsfiddle.net/abhitalks/4LB5t/1/
Just increase the height on .sub-cat:before.
Update 2:
Demo 3: http://jsfiddle.net/abhitalks/4LB5t/2/
Added your horizontal border as well. The only changes in the css are:
.sub-cat:before {
...
border-bottom: 1px solid white;
margin-top: -26px;
z-index: -1;
}
You have to tweak and tune the styles to achieve what you want. Hope that helps.
You can use the :before and :after elements in the sub-category to design the circle and left border.
Use the :before to make the circle as #megha outlined, and position it with the vertical center of the sub-cat.
Put the position of the .subcat as position: relative, so that you can define the positions of the absolutely positioned :before and :after in relation to the left edge of .subcat
Then use the :after and style it as
width: 2px;
height: 100%;
top: 0;
left: -10px
Hope this helps
Look at this pen. I have modified some of the styles in the answer to make it work. (SCSS syntax)
http://codepen.io/anon/pen/dJepq
.sub-cat {
background: #FF9000;
margin-left: 25px;
margin-top: 5px;
padding: 8px 10px;
text-align: right;
position: relative;
&:before {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #ff9000;
content: "";
position: absolute;
top: 12px;
left: -20px;
}
&:after {
width: 2px;
top: -5px;
bottom: 0;
left: -16px;
content: "";
position: absolute;
background-color: #ff9000;
}
}
}
Using :after and :before pseudo element you can achieve the result.
Check the DEMO.
Here is the CSS would be required.
.sub-cat:before{
content: "";
position:absolute;
left:25px;
height: 10px;
width: 10px;
border-radius: 50%;
background:white;
margin-top: 5px;
}
.sub-cat:after{
content: "";
position:absolute;
top:55px;
left:29px;
height:21%;
border-right: 1px solid white;
}
.sub-cat h4:before{
content: " ";
position:absolute;
left:32px;
width: 10px;
height: 10px;
transform:rotate(90deg);
-webkit-transform:rotate(90deg);
border-right: 1px solid white;}
.sub-cat h4:after{
content: " ";
margin-left:10px;
margin-top:4px;
position:absolute;
border-bottom: 8px solid rgba(0, 0, 0, 0);
border-left: 8px solid #000000;
border-top: 8px solid rgba(0, 0, 0, 0);
}
A circular bullet can be created using the html :
<div id="circle"></div>
and its corresponding css
#circle
{
width:10px;
height:10px;
border-radius:5px;
background-color:white;
}
I am unable to understand what "let border" means.Hope this helps!