I added a custom control to a .NET page which allows user to upload a picture.
This control has a div element which parents an image that is supposed to get printed. The control is positioned near the bottom of the HTML structure and therefore the image gets printed on page two.
However the problem is that I want the picture to get printed on page one but no matter what I try the picture never gets there. I've tried absolute positioning and floating.
Now what to do, what to do? :)
Update:
The HTML page includes many forms and stuff so it's difficult to give code examples but here's what it basically looks like:
<div class="col">Bunch of stuff</div> // Left column
<div class="col">Bunch of stuff + the image control</div> // Right column
When print; the columns are stacked upon each other by using float, but I want the image element to be positioned on top of page one.
Since I couldn't figure out a solution for this problem, I ended up with restructuring the HTML so that the "image control" was at the top. Then I was able to position the control at the top of the printed page.
Related
I will try to explain my problem in a way that is as clear as possible.
We are using a ERP that is web-based and when you access a Sale Order document you get to see a form view with a status bar in the top (which shows the current status of the document and also some buttons to perform some actions) and a table with the sale order lines within the document.
The problem is that some quotations are too big and the header of the table gets lost when scrolling down. I'm facing a lot of trouble try to get the header of a table stuck at the top using CSS only.
Here's a snippet of the source code:
If I set the header position to sticky and scroll down, what I get is this:
As you can see, it is underneath the statusbar. I'd like it to stick to it. But I don't see how would I define a div that goes from the bottom of the status bar to the end of the view so the header sticks in there.
I know I can set the "top" property of the header to the exact height of the status bar but this one can change if there's a lot of content on it, that's it, it's a dynamic height.
Here's the div structure:
I can provide a html file if needed.
Thank you in advance for any help!
I've got a Boostrap website with a navbar across the top and two columns divs in a row. The first column contains an image and should always stay fixed in position. The second column contains (potentially) a page or two of text and should scroll independently.
I've used position:fixed to hold the image in position, but my issue is that I would then like to add a link underneath it that links to the terms and conditions for the page.
BootPly
Is this possible?
Many thanks.
There a couple ways of doing this. I won't go into code since you don't have anything to work off of so I hope you can understand my explanations.
You can try simply putting the link position: fixed as well and set the top property of the link element so that it'll be positioned below your image (you can play around with this).
Use a div that is set to position: fixed that will contain both the image and the link. Then you can just simple put the image inside the div without any positioning and the link should go underneath the image without any positioning either.
You can set the text on the right side to be overflow: scroll and set the width/height of the right text in the div so that it can scroll. This will essentially keep the document still but allows the user to scroll up and down the text content inside the right side div.
Number 1 is the quickest solution, number 2 IMO is the best solution. If you need some help with the code, post a Fiddle so we can see what you're working with.
Try this:
DEMO
<div style="position:fixed">
<img src="http://placehold.it/100x300" class="img-responsive">
Terms and Conditions - Privacy Policy
</div>
Is there some css/js/jquery to use on DIV in main index.html if I want to display it in all subpages without editing their code? E.g. <div id="chatbox"> placed in main index.html to show in /products/index.html.
It's a generic idea. My way is as follows.
Divide body into two parts or as required. Let's assume two parts. Top one gonna be fixed in all pages. Bottom one gonna change. So when you want to move to another page, just render contents in the bottom container after emptying it. Don't touch top container.
I currently have a website up and running: http://reinhartasmimenumentions.com/
I am trying to wrap a form around the picture so it would look something like
Currently I can only figure out how to add the form below the picture.
What do I need to do to place the form to the right of it instead of at the bottom?
You have to use the margin properties of the elements.
Something like this:
<div style="margin-left:200px; margin-top:200px;>
<form>
....
</form>
</div>
Personally, I would break that image up into 2 parts. One part would be the top part(header) and the other would be the lower left section. Then set up 3 divs, the top div contains the header image the floated left div below that contains the other part of the image and then the right div contains the form HTML.
Of course, it would be much better to recreate that image using HTML as much as possible.
I am doing a popup on a clients site for their new restaurant location. The base site is kind of a cookie cutter type site, and very messy (I'm not sure if I should attribute this to the problem). Everything was going fine until I added some divs that were positioned relatively and had width and height to the absolute div "pop-up". Now, the popup pushes the base site down, and the popup goes behind (it has a z-index of 10?). Here is the brand new css:
http://addproxy.net/sites/testing_space/css/style.css
and the site is down a level:
http://addproxy.net/sites/testing_space/
And a mockup of the desired effect (disregard the backslashes, hit max of href):
//http://addproxy.net/sites/testing_space/popup-mockup.jpg
The divs that seemed to trigger the problem were the .coupon class
Any help will be greatly appreciated!
You placed the original content inside of your new div's.
To make it look like your image that would be the id="coupons" div. Just so we're clear it's the one that starts like this:
<div id="coupons">
<div class="coupon" style="background:url(images/bg1.png);">
You need to move that div (and all it's contents) to just after the end tag of the id="popup" div.