Including one HTML file within another with iframe
With PHP, if you wish to pull code into a PHP file from another file,
you can use
include(path/filename);. If you wish to include an HTML file within another HTML file, one way to do it is by using the inline
frame element
IFRAME
. E.g., if I wished to include HTML code from two HTML files and have
the contents of those files appear on the right side of the web page in which
I am including them, I could use the following:
<div style="float: right;">
<iframe src="/dir1/file1.html" height="2000" scrolling="no" style="border: none;"></iframe><br>
<iframe src="/dir2/file2.html" height="1225" scrolling="no" style="border: none;"></iframe>
</div>
You can control both the height and the width of the iframe. E.g., above
the first iframe element is 2,000 pixels long and the second one is 1,225
pixels long. The width was not specified above, but also could be specified with
width=n where n is the width in pixels. If the
frame height isn't long enough and I wanted a scroll bar to appear, I wouldn't
include scrolling="no". A border will appear around the iframe by
default, but can be removed with style="border: none;". I put
a <br> between the two iframes to have them both appear
on the right one beneath the other.
[/network/web/html]
permanent link
Setting span to be the width of a div
I wanted to display the output of a program I ran at a shell prompt on
a Linux system with HTML code rather than a screen shot. I wanted the output
to look like the following with the black background on the header line for
the columns to extend across the width of the div I used to
enclose the HTML code for the display of the output:
Linux Network Bandwidth Monitor $Revision: 1.3 $ on localhost.localdomain
Interface Received(Kbps) Transmit(Kbps) Total(Kbps)
enp1s4 26.621 960.960 987.581
lo 0.000 0.000 0.000
All 26.621 960.960 987.581
System uptime: 5 days 5 hours 41 minutes and 2 secondsI started the display with <div><pre> and
ended it with </pre></div>.
When I tried enclosing it within a div tag, the
W3C Markup Validation Service
complained that the div wasn't allowed where I had placed it
within the surrounding pre tags, so I tried the following to
stretch the span to the length of the div:
<span style="background-color: black; color: white; width: 100%">
But it produced the following:
Linux Network Bandwidth Monitor $Revision: 1.3 $ on localhost.localdomain
Interface Received(Kbps) Transmit(Kbps) Total(Kbps)
enp1s4 26.621 960.960 987.581
lo 0.000 0.000 0.000
All 26.621 960.960 987.581
System uptime: 5 days 5 hours 41 minutes and 2 secondsThe reason it didn't work was because by default <span> is an inline
element, which means, it does not have a width or height. So setting the CSS
attributes width and height on <span> will not work. I was able to get
it to work by following the tip at
How to Create a Fixed Width Span in HTML/CSS?:
In order to give a height and width to a span, you have to convert it to
a block level element. Setting the style as “display: inline-block”
will make it a block element with width and height, still displaying as
inline element.
When I used the following CSS, I got the result I wanted:
<span style="background-color: black; color: white; display: inline-block; width: 100%"> Interface Received(Kbps) Transmit(Kbps) Total(Kbps)</span>
[/network/web/html/css]
permanent link
