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.
Related
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.
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.
I'm trying to add text within the timeline on this page: http://dev.greenthumbweather.com/frost_date.php?location=medford,%20or&lat=42.33&lng=-122.88&temp=36
The CSS I'm referencing in the script is: timeline_custom.css
I've tried adding position: relative and z-indexing to keep the text in front, but it's still behind the timeline.
I want to place the text within the timeline frame but have it in front. There are some other CSS rules going on with the timeline, with files timeline-2.5.0/timeline.css, so perhaps there's some conflict, but I haven't been able to locate it.
Any help would be greatly appreciated. Thanks!
Shad
Your "timeline" widget seems to be hiding your "info" element after it's done loading.
I would suggest you do the following:
1) Take the "timeline_info" div out of the "timeline" div.
2) Place it right before the "mytimeline" div.
3) Create a container div for "timeline_info" and "mytimeline" only.
4) In your CSS:
#timeline_info {
position:absolute;
top:10px;
left:10px;
font-size:12px;
}
Set "top" and "left" (or "right" and "bottom" if you prefer) depending on where you want it placed.
The order of the elements in the new container (with "timeline_info" coming first in the DOM) should automatically make it so that your text should appear "ahead" of the "mytimeline" div if and when they overlap, so you should probably get rid of the "z-index" rule.
Is there any way I can postion DIV relative to text INPUT?
<input type="text" id="inp" style="padding-left: 20px" data-kb="GE" />
<div>GE</div>
I want to position DIV on top of input field, before text.
I know I can put both of them in same div and postion it relative to it, but I want to know, is there any way to do it without additional DIV.
Edit:
I forgot to mention that there may be multiple nodes in a parent node of my input field, so positioning my div("GE") relative to parent is not a way to go, because I can not determine position of input inside its parent. I'm specifically looking for a way to position one node relative to other, when that particular element is a single tag and can not have any children.
You can accomplish this by applying a negative margin-top: to your div:
div {
margin-top: -16px;
}
Check out this JSFiddle.
For what I've researched there is no direct solution to my problem. Because input is a single tag, It can not have any children nodes and because of that, It can not be rendered relative to input tag.
I guess the only solution would be either with complex javascript or jQuery (.postion()). If solving this problem was absolutely necessary you would have to find postion of input and place div relative to it, but then again, it is not a good solution, because if input field gets moved div will stay in the same place, unless you listen to that particular DOM mutation (I don't even know if it's possible).
That is what I've learned so far, I wish to be wrong, so If someone proves me wrong, i would be pleased :)
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