How to absolute position (i.e. relative to browser window) an element in a MediaWiki article with wikicode and css?
What I need to do is put some icons in the empty space of the header area. For instance, in my movies wiki, in "Star Trek" articles I want to put a Star Trek logo up there that will act as a second logo, next to wiki's logo, creating the impression that we are in a sub-site inside the wiki, linking to home page of that sub-site, the Star Trek portal. And so on; for each group of movies there will be a different logo (X-Files, Star Wars etc). So this must be done with a simple template and not touching the skin (which is the Vector btw).
I've tried
<div style="
position: absolute;
top: 0px;
left: 0px;
z-index: 100;>{{logo}}</div>
but this absolute positions the logo to the top left corner of the content area, not the browser window!
I've also tried to put all this inside other container divs with all possible positioning and displaying but it seems I can't get out of the content area no matter what.
So the workround I've found is to change top to -150px; so that the logo would go to the desired place. But since this is actually relative to content area, if an article's title is too big and breaks into two lines, then the logo appears in a lower place following the content area that's also moved.
My guess is that MediaWiki uses some kind of code that makes the content area act as being the browser window or something. If that's the case, is there a way to override this? With a LocalSettings.php switch maybe?
In general, try to avoid position: absolute. In tends to break as the window resizes.
Your attempts are probably breaking because position: absolute will be absolute towards the next relatively positioned parent. Go up the DOM tree for that particular element to find a parent that is positioned relative.
In MediaWiki 1.25 and later you should use page indicators.
The wikitext you need is simply <indicator name="logo">{{logo}}</indicator> assuming {{logo}} contains the image in question.
Related
I'm currently working on a website using Elementor. I tried integrating a Footer using a separate plugin (Elementor Footer&Header), however, the footer didn't stick to the bottom of the page if there was only little or no content.
As this seems to be a common issue, I solved the problem by adding the following code:
div.footer-width-fixer {
position: fixed;
bottom: 0;
}
Now, the footer sticks to the bottom of the page, however, there 2 other problems:
The footer overlaps with the content in the bottom of the page (see attached image)
The footer is sticky, although I didn't set it up to be so. I only want the footer to appear at the bottom of the page, not while the visitor is scrolling.
Any ideas how to solve this? Thank you!
Best Regards,
Maurice ( :
overlapping-footer
Its tough to tell if the footer is actually overlapping another sentence (I only speak english so I cant tell if the sentence ends or read it at all). But it looks like its only overlapping the padding on the button and its just snug to the text content.
You could try to add either
padding-top: {desired pixel amount}px;
or
margin-top: {desired pixel amount}px;
to the footer and see if that does the trick.
As for the position sticky, If your familiar with the inspect element feature in google chrome; you can see what the class selector is that is applying the sticky to the element and then you should be able to write a bit of css to overwrite that fairly easily!
I have had the same problem a few times but I simply fix this by setting the height of the section to either "fit to screen" or the VH to 100 - the header height (If you use a transparent header). I hope this has helped you and if you have any questions don't mind asking!
I'm creating a website which will contain one page with absolute positioned divs. Technologies I use is CSS layout, Bootstrap framework, angular 2.
Problem that I'm now facing is that I need to place some divs absolutely. They are placed within the container. Structure looks like this:
<div class="container">
<div class="myowncontainer">
... some stuff at the beginning ...
<div class="absolutecontainer col1 row1">
... content ...
</div>
... more of the absolute containers ...
</div>
</div>
CSS:
.myowncontainer
{
width: 2600;
height: 700;
}
.absolutecontainer
{
position: absolute;
}
.col1
{
left: 5px;
}
.row1
{
top: 5px;
}
... and other rows and columns ...
Before you ask why I'm not using bootstrap features to build a table, the col1 and row1 can't be displayed as table. If you are familiar with sports, I need to show the double KO system, each of absolutely positioned divs is one match. It will not form a table by any means.
So, what makes it hard: when I place the divs absolutely, they will overflow out of the container div. I would like to position them WITHIN the container. I have tried also some relative positioning, but failed. There was always something that made it very hard or imposible to position the divs correctly.
Actual problems:
in chrome the myowncontainer is not of the specified width and height, the absolutely positioned divs are touching the edges of page even though the myowncontainer is bigger to provide some space around it. other browsers work fine (firefox, edge).
absolute positioning has the 0,0 point in the upper left corner of the PAGE, not the parent DIV. So the absolute divs are overflowing the container to the top and left. Maybe the relative positioning should be used, but how do I specify relative to WHAT? I mean, angular 2 places some tags around a code snippet when this snippet is also a component. I don't want to place it relatively to this generated tag.
what's the worst, in android's chrome the content is not shown at all. The absolute divs are completely missing. I haven't checked other browsers, makes no sense to me when the most commonly used browser is not working at all.
Of course I know the responsivness of such page will be bad, but that's what users have to accept, this is not a common page, it is a big overview that HAS to be placed exactly as I want it. It is also the only page in whole system that won't be responsive. So if you know how exactly should I place the divs, don't care about the responsivness... or if there is any way? I don't think so :) I believe everything can be solved by one simple trick, probably the relative positioning... but how? Site is online (still not used) and I can send URL privately if needed.
Thanks to everybody in advance.
I have tried everything within my repetoire to fix this. I fall on my knees with open hands!
You can view a draft of the page here:
www.barrettcv.com/draft_so.html
If you would like the gist of how the page should work, simply view it in Firefox (with browser window smaller than 992 and scroll down. The side panels start off attached, and then 'fix' to become static while the rest of the content moves. This is the correct behaviour
Main problem.
The problem arises in Chrome. When the menu column and the details column 'fix,' (scroll down the page a little) all digital hell breaks loose.
Secondary problem.
When the view window is about 1200px, the space between the menu column and the main content panel doubles up. This isn't as big a deal as the first problem (which has had me attempting to destroy my flat's retaining wall with my forehead) - but it's got me relatively flumoxed, as I'm sure there must be a more elegant solution that forcing it back into position with media queries
It looks like you are coming up against an issue in how the different browsers calculate the position of fixed position elements when no positional CSS properties are defined for the element e.g. top and left. From the spec:
...user agents are free to make a guess at its probable position.
For the purposes of calculating the static position, the containing
block of fixed positioned elements is the initial containing block
instead of the viewport...
I think the only way around this is to choose a different positioning scheme. You can remove the .col-md-pull-* and .col-md-push-* classes and reposition the Bootstrap columns by using absolute positioning (depending on media queries to arrange those columns how you want for different viewport sizes). In this case it appears all browsers honour the position of the fixed element.
.row {
position: relative;
}
/* apply to the details column */
.push-9 {
position: absolute;
left: 75%;
}
Example: http://bootply.com/92096
What you need to do is to fix both left and right column, starting from that you will have a much better way of controlling your divs (since you want them fixed as I can see).
So, sumarizing: you need to add position:fixed to both your left and right columns. Modify your left: x% and right: x% so that they match your criteria.
Per customer request I need to put an image in a form (via cforms in wordpress).
As you really can't display images there, I just abused a label field like this:
01a Contact Information <img style ="height: 155px; width:668px; position:absolute; top:235px; left:617px;" src ="image.jpg" />
Problem is that once I use position: relative it will extend the borders of that fieldset, that's why I chose position: absolute.
Of course the page is centered and this creates problems with screen resolution.
I can't create a div around this as explained here.
See a screenshot
What's the best code to use this?
You don't need to place the position: relative on a element that is the immediate parent of the image you are working with here - it could be any of its parents, such as the form element, or the container for the entire centered page.
As long as the element you place position: relative is part of the page that is centered the AP (absolute positioned) element will take reference from that element, and your img will be centered like the rest of the page.
If you want us to provide alternatives to what you're doing, the you need to tell us clearly what you are trying to do. Putting an image there is as simple as including the tag, but clearly your problem has to do with positioning - so tell us what sort of positioning you need for that image. If I were to list out all possibilities it would be a very long list.
I'm new to this site and thought I might give it a shot. I've been having a problem for quite some time now but as my project evolved other problems was solved, but this has remained. And finding the right thing wasn't easy. Im not even sure what the term is for this kind of thing.
Anyway, I want a background image to the right and left of my main page. It need to be z-indexed below the actual page(incase people with low resolutions view the page) so that it doesn't extend over the main page and makes the content unreadable. It needs to go below the actual page if low resolutions are used.
I've been using the following code to do the work for me right now:
<img style="position: absolute; top: 120px; left: 10px; width: 121px; height: 443px; z-index: -1;" src="../admin/images/background_text.png">
Problem is that this isn't working to good with older versions of IE for example and in some cases not at all in others. As you can see it has a set position on my page(left side its higher up on the page) which is also something I want to achieve.
I hope I explained this good enough and cheers to this site. Seems like a great place to find solutions.
Cheers, Martin.
Try this:
<body style="background: url('../admin/images/background_text.png') 120px 10px;" > rest of the page...
this sets the background for the whole page (what it seems kind of like you're doing?) to the given image.
I would also size your image to the desired size if it isn't already, then you don't need to supply width and height (or worry about IE rendering the resize).
if you're really just putting it on the side, I might use a table or div setup and set the background on that (not knowing how your page is setup).
Im not sure if i understand your question or not.
Anyway. Dont set your z-index on the image. I would set position relative on the layers that needed to be at the top.
Remember that IE6 dont get the z-index. It figures out which comes first and then its the last one that is on top, even though it haves a lower z-index.
Here's an improved answer for you:
Give your "wrapper" div the background image as described before. Then extend your main table all the way to the right (or wrap it in another table or div with 100% width) and give that the right side background image. Then the images are still behind all the content and they both should behave as you want them to.
if you need more info on the background css attribute, check out the WDG page