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;
}
Related
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'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);
}
Im working on some CSS with a web app that I am doing, and I have finally got what I want my page to look like encoded in the css.
#searchNavBar {
position: relative;
width: 100%;
left: -53%;
top: -40px;
height: 70px;
}
#searchResultsDoodle {
position: absolute;
left: 0px;
top: 10px;
width: 100px;
height: 50px;
}
#searchResultsSearchBar {
position: absolute;
left: 110px;
top: 10px;
width: 690px;
height: 50px;
}
#searchResultsSearchButton {
position: absolute;
left: 810px;
top: 10px;
width: 100px;
height: 50px;
}
So I've got a navbar type thing along the top, with a picture, search bar, and a button. Actually taken heavy inspiration from google ;)
Things look good now, however, when I do a "ctrl+", increasing the size of the page, the formatting gets thrown completely off, the search bar drawn to the center of the page, etc... is there any way to write the CSS for this code such that, in the event I increase or decrease the size of the page, the things on the page will attempt to stay as close as they can, proportionally speaking, to the locations that I initially wanted them on the page?
#bottom_fade {
position: absolute;
bottom: 0;
width: 100%;
background: url("bottom-fade.png");
background-repeat:repeat-x;
height: 400px;
z-index: 2;
}
.categories {
position: absolute;
left: 50%;
color:black;
word-wrap: break-word;
font-family: 15px 'Libre Baskerville', serif;
margin-left: -200px;
z-index: 1;
}
.categories td {
width: 200px;
}
you may see the result of the above code here.
Try to resize your browser window so that you're forced to scroll to see the whole text in the table.
As you scroll, you may see that #bottom_fade will not remain sticked to the bottom of the page but will follow your scrolling. I don't want that to happen: how can I say to bottom_fade to ALWAYS stays attached to the bottom of the browser window, no matter what happens to the scrollbar?
Many thanks!
Change
#bottom_fade {
position: absolute;
}
to
#bottom_fade {
position: fixed;
};
and it should work like a charm.
(nice effect by the way!)
So I've set up some div's on my page and while they look fine to me other people log on and the div will be improperly placed. I've looked and looked but can't find out why it's not loading the same for me, so if anyone can help in this it'd be appreciated. The div not showing correctly is
div.head-content
{
display: block;
position: absolute;
top: -64px;
left: 92.7%;
margin-left: -360px;
width: 131px;
height: 46px;
}
The reason for this is either browser comparability or some alignment mistake.
if you are using wrapper make
#wrapper
{
position:relative;
}
and it will do the job.
Unless you show us the entire code this is the most I can help.
#vivek is correct try this
#wrapper
{
position:relative;
width:100%;
height:100%;
}
.head-content
{
display: block;
position: absolute;
top: -64px;
left: 92.7%;
margin-left: -360px;
width: 131px;
height: 46px;
}