Here on this site, if you try any restaurant, you'll see a basket that is always visible on the right, and if you scroll down, then it's "magical": it stays like "sticky" on the top of the screen. http://takeaway.com
How did they do that, and do you have any good sites/tutorials to do such things (I don't know what to google actually!)?
When the browser scrolls past a certain point, this following CSS is applied to the basket:
position: fixed; top: 0px;
You can do this fairly easily using jQuery plugins like Waypoints, which has a special functionality for creating "sticky" elements.
Get the plugin and see tutorials here: http://imakewebthings.com/jquery-waypoints/
See the example here: http://imakewebthings.com/jquery-waypoints/sticky-elements/
You want exactly what I did in my project have a look at project we have used the similar thing with our shopping cart. We have used the following css key point is Position and z-index
#your wrapper{
margin:0 0 14px 0px;
/*margin: 30px auto;*/
}
.sticky{
position: fixed;
bottom:-30px;
width:74%;
left:13%;
z-index: 100;
}
Related
I'm trying to follow this tutorial in creating a slide in navigation, and I have the following stackblitz. The side nav is toggleing, but it is not expanding to fit the page. IIUC this CSS class is supposed to do the trick (In styles.css):
.container {
position: absolute;
top:0px;
left:0px;
bottom:0px;
right: 0px;
}
Thoughts?
.container {
position: absolute;
height: 100vh;
width: 100vw;
top:0px;
left:0px;
bottom:0px;
right: 0px;
}
let me know if that helps, it looks like it works but i don't know exactly what you want, and optionally
padding: 0;
margin: 0;
on the body element to remove the scroll bar.
I have run into many similar issues working with Angular Material. The issue stems from AngMat dynamically generating custom components and classes at render time, so it's often hard to catch these things up front.
If you open the dev tools and select the opened menu, you can find the custom component, <mat-drawer class="sidenav mat-drawer..."/>, This is the piece that is preventing the full width menu. If you manually apply a width: 100% on that component it will snap into place.
There are two approaches I've found, neither of which are ideal solutions. You can look into ::ng-deep and how to override angular material styling by disabling view encapsulation, this is a pretty deep concept when it comes to shadow doms and everything else associated but you don't need to know all of that to know that you can override the styles with the approach. However this will be deprecated at some point. The other approach is a hard-coded width:100% applied directly to the component. So something like mat-drawer { width:100% } in the top level stylesheet.
I used part of the wordpress theme of another developer and now this slider content is floating to top
I want to center content vertically and horizontally with padding on all sides padding:100px;
Someone can visit my site and help with centering this block? This is url of my mywebsite, please share some knowledge and hope I will solve this problem.
I looked through your code, (thank god for Inspect Element on Google Chrome!) and it seems you have the header inside the body of the code, try moving the page header above the body in your html. I have found this to work for me in some cases.
Also next time try adding code relevant to the question to your OP, will help get faster and better answers
EDIT: You can centre it horizontally by changing the left and right tags in the css:
.//div class here {
left: 10%;
right: 10%;
width: 80%;
}
EDIT 2: Try this, im not sure if it will work but its worth a show:
.//div class here {
left: 10%;
right: 10%;
width: 80%;
height: 80%;
top: 10%;
bottom: 10%;
}
Try doing the steps explained on this site: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/. You will most likely want to apply this to:
.image img
which is the CSS selector for the div with a class of image containing an image tag. This may be too general though and I actually recommend giving your image an ID and targeting that.
I am having a lot of trouble getting my button in a BigCommerce theme to vertically align to the bottom. Since it is a responsive design, absolute positioning doesn't quite get the work done. Unfortunately it is the only thing that seems to move the buttons at all; I've tried all sorts of methods with relative positions and the vertical position will not budge. It seems that the products are listed within a list that functions as a table.
Here is the css for the button itself. I added the stuff below "border" and have tried many different ways as well as tried changing display to inline-block.
.product-grid .ProductActionAdd .button {
display:block;
background: #424546;
border: 1px solid #303334;
position: relative;
vertical-alignment:bottom;
bottom:0;
}
I can provide css for the other parts as well. Below is basically what I'm trying to fix. Those with 1-line product names would have the "in stock" button moved up.
image of buttons and problem
Without the full HTML/CSS or a jsFiddle it's going to be difficult for me to provide you with the complete HTML/CSS solution, but here's what will fix the problem:
Wrap the button and description inside of an element and set position:relative on that wrapper element
Give the buttons the following style: position: absolute; margin: 0 auto; left: 0; right: 0; bottom: 5px;
Set the description to a fixed height and give the wrappers a fixed height
That should solve your issue. Here's an example
So I'm creating a new layout for my blog, www.thatgirlmag.com, and I want a fixed navigation bar at the top (which goes with you when you scroll down). I've written the CSS right (I think), but now I can't see it because it's behind the bar that shows up when you're logged in to wordpress. I could just move it down, but then viewers who AREN'T logged in to wordpress will see something weird, right? It looks weird when I view it from an incognito window.
I'm assuming there has to be a better way to do this. I just want the navigation bar to sit right at the top of the VISIBLE portion of my blog. Help?
Here's the CSS we're looking at
#main-nav {
position: fixed;
top: 0px;
left: -10px;
width: 110%;
height: 25px;
background-color: #000;
}
Also, I have the bar positioned at -10 and 110% wide because I want it to go 100% across the page (and setting width: 100% makes the nav bar just go across the width of the element, which has margins). There must be a better way to do that as well. Can someone help me? I'm not sure I'm explaining this right.
What you're dealing with is called z-index. You need to add a z-index value to a positioned object - like #main-nav - to place it in visibility context with other objects with or without z-index values and positions.
Briefly (from https://developer.mozilla.org/en-US/docs/Web/CSS/z-index )
The z-index CSS property specifies the z-order of an element and its
descendants. When elements overlap, z-order determines which one
covers the other. An element with a larger z-index generally covers an
element with a lower one.
Take a look at other answers to z-index questions on SO: https://stackoverflow.com/search?q=z-index And see Understanding z-index and The Z-Index CSS Property: A Comprehensive Look | Smashing Magazine
For the WordPress admin bar specifically: move it down (only for logged in admins) to account for not being able to override the 9999 z-index value in WP core CSS by targeting the admin-bar div:
body.admin-bar .header {
position:fixed;
top: 28px;
z-index: 1000;
height: 40px;
}
See http://wahldev.com/making-fixed-nav-work-with-the-wordpress-admin-bar/
Try adding a z-index to to main-nav. It would look something like this:
#main-nav {
position: fixed;
top: 0px;
left: -10px;
width: 110%;
height: 25px;
background-color: #000;
z-index: 9999;
}
I used a large number for z-index because wordpress might give a z-index to the div on top of that.
Please excuse me if there are any mistakes in the following code or with my question, I don't know much about code but am learning :). Sorry for spaces in links and lack of these things - < - really struggling posting code :)
On my website http:// second to nature .co.uk/en/ I am trying to create background images with ivy down both sides of the website. Is it a prestashop website.
I did manage to achieve this with the following css code, however it would not work in ie 6-8 - because those browsers do not support css3.
background:url(http:// second to nature.co.uk/img/backgroundleft.jpg) top left fixed
no-repeat, url(http:// second to nature.co.uk/img/backgroundright.jpg) top right fixed no-repeat;
Therefore after some researching, I tried to create the wanted effect with two divs:
<div id="container">
<div id="inner-container">
</div>
</div>
And then use the following css to implement this.
And as you can see if you visit the site, the left image is shown properly, but the right does not show up.
#container {
background: url(http:// second to nature.co.uk/img/backgroundleft.jpg) repeat-y;
position: fixed;
top: 0px;
left: 0px;
width: 130px;
height: 1000px;
}
#inner-container {
background: transparent url(http:// second to nature.co.uk/img/backgroundright.jpg)) repeat-y;
position: fixed;
top: 0px;
right: 0px;
width: 130px;
height: 1000px;
}
Can anyone see where I am going wrong or have a fix? Help would be much appreciated.
Many thanks
You have a typo in your CSS:
url(http://secondtonature.co.uk/img/backgroundright.jpg))
There is a double )) at the end of the URL where there should be only one.
HOWEVER ... your HTML is all messed up, and there's a better way to do this. Firstly, you have a whole bunch of meta tags and other asset links inside your body element, when they should all be up in the head.
A better way to do this would be to wrap two divs around your content (they would be 100% width by default) and place the bg images on each of those.
You could use Modernizr and then us CSS3 border image. Then the border image will show up in IE6, 7 and 8.
A shame that you have IE6 users to worry about. It's such a bad, buggy and unsafe browser.
http://modernizr.com/