Develop Reference

Draw Line in the middle of the line [duplicate]

This question already has answers here:
Add centered text to the middle of a horizontal rule [duplicate]
(33 answers)
CSS technique for a horizontal line with words in the middle
(34 answers)
Closed 2 years ago.
I was wondering how can I implement this image with CSS(3) (and if necessary with javascript).
Any ideas?

There are numerous ways of doing this- but since your lines are more than 1 pixel in height and has rounded ends on both ends of both lines - I would di it as ::before and ::after pseudo-elements with the centered text.
Note that when positioning elements with position:absolute - you will need to apply position: relative to a parent element. Aslo - you will need to offset the line pseudoelements by half their height - in order to vertically center them.
.wrapper {
text-align: center;
position: relative;
}
span {
display: inline-block;
width: 10%;
font-size: 20px;
font-weight: bold
}
.wrapper::before,
.wrapper::after {
content: ' ';
display: block;
position: absolute;
top: calc(50% - 3px);
width: 45%;
background: black;
border-radius: 6px;
height: 6px;
}
.wrapper::after {
right: 0;
}
<div class="wrapper">
<span>Hi!</span>
</div>

Position fixed is not working inside container? [duplicate]

This question already has answers here:
'transform3d' not working with position: fixed children
(10 answers)
Why does applying a CSS-Filter on the parent break the child positioning?
(4 answers)
Fixed position but relative to container
(31 answers)
Closed 2 years ago.
I am working on my react-app in which I am creating a horizontal scroll website (for which I have rotated my container). I want to create a static navbar inside my div and on the other hand, when I place my navbar inside any other component its working. How can I achieve this? Please kindly help me. Here is my code:
<>
<div
className="outer-wrapper"
id="outer-wrapper"
ref={outerWrapper}
onScroll={onScrollFunction}
>
{/* <Header /> */}
<div className="wrapper">
<div className="navmenu">
<h1>Logo</h1>
<button>Menu</button>
</div>
<HomePage />
<AnimationMain
tags="<h1><span>Animation</span> that Works like magic.</h1>"
data={pageDataArr[0]}
anim={animationPageAnim}
videoData={videoData}
servicesInfo={servicesInfoAnimation}
label={labelArr[0]}
/>
<AnimationMain
tags="<h1><span>Design</span> is intelligence made visible.</h1>"
data={pageDataArr[1]}
anim={animationPageAnim}
label={labelArr[1]}
/>
<AnimationMain
data={pageDataArr[2]}
anim={animationPageAnim}
label={labelArr[2]}
/>
<AnimationMain
tags="<h1>Making <span>Website</span> that capture Users.</h1>"
data={pageDataArr[3]}
anim={WebDevPageAnim}
label={labelArr[3]}
videoData={imageData}
servicesInfo={servicesInfoWebDev}
/>
<AnimationMain
data={pageDataArr[4]}
anim={animationPageAnim}
label={labelArr[4]}
/>
</div>
</div>
</>```
.outer-wrapper {
width: 100vh !important;
height: 100vw;
transform: rotate(-90deg) translateX(-100vh);
transform-origin: top left;
overflow-y: scroll;
overflow-x: hidden !important;
position: absolute;
top: 0;
left: 0;
border: 2px solid blue;
// margin-top: -4rem;
.wrapper {
display: flex;
flex-direction: row;
width: 600vw;
height: 100vh;
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
border: 2px solid yellow;
.navmenu {
border: 1px solid red;
color: red;
position: fixed !important;
top: 0;
left: 0;
}
}
}
Kindly help me, I am stuck here all day.

How to prevent get over other divs?

I have a problem...In the following example i don't want that the div who is fixed get over the div with the background red.
Here is the example:
http://jsfiddle.net/HFjU6/3645/
#fixedContainer
{
background-color:#ddd;
position: fixed;
width: 200px;
height: 100px;
left: 50%;
top: 0%;
margin-left: -100px; /*half the width*/
}

Alright, I think I get what the OP wants. He wanted a container that stays fixed on the top of the viewport, but remains confined by a parent. This behaviour is known as a conditional sticky behaviour, and is actually implemented in both Firefox (without vendor prefix) and macOS/iOS Safari (with -webkit- prefix): see position: sticky.
Therefore the easiest (but also the least cross-browser compatible) way is simply to modify your markup, such that the sticky element stays within a parent, and you declare position: sticky on it:
* {
margin: 0;
padding: 0;
}
#fixedContainer {
background-color: #ddd;
position: -webkit-sticky;
position: sticky;
width: 200px;
height: 100px;
left: 50%;
top: 0%;
transform: translate(-50%, 0); /* Negative left margins do not work with sticky */
}
#div1 {
height: 200px;
background-color: #bbb;
}
#div1 .content {
position: relative;
top: -100px; /* Top offset must be manually calculated */
}
#div2 {
height: 500px;
background-color: red;
}
<div id="div1">
<div id="fixedContainer">I am a sticky container that stays within the sticky parent</div>
<div class="content">Sticky parent</div></div>
<div id="div2">Just another element</div>
An alternative would be to use a JS-based solution. In this case, you do not actually have to modify your markup. I have changed the IDs for easier identification of the elements, however.
The gist of the logic is this:
When the scroll position does not exceed the bottom of the parent minus the outer height of the sticky content, then we do not do anything.
When the scroll position exceeds the bottom of the parent minus the outer height of the sticky content, we dynamically calculate the top position of the sticky content so that it remains visually in the parent.
$(function() {
$(window).scroll(function() {
var $c = $('#sticky-container'),
$s = $('#sticky-content'),
$t = $(this); // Short reference to window object
if ($t.scrollTop() > $c.outerHeight() - $s.outerHeight()) {
$s.css('top', $c.offset().top + $c.outerHeight() - $t.scrollTop() - $s.outerHeight());
} else {
$s.css('top', 0);
}
});
});
* {
margin: 0;
padding: 0;
}
div {
height: 500px;
background-color: red;
}
#sticky-container {
background-color: #bbb;
height: 200px;
}
#sticky-content {
background-color: #ddd;
position: fixed;
width: 200px;
height: 100px;
margin-left: -100px;
left: 50%;
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sticky-content">Sticky content that stays within the bounds of #div1</div>
<div id="sticky-container">Sticky confinement area</div>
<div>Other content</div>
Old answer before OP clarified the question appropriately:
Just give them the appropriate z-index values. In this case, you want to:
Do not use static positioning. This can be done by using position: relative for the large elements, in conjunction with the originally position: fixed element.
Assign the appropriate stacking order. The grey <div> element to have the lowest z-index, followed by the position fixed element, and then by the red element.
There are some catchalls to stacking though: the stacking context is reset when you traverse up or down the node tree. For example, the example will not work if the elements are not siblings.
Here is a proof-of-concept example, modified from your fiddle so that inline CSS is removed.
* {
margin: 0;
padding: 0;
}
#fixedContainer {
background-color: #ddd;
position: fixed;
width: 200px;
height: 100px;
left: 50%;
top: 0%;
margin-left: -100px;
z-index: 2;
}
#div1 {
height: 200px;
background-color: #bbb;
position: relative;
z-index: 1;
}
#div2 {
height: 500px;
background-color: red;
position: relative;
z-index: 3;
}
<div id="fixedContainer">z-index: 2</div>
<div id="div1">z-index: 1</div>
<div id="div2">z-index: 3</div>

Just give the z-index.
Hope it helps...
http://jsfiddle.net/HFjU6/1/#run
#fixedContainer {
background-color:#ddd;
position: fixed;
width: 200px;
height: 100px;
left: 50%;
top: 0%;
margin-left: -100px; /*half the width*/
z-index: 2;
}
.div-red {
position: relative;
z-index: 5;
}
<div id="fixedContainer"></div>
<div style="height:200px;background-color:#bbb;"></div>
<div style="height:500px;background-color:red;" class="div-red"></div>

How to put my footer always on the bottom of my page? [duplicate]

This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 6 years ago.
How can I have a footer which always stays at the bottom of my page even if this page is too little to fill the entire screen or more ?
I have a button in my page, and when you touch it, it adds thanks to javascript many elements to my page and the page size changed, but my footer doesn't adapt its position.
The problem is when I set the position of my footer to relative, when my page size is too short, he is not at the bottom of my screen, but just under the last element I put on.
I tried position: absolute;, but when the user clicks on the button, my footer stays stuck at his position and it doesn't go to the new bottom of my page.
I don't want my footer to be always visible, but just to be at the real bottom of my page.

Use this:
footer {
position: fixed;
bottom: 0;
/* Add a height and a width! */
}

The complete solution is explained in this article: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
Major trick is, that you will have three parts: Header, Body and Footer:
HTML:
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
CSS:
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#header {
background: #ff0;
padding: 10px;
}
#body {
padding: 10px;
padding-bottom: 60px; /* Height of the footer */
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px; /* Height of the footer */
background: #6cf;
}

Use the following
footer {
position: absolute;
bottom: 0;
}

try this one... this will keep your footer at the bottom of your page:
position: fixed;
bottom: 0;
Working demo: https://jsfiddle.net/maky/bgeLbpd9/
#footer {
position: fixed;
bottom: 0;
background-color: black;
min-width: 100%;
font-family: Agency FB;
transition: height 3s;
height: 50px;
}
#footer1 {
text-align: center;
color: #4e4e4e;
}
#footer:hover {
opacity: .8;
color: white;
height: 100px;
}

How do I move an element with a soft effect using position:relative left:220px [duplicate]

This question already has answers here:
jquery animate .css
(5 answers)
Closed 8 years ago.
I have an element which I want to move from left to right that won't look like it "teleported".
I am using jQuery onClick on a button - when it's clicked - the div "#superDiv" has to move.
this is the code:
$('#mob-home-btn').click(function(){
$("#superDiv").css({left: 227, position: 'relative'});
})
I tried using CSS3 Transitions on my #superDiv which didn't make the trick.

Use .animate() to animate and marginLeft to push the div to its right.
$('#mob-home-btn').click(function() {
$("#superDiv").animate({
marginLeft: '227'
});
})
#mob-home-btn {
width: 70px;
height: 20px;
text-align: center;
line-height: 20px;
background-color: magenta;
}
#superDiv {
width: 100px;
height: 100px;
background-color: coral;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="mob-home-btn">Click Me</div>
<div id="superDiv"></div>
Using CSS transitions, you can do it this way without any jQuery.
#mob-home-btn {
width: 110px;
height: 20px;
text-align: center;
line-height: 20px;
background-color: magenta;
}
#superDiv {
width: 100px;
height: 100px;
background-color: coral;
transition: margin-left 1s;
}
#mob-home-btn:hover + #superDiv {
margin-left: 227px;
}
<div id="mob-home-btn">Hover Over Me</div>
<div id="superDiv"></div>