Forum Moderators: open
I am attempting to embed a fully formatted HTML text document with images, heading, etc, without using iFrames, because I need to parse these files using PHP to make them shorter and also, iFrames need scrolling, which is definitely not the effect desired here.
How do I create html so that <head>, <body>, <title> won't be executed, but will show up on my website as is? What I want to do is to make the overall CSS styles of my site to NOT interfere with the formatting of the formatted text in the embedded HTML document. Simply copying the text of the HTML document would not work, for the formatting would be completely messed up, since it is reading the style definitions of my site's CSS file.
Is this even possible?
I'm sorry if this is in the wrong forum. Just in case some Server-side programming language is required, I do use PHP/MySQL in my web application.
Would really appreciate your help!
[pre]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css" media="all">
body.my_site h1 { color: red; }
</style>
</head>
<body class="my_site">
<p>Desired effect: Heading 2 should be blue, not red.</p>
<h1>Heading 1</h1>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css" media="all">
body.my_site body.include h1 { color: green; }
</style>
</head>
<body class="include">
<h1>Heading 2</h1></body>
</html>
</body>
</html>[/pre]
You'll probably have to fiddle with it to get the right regexp, but this will work.
I guess I could try that and then substitute the body that to be a DIV tag instead:
So this is what I just did by hand and it seems to be working fine:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css" media="all">
body.my_site h1 { color: red; }
</style>
<style type="text/css" media="all">
div.include h1 { color: green; }
</style>
</head>
<body class="my_site">
<p>Desired effect: Heading 2 should be blue, not red.</p>
<h1>Heading 1</h1>
<!--><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css" media="all">
body.my_site body.include h1 { color: green; }
</style>
</head>-->
<div class="include">
<h1>Heading 2</h1></div>
<!--></html>-->
</body>
</html>
Now the only problem will be doing this in RegEx. I don't have a lot of experience in RegEx unfortunately, but I will try my best.
UPDATE: Never mind. It did not work. When I added "font-size: 48px;" to "body.my_site body.include h1 { color: green; }", both headings were in 48px, which is not the effect I am trying to accomplish here. What I am trying to do here is to force CSS to NOT BE INHERITED inside the class="include" portion of the code.
Anymore help would be kindly appreciated.
Sorry for all the mess by creating this thread.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css" media="all">
body.my_site h1 { color: red; }
body.my_site h2 { color: blue; }
body.my_site h3 { font-weight: bold; font-size: 13px; color: #006600;}
body.my_site h4 { font-size: 16px; color: #666600;}
body.my_site h5 { font-size: 18px; color: #336600;}
body.my_site h6 { font-size: 24px; color: #cccccc;}
</style>
</head>
<body class="my_site">
<p>Desired effect: Heading 2 should be blue, not red.</p>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
I only used the Heading 1 as an example for simplicity's sake.
UPDATE: I have started a new thread in the CSS forum [webmasterworld.com] that will hopefully illustrate a little bit better what I am trying to accomplish here.
[webmasterworld.com...]
The page will then generally reference their original css styling, and you override that for your new additions.
could you elaborate on that?
It sounds like for this,
Basically, all I need to know is how to include an HTML file in another (no iFrames)
You could do something like this:
// read it into a string
$included_file = file_get_contents($file);
$included_file = preg_replace("/<html>.*<body>/im",'',$included_file);
$included_file = preg_replace("/<\/body>.*<\/html>/im",'',$included_file);
(You will probably have to fiddle with the regexp to get it to work, untested; not sure if preg_replace supports the m modifier)
So now $included_file should contain everything between the body tags, style as you wish with your master template.
However, it's sounding like you actually want the opposite:
...What I want to do is to make the overall CSS styles of my site to NOT interfere with the formatting of the formatted text in the embedded HTML document.
So in this case it sounds like you want the overall template to not have the styles and allow the included page to style "itself."
What I might try in this case is have a separate template with "markers":
<html>
<head><title>bleah</title>
[CSS]
</head>
<body>
[CONTENT]
</body>
</html>
Then apply similar regexp logic to the above, but read the file line by line. Find the CSS line, store it in a variable, than use it to replace my [CSS] marker with the target CSS.
$fhandle = @fopen("$file", "r");
if ($fhandle) {
while (!feof($fhandle)) {
$buffer = fgets($fhandle, 4096);
if (preg_match("/\<.*text\/css.[^>]+/i",$buffer)) {
$thisCSS = $buffer;
//OR:
//if (preg_match("/(\<.*text\/css.[^>]+)/i",$buffer)) {
//$thisCSS = $1;
}
}
fclose($fhandle);
}
Now do the same thing, strip the file's header,
$included_file = file_get_contents($file);
$included_file = preg_replace("/<html>.*<body>/im",'',$included_file);
$included_file = preg_replace("/.*<\/body></html>/im",'',$included_file);
Then open the above template, sub out the markers for the CSS and content.
$fhandle = @fopen("$template", "r");
if ($fhandle) {
while (!feof($fhandle)) {
$buffer = fgets($fhandle, 4096);
if (preg_match("/\[CSS\]/",$buffer)) {
$buffer = preg_replace("/\[CSS\]/",$myCSS,$buffer);
}
if (preg_match("/\[CONTENT\]/",$buffer)) {
$buffer = preg_replace("/\[CONTENT\]/",$included_file,$buffer);
}
$final .= $buffer;
}
fclose($fhandle);
}
header("content-type:text/html\n\n");
print $final;
It's a bit inefficient, and untested, may need some tweaking but this would work. You could probably do all the subs and reading in a single file read, of the source file.
