html to cshtml - unexplained page shifting - html

Built a web-page using atom. Then, copy and pasted code into an cshtml file for an ASP .NET web project.
Almost everything shifts. Fonts, buttons, images, and page header shrink in size.
cshtml file's width measures different than the original html file (~300px difference) but I am using the exact same code.
Anyone have any idea what's going on here? It's as if there is an extra 300px in my view when using cshtml.
references:
html
cshtml
Github links for my code:
ASP .NET (one with issues) => https://github.com/thomasbaldwin222/WestfaliaHosting
HTML => https://github.com/thomasbaldwin222/Westfalia

Related

Identical HTML not rendering the same

I have a program that let's people design web pages graphically. Then hitting Publish creates an html file that is supposed to be an exact copy of what they created. The elements created by the editor are HTML elements. Publish then gathers up all the elements that have been created and for each one adds it to a string with
canvasOuterHTML += clone$[0].outerHTML;
So all the styles, text, etc., get put on the string. This string, along with some other information is written to the .html version of the page, and when this .html is loaded into a browser the browser displays the page!
But something is expanding the published page vertically. I've created the simple page below to illustrate. The first image is the page in the editor. The second image is what the html displays in the browser.
I'm completely stumped because the HTML and CSS for the two markups is exactly the same, so how can one be higher? I can't even think of a mechanism that would do that. Does anyone have any ideas? Thanks.

html file downloaded from webpage - content missing if .html is viewed in browser - possibly ReactJS

Overview:
After viewing a webpage online (using Firefox), I saved the webpage to an .html file. Upon then viewing the saved html file in Firefox, much of the content is just not there: I basically just see what amounts to a header and footer. The content I am actually interested in is not displayed. However, when I use an editor to look at the .html file, I can find the content among the html code fine. I just doesn't show up when I view the page and I can't figure out why. I am wondering how I could alter the code in order for the full page to display.
Specifics:
The webpage I am trying to view is for a recipe (http://www.cooksillustrated.com/recipes/1). This website requires a paid login, so you will likely not see the entire page anyway.
This link has a zip file of the .html file and the folder with the other images and stuff - https://drive.google.com/open?id=0B7IvODgWvxBbc1EwcmFwa050REE. The .html file has some name/email info in it but I have replaced it with made up info.
The relevant part of the .html file that does not view is lines 395 to 408. All the parts of recipe are right there, but it does not display in a browser. (I tried to display these html lines inline, but it exceeds the 30000 character limit.)
This makes me think that something (with which I am not familiar) in the html code is preventing viewing that content, and, if it were deleted or altered, would solve my problem. I have tried searching the web for an answer, but came up empty (I was not not really sure what to ask). And I have very little experience with html to know much of what is going on in that file. (And I want the html file; I am not looking for an alternative like just printing to pdf.)
If anyone can provide some pointers/direct me to a resource that would be greatly appreciated.

Navigation html pages liferay portlet

I'm new in liferay, into my portlet i have html pages with angularJs not jsp.I would ask about how to navigate between these html pages into my portlet..thanks.
I think you are bit confusing about technology.
JSP pages always generate HTML page for your browser.
It means that you create a JSP page containing just HTML nothing changes (this is correct from a developer point of view... thinking to server job this is not true... but think it is true for our purpose).
Client side technology you are going to use is not relevant from a portlet point of view (it can be a problem if your theme uses some not compatible libraries...) but in general whatever library you use (angularjs, backbone etc.).
It means that you can create html or jsp pages containing all the angularjs code you want... and everithing should work fine.
If you want to manage navigation between "pages" in the same portler (e.g. from view.html to details.html) then you have to mind, simplifying, that portlets haven't pages: your portlet will be added in a page of the portal (with its own URL).
So you can rename your html files in jsp files (as I told, nothing changes), then you can tell to portal what is the correct URL to load by JSP code.
For example for making a link to "details.jsp" in your "view.jsp" you can write a code like following:
<a href="<portlet:renderURL>
<portlet:param name="jspPage" value="/path/to/your/details.jsp" />
</portlet:renderURL>">Text</a>
Obviously you can use the <portlet:renderURL>...</portlet:renderURL> code wherever you want... because it will be translated in a string before sending to browser... like in javascript var url = "<portlet:renderURL>....</portlet:renderURL>"
You shouldn't forget to put these lines at the beginning of yout jsp files:
<%# taglib uri="http://java.sun.com/portlet" prefix="portlet" %>
<portlet:defineObjects />

Maintaining consistent look across multiple views in Razor and HTML?

I have ASP.Net MVC 5 application with Layout.cshtml and I have included the HTML view page. But I want to keep the consistent look and feel across multiple views in my application. I know I can do this if I have a Razor view page:
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
If I'm also using the same above code on the HTML View page, it doesn't pick up the Layout as it does in Razor page.
In html page you can't call '_Layout.cshtml' file directly to use layout , you have to add style and html tags manually in new created html file which you have in '_Layout.cshtml'. There is an option to call '_Layout.cshtml' using iframe but it is useful only if you don't want to apply server side logic, which is of less possibility.

How to display CKEditor content in HTML page?

In my application I have used CKEditor text editor to store large data.
That data may come from another html page by copying content from any web page.
When doing above scenario,
if client missed any to copy properly ended html tags from that web page, they copied incomplete html content. When client paste it inside CKEditor, it showing good.
But If I display whole content without CKEditor,
Its leading to following issues,
Page collapse , because if client copied partical (in completed content from other web page)
CSS class override
Please give solution for that.