I need to make one element in the sidebar css position:sticky.
I've added the image to the Sidebar - using the Customisation feature.
And added the css - using Customisation/Additional CSS.
But the element scrolls normally with the other elements in the sidebar.
The html looks like this (just an extracted bit):
...
<div id="sidebar">
<div id="sidebar-core">
<aside class="widget widget_recent_entries">
<h3 class="widget-title">Recent Posts</h3>
<ul>
<li>
Aston Martin DB7 Volante – For Sale
</li>
<li>
How a DB7 and a Vanquish specialist met
</li>
<li>
6 cylinder Cam Cover
</li>
<li>
Aston Martin DB7 Dashboard Repair
</li>
</ul>
</aside><aside class="widget rl-image-widget"><h3 class="widget-title"></h3><img class="rl-image-widget-image" src="http://astondb7.com/wp-content/uploads/2019/01/AstonMartinBadgeA.png" width="800" height="240" title="Aston Martin Badge" alt="Aston Martin Badge" style="margin-left: auto; margin-right: auto; display: block;" /><div class="rl-image-widget-text"></div></aside>
</div>
</div><!-- #sidebar -->
...
And the css is:
.rl-image-widget-image {
position: sticky;
position: -webkit-sticky;
width: 300px;
height: 80px;
top: 60px;
justify-content: center;
align-items: center;
}
#sidebar-core { height: 800px; }
I've tried adding 'overflow:visible' to the parent elements, but didn't solve it.
Site is runnning WP5.6.2 and the the Shuttle theme.
It reacts to position:fixed, and position:absolute, but not 'sticky' ;(
Add a sticky class to parent div i.e.:
aside.widget.rl-image-widget {
position: sticky;
top: 60px;
}
I thought it was the 'parent' that must not have 'overflow: hidden' but then I read that it's ANY ancestor. So tracking back, I found that the theme's 'Content' is/was 'overflow: hidden' - I changed it to 'visible' - and now my element is 'sticky'. Now I have to find any ramifications of so doing.
Related
I'm using the bootstrap bar to show the progress of a song. When I add it to a list stylize it to float, it disappears.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
<ul>
<li>
<div class="text-muted" id="currentTime"></div>
</li>
<li>
<div class="progress" style="width: 10%;">
<div id="progressBar" class="progress-bar" role="progressbar" style="width: 0%" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</li>
<li>
<div class="text-muted" id="totalTime"></div>
</li>
</ul>
Applying the float property causes the elements to lose their dimensions (especially the width).
ّfloat explained in MDN Web Docs:
When an element is floated, it is taken out of the normal flow of the
document (though still remaining part of it). It is shifted to the
left, or right, until it touches the edge of its containing box, or
another floated element.
You can cover this problem by applying the parent width at the same time.
li {
float: left;
width: 100%;
}
Do not forget to use Bootstrap classes. (e.g. w-100, float-left, m-0, p-0, overflow-hidden, ... )
I’m using flexboxes to spread 3 boxes across a row. They’re all in ul and li . I’ve put images in the li and it all spreads nicely, as advertised.
The problem arise when I position a few absolute boxes in my flex items, with text in them. These absolute divs are taken out of the flex items and positionned to the beginning of the row.
One workaround I found is to use relative divs instead of an absolute one, put it below my image and the use its top property, to move it on top of my image, but that leaves an empty white row below the image.
So I’m wondering what’s the “official” way of precisely positionning elements inside a flex item ?
Without code and even a graphic to illustrate the desired result this answer is a bit of a shot in the dark.
The primary assumption I'm going to make is that you want to overlay text on top of an image. The fact that you're using flexbox shouldn't be an issue if this assumption is true.
Typically when you want to overlay text on top of an image you absolute position it and and to prevent that absolute positioning from rendering outside of the parent element you set the parent element to position: relative;.
Notes:
Sometimes you might need to create a containing element just for the image and text overlay if there's other content associated with the image and text.
You might also have to set the element containing the image to inline so the parent containing element matches the size of the image.
Here's my suggestion:
ul,
li {
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}
ul {
display: flex;
justify-content: space-around;
}
li {
position: relative;
}
.overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<ul>
<li>
<img src="http://placehold.it/100x100/ffcc00/?text=1">
<div class="overlay">
Text Overlay 1
</div>
</li>
<li>
<img src="http://placehold.it/100x100/ffcc00/?text=2">
<div class="overlay">
Text Overlay 2
</div>
</li>
<li>
<img src="http://placehold.it/100x100/ffcc00/?text=3">
<div class="overlay">
Text Overlay 3
</div>
</li>
</ul>
And here's an example if there's additional content associated with the image and text overlay.
ul,
li {
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}
ul {
display: flex;
justify-content: space-around;
}
li .intro {
position: relative;
}
.overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<ul>
<li>
<div class="intro">
<img src="http://placehold.it/100x100/ffcc00/?text=1">
<div class="overlay">
Text Overlay 1
</div>
</div>
<p>
Some content here. Some content here. Some content here. Some content here.
</p>
<p>
Some content here. Some content here. Some content here. Some content here.
</p>
</li>
<li>
<div class="intro">
<img src="http://placehold.it/100x100/ffcc00/?text=2">
<div class="overlay">
Text Overlay 2
</div>
</div>
<p>
Some content here. Some content here. Some content here. Some content here.
</p>
<p>
Some content here. Some content here. Some content here. Some content here.
</p>
</li>
<li>
<div class="intro">
<img src="http://placehold.it/100x100/ffcc00/?text=3">
<div class="overlay">
Text Overlay 3
</div>
</div>
<p>
Some content here. Some content here. Some content here. Some content here.
</p>
<p>
Some content here. Some content here. Some content here. Some content here.
</p>
</li>
</ul>
I'm having trouble by creating a responsive footer that always stay on the bottom of the page. The code I'm actually using is this:
body
{
margin: 0 0 200px; //Same height of the footer
}
footer
{
position: absolute;
left: 0;
bottom: 0;
height: 200px;
width: 100%;
overflow: auto;
background-color: rgba(67, 191, 115, 0.95);
}
I use:
<div class='main-content'>
//Content
</div>
<footer>
//Footer content
</footer>
Well, the problem is if I resize the screen and the content is larger than the resolution the footer lets a white space, like this:
I am trying to solve this problem. If I use position: fixed the problem disappears, but I don't want the footer following the scroll. I think the problem is in the 100 percent width. The footer of this site, Stack Overflow, works as I need. If I resize the window the footer remains the same, no white space. How to achieve this? How to make the footer cover all the width without let white space even if the resolution is lower than the page like occurs here, in Stack Overflow?
Try this code....
CSS
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
/* Set the fixed height of the footer here */
#footer {
height: 60px;
background-color: #f5f5f5;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
.container {
width: auto;
max-width: 680px;
padding: 0 15px;
}
.container .credit {
margin: 20px 0;
}
HTML
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer</h1>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
<p>Use the sticky footer with a fixed navbar if need be, too.</p>
</div>
</div><!-- Wrap Div end -->
<div id="footer">
<div class="container">
<p class="text-muted credit">Example courtesy Martin Bean and Ryan Fait.</p>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
</body>
</html>
This jsfiddle I am creating based on your html.
This is work as responsive, I am not seen any issue as you tell.
I think may be the issue with height:200px , just remove and check.
Still you have issue , update the jsfiddle.
You should indeed use fixed positioning. This is what we do in our apps, running on browsers and Android/iOS devices:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body
{
margin: 0;
/*
This height just to show that the footer stays at the
bottom of the page even when scrolling all the way down.
*/
height:2000px;
}
footer
{
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: 200px;
overflow: auto;
background-color: rgba(67, 191, 115, 0.95);
}
</style>
</head>
<body>
<div class='main-content'>
//Content
</div>
<footer>
//Footer content
</footer>
</body>
</html>
Of course, you are using HTML5 so this page will not work on older browsers (IE7, IE8).
I hope this helps :)
I like flexbox. CSS tricks - Guide to Flexbox
Try this:
main {
height: 95vh;
display: flex;
flex-flow: column wrap;
justify-content: space-around;
align-items: center; }
header,
footer { flex: 0 1 auto; }
article { flex: 10 1 auto; }
<main>
<header>Title Here</header>
<article>Main Article</article>
<footer>Copyright and Contact Me</footer>
</main>
Thanks to Galen Gidman https://galengidman.com/2014/03/25/responsive-flexible-height-sticky-footers-in-css/ for this:
<header class="page-row">
<h1>Site Title</h1>
</header>
<main class="page-row page-row-expanded">
<p>Page content goes here.</p>
</main>
<footer class="page-row">
<p>Copyright, blah blah blah.</p>
</footer>
And the CSS:
html,
body {height: 100%;}
body {display: table; width: 100%;}
.page-row {display: table-row; height: 1px;}
.page-row-expanded {height: 100%;}
Galan: The only real caveat to this solution that I’ve encountered so far is the styling limitations present with elements using display: table-row. Often padding, margin, etc. don’t behave as expected. This is easy enough to work around by adding a or something inside the .page-row and styling that.
I am just finishing a small website and noticed in IE7 that the logo is hiding behind an image on the home page: http://reapvalue.com/
Here is the html:
<div id="wrap">
<div id="header">
<ul id="main-nav">
<li>About</li>
<li>What We Do</li>
<li class="last">Contact</li>
</ul>
<h1><img id="logo" src="/photos/logo.png" alt="REAP - Renewable Energy and Preservation, April Montgomery, LLC." ></h1>
<h1><img id="logo-small" src="/photos/logo-small.png" alt="REAP - Renewable Energy and Preservation, April Montgomery, LLC." ></h1>
</div><!-- end #header -->
<div id="tagline">
<span class="green">renewable energy</span> <span class="magenta">and preservation</span>
</div>
<div id="main" class="clearfix">
<div id="Stage" class="EDGE-909290339"></div>
<img id="lead-image" src="photos/hickory.jpg" alt="hickory, nc preserveration district">
Here is the CSS:
#header { width: 960px; height: 53px; margin: 0 auto; position: relative; }
body#inside #header { height: 56px; }
img#logo { position: absolute; top: 0; left: 0; z-index: 5000; }
Despite setting the z-index to 5000 it still hides behind the image. Any help in getting the logo to the front will be greatly appreciated.
Thanks.
I can't really explain why, but z-index in IE7 and IE8 acts weird.
If you're using z-index, and want it to work in older IE browsers, you need to make sure your parent element has an heigher z-index then your element.
For example, give your #header a z-index: 6000; and it'll be fixed.
I hope someone can give you an better explanation as to why this works, as I would like to know aswell myself.
EDIT: I've googled abit and found this interesting post:
http://www.brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
When i have a div with position: absolute, and in it is another div with position: absolute the inner div will position in the frame given through the outer (wrapper) div.
Now i want to create a class (css) called error_message that positions itself exactly in the center middle of the site, indifferent from where the it is called, so i need it to break out of every div wrapped around the error_message div.. how do i do this?
i had a similar problem with positioning a hoover-text centered below a floated image button list.
for me the solution was using the "fixed" value for the "position" property
position: fixed
then you can position your error message from top left of the body again.
i use another wrapper div to position all hoover texts center center.
found the solution here:
CSS nested Div with position absolute?
the code is not the code from the picture you see, the picture is just for illustration.
stylesheet in less format (see http://lesscss.org/)
<style>
.button
{
float: left;
position: relative;
a
{
&:hover, &:focus
{
.titlePos
{
.title
{
display: block;
}
}
}
.titlePos
{
position: fixed;
top:50%;
left:50%;
width: 400px;
margin-left: -200px;
.title
{
position:relative;
display: none;
top: 130px;
text-align: center;
}
}
}
</style>
html:
<div id="wrapper">
<div id="content">
<ul>
<li>
<div class="button">
<a href="#" >
<div class="buttonImage">
<img />
</div>
<div class="titlePos">
<div class="title">Button Hoover Text1</div>
</div>
</a>
</div>
</li>
<li>
<div class="button">
<a href="#" >
<div class="buttonImage">
<img />
</div>
<div class="titlePos">
<div class="title">Button Hoover Text2</div>
</div>
</a>
</div>
</li>
<li>
<div class="button">
<a href="#" >
<div class="buttonImage">
<img />
</div>
<div class="titlePos">
<div class="title">Button Hoover Text3</div>
</div>
</a>
</div>
</li>
<li>
<div class="button">
<a href="#" >
<div class="buttonImage">
<img />
</div>
<div class="titlePos">
<div class="title">Button Hoover Text4</div>
</div>
</a>
</div>
</li>
</ul>
</div>
</div>
You should try using css's position:fixed property, instead of position:absolute, for the error div. position:fixed will position an element based on the browser window, with no regard for where it falls in the DOM. If you want it to be centered in the window, regardless of window size, you could make the fixed-position div cover the entire screen (left: 0, right: 0, etc). and then text-align the error message inside of it.
I'm not sure why would you want that div to break out of parent div. Maybe try working on a fresh html structure for those?
http://haslayout.net/css-tuts/Horizontal-Centering and http://haslayout.net/css-tuts/Vertical-Centering
These should help you out!
I think the only way to have a div break out of all parent divs is to have an absolute positioning on all of them, which will obviously create its own set of problems.
Why not simply have a pre-defined, hidden div as a direct child of the body, instead of wrapping it in the markup. You can then easily position it as you want, and insert the error messages in it with the help of jQuery. An obvious advantage to this method is that you would only have to write this div once, and dynamically insert the error message into it. I would even suggest having a look at jQuery UI which allows you to easily create dialogs, both normal and modal, besides tons of other features.
UPDATE
Since JS is not allowed, an easy way to do this would indeed be displaying the div only if there was an error. So the PHP code would be ...
if (isset($error)) {
echo '<div class="show_error">' . $error . '</div>';
}
... and the CSS class for it would be ...
.show_error {
width: 400px; // error element's width
height: 200px; // error element's height
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px; // minus half the height
margin-left: -200px; // minus half the width
}
Of course, you can further style the error div as you wish, but these are needed to position it dead-center.
Hope this helps !
I have found a solid CSS solution here:
https://front-back.com/how-to-make-absolute-positioned-elements-overlap-their-overflow-hidden-parent/
Let’s add another parent and move the position:relative one level up
(or, in your context, you could maybe simply use an existing upper
parent).
HTML
<div class="grand-parent">
<div class="parent">
<div class="child"></div>
</div>
</div>
CSS
.grand-parent {
position: relative;
}
.parent {
/*position: relative;*/
overflow: hidden;
}
.child {
position: absolute;
top: -10px;
left: -5px;
}
Result: