I need to add a graphical letterhead to the top of the first page of my jupyter notebook.
It runs from the top edge of the paper to the left and right edges for the height of the svg image.
I have tried a markdown cell with:
<img style="float: left;" src="page_header.svg" width=740 height=160>
This results in the image being padded to fit within the "output cell" area.
I've also tried a code cell (with hidden input):
from IPython.core.display import Image, display
display(Image(url="http://localhost:8888/files/page_header.svg", width=740, height=160, unconfined=True))
Which results in the image being about the right scale, but contained within a small window with scroll bars again within the output cell area.
Is there any way to have the image placed across the 'paper' such that printing from the browser to a pdf results in the image at the top of the page, and edge to edge, where it belongs?
Related
I am a beginner web developer student. I am trying to create two columns and three rows of flex boxes within a grid container. I have text on one side with an image of a delicious looking pancake in the second flex box which is at the top right corner.
Even though I had the image set to 100% to fill in the box, my image keeps zooming in so that it only shows a partial image. Using different images, I spent quite a lot of time realigning the container and boxes and looked up multiple ways to resize and reposition the image but for some reason, it keeps zooming in. How do I get the image to zoom out evenly so that the user can see the full pancake image while it also fills in the entire flex box?
Original Image: https://www.koreanbapsang.com/wp-content/uploads/2015/04/DSC9846-350x350.jpg
enter code hereCode Pen: https://codepen.io/rylew09025/pen/ZEWaNOj
I am trying to incorporate the following image into the cover page of my report.
It's currently saved as a PNG file with dimension 1275 x 1650.
Like a lot of online posts suggested, I
* inserted a rectangle
* set the image as the background image
And here are my properties for the rectangle.
When I rendered my report to PDF, the image was splitted
into multiple blank pages and the bottom of the graphic (with logo and URL)
didn't even show.
How can I make sure this graphic is displayed fully on only the first page?
I can't tell if you have other objects on your cover page, but here's what I did to get this working correctly.
Add an image object to your report.
Make sure the margins are set fairly low(I used .25in for top, bottom, left, and right).
With the margins set at .25in, I set the image object to a size of 8in x 10.5in to fill the remaining space on the page.
In the image object properties, set padding options all to zero and Display to "Fit to size".
Now the trick here, is to put the image object in the very top left corner and resize the report to the exact size of the image object -- no whitespace in the design view. For me, this returns a single page report with the entire image shown on a single page.
What I am trying to do is similar to an image map - in reverse. I have a large image (over 2000x2000) and want to give links to coordinates on the image. There are items in the image that I would like users to be able to jump directly to with having to scan over the whole image manually. Is this possible with either CSS or HTML by adding links to coordinates or adding anchors to the image? I would use js if that was an option as well.
Interesting. The notion of jumping to a position on a web browser window is limited in general. Here are some general possibilities, without specific implementation details:
You could treat it as a sprite image, and use JavaScript/jQuery to change the image coordinates so that the point of the image you are interested in moves to the the top left of a div positioned on the page. But the portion of the image above and to the left of that point would not be visible.
You could define it as a background image in a div, and define an invisible table or invisible fixed-position divs within that div, and link to specific divs or cells in that overlay. In this case, a y-coordinate in the image where the div or cell is positioned would probably move to the top of the browser window, but horizontal positioning would be problematic. If the div or cell you target is off the screen to the right or left, the page would shift to expose it, but I don't thing that you could guarantee where the specific x-coordinate would be positioned. Also, if the target is near the bottom of the web page, that target point will not move to the top. But this solution wouldn't require JavaScript/jQuery - it would just mean linking to element ID's on the page.
This is almost the same as #2... You could overlay the image with divs and/or a table at higher z-levels, and link to those divs or table cells.
You could use JavaScript/jQuery to position a fixed-size div with visible borders so that its upper-left corner is at the position in the image that you are interested in. I think you'd still have to link to that div in order to make sure that it is visible in the current viewport.
You should be able to lay out a form over the image and move the cursor to fields on the form. I think that the form could be transparent so that the cursor appears to be moving around on the image. But you'd need be confident that the data entry cursor is sufficiently visible on top of the image to be useful.
I have a psd file with layers that is a mockup of a web page I need to create. You can view a page scheme here. For each page element (header, menu, main body, footer, etc) there are layers in the psd file. There are also some rounded images with drop-shadow that also constitute layers and they overlap among themselves, as well as the main body text area and the header of the page, as you can see in the page scheme.
My question is, what would be the correct method to export slices for using the exported images in the page markup:
Option 1: Export the rounded images as layer-based slices (after I turn off any other layers below them) and use transperency attributes for the images.
Option 2: Export rectangular user-slices that contain a page part (eg, main body) and the parts of the rounded images that overlap this page part.
For example, in the 1st case, I would export all 3 rounded images as a layer-based .png slice (after I turned off the header and main-body layers), ending up with the 3 images with transparency. Then I would place this image with absolute positioning, so it overlaps the main-body and header.
In the 2nd case, I would slice the whole header part with the part of the img1 that overlaps it, then I would slice the menu, then I would slice the main body part, including the parts of the images that overlap it, then I would cut another slice to the right, containing the rest of the images' parts and so on. If you go to this link and click on the template thumbnail, you could check with Firebug a similar approach to the 2nd option, regarding the floating images on the upper left of the page.
Option 1 is the way to go. With option 2, a design change or repositioning of the circles requires you to re-slice everything again.
I have rectangle which act as container for other elements.
Can I somehow setup some property of rectangle to round its corners, in fact, to get rounded box.
In css it is easy, but how to do in SSRS?
Actually, it is fairly easy. I had a bunch of text boxes that a rounded corner border needed to be placed. The first thing I tried was an image control. I placed it on top of my text boxes and set it to "Send to back." It worked well in print rendering, however, in the browser rendering the HTML placed the textboxes after the image making it look horrible.
The solution was this:
Go into paint and draw a rounded corner box the size you need.
Cut the set of text boxes to surround with rounded border.
Place a rectangle control over the entire area all the text boxes covered.
Paste my text boxes onto the rectangle.
Right-Click and choose rectangle properties.
Select the Fill Tab and select "Embedded" image source.
Click Import and select your paint image(i used PNG but it shouldn't matter).
Click Ok.
Find and expand BackgroundImage on Rectangle and change BackgroundRepeat to "Clip.". Otherwise, your image is repeated.
The report should now render properly in both print and html rendering views. Unfortunately, this doesn't seem to stretch/size, so unless you can figure that one out, you will have to repeat whenever you need a different sized rounded box.
Brian
All solution I have seen use a background image inside a textbox.
But you get problems when you try to resize the textbox.
The solution is to insert a 3x3 table inside the texbox.
Insert the 3x3 table
Insert an image on each corner. They will be a quarter of a circle each. (This image is created in MS Paint or your favorite image program)
Make those 4 corners cells unresizable (Set property CanGrow to false). Make sure all the other cells have CanGrow = true if you need it
Make all the cells the same background color (same color as the image you draw).
Write your text in the middle cell.
OPTIONAL: It might also be a good idea to fuse the 3 vertical middle cells if possible. It will allow more space to write text in the cell.
This way you won't have to create new image everytime the size of your textbox change.
You would have to build an image that has a transparent center for adding your text.
All this would be more work than I would want to do just for a report.
I would stick with just the standard textboxes.