I have a program that creates a report in HTML. That HTML file is displayed in a TWebBrowser component (Delphi) and basically prints the page using this code:
WebBrowserComponent.ControlInterface.ExecWB(OLECMDID_PRINT, OLECMDEXECOPT_DONTPROMPTUSER, vIn, vOut) ;
The report needs to match a pre-printed form. In order to place values exactly at the right place, I use CSS code like this:
#date_of_invoice {
position: absolute;
left: 3mm;
top: 90mm;
width: 29mm;
height: 5mm;
text-align: center;
font-weight: bold;
}
This was a working solution. Any new client that wished to use this program could hire a web designer and customize the HTML template for their needs. Today I got a new request, saying that there should be more than one pages printed at once. I can force new pages by adding:
<div style="page-break-after: always;">
content on page...
</div>
However, when absolute positions are used then page-break-after has no effect on the absolutely positioned elements. So here is the question: is it possible somehow to position elements relative to the top left corner of the current page? I know that HTML does not have a "current page" concept. But since we have "page-break-after" CSS property, I was hoping there might be something similar for positioning elements relative to the current page. Maybe there is a trick to place a small invisible element in the top left corner and position other elements relative to that invisible point of reference?
The other option would be to reimplement all reports from scratch and use PDF instead of HTML. Which would be a very bad idea because there are already several reports made with HTML, and I don't want to redesign them by hand, and then I don't want to tell my customers that they won't be able to customize the reports in the future.
Related
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.
Edit 3: I guess this is solved. I just enabled the Gutenberg editor and discovered its "Classic editor" part, the Code Editor. The only thing I have to get used to is the editor's line-height that I can't easily modify, which isn't bad. This is working for me and it outweighs the need to modify functions.php or other complicated things like that (to me). Thank you.
[Disclaimer: I'm not a developer of any sort, but willing to take the time. (Can do a bit of CSS.) Also, new to this forum.]
I’m using Anders Norén’s Hemingway theme.
I haven’t tried creating child themes yet and I’m not sure whether a solution to this requires one.
My goal, in short, is to make the whole “Edit Post” webpage look like an offline word processor:
Make the Visual editor occupy the whole screen. (I use the classic
editor.) (Done: Collapsed the vertical menu on the left side,
selected 1-column layout, and disabled “full height editor and
distraction-free functionality.”)
Set a width for the text (because currently text is almost from edge
to edge of screen)
Put text at the center (but “aligned left,” not “justified”). This
is for the "left and right margins," within the post editor.
How do I do #2 and #3?
Thank you.
Edit: Just to clarify: I'm looking to change how the Visual editor looks--only the Visual editor, not any output the live website would show.
Edit 2:
I can replicate what Balázs Varga showed, but (I'm sorry I should I have said this earlier) it doesn't work after I save the code on "Additional CSS." (And after clearing all caches.) I used the id #tinymce.
My browser (Firefox Developer) shows the changes in real time while I fiddle with the Inspector, but not after I save the additional CSS. That's weird, I think, and I think I can handle CSS pretty well: the theme Hemingway on my site doesn't look like the original Hemingway anymore, but all changes were made only through Additional CSS.
Searches on Google showed me that I might need to edit "functions.php"(?), but I don't know how that works for now, and I thought there might be another way in 2019. I avoid editing "complicated" things like that (to me), unless Wordpress makes it hard for me to break things, like with "Additional CSS," for example.
On the Inspector, I can solve it with something like this:
#tinymce {
margin-left: 300px;
margin-right: 300px;
}
I wonder why this isn't a "feature" of the Visual editor already. Would be really nice. It could eliminate the need for word processors or third party editors (at least for "words only" writers like me).
You can inspect the element in your browser, so you can see that it's a tinymce iframe with the id content_ifr.
If you want to set the width in pixels, you could do:
#content_ifr {
position: relative;
max-width: 600px;
left: 50%;
transform: translate(-50%, 0);
}
left:50% alongside with position:relative will push the element to the center horizontally. However it will push the left side to the center, so you also need a horizontal transform set to -50%, so it's pulled back to the correct position (because percents in transforms are counted from the size of the element itself, not from it's parent like left does)
You should see something like this:
If you want to set the width in percents, you can simply apply a margin-left to center the element:
#content_ifr {
width: 80%;
margin-left: 10%; // set this value to: (100 - width) / 2
}
EDIT
You can also edit your functions.php to append your styles to the page, for example in the header area with the admin_head hook:
function hook_css() {
?>
<style>
#content_ifr {
position: relative;
max-width: 600px;
left: 50%;
transform: translate(-50%, 0);
}
</style>
<?php
}
add_action('admin_head', 'hook_css');
HTML fragments using links to pages using /#page-section to link to a specific section of a page is loading too low down the element for me.
For example I set up a <div id="engagment"> and then link to site.com/#engagement but instead of it linking to the top of the section like this:
what I want to happen
I get this: What actually happens
Is there anything I can do to fix this?
Thanks in advance. I'm new to html/web development.
That's because you have a fixed header which overlaps that section (which is actually positioned at the top of the window). So you need to create an offset.
A common way is to add an invisible pseudo element to the original target element of the link via CSS, like this:
#page-section::before {
display: block;
content: " ";
margin-top: -150px;
height: 150px;
visibility: hidden;
}
This will "extend" the element with that ID in a way that causes the anchor to be 150px above the main element, without any other visible changes. Adjust that value as you need it (i.e. to the height of your fixed header)
(A padding-top or margin-top would do something similar, but it would create an empty space in there, which you might not necessarily want)
This is a relatively small project that I've been working on however it's driving me insane...
I'm trying to port my original website (which was done completely in Dreamweaver, HTML) to a Visual Studio 2013 ASP.NET project where I can add databases, login's etc. for an assignment I have.
The main problem I have is the fact that my CSS code does not want to do what I tell it to do in terms of the layout.
I've tried completely remaking the website entirely step by step, making sure each aspect works correctly before moving on to the next.
This is what my original website looks like:
http://i.stack.imgur.com/sxfeg.png
(Original HTML + CSS) https://gist.github.com/anonymous/7ed94218f9374d41918e
Now, I used a template a long time back in order to get this design and I've experimented to see which CSS code affects the layout and found that the tag main_container (line 13 of the HTML gist) controls the white background of the website.
So if I remove the tag, this will happen: http://i.stack.imgur.com/BFNLE.png
^ This is important in my problem.
When porting over my website, I copied across all the code correctly and adapted it to ASP. (See Gist: https://gist.github.com/anonymous/9c09befeb8950f4c1416)
However, in doing so, I encountered a problem where the CSS code for the main_container was not being used correctly.
#main_container{
width:977px;
background:url(center_bg_repeat.gif) repeat-y center;
The image was not being repeated on the y axis like on the original website and here's the result: http://i.stack.imgur.com/E4TZU.png
Have I got the syntax wrong? Or what is wrong with my code?
I've placed all the images in the same folder as the CSS file for
convenience.
Is this a problem with Visual Studio 2013 or am I doing something
fundamentally wrong?
Is there perhaps another way to port this same design without
causing so many problems?
I'm not entirely clear on what you want to achieve but if it is the same layout as your original site, then it is better to replicate the html and css exactly first to get it working then look at restructuring or refactoring the code. For example, check that all element sizing is the same so that content displays as you expect.
There are a couple of key differences between your original and new code that could affect the behaviour in the new version of your site. In your original css you don't have a repeat style for center_bg_repeat.gif. Also, it looks like #main_container isn't referenced in your original code.
Repeating a background image won't cause content to repeat across the page. You are already including your content in your new html so you just need to use positioning (e.g. floats vs relative/absolute positioning) to get the tiles to layout in the way you want (see code snippet for an example).
html, body, .container
{
height: 100%;
min-height: 100%;
}
.tile {
float: left;
width: 20%;
height: 30%;
margin: 10px;
padding: 20px;
background-color: #ccc;
}
<div class="container">
<div class="tile">first</div>
<div class="tile">third</div>
<div class="tile">second</div>
<div class="tile">fourth</div>
<div class="tile">last</div>
</div>
In your case, if you want #main_container to scale to fit the content then set its style to min-height: 100%;
So, there have been some questions about this already, but mine is a bit more specific.
I want to add a 40px high admin bar to the top of all pages of my CMS when the user is logged in as an admin.
But I don't want to obscure the content on the page, so I want to push it down. Remember, this is a CMS so there is a lot of different CSS/designs on all the pages that use it. The system do have control of all the CSS though, so I can change it on the fly.
I started out by adding a "margin-top: 40px" to the body element before realizing that the background-image of BODY isn't actually attached to the body, but rather the otherwise unstylable root element.
So, I used "background-position: 0 40px" to move down the background image. Score! Only, some sites already used background-position to position their background in relation to the content and me overriding that severely messed up the design of those pages.
So - is there a better way to handle this? Or am I going to have to parse and alter every sites possible background-position on the fly - which I can do, but rather not :)
Thanks for your help!
To avoid the problem, you could change the way your CMS functions. Add a full page wrapper div that acts as a body for the user's content. Then, inserting a 40px high element above the wrapper will universally push it down.
You can try the following, you might need to position your cms toolbar negatively though.
html { margin-top: 40px; }
#yourCmsBar { position: absolute; top: -40px; height: 40px; }
You can push down the html element if the background is applied to the html element, and then use position:absolute to positioning your header. Example: http://jsfiddle.net/u22zE/2/