I'm having issues centring a menu, I need it to be fixed bottom centre, 20px from bottom. I've tried loads of different solutions I've found online but can't seem to get it quite right.
Here's where I'm at now http://ahdecor8.co.uk/menu/
Thank you in advance for your help! :)
Apply left:0 and right:0 on your CSS.
#bottom_nav {
width: 1080px;
position: fixed;
bottom: 20px;
text-align: center;
z-index: 9999;
left: 0;
right: 0;
}
Since you have the menu at fixed position, try adding:
left: 50%;
transform: translateX(-50%);
To #bottom_nav
I suggest you to apply next css to your <menu id="bottom_nav">:
*** Though without padding: 0; it wouldn't be at the actual center.
margin-left: -540px;
left: 50%;
Use css for menu:
#bottom_nav {
left: 50%;
margin-left: -540px;
padding-left: 0px;
}
First, you have to set the padding to 0. Try adding this:
#bottom_nav {
padding: 0;
position: fixed;
bottom: 20px;
left: calc(50% - 540px);
}
Related
I'm trying to figure out where the extra spacing on the right of my container comes from, i can't seem to find a element that goes outside the HTML tags using inspector.
Live Preview
Any help is appriciated,
Thanks in advance!
It is coming from this class
slider-title tk-futura-pt-bold
instead of using position and left on the above class.
Use the follwing to re-position your div (slider):
left: 10%;
top: 10%;
transform: translate(10%,10%);
I would set the slider-box to position: relative; and set the slider-title to position: absolute; this would solve your issue.
write this code at the end of your css and you will get the problem solved :)
.slider-description[_ngcontent-c3], .slider-title[_ngcontent-c3] {
width: calc(100% - 10%);
}
instead of left: 10%; use padding-left: 10%; in .slider-title tk-futura-pt-bold class
The elements with classes slider-description and slider-title have css styling left added to it.
You can fix this by using the following:
#slider{
.slider-box {
position: absolute;
left: 10%;
top: 170px;
}
.slider-description, .slider-title{
color: #fff;
}
.slider-title {
font-size: 24px;
}
.slider-description{
width: 500px;
}
}
I've tried a number of solutions but with no success.
Here is a simplified page demonstrating the problem.
I fixed it.
I found the solution after finding a similar problem with a page using html5 columns. The modals would work in the first column but not in the second. I found that the modal static position overlapped the position of the link-image in the second column though it was not visible.
In the original problem I changed the css from:
#modal1{
position: absolute;
margin-left: -20%;
padding: 20px;
opacity: 0;
width: 40%;
top: 100px;
left: 50%;
}
#modal1:target {
opacity: 1;
}
To this:
#modal1{
position: absolute;
margin-left: -20%;
padding: 20px;
opacity: 0;
width: 40%;
top: 100px;
left: -1000px;
}
#modal1:target{
position: absolute;
margin-left: -20%;
padding: 20px;
opacity: 1;
width: 40%;
top: 100px;
left: 50%;
}
Now the modal static position is well off the page and is no longer where it can be clicked.
I realize this was a noobie mess-up but I finally got it.
Roy
I want to center the slider controls which you can find here
I tried various ways like right:0; left:0; margin-left:auto; margin-right:auto and two more.
But somehow I am not able to make it center in responsive manner so that in any view port, It always remain center.
So Is there a way to achieve it?
This will centre the Your controls without needing to use width but will only really work for modern browsers:
.anythingSlider-minimalist-round .anythingControls {
position: absolute;
z-index: 100;
opacity: 0.90;
filter: alpha(opacity=90);
left: 50%;
bottom: 2%;
transform: translateX(-50%);
}
This method will work for older browsers but you will need a fixed width:
.anythingSlider-minimalist-round .anythingControls {
position: relative;
z-index: 100;
opacity: 0.90;
filter: alpha(opacity=90);
bottom: 5%;
width: 190px;
margin: 0px auto;
}
There are a few other methods to centring a div on a page it might be worth while looking at some other methods here: How to horizontally center a <div> in another <div>?
It looks like they are just being hidden when dropped into mobile. You can reshow them by putting this in your media query for small (mobile) screens.
.anythingSlider-minimalist-round .anythingControls{
display: block !important;
margin: 0 auto;
text-align: center;
width: 186px;
position: relative;
top: -40px;
right: 0;
float: none;
left: 0;
bottom: 0;
}
Put the slider controls in a div that has width:100% and its contents set to text-align:center. Position the div absolute, at bottom:20px (adjust this to set the desired offset from the bottom). Finally, the container that contains the slider controls div needs to be set to position:relative.
div.slider-controls {
width:100%;
text-align:center;
position: absolute;
left: 0px;
bottom: 20px; <----- adjust this until you
} like the offset from the
bottom of the slider
div.slider-container {
position: absolute;
}
I don;t know what your layout looks like, but in the above example, it is assumed that div.slider-controls is a child element of div.slider-container.
Suppose I have a pre and a div:
<pre>Hello</pre>
<div>Hello</div>
And I give them positioning and dimensioning with position: absolute and friends:
pre {
position: absolute;
top: 5%;
left: 5%;
right: 50%;
bottom: 5%;
}
div {
position: absolute;
top: 5%;
left: 50%;
right: 5%;
bottom: 5%;
}
Then the pre starts lower vertically and ends higher vertically. You can see what I mean on this jsFiddle demo.
How can I make the pre and the div line up?
Add margin:0 to your pre. (fiddle)
Some elements have default attribute values. In this case, pre has a default top and bottom margin of 13px which need to be overridden in order to make it display like you want.
See http://jsfiddle.net/K3WcC/
In addition to #canon's answer you can reset global defaults:
*{
margin: 0;
padding: 0;
}
I'm currently working on this page and as it loads initially, the slideshow thumbnails will be where they're supposed to be but drops second later. I've tried changing the CSS from
.pika-thumbs {
width: 995px;
margin-left: 55px;
}
To
.pika-thumbs {
width: 995px;
margin-left: 55px;
position: relative;
top: -150px;
Z-index: 999;
}
and it stayed exactly where I wanted it to stay but the space stays and goes away when I remove the whole like of CSS.
You forgot your semi-colon after relative:
.pika-thumbs {
width: 995px;
margin-left: 55px;
position: relative;
top: -150px;
z-index: 999;
}
Edit:
and it stayed exactly where I wanted it to stay but the space stays
and goes away when I remove the whole like of CSS.
This is the reality of using position: relative and top with negative values. Try margin-top: -150px; instead of top.
position, not positioning:
.pika-thumbs {
width: 995px;
margin-left: 55px;
position: relative;
top: -150px;
z-index: 999;
}