I have a simple HTML page with divs nested within each other. And then I have another HTML page which displays a grid. The grid is styled using a stylesheet. Now I want to embed this grid within the 1st HTML page. So I have created a div inside the 1st page and set the source as the 2nd HTML page (which contains the code for displaying grid).
Now the problem is, the stylesheet which was developed had the CSS selectors dependent on the structure of the 2nd Page. But now since I have embedded the code in the 1st file, I think the selectors and not getting applied and hence the grid not getting styled. How do I solve this problem ?
Maybe embedding the grid using an <iframe> would be acceptable for you. Then you would not have to change any CSS code.
Related
I am reading the following about how to make a responsive table in HTML
HTML Responsive Table using CSS
But I am struggling how to convert this CSS to inline CSS since I am using a third party product that dont allow a separate CSS file so I need to do the styling "inline"
Just write a tag inside tag and copy the content from CSS file to the html file. It will work.
I have started to do a web project for school. I have made use of a template which has the following tag quite often: <div class="col-lg-12">.
What is the meaning and the use of it?
You seem to be using the Bootstrap library.
The <div> tag indicates the opening of a generic block-level element.
The class attribute indicates that this element belongs to a named grouping. Here the classname given to it is "col-lg-12".
Classnames can be used either in css or JavaScript. In this case, it is used by CSS in the Bootstrap library.
Bootstrap defines the style for the col-lg-12 classname as indicating that this div should take up the entire width of the screen on large screens. Bootstrap defines the entire screen to have a size of 12 columns. And this is saying that the div will take up all 12 columns on large devices.
I have a page where I am reading an HTML from email.
Sometimes, the text which comes from the email has HTML and CSS and it changes my page style completely.
I don’t want my page style to be impacted because of this. How do I read the HTML and CSS strictly inside a particular div (box) and not let the page get impacted by this?
you have to write your css using some parent > child format. You might have to use !important.
May be you are using some kind of common selectors like "a", "p", "div". In these cases we can prevent the overriding by using parent class/id or with "!important.". I will not recommend the second one.
Ex. using parent className:
.parent-classname p{
/*style here*/
}
put that div in iframe so it behave like a seperate window so your html content not effected by loadded css.
You can use <iframe></iframe> tag instead of the <div></div>. Using Parent>Child Css format will also help make your styles more unique and protect them from being overridden.
I am working on a project which is completely done by HTML5,MVC 4,CSS 3, JQuery, LINQ. There are a lot of ui,li and other html controls and we have done styles for those elements.
Now i have a situation that i must include a JQ Grid (http://www.trirand.com/blog/jqgrid/jqgrid.html) , we were using our own client side grid. Now what the problem is if i use the style sheet of the JQ Grid on the page, there is a possibility to get affected to other element also. Anyway i am gonna use that particular grid inside a div element i need that style sheet should be affected to that the elements which all are inside that div.
Is there any possibilities?
(I wonder if this is possible in this way ;)
<div id="jqgridcontainer" stylesheet="styles/jqgrid/jqstyles.css"> my ui elements here </div>
I know its not possible in this way )
NB: editing http://www.trirand.com/blog/jqgrid/themes/redmond/jquery-ui-custom.css[^] by adding "jqgridcontainer" div id to all the element css is not possible.
No you can't add css file to one div, you can only add style to the all document.
The only way i see to use css file to only one part of your page is to put your grid in an iframe (which is not really good...)
You can't do <div id="jqgridcontainer" stylesheet="styles/jqgrid/jqstyles.css">. If jqstyles.css is not a big file you can change the div{...} rules in it with div.jq {...} and add class jq to your divs that you want to use jq styles. If jqstyles.css is so big that you can't go through it all, give your divs, which you want to have your style, a class like 'myDivClass' and change your css to div.myDivClass {...}. You may need to mark your rules as !important or just reference jqstyles.css first and your css 2nd..
Use ids and classes properly to avoid all the division to get the same property..
I'm a web-dev newbie and I'm working on a webapp which displays html from other sources.
The main webapp is based on bootstrap and the other external html is embedded in a bootstrap modal. I want the modal content to look exactly like they would if they were a separate html page. Since the embedded html can contain elements that have been bootstrap stylized, any td, tr or table contained within the external html are stylized as well.
Is there a way to tell html something like "Within this div, don't use bootstrap styles?"
As an aside, since this is an internal framework and will be used by a few people, I'm not worried about xss exploits.
I don't know if I interpreted your question correctly. But I understand you want to make a div (or whatever element) not have bootstrap styles. You can then, override those styles using your own CSS stylesheet, applying new styles to that element along with the !important rule.
One solution is to prefix all bootstrap clases with something like .bt so the declarations ends up like:
.bt table
.bt input
.bt td
then to the main div (or body) of the site using bootstrap, add the bt class like <div class="bt">