I am trying to achieve the box-shadow inside the right-border, currently everything is working fine except the shadow is getting display outside the right border. Following is the js-fiddle sample code I have tried...
http://jsfiddle.net/5y1guk6d/1/
HTML:
<div class="header">
<div class="header-bar">
<h1 class="title">Page title</h1>
</div>
</div>
<div class="main">
<div class="left-bar">
<div class="menu">
Menu Content
</div>
</div>
<div class="content">
Main content area
</div>
</div>
CSS:
.header {
width: 100%;
height: 40px;
top: 0;
color: white;
}
.header-bar {
height: 100%;
overflow: hidden;
background-color: #009BE1;
}
h1.title {
display: inline-block;
font: bold 16px Arial, sans-serif;
margin: 0 5px 0 15px;
position: relative;
top: 25%;
}
.main {
width: 100%;
overflow: hidden;
position: absolute;
top: 48px;
bottom: 0;
}
/* left bar */
.left-bar {
width: 160px;
float: left;
padding:10px;
background-color: #F0F0F0;
height: 100%;
position: relative;
border-right:1px solid #aaa;
box-shadow:5px 0 5px #ccc;
}
.content {
overflow: hidden;
left: 12px;
padding: 5px 17px 5px 5px;
height: 100%;
position: relative;
}
Appreciated your help..
If you want the box shadow to appear inside of the element instead of outside, use inset. Then you want to invert the x-offset so it appears on the right side.
box-shadow:inset -5px 0 5px #ccc;
http://jsfiddle.net/5y1guk6d/3/
Related
I have two rectangles with a background effect. On their own, the hover function works well and translates the top div up and to the right, however I soon as I put this code into a flex container, the hover does not work anymore. Anybody know why? Heres the code without the flex container:
body {
padding: 100px;
margin: 0;
}
.box {
width: 200px;
height: 200px;
background-color: black;
border: solid 2px black;
border-radius: 15px;
z-index: -1;
display: inline-block;
}
.box2 {
position: relative;
width: 200px;
height: 200px;
left: 2px;
bottom: 5px;
background-color: white;
border: solid 2px black;
border-radius: 15px;
}
.box2:hover {
bottom: 8px;
left: 4px;
}
<body>
<div class="box">
<div class="box2">
</div>
</div>
<div class="box">
<div class="box2">
</div>
</div>
</body>
Add display: flex; to the body afterwards and the code wont work anymore.
Here is my try, I delete the z-index.
body {
padding: 100px;
margin: 0;
display: flex;
}
.box {
width: 200px;
height: 200px;
background-color: black;
border: solid 2px black;
border-radius: 15px;
display: inline-block;
}
.box2 {
position: relative;
width: 200px;
height: 200px;
left: 2px;
bottom: 5px;
background-color: white;
border: solid 2px black;
border-radius: 15px;
}
.box2:hover {
left: 8px;
bottom: 4px;
}
<body>
<div class="box">
<div class="box2">
</div>
</div>
</body>
I have an element which displays process arrows. If I reduce the screen size, the edges from the outer process steps are being cut off.
It seems, that the borders of the Bootstrap column get over the arrows.
How can I protect the element from being cut off?
<div class="row">
<div class="col-md-4">
<h2>Headline</h2>
</div>
<div class="col-md-4">
<div align="center" class='steps-container'>
<div class='steps active'>
<span>Step 1</span>
</div>
<div class='steps' routerLink="/Step2">
<span>Step 2</span>
</div>
<div class='steps'>
<span>Step 3</span>
</div>
</div>
</div>
<div class="col-md-4"> </div>
</div>
*,
*:after,
*:before {
box-sizing: border-box;
}
.steps-container {
overflow: hidden;
margin: 0px;
padding: 0px;
white-space: nowrap;
border-left: 0px solid;
border-right: 0px solid;
width: 100%;
counter-reset: steps;
}
.steps {
position: relative;
display: inline-block;
left: -28px; /* -2px default + 26px offset to hide skewed area on the left side of first element*/
height: 50px;
line-height: 50px;
margin-left: 0px;
margin-right: 0px;
counter-increment: steps;
cursor: pointer;
transition: background 1s;
min-height: 50px;
min-width: 150px;
}
.steps:after,
.steps:before {
position: absolute;
left: 0px;
height: 50%;
width: 100%;
border-top: 2px solid;
border-bottom: 2px solid;
border-left: 3px solid; /* thicker border as skew makes them look thin */
border-right: 3px solid;
}
.steps:before {
transform: skew(45deg);
top: 0px;
border-bottom: none;
transform-origin: top left;
}
.steps span {
display: block;
padding-left: 40px;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
height: 75%;
}
...
I'm trying to add page-to-top code to a page. Everything works fine except for the positioning of the "to top" button.
I've shown the problem in this jsfiddle. You can see the To Top in the lower right. I need it to be in the lower right of the middle div.
My code is below. I looked up the fixed position description and it says it aligns to the viewport. Is there a way to override that so it aligns to a specific div?
.layout {
float: left;
width: 150px;
height: 200px;
border: 1px solid red;
}
#toTop {
padding: 5px 3px;
position: fixed;
bottom: 0;
right: 5px;
z-index: 100;
}
<div>
<div class="layout">Left column</div>
<div class="layout">Middle column
<span id="toTop">To Top</span>
</div>
<div class="layout">Right column</div>
</div>
You should add position: relative; to .layout and position: absolute; to #toTop. The absolute positioned element will have its relative parent as base
.layout {float:left; width:150px;height:200px;border:1px solid red;position: relative;}
div > span { position: absolute; right: 0; bottom: 0; }
https://jsfiddle.net/oe9fqv3p/13/
This will do it for you.
I added the relative position and in the div > span positioned it absolute and right 0 and bottom 0
I have changed couple of styles in your CSS code. The example is here
https://jsfiddle.net/2yms90qz/
Though i am not sure if you want something like this. Please let me know.
I have removed float from your divs and added inline-block as display. Also changed some position value to achieve the result.
.layout {display: inline-block; width:150px;height:200px;border:1px solid red;}
.middle {
position: relative
}
#toTop {
/* padding: 5px 3px; */
position: absolute;
bottom: 0;
right: 0;
z-index:100;
}
<div>
<div class="layout">Left column</div>
<div class="layout middle">Middle column
<span id="toTop">To Top</span>
</div>
<div class="layout">Right column</div>
</div>
.layout should be positioned and .top should be absolute.
.layout{
position:relative;
}
.top{
position :absolute
}
please see
https://jsfiddle.net/ainouss/39ezf0yj/1/
If you want to keep that "To Top" button always visible on the bottom of the viewport, then you would have to position it relative to the viewport in a way that it matches the location you want, relative to the parent.
body {
margin: 0;
font-family: monospace;
}
.container {
display: flex;
height: 200vh;
width: 90vw;
border: 3px solid red;
margin: 10px auto;
}
.layout {
border-left: 3px solid red;
width: 33.33333333%;
text-align: center;
padding: 10px;
}
.layout:first-child{
border-left: none;
}
#totop {
font-family: monospace;
border: 3px solid red;
background: white;
padding: 10px;
position: fixed;
bottom: 10px;
z-index: 100;
right: calc(35vw + 10px);
outline: none;
}
#totop:hover {
background: red;
color: white;
}
<div class="container">
<div class="layout">Left column</div>
<div class="layout">Middle column
<button id="totop">TO TOP</button>
</div>
<div class="layout">Right column</div>
</div>
<div class="container">
<div class="layout">Something else here.</div>
<div>
Note, however, that as you pointed out in your comment, this means the "To Top" would still be visible even when you scroll past that first .container element.
To avoid that, if you just want that button to be at the bottom of its column, even if that's outside of the viewport and the user needs to scroll down to get to it, then you should use position: absolute instead and also add position: relative to .layout:
body {
margin: 0;
font-family: monospace;
}
.container {
display: flex;
height: 200vh;
width: 90vw;
border: 3px solid red;
margin: 10px auto;
}
.layout {
position: relative;
border-left: 3px solid red;
width: 33.33333333%;
text-align: center;
padding: 10px;
}
.layout:first-child{
border-left: none;
}
#totop {
font-family: monospace;
border: 3px solid red;
background: white;
padding: 10px;
position: absolute;
bottom: 10px;
right: 10px;
outline: none;
}
#totop:hover {
background: red;
color: white;
}
<div class="container">
<div class="layout">Left column</div>
<div class="layout">Middle column
<button id="totop">TO TOP</button>
</div>
<div class="layout">Right column</div>
</div>
<div class="container">
<div class="layout">Something else here.</div>
<div>
To get the best of both worlds, and make the "To Top" button stay at the bottom of the viewport until the end of the first .container is reached, and remain inside it when the user scrolls past it, you could use position: sticky:
body {
margin: 0;
font-family: monospace;
}
.container {
display: flex;
height: 200vh;
width: 90vw;
border: 3px solid red;
margin: 10px auto;
}
.layout {
position: relative;
border-left: 3px solid red;
width: 33.33333333%;
text-align: center;
padding: 10px;
}
.layout:first-child{
border-left: none;
}
#totop {
position: -webkit-sticky;
position: -ms-sticky;
position: sticky;
font-family: monospace;
border: 3px solid red;
background: white;
padding: 10px;
top: calc(100vh - 49px);
float: right;
outline: none;
}
#totop:hover {
background: red;
color: white;
}
<div class="container">
<div class="layout">Left column</div>
<div class="layout">Middle column
<button id="totop">TO TOP</button>
</div>
<div class="layout">Right column</div>
</div>
<div class="container">
<div class="layout">Something else here.</div>
<div>
The only problem with this approach could be browser support.
In that case, if you really need this feature/behaviour, you could implement your own sticky element using JS and listening for the onscroll and 'onresize' events.
Alternatively, you can use JS to check if position: fixed is supported and apply one solution or another:
const hasSticky = (() => {
const el = document.createElement('div');
el.style.cssText = "position:sticky;position:-webkit-sticky;position:-ms-sticky;";
return el.style.cssText.indexOf('sticky')!==-1;
})();
if (hasSticky) {
document.getElementById('totop').classList.add('sticky');
}
body {
margin: 0;
font-family: monospace;
}
.container {
display: flex;
height: 200vh;
width: 90vw;
border: 3px solid red;
margin: 10px auto;
}
.layout {
position: relative;
border-left: 3px solid red;
width: 33.33333333%;
text-align: center;
padding: 10px;
}
.layout:first-child{
border-left: none;
}
#totop {
font-family: monospace;
border: 3px solid red;
background: white;
padding: 10px;
position: absolute;
bottom: 10px;
right: 10px;
outline: none;
}
#totop.sticky {
position: -webkit-sticky;
position: -ms-sticky;
position: sticky;
bottom: auto;
top: calc(100vh - 49px);
right: auto;
float: right;
}
#totop:hover {
background: red;
color: white;
}
<div class="container">
<div class="layout">Left column</div>
<div class="layout">Middle column
<button id="totop">TO TOP</button>
</div>
<div class="layout">Right column</div>
</div>
<div class="container">
<div class="layout">Something else here.</div>
<div>
I changed the scroll code I was using to look for the last button on the page and to hide the To Top button when it reached it. Here is my updated jsfiddle and code. The numbers are not quite correct but I'm just posting this in case someone else runs across this problem. I'm not sure if it is the best solution but I've tested it here and it seems to work fine. My tnaks to all who replied.
<style>
.container {
display: flex;
height: 150vh;
width: 100vw;
}
.layout {float:left; width:150px;height:250px;border:1px solid red;}
.layout-middle {position:relative;float:left; width:150px;height:250px;border:1px solid red;}
#toTop {
font-family: monospace;
border: 3px solid red;
background: white;
padding: 10px;
position: fixed;
bottom: 60px;
z-index: 100;
right: calc(45.33333333% + 10px);
outline: none;
}
</style>
<div class="container">
<div class="layout">Left column</div>
<div class="layout-middle">Middle column
<span id="toTop">To Top</span>
</div>
<div class="layout">Right column</div>
</div>
<div><button id="button-isvisible">Button</button></div>
<script>
$(document).ready(function($){
var offset = 20;
var duration = 500;
$(window).scroll(function() {
var continue_button_pos = $('#button-isvisible').offset();
var button_top = continue_button_pos.top - 350 ;
if ($(this).scrollTop() > button_top) {
$('#toTop').fadeOut(duration);
} else if ($(this).scrollTop() > offset) {
$('#toTop').fadeIn(duration);
} else {
$('#toTop').fadeOut(duration);
}
});
});
</script>
I have 3 div blocks, the first one is bigger on the left hand side of the web-page and the other are smaller in located the right hand side. I want their relative location become fixed in all browsers with any zoom level. The two div blocks in the right column drop down below the first big div if I zoom in now.
Here is JFFIDDLE link of the code, please zoom in/out to see the issue.
<div id="topdiv">
<div class="bigdiv">
<p> big div </p>
</div>
<div id="staticcal">
<p> staticcal </p>
</div>
<div id="staticnews">
<p> staticnews </p>
</div>
</div
#topdiv{
display: inline-block;
background-color:#b0c4de;
}
.bigdiv{
margin: 10px 0;
position: relative;
width: 335px;
height: 250px;
float: left;
border: 2px solid #c7930d;
}
#staticcal {
width: 220px;
height: 100px;
line-height: 175px;
float: right;
display: inline-block;
border: 2px solid #c7930d;
border-radius: 4px;
margin: 5px;
margin-top: 10px;
margin-right: 0px;
position: relative;
}
#staticnews {
width: 220px;
height: 100px;
line-height: 175px;
float: right;
display: inline-block;
border: 2px solid #c7930d;
border-radius: 4px;
margin: 5px;
margin-right: 0px;
position: relative;
}
Add min-width: 800px; to the #topdiv id in your CSS file.
CSS:
#topdiv {
display: inline-block;
background-color:#b0c4de;
min-width: 800px;
}
I noticed that you are using border-radius in your development, so I updated your file to account for cross browser use. Here is an updated JSFiddle for your review. Additionally I lined up your staticcal and staticnews by adding float: left. Here is a minified version of your code: CLICK HERE
HTML:
<div id="topdiv">
<div class="bigdiv">
<p>big div</p>
</div>
<div id="staticcal">
<p>staticcal</p>
</div>
<div id="staticnews">
<p>staticnews</p>
</div>
</div>
CSS:
#topdiv {
display: inline-block;
background-color:#b0c4de;
min-width: 800px;
}
.bigdiv, #staticcal, #staticnews {
position: relative;
float: left;
border: 2px solid #c7930D;
}
.bigdiv {
margin: 10px 0;
width: 335px;
height: 250px;
}
#staticcal, #staticnews {
display: inline-block;
line-height: 175px;
width: 220px;
height: 100px;
margin: 5px;
margin-top: 10px;
margin-right: 0px;
-webkit-border-radius: 4px; /*This will address iOS 1 to 3.X, Android 1.6-2.1, Safari 3 - 4*/
-moz-border-radius: 4px; /*Firefox 1 to 3.6*/
border-radius: 4px; /*IE 9+, Opera 10.5, Chrome, Safari 5, FireFox 4+, iOS 4, Android 2.1+,
}
p {
text-align: center;
}
Please help. I want to achieve that text and button on yellow box be alligned left and right (text on left side - margin 20 px; button on right side - margin 20 px) and menu in footer aligned with yellow box.
I can't add picture, sorry.
Edit: Added JSFiddle - http://jsfiddle.net/wqBEf/
This is my css code:
#page
{
width: 960px;
margin-left: auto;
margin-right: auto;
border: 1px solid red;
background-color: blue;
}
#page > #main
{
border: 1px solid #000;
width: 650px;
margin-left: auto;
margin-right: auto;
background: white;
border-radius: 5px;
margin-top: 20px;
}
#main > #inner
{
margin: 20px;
}
#page-title h1
{
font-size: 24px;
text-align: center;
}
#footer-hotline
{
height: 50px;
background-color: rgb(255,207,0);
border-radius: 5px;
box-shadow: 0px 3px 3px #999999;
margin-top: 20px;
border: 1px solid #000;
width: 650px;
margin-left: auto;
margin-right: auto;
position: relative;
z-index: 2;
}
#footer-hotline > .part
{
float: left; width: 33%;
margin-left: 20px;
line-height: 50px;
font-size: 16px;
font-weight: bold;
}
#footer-hotline > .part input
{
vertical-align:middle;
}
#footer
{
margin-top: -25px;
height: 100px;
line-height: 25px;
background-color: white;
text-transform: uppercase;
border: 1px solid black;
}
#footer > .link
{
float: left;
border-right: 1px solid #000;
margin-top: 50px;
}
#footer > .link > div
{
margin-left: 5px;
margin-right: 5px;
}
And this is my html code:
<div id="page">
<div id="main">
<div id="inner">
<div id="page-title">
<img src="myLogo.png" alt="Schulz logo" />
<h1>Some title</h1>
</div>
<div id="content">RenderBody</div>
</div>
<div class="f-c"></div>
</div>
<div id="footer-hotline">
<div class="part">Hotline: 0800/888 888</div>
<div class="part"><input type="submit" class="button" id="callback-button" value="callback" name="callback-button" /></div>
</div>
<div class="f-c"></div>
<div id="footer">
<div class="link"><div>GTC</div></div>
<div class="link"><div>About</div></div>
<div class="link"><div>Help</div></div>
<div class="link"><div>Language</div></div>
</div>
Thanx for answers, suggestions and comments.
See http://jsfiddle.net/wqBEf/1/ for an update.
Noteworthy changes.
I added left align-left and right align-right classes set for float and for text alignment, respectively.
I set your links to display: inline because it is the easiest way to center a list of items horizontally.
Those were the main two changes. The rest of the changes were just to support the above two, such as removing/adding some margins.
You could use the :first-child pseudo-class for the issue of getting the two items to work together (this will only work if you have only two at any one time). It's also well supported going back to IE7
You also need to implement float:right, direction:rtl, and margin-right:
#footer-hotline > .part
{
float: right; width: 33%;
direction: rtl;
margin-right: 20px;
line-height: 50px;
font-size: 16px;
font-weight: bold;
}
#footer-hotline > .part:first-child
{
direction: ltr;
float: left;
margin-left: 20px;
}
Eli Gassert's answer should suffice for centering the nav
Source: http://jsfiddle.net/YZ2Uz/
Demo: http://jsfiddle.net/YZ2Uz/show