Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 9 years ago.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Improve this question
I am trying to get a slider that drops down from the top of my page to go over my menu but can't.
I have applied a position: relative to both of them and tried to put the z-index of the menu to 0 or -10 and I have but the slider to z-index: 10000 with it also postion: relative but it's still going behind the menu.
The page is at http://www.tassolarpanels.com.au/ and the slider in question is the blue "Get a Quick Quote" button on the top right of the screen. As you will see when you press it - it goes behind my menu.
If anyone has any ideas what I am doing wrong I would much appreciate your help!
You need to make sure that the parent element, in this case, #sliding-panel-container, has the correct z-index applied which it currently doesn't -- it is listed as z-index: 1 which is why it's showing behind the navigation listed as z-index: 2.
Try this:
#sliding-panel-container {
... /* Whatever your other CSS is here */
z-index: 3;
}
Add to your .site class:
position: relative;
z-index: 0;
#sliding-panel-container {
display: table;
position: relative;
width: 100%;
z-index: 9999;
}
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
After checking examples and trying one of them for myself, I have realized that there's a blank hole that appears under the sidenav. It's probably not related with sidenav, but after you click the menu icon on the top-left most corner, (after sidenav opens) there's huge blank hole appears at the bottom of the page and I couldn't find the reason for that behaviour.
Here's the stackblitz link for that:
https://stackblitz.com/edit/angular-material-sidenav-generate-nav
Thanks for any explanation, have a good day.
you missed to add css to your <mat-sidenav-container> like in Material example :
.example-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #eee;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I'm trying to center a div with search bar. I tried position: absolute with main div position: relative. But did not got I wanted. It should go under the text. This is made with Bootstrap 4.
This is what I tried s far.
JSFiddle
Remove the top: -114px; of .search-sec and the position: absolute; of .search-align and add justify-content: center; and it works.
See https://jsfiddle.net/aqcredw2/
Oh, and .fixed-top should be better position: sticky; :)
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have unwanted space at bottom of the page. Cant figure out whats the problem.
I also searched for this tried every answer but no solutions
Its the height from hidden sub menu from the nav.
It's being caused by the length of the "Electrical equipment & parts" section of your product menu. You'll notice that the page height exactly matches the height of that part of the menu.
Also, in the 'Chemicals' section of the products menu, "Anti-Corrusions" is misspelled. "Anti-corrosion."
The first problem is that you have a min-height: 800px css rule set on your body tag -- get rid of that to start. The problem you'll have after that is that you want your footer to stick to the bottom of the page. You can do this by adding:
.blog-list-page {
position: relative;
min-height: 100%;
}
footer {
position: absolute;
width: 100%;
bottom: 0;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I was wondering if anyone knows why I can't click the "Get Directions" link at the top of the page.
http://progressivespineandsports.com/
There is a target of blank attribute on the link but I don't think that this has anything to do with the link not working.
add
.block.header {
position: relative;
z-index: 1;
}
to your css, for a quick fix.
The problem is that the #content div lays upon/above your header div.
Because div.block.header has a height of 0, all its children are float. So div#content stacks above the link, prevents you from clicking the header link.
Add overflow: hidden to div.block.header, or other clearfix tricks.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I have a page set up however I am having trouble aligning the news articles to the center of the page.
Here is a link to what I have so far -
http://casb1.cloudapp.net/1016/1be61016ff9a717aa34c2adf7c5aa79e/3D%20Design/news%20articles/news.html
Basically I need the red area to always be the same distance from the edges, even when it expands. Is this possible?
The red container has the css of position:absolute
Any help would be hugely appreciated.
PS. this is only my first week of learning css and html so please forgive me if it is something simple.
Thanks
I think you don't need the position:absolute you can delete this property and add this:
.collection {
display:table;
margin:auto;
}
There's a lot that can be impoved, but going to your question, I'd do something like this:
.collection {
position: static;
display: inline-block;
}
.roundcont {
text-align: center;
}
You basically need to remove the position: absolute; attribute from your .collection element and change its display to inline or inline-block and then set text-align center; to its parent div so now it looks centered.