I have two div's the first one with a zig-zag bottom border and an image should be on both div's, the image always go behind the zig-zag border. i tried the z-index property but it did not work. can someone help with this issue? or is there any another approach to draw the zigzag border ?thanks in advance.
#d-wrapper {
background-color: #950051;
}
#d-wrapper * {
margin:0;
padding:0;}
#d-wrapper div.sep {
min-height: 200px;
padding: 32px 0;
}
#d-wrapper div > * {
margin: 0 40px;
}
#d-wrapper .zig-zag-bottom{
margin: 32px 0;
margin-top: 0;
background: #1ba1e2;
padding: 32px 0;
}
#d-wrapper p,
#d-wrapper h1{
font-size:2em;
text-align:center;
color:#fff;
font-family:"PT Sans Narrow", "Fjalla One", sans-serif;
font-weight:900;
text-shadow:1px 1px 0 #1b90e2, 2px 2px 0 #1b90e2, 3px 3px 0 #1b90e2, 4px 4px 0 #1b90e2, 5px 5px 0 #1b90e2;
}
#d-wrapper div.sec-dev p,
#d-wrapper div.sec-dev h1 {
text-shadow:1px 1px 0 #888, 2px 2px 0 #888, 3px 3px 0 #888, 4px 4px 0 #888, 5px 5px 0 #888;
color: #fff;
}
#d-wrapper h1{
font-size:4em;
}
#d-wrapper .zig-zag-bottom:after{
background:
linear-gradient(-45deg, transparent 16px, #1ba1e2 0),
linear-gradient(45deg, transparent 16px, #1ba1e2 0);
background-repeat: repeat-x;
background-position: left bottom;
background-size: 22px 32px;
content: "";
display: block;
width: 100%;
height: 32px;
position: relative;
top:64px;
left:0px;
}
#d-wrapper p{
text-align: center;
}
p {
text-align: center;
}
<div id="d-wrapper">
<div class="zig-zag-bottom">
<h1>Title 1</h1>
<p>Content 1</p>
<img src="https://images.vexels.com/media/users/3/131677/isolated/preview/5517f3c8facf7ff407aaa7752c00e8a5-paintbrush-tool-by-vexels.png" alt="Smiley face" width="160px" height="180px" style="margin-bottom: -150px;">
</div>
<div class="sec-dev">
<h1>Title 2</h1>
<p>Content</p>
</div>
For z-index to work, the element needs to be non-static.
Along with z-index try applying position: relative on the image.
Related
I have tried the above shape. but can not able to achieve this
.left {
background: linear-gradient( -90deg, #fff, #fff 38%, red 22%) !important;
border: 1px solid blue;
margin-left: -9px;
box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
border-radius: 50%;
bottom: 0;
height: 18px;
left: 0;
margin: auto 0;
position: absolute;
top: 0;
transition: all 0.2s linear;
width: 18px;
}
.right {
background-color: transparent;
border: 1px solid blue;
box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%) !important;
border-radius: 50% !important;
bottom: 0 !important;
height: 18px !important;
margin: auto 4px !important;
position: absolute !important;
top: 0 !important;
transition: all 0.2s linear !important;
width: 18px !important
}
<div class="left"></div>
<div class="right"></div>
You could accomplish this by carefully stacking three circles in a wrapper:
A filled circle on the right
A hollow circle atop it to the left
Another hollow circle at the top of the stack on the right
That said, I'd tend to agree with #Paulie_D that this may not be worth the effort to do w/ plain markup, and that SVG would be better.
See it working below:
.wrapper {
width: 60px;
position: relative;
}
.circle {
height: 40px;
width: 40px;
border-radius: 40px;
border: 2px solid blue;
}
.filled {
background-color: blue;
}
.fill-white {
background-color: white;
}
.left {
position: absolute;
left: 0;
}
.right {
position: absolute;
right: 0;
}
<div class="wrapper">
<div class="circle filled right"></div>
<div class="circle fill-white left"></div>
<div class="circle right"></div>
</div>
gradient coloration can help you here. Hover the below to see the result
.box {
width:100px;
height:100px;
border:2px solid blue;
box-sizing:border;
border-radius:50%;
position:fixed;
top:0;
left:100px;
}
.box + .box {
left:180px;
transition:0.5s;
background:
radial-gradient(
circle 50px /* half the width/height of the circle*/
at 152px 52px, /* 152px = 100px (left) + 50px + 2px (border) 52px = 0 (top) + 50px + 2px (border)*/
blue 98%,#0000) fixed;
}
html:hover .box + .box {
left:20px;
}
<div class="box"></div>
<div class="box"></div>
Is it possible to add padding or margin around the scrollbar item or scrollbar-track? I've tried and can only get padding top/bottom. Adding padding to the UL has no effect on scrollbar. Negative margins on scrollbar have no effect. Ideas? JS Fiddle here.
::-webkit-scrollbar {
width: 12px;
margin:10px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
padding: 10px
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255,0,0,0.8);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0.4);
You can see an example below, basically forget adding margin or padding there, just increase the width/height of scroll area, and decrease the width height of thumb/track.
Quoted from how to customise custom scroll?
body {
min-height: 1000px;
font-family: sans-serif;
}
div#container {
height: 200px;
width: 300px;
overflow: scroll;
border-radius: 5px;
margin: 10px;
border: 1px solid #AAAAAA;
}
div#content {
height: 1000px;
outline: none;
padding: 10px;
}
::-webkit-scrollbar {
width: 14px;
}
::-webkit-scrollbar-thumb {
border: 4px solid rgba(0, 0, 0, 0);
background-clip: padding-box;
border-radius: 9999px;
background-color: #AAAAAA;
}
<div id="container">
<div id="content" contenteditable>
Click to type...
</div>
</div>
I created a margin-right effect using border-right on the scrollbar-thumb:
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-thumb {
background: red;
border-right: 4px white solid;
background-clip: padding-box;
}
The scrollbar appears to have width 4px and margin-right 4px.
Here's a fiddle as well: https://jsfiddle.net/4kgvL93h/3/
You can add a margin to the scrollbar track;
#someID ::-webkit-scrollbar-track{
border-radius: 15px;
margin: 40px;
box-shadow: inset 7px 10px 12px #f0f0f0;
}
This solution make a real space between content and scrollbar (if a scrollable element doesn't have a transparent background). Useful for window scrollbars.
.scroll {overflow:auto;}
.scroll::-webkit-scrollbar {
width:16px;
height:16px;
background:inherit;
}
.scroll::-webkit-scrollbar-track:vertical {
border-right:8px solid rgba(0,0,0,.2);
}
.scroll::-webkit-scrollbar-thumb:vertical {
border-right:8px solid rgba(255,255,255,.2);
}
.scroll::-webkit-scrollbar-track:horizontal {
border-bottom:8px solid rgba(0,0,0,.2);
}
.scroll::-webkit-scrollbar-thumb:horizontal {
border-bottom:8px solid rgba(255,255,255,.2);
}
.scroll::-webkit-scrollbar-corner,
.scroll::-webkit-resizer {background:inherit;
border-right:8px solid rgba(255,255,255,.2); //optional
border-bottom:8px solid rgba(255,255,255,.2); //optional
}
Simply use the margin-block
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px F2F2F2;
border-radius: 0px;
margin-block: 15px;
}
#container{
height:400px;
background-color:white;
overflow-y:scroll;
border-radius:25px;
}
#content{
height:700px;
background-color:yellow;
padding:25px;
}
::-webkit-scrollbar{
width: 5px;
}
/* Track */
::-webkit-scrollbar-track{
box-shadow: inset 0 0 5px F2F2F2;
border-radius: 0px;
margin-block: 25px;
}
/* Handle */
::-webkit-scrollbar-thumb{
background: #8B8B8B;
border-radius: 27px;
border: 4px solid rgba(0, 0, 0, 0);
}
<div id="container">
<div id="content">
<br>
Click to type...
<br>
</div>
</div>
Another important attribute to add vertical or horizontal margin:
::-webkit-scrollbar-track {
margin: 0 30px;
}
With border-radius, neither box-shadow works properly nor does background-clip: padding-box.
I created a parent div on top of the div which needs scrolling. And fixed the height of parent div and put padding right in the child div. That worked well for my case.
<div class="parent h-10 overflow-scroll">
<div class="scroll child pr-2">
<!-- CONTENT -->
</div>
</div>
I'm in a bit of an overflow conundrum right now.
I have a layout that is supposed to have a white container with rounded corners. The footer (which is at the bottom of the container, and inside of it) is a shade of grey. I used 'overflow-x:hidden' to make sure the bottom corners of the footer div were rounded with the container.
The problem is, when I hide the overflow, the css ribbon (that I'm using in the header) folds are hidden.
I'm trying to figure out a way to rearrange the DIVs to achieve a layout that has the rounded corners and the ribbon at the top, but am having trouble.
I am using WordPress along with Bootstrap to code my layout. Here's my code as it stands (without the hidden overflow).
CSS:
.container {
clear: both;
margin: 20px auto;
width: 940px;
background: #fff;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
position: relative;
z-index: 90; /* the stack order: displayed under ribbon rectangle (100) */
/* overflow-x: hidden; */
*zoom: 1;
}
/* Ribbon
-------------------------------------------------*/
.rectangle {
background: #80D4F6;
height: 50px;
width: 970px;
position: relative;
left:-15px;
top: 30px;
float: left;
-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.35);
-khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.35);
-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.35);
z-index: 100; /* the stack order: foreground */
margin: -30px 0px 0px;
}
.rectangle h2 {
font-size: 40px;
font-family: 'Grand Hotel', cursive, Georgia, helvatica;
color: #fff;
padding-top: 6px;
text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
text-align: center;
}
.rectangle h2 a{
color: #FFFFFF;
}
.triangle-l {
border-color: transparent #7d90a3 transparent transparent;
border-style:solid;
border-width:15px;
height:0px;
width:0px;
position: relative;
left: -30px;
top: 35px;
z-index: -1; /* displayed under bubble */
}
.triangle-r {
border-color: transparent transparent transparent #7d90a3;
border-style:solid;
border-width:15px;
height:0px;
width:0px;
position: relative;
left: 940px;
top: 5px;
z-index: -1; /* displayed under bubble */
}
/* Footer
-------------------------------------------------*/
.site-footer{
padding-top: 10px;
background: #f6f6f6;
}
And here is how the HTML is formatted:
<div class="container">
<div class="row">
<div class="span12">
NAV
<div class="rectangle"><h2>SITE TITLE</h2></div>
<div class="triangle-l"></div> <!-- Left triangle -->
<div class="triangle-r"></div> <!-- Right triangle -->
SLIDESHOW
</div>
</div>
<div class="row">
<div class="span8">
CONTENT
</div>
<div class="span4">
SIDEBAR
</div>
</div>
<footer class="site-footer" role="contentinfo">
<div class="row">
FOOTER
</div>
</div>
</div>
The issue can be seen here(the footer's corners aren't rounded because I "unhid" the overflow to allow the ribbon folds to show).
Any help would be greatly appreciated.
add this css in you style.css file
.site-footer {
border-radius:0 0 10px 10px;
-webkit-border-radius:0 0 10px 10px;
-moz-border-radius:0 0 10px 10px;
}
I have a circle which have both inside and outside box-shadow, but there is 1px unwanted border. Would anyone please help me to understand why this is happening with only circle and share the solution.
.wrapper {
padding: 30px;
}
.circle {
width: 120px;
height: 120px;
border-radius: 50%;
box-shadow: inset 0 0 0 16px #f9f9f9, 0 0 0 16px #f1f1f1;
background: #32a500;
}
<div class="wrapper">
<div class="circle"></div>
</div>
I think box-shadow: inset is messing up with border-radius.
While waiting for other solutions, you can always avoid using inset and apply instead a border, removing manually the 32px (16px + 16px) from the height and width of your div.
.wrapper {
padding: 30px;
}
.circle {
border-radius: 50%;
background: #32a500;
box-shadow: 0px 0px 0px 16px #f1f1f1;
border: 16px solid #f9f9f9;
width: 88px;
height: 88px;
}
<div class="wrapper">
<div class="circle"></div>
</div>
updated code with help of #Andrea Ligios
.wrapper {
padding: 30px;
}
.circle {
border-radius: 50%;
background: #32a500;
box-shadow: 0px 0px 0px 16px #f1f1f1;
border: 16px solid #f9f9f9;
width: 120px;
height: 120px;
box-sizing: border-box;
}
<div class="wrapper">
<div class="circle"></div>
</div>
Website:
http://younani.com/finalsite/finalindex.html
My header aligns when the browser is not maximized. When I maximized it to moves and is not aligned. How can I align it so that it will never move. I want it to be in the exact same position as the rest of the content material underneath it
CSS:
#header {margin-left:50px; align: center;
}
#container {
background-color: #FAFAFA;
color: #003300;
font-family: Arial, Helvetica, sans-serif; background-position: center; background-size: cover;
}
#h2 {text-align: center;}
#container {
margin-right:auto;
margin-left:auto;
background-image:url('backgroundflower5.jpg');
min-width:1000px;
max-width:1000px;
padding:0px 70px 50px 70px;
border:1px ridge #000000;
border-radius:20px;
-webkit-box-shadow:inset -3px -3px -3px 3px #18cad0;
-moz-box-shadow:inset -3px -3px 3px 3px #00332B;
box-shadow:inset -3px -3px 1px .9px black;
width: 960px;
margin: 0 auto;
}
#container div {
}
#header {}
#center2 {
float: left;
margin: 10px 0 10px 20px;
min-width: 200px; width: 494px; border-radius:8px;
}
#centerO {float: left;
margin: 10px 0 10px 20px;
min-width: 200px; font-family: "Comic Sans MS", cursive, sans-serif; background-color: #FFFFFF;
width: 494px; border-radius:8px; text-align: left; box-shadow:inset 1px 1px 10px 1px #000000; }
#center {box-shadow:inset 1px 1px 10px 1px #000000;}
#left,
#center,
#right {
float: left; margin: 10px 0 10px 20px;
min-width: 200px;
}
#center {font-family: "Comic Sans MS", cursive, sans-serif; background-color: #FFFFFF;
width: 494px; border-radius:8px; text-align: center;
}
.clear {
clear: both;
}
#right2 {float: left;
margin: 10px 0 10px 20px; border: 0px;
min-width: 200px;}
#right { font-family: Impact, Charcoal, sans-serif; border-radius:8px; background-color: #FFFFFF; box-shadow:inset 1px 1px 10px 1px #000000; text-align: center;}
#left a {font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
display: block;
padding: 10px 20px;
background: -moz-linear-gradient(
top,
#ffffff 0%,
#2a07ed);
background: -webkit-gradient(
linear, left top, left bottom,
from(#ffffff),
to(#2a07ed));
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
border: 3px solid #ffffff;
-moz-box-shadow:
0px 3px 11px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(026,020,219,1);
-webkit-box-shadow:
0px 3px 11px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(026,020,219,1);
box-shadow:
0px 3px 11px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(026,020,219,1);
text-shadow:
0px -1px 0px rgba(000,000,000,0.2),
0px 1px 0px rgba(255,255,255,0.3);
}
figure{}
#left a:link { background-color: #E6E6E6; }
#left a:visited { background-color: #E6E6E6; }
#left a:hover {border: 3px inset #333333; }
#left ul { list-style-type: none;
margin: 0;
padding-left: 0; }
#footer { text-align: center; font-family: Audimat;
clear: both; width:38%;
border-radius: 8px;
background-color:white;
text-align:center; margin-right:auto;
margin-left:auto; box-shadow:inset 1px 1px 10px 1px #000000;}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Younani Flower's</title>
<meta charset="utf-8">
<link rel="stylesheet" href="final.css" />
</head>
<body>
<div id="header"><img src="header88.png" alt="header" height="200" width="1150" align="left:100px" /></div>
<div id="container" class="clearfix"><!-- Header --> <!-- Left Column -->
<div id="left">
<ul>
<li>Home</li>
<li>Gallery</li>
<li>Occasions</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
<!-- Center Column -->
<div id="center">
<p><strong>In-store Specials</strong></p>
<p>Dozen Red Roses: $12.99</p>
<p>Bouquet of TEN different garden flowers: $19.99</p>
<p>Small glass vases: $9.99 <br /> Medium glass vases $14.99 <br /> Large glass vases: $19.99</p>
<p>Buy THREE of the any vases and receive the fourth one FREE!</p>
</div>
<!-- Right Column -->
<div id="right">
<p><span style="text-decoration: underline;"><strong>Birth Month Flowers<strong></strong></strong></span></p>
<p>January Carnation</p>
<p>February Iris</p>
<p>March Daffodil</p>
<p>April Daisy</p>
<p>May Lily</p>
<p>June Rose</p>
<p>July Delphinium</p>
<p>August Dahlia</p>
<p>September Aster</p>
<p>October Calendula</p>
<p>November Chrysanthe</p>
<p>December Poinsettia</p>
</div>
<!-- Footer -->
<div id="footer" class="clear">
<div class="nav"><b>Home Gallery Occasions About Us Contact Us </b></div>
</div>
</div>
<!-- #container -->
<p></p>
</body>
</html>
you are using margin-left:50px; use instead margin :0 auto;
#header {
margin: 0 auto;
width: 1150px;
}
what margin-left it does
so it will be 50px left form the browser and on difference width it will looks difference so the better approach is use margin:0 auto;
margin:0 auto makes always in center
Define your #header with or margin : 0 auto as like this
#header {
margin: 0 auto;
width: 1150px;
}
Results is
Your content should be wrapped in a container div that contains all of your content. it can be fixed width for consistency if that's what you're looking for, or fluid using other css properties to support that.