Can i use an html page as content of another HTML page..? - html

Im new to programming..Can anybody help me out please ....
im using an html to display an image later i want to display another html on the first html so i need to set second html as transparent. so the image in the first html looks like a background image....
is it possible...?
Thanks

Well you actually could use an <iframe> containing the second page in a floating <div>-element. But as always, it's not always good just because it exists or because it was technically possible.
Except for the use of frame, you should never have more than one <html> and never more than one <body>
It would be the best to have something like this:
<html>
<head><!-- header goes here --></head>
<body style="background-image: url('first.png');">
<img src="second.png"/>
</body>
</html>
Sure you could extract the css-part into a css-file. And you could set the style-attribute for another tag as well, it doesn't forcibly has to be <body>
hope that helps a bit.

You can't. But if you just want a background image, you can accomplish this by using CSS and the background-image. See: http://www.w3schools.com/css/css_background.asp

With a scripting/programming language you can.
In ASP.NET you can read the contents of an html file and put it inside your current page.

It doesn't sound like iframe is what you are looking for. Perhaps the use of the words "on" and "transparent" are throwing me off. It sounds like you want to have two HTML pages, with the content from one appearing in front of the other but transparent? In that case I think CSS z-index might help you:
https://developer.mozilla.org/en/Understanding_CSS_z-index/Stacking_context_example_1

Related

Advise on coding image and text to already deployed HTML pages...

I am here to ask a couple of questions if I may.
I understand that the CSS is for styling, I have some method which works to a degree i.e text changing but this seems to be limited.
I have about 600 html pages that have some exact content on the pages.
I would have liked to be able to have a CSS or text doc which can be altered to change all html pages in one hit.
Though I am limited to html and css only, other options are not available to me.
I would one like to change blocks of text that is some volume, and images if possible, so I don't have to redo every page as it's very time consuming.
The other issue it needs to be cross browser compatible.
I know there are some great minds out there, I am willing to give any of them a go...
You should be able to use the css rule, "content: <desiredTextOrAttribute>"
https://www.w3schools.com/cssref/pr_gen_content.asp
Suppose you want to be able to set the title on all 600 pages to Company X:
HTML:
<div class="companyName"/>
CSS:
.companyName:after {
content: "Company X"
}
Here is a fiddle: https://jsfiddle.net/onm30rdn/1/
Of course, you won't be able to dynamically change this, and I think Javascript would be a way better solution in general. But this will work.
Assuming you can make your own custom stylesheets with css, you might get some love from pseudo-elements, such as ::before and ::after.
https://www.w3schools.com/css/css_pseudo_elements.asp
Basic idea is that if you can select an html element reliably, you can make a virtual element next to it for the browser to display. The code below would append "hello" before the existing text.
HTML
<body>
<p class="foo">World</p>
</body>
CSS
.foo::before {
content:"Hello ";
}
Result
Hello world

Using div tag in html without using css

I have to make an html page without using css...
the problem is that, that i want to use div tag and add an image as my background and write some content over the image, so please suggest me ways to do it.
Thanks in advance!
Some examples, with this you don't need to include/insert all css file
<body style="background-image:url('http://example.com/background.png')">
or
<div style="background-image:url('bakground.png')">
Without css you can't set background

Editing css in individual tumblr posts

I am by no means a coder but I know I need to fix an image source bug in my individual tumblr post CSS. I must have a shoddily coded theme that makes me have to manually put in the image source code for each photo in photo sets. But when I click on the HTML on an image post, I can't actually edit the CSS but just the html. Can you even do that?
I figured it out!
Before:
{block:PermalinkPage}{‌​PhotoURL-500}{/block:PermalinkPage}
After:
{block:PermalinkPage}{‌​PhotoURL-HighRes}{/block:PermalinkPage}
I'm not clear why you can't edit your css. But if that's the case you can try styling your images by using style within your < img > tag.
<img src="your-img-path" style="height:100px; width:100px;" />

Is it possible to use html to style a div i cannot directly access the code of?

I am using a cms system that allows me to write html in a source box, a bit like wordpress. There is a div currently showing on my site that i cannot directly access the html or css of so i am un-able to get rid of it. Is it possible for me to write something with html that will allow me to hide this div ?
You can try using document.addEventListener inside a <script> tag to change the properties of the interested <div> block after the page is completed loaded.
Considering your below line:
.......css of so i am un-able to get rid of it.
lets say id of div is div1 then on the main HTML page which you have access to, add below lines :
<style>
#div1 { display:none }
</style>
Not very sure on this but logically this should work!!

CSS: HTML height:100% on one page only

Dumb question with a simple answer, I think.
I am building a site that has a completely different layout on one page from the rest. On one page, the design requires a liquid vertical layout, so I need the following code: *{height:100%;}On the other pages I just want the default height.
I tried to add a class to the html tag, which works in the html, but not in the CSS file. I tried:
*.myClass
and
html.myClass
but it doesn't seem to work.
I can't seem to find any info on this online. Is it even possible to add classes to the html tag?
I am using wordpress, so I can easily check to see which page I'm on and add myClass.
I guess I could also use #import to get a different style sheet based on the page I'm on, but that seems like a longwinded way of doing things.
How can I specify height:100% as a value of the html tag on specific pages only?
Can anyone point me in the right direction?
Thanks,
J
Perhaps .myClass, .myClass body {height: 100%}?
It is indeed possible to add a class to the <html> tag.
Live Demo (see code)
This will work, because I just applied this in one of my projects earlier today. :)
html,body {
height:100%
}
If you have pages that require the default height, then don't load this css style. You can place it in a separate CSS file.