I've been trying to properly place an element into my page so that it doesn't obstruct the background and so that it aligns all the way to right. I've tried to recreate the scenario on this jsfiddle, but I couldn't recreate it exactly.
There is a lot of junk included, but to create the layout of the actual page, I had to included it. My problem is with .login in the style and how it is interacting with the other elements. I've tried screwing with position, but I haven't been able to achieve my desired result.
Here is a screenshot of what it looks like with the problem:
This is what I would like:
Thanks for any help!
Try this
.login {
position: absolute;
top: 0; // or what you need
right: 0;
z-index: 1; // i don't know if you need upper value for that
}
Related
I can't figure out why the list items on my website are displaying on top of my logo and the menu. Have a look yourself on the website or this image: a screenshot of the https://papojari.codeberg.page/art/ website Some time ago I had the same issue with headings. The headings were in the post-title class because of a template I use. When I removed that class, the problem was gone. My list items don't have a class like that though and I can't find any references to that class and what it does. You can obviously have a look at the CSS on the website but additionally the source code is also here: https://codeberg.org/papojari/pages.
Please tell me how to stop the list items from displaying on top of my logo and the menu.
#papojari, I have checked your site and I think that it's the problem of the z-index between and header and main section.
Here is the adding style for fixing it.
header {
position: relative;
z-index: 99;
}
main {
position: relative;
z-index: 0;
}
I hope it is helpful for you.
Use this code to fix directly
header {
position: relative;
z-index: 99;
}
Reason
You need z-index to control the vertical stacking order of elements. And z-index only affects elements that have a position value other than static (the default).
Take a look of this https://css-tricks.com/almanac/properties/z/z-index/
I am trying to reposition the entire block of navigation section in a different position than it is right now, e.g. moving it a little upward as it is shown in the attachment.
I have tried to modify the CSS file under ..porto/web/css/header/type2.css with the class .nav-sections. I have tested with other possible CSS classes and after so many attempts I haven't found it working; now I am looking for help. Can anyone please give me any hint on this issue? I am using porto theme with my site.
Ideally you would want to edit the .xml file from the correct module within your own frontend theme. But if your specifically looking to just edit the css the below might work:
.page-header.type2.header-newskin .nav-sections {
text-align: center;
position: absolute;
top: 70px;
left: 35%;
}
you can just tweak the top and left positions to your needs.
I would like to insert a custom footer in every page dynamically, showing date and page number.
I'm using css plugin HTML-Sheets-of-Paper to create a A4 format size.
I did a small code javascript to make the job. But, in print page the div container doesn't stay in wish position.
I know that this question can be easy to some guys, but I tried several alternatives that I could think, without success.
I got:
https://fiddle.jshell.net/gustavo_sdo/avr5jw41/2/show/
Somebody can help me?
Try changing .page-footer to
.page-footer {
position: absolute;
top: 25cm;
width: 100%;
}
Thanks to #robert-eckhaus for the answer.
From this I got to the css that solved my question.
The final result and the code can be seen here:
https://fiddle.jshell.net/gustavo_sdo/avr5jw41/4/show/
I only have access to the css code so i can't edit the html. here's the page: http://myanimelist.net/animelist/linodiogo and the css code can be found here: http://pastebin.com/Kyz3dkmB. What i wanted to do was attach a transparent picture to the table right top corner so it would look better.
If you have any other recommendation I'm here to listen.
You can use the following via CSS, however you would probably need access to the HTML to be able to incorporate this without affecting the layout of the rest of the table.
class/id {
content:url(http://example.com)
}
I'm not entirely sure from the question/site what your aim is, but if you don't have access to the HTML it sounds as though an absolutely positioned pseudo-element might be the way to go here (even if you do have access to the HTML, it's still a good way to avoid clogged markup). The absolute positioning may avoid disruption to the table element.
Add position: relative to the table (or whatever you want the parent to be), and use the following to position a transparent element in the top-right:
parent:before {
content: '';
width: ...
height: ...
background: transparent;
position: absolute;
top: 0;
right: 0;
}
Taking this showcase example as a starting point: http://www.primefaces.org/showcase/ui/data/datatable/filter.xhtml
I want to place the input of each column filter instead of here:
I would like to have it here:
Below the header and above rows containing data.
Is this possible? I saw the attribute filterPosition of the p:column but it only accepts top and bottom and both are still inside the header.
I managed to do it but in a really hackish way, so I'll accept this until someone finds something else.
Having table_with_filter as a styleClass of the p:dataTable, I added the following css:
First, I created space between the data and the header with a border:
.table_with_filter.ui-datatable-data {
border-top: 25px solid #DDDDDD;
}
Then, I move the input downwards with a custom negative bottom, and set the overflow of the header visible so I could see the filter outside it.
.table_with_filter.ui-column-filter.ui-inputfield {
position: relative;
bottom: -26px;
}
.table_with_filter th.ui-state-default {
overflow: visible;
}
Maybe some minor adjustments more on the styles to fit everything perfectly and that was it.
Result: