I see that multiple HTML tag file is correctly rendered by the browser. I mean like two html files merged and concatenated. But if I put a STYLE region into each of the HTML parts and the classes or id's are the same I get the last css rules applied also to the first part. I ask how to make css rules acting just on the part they are inserted, even the classes and ids are the same. I need this special thing, so I am looking for a solution or a trick.
5
-
5You should stop both abusing browsers and looking for such tricks.Jon– Jon2012-03-20 12:45:15 +00:00Commented Mar 20, 2012 at 12:45
-
AT first I need to ask why you have multiple html tags in one file. In most cases that happens when you load part of the page per ajax but have not really thought about what to load exactly or how to architect the loaded parts. The trick is not to use the same ids.Sven Bieder– Sven Bieder2012-03-20 12:47:07 +00:00Commented Mar 20, 2012 at 12:47
-
You may have one HTML & BODY tag per document. If you don't what you have is not a valid HTML document & therefore subject to undefined vendor/version specific behaviour in the browser. Tell us why you need to do this & I bet there is a legal way to achieve it.Alex K.– Alex K.2012-03-20 12:49:08 +00:00Commented Mar 20, 2012 at 12:49
-
if you really need to show multiple HTML pages on the same browser window look at iframes, if not you need to rethink.Dampsquid– Dampsquid2012-03-20 12:50:16 +00:00Commented Mar 20, 2012 at 12:50
-
CSS depends on unique ids to render correctly. If you merge two HTML files, that have the same css ids, but use two different CSS templates, you're hosed. What are you doing that necessitates using two completely different HTML documents but mashing them together?FloppyDisk– FloppyDisk2012-03-20 12:54:57 +00:00Commented Mar 20, 2012 at 12:54
Add a comment
|
6 Answers
Having more than one html tag in a document is not valid HTML code. The browser will try to render the content anyway, but the separate html sections will simply be mashed together into a single document.
You can't apply separate styles to seperate html sections, because the browser will not keep the html sections separate. Anything after the first html section will just be thrown in at the end of the previous body, and the browser tries to make some kind of sense out of the complete mess.
Comments
I think multiple html-Tags in one document are not allowed. I do not see any advantages for doing so.
When you have multiple documents, consider to use the frame or better iframe-tag
Comments
HTML Tags and CSS rules are entirely different in behavior. So, if u merge html files also, it will all act as a single file. Try PHP include function and include a HTML page inside another. Once rendered, it will act as a child of parent.
So for a Single HTML file if you write multiple CSS rules with same name, it will surely crash.
Comments
You can do this by replacing the classes/ids with inline code.
Consider the following 1st html file:
<html>
<head>
<style>
.aclass{
color: #fff;
}
</style>
</head>
<body>
<a href="#" class="aclass">xyz</a>
</body>
</html>
And this 2nd html file:
<html>
<head>
<style>
.aclass{
color: #000;
}
</style>
</head>
<body>
<a href="#" class="aclass">abc</a>
</body>
</html>
Now you can make the styles inline in both the files and then merge them, and final results should look like:
<html>
<head>
</head>
<body>
<a href="#" style="color:#fff;">xyz</a>
<a href="#" style="color:#000;">abc</a>
</body>
</html>
Comments
Having multiple elements with same id is very error prone. Breaks on more than one occasion like
On javascript:
document.getElementById('idname');
Comments
You can't put two html tags in one css file. But you can put the style tag in every html file and from there you can refer the html tag.
For example : consider I have two files home.html and login.html
So In css in can make entry of one html tag for one file while in other html file I can simply put it in tag.
This is one css I have made for both the files.
html {
background: #ffffff;
}
So I am keeping entry of html tag of home.html in css while for other I can write in its own html file like this
<title>Login Page</title>
<link rel="stylesheet" type="text/css" href="FeedbackManagement.css"/>
<style>html{background: green;}</style>
Hope this helps. Please see the background color for both of these files.
