I am having trouble with the CSS when I load a page into div.
Firefox loads CSS perfectly, but in Chrome, it does not load the CSS styles of the loaded page.
It only works when I apply style with the element, for example
<table style="left:100px;top:50%;position:fixed">
Only this way does it work in Chrome.
But this doesn't work:
<style type="text/css">
.mystyle {
left:100px;
top:50%;
position:
fixed;
}
</style>
<table class="mystyle">
Is there a way to fix this?
I'm guessing the page you are loading via AJAX has its own styles in the head of that page. While that could/should work, I suggest putting all the styles for your site in one or more external style sheets and load them at every page. When you then load HTML content in a div via AJAX, the styles will already be there and will be applied to the new content.
Putting styles in an external stylesheet is, in most cases, the best practice for a number of reasons.
Did you forget a ; on the end of fixed?
<table style="left:100px;top:50%;position:fixed;">
I would be curious to see if this:
<style type="text/css">
.mystyle {
left:100px;
top:50%;
position:
fixed;
}
</style>
would work if it were to be formated as:
<style type="text/css">
.mystyle
{
left: 100px;
top: 50%;
position: fixed;
}
</style>
<table class="mystyle">
BUT, as others suggest, I would prefer to see it in an external style sheet file and linked in that way.
Related
I am writing an HTML file and using a lot this:
<iframe src="blablabla" width=100% height=555 frameBorder=0></iframe>
Is it possible to somehow define myiframe such that I can set this width, height and frame border in the definition and then just do
<myiframe src="blablabla"></myiframe>
?
Yeah, You can. These Custom Components are called Web Components.
For More info, take a look at this. (To make things easy, you can switch to ReactJS).
But, In your case, Adding a CSS will apply the styling to every iframe element.
iframe{ width:100%; height:555px; }
Implementation (Put style tag after head tag) -
<style>
iframe{
width:100%;
height:555px;
}
</style>
<body>
<iframe src="blablabla" frameBorder=0></iframe>
</body>
Is it possible to somehow define myiframe such that I can set this
width, height and frame border in the definition and then just do
<myiframe src="blablabla"></myiframe> ?
Yes, it is.
And though WebComponents are an incredibly powerful tool (and I very much hope they will continue to increase in popularity), in this situation you just need CSS:
Working Example:
.myiframe {
width: 200px;
height: 180px;
border: 3px dashed red;
}
<iframe class="myiframe" srcdoc="blablabla"></iframe>
The simplest way to start with CSS is go to the <head>...</head> of your HTML Document and add the following, somewhere in the document head:
<style>
.myiframe {
width: 200px;
height: 180px;
border: 3px dashed red;
}
</style>
So this is the code. I am not sure what problem there is. So first there is internal and 2nd one below there is inline, which is working. I think the problem is the image because inline css is working fine with other images but not with just one (Capture.png).
<!DOCTYPE html>
<html>
<style> <!-- this is where I am adding the internal css -->
body{
padding: 0px;
margin: 0px;
}
.cap{ <!-- this is the class for the image -->
position: absolute;
height:100px;
width:200px;
left:150px;
}
</style>
<body>
<div class="cap"><img src="Capture.png"/></div>
</body>
</html>
But this works!
<div class="cap"><img src="Capture.png" style=" position: absolute;
height:100px;
width:200px;
left:150px;"/></div>
The code below works because the style is being applied directly to the image.
<div class="cap"><img src="Capture.png" style=" position: absolute;
height:100px;
width:200px;
left:150px;"/>
</div>
Notice that the .cap class is for the div that contains the image, not the image itself. The image in the code below isn't working because the CSS you wrote is being applied to the div and not to the image.
<div class="cap"><img src="Capture.png"/></div>
The following piece of code selects the image. You're styles should be applied to the image using the code below.
<style>
.cap img { <!-- notice the change from ".cap" to ".cap img" -->
position: absolute;
height:100px;
width:200px;
left:150px;
}
</style>
I hope this answers your question. I recommend reading more into CSS Selectors to get a better understanding of how they work. Happy coding!
Your'e not selecting the image with the css because .cap is the div that houses the img - to apply the CSS to the image within that - you will need to target it. Either by applying a class to the image or targetting it within the containing div (using .cap img...). As a rule - it is always best to apply styling in the CSS rather than inline styling.
The reason the inline version worked is because that styling is applied directly to the image.
To use the inline style rule - add img to the .cap as shown below.
.cap img{
position: absolute;
height:100px;
width:200px;
left:150px;
}
I would like to know if there is a way to use a particular css page as styling for a tag.
For example, instead of
<div class="header" style="position: absolute; text-align:left; right: auto; margin: 0 auto 20px; z-index: 1; width: 60%; height: auto; left:9%">
Is there a way to specify style.css for the div tag?
For example,
This style.css must ONLY apply to the div tag above.
Also, is it possible for all tags contained within that div tag to follow the same specified css page?
Put this in the header of your page
<head>
<link rel="stylesheet" href="/styles.css" type="text/css">
</head>
If you want to specify style for a page, include that CSS when you render the page.
If you want to have multiple ways of rendering a particular tag, differentiate the tags.
I'm not aware of conditional logic you can apply to the CSS directly.
HTML:
(include this in the head)
<link href='style.css' rel='stylesheet' type='text/css'/>
CSS: (in the style.css file)
div.header{
//your style here
}
or without the class:
div{
//your style here
}
but without the class it will get all div tags so I recommend the first code
You can create the CSS page you want and then create the styling you want inside
something like this
div > table {
padding: 5px;
}
That would make the div have a padding of five as well as it's child the table a padding of 5
When I put this code in my html file, it is working without issue:
<style type="text/css" media="screen">
#headerimg
{
display: block;
background-image: url('/Content/images/epp/ebweblogo1.gif');
background-repeat: no-repeat;
background-position: center center;
width:100%;
height:100%;
margin: 0;
padding: 0;
}
</style>
but when I move it to my css file as this:
#headerimg
{
display: block;
background-image: url('/Content/images/epp/ebweblogo1.gif');
background-repeat: no-repeat;
background-position: center center;
width:100%;
height:100%;
margin: 0;
padding: 0;
}
This is my html:
</head>
<body>
<div class="page">
<div id="header">
<div id="headerimg" />
I am assuming it's due to the image location but I'm not sure since I've tried variations of the path and never got it to work.
Any suggestions?
EDIT
Sorry, you can't read my mind, I know.
When I place the css in the html file, the image displays fine. When I move it to the css file (site.css) it is not displaying at all. I've tried several different paths and it isn't being displayed no matter what I put in there.
UPDATE #2
When I change my html to this:
<div class="page">
<div id="header">
<div id="headerimg">test</div>
I am getting the image behind the text as 1 line that says test but not the full size of the image.
So it is apparently not displaying the image due to the size of the div? I changed the css to this:
height:130px;
but that did not change the height at all.
The two bits of CSS are not equivalent.
In one, you have #headerimg (id selector) which is a very different selector to .headerimg (class selector).
#imgplacement is also missing from the second sample.
As for the image issue - you need to ensure the correct path to the image directory.
This will be relative to where the CSS is - if in a CSS file, the image needs to be relative to the CSS file. If it is embedded in the HTML, it needs to be relative to the HTML file.
Since the path is rooted (starts with /), it should work everywhere. Use the developer tools to determine where it is looking for the image.
Include your css like this on the home page:
<link rel="stylesheet" type="text/css" href="route_to_your_style.css" media="all" />
And then be careful on routes for your image.
include the CSS file between the <head></head> section of your HTML like this:
<link rel="stylesheet" type="text/css" href="http://www.yoursite.com/css/cssfile.css" />
I want my page's BODY not to be scrollable but a DIV inside the BODY should be scrollable.
I have this in my css file:
body {
overflow:hidden
}
.mainSection {
overflow:scroll
}
but it doesn't work and the DIV doesn't become scrollabel (it just shows two disabled scroll bars for the DIV)!
.mainSection needs to have a height. Otherwise the browser can not know what it should consider overflow.
Are you sure the style for your mainSection class is being applied? You can use a tool like Web Developer or Firebug (for Firefox) to make sure that the style is being correctly applied. Also if you just have one mainSection, you might want to use an id instead of a class. the tag in html would then be <div id="mainSection"> instead of <div class="mainSection"> and the css becomes #mainSection { ... } instead of .mainsection { ... }
Here is the whole thing well explained
http://www.w3schools.com/css/pr_pos_overflow.asp
You can experiment.
I had the same problem before, but I could manage to solve it just with overflow: auto;. Try it and it will work.
Updated
The full html code looks like this
<html>
<head>
<title>Test page</title>
<style type="text/css">
#scrollable_div{
overflow: auto;
width: 100px;
height: 100px;
border: solid thin black;
}
</style>
</head>
<body>
<div id="scrollable_div">my div text</div>
</body>
Works perfectly in any browsers. I tested myself in Chrome, IE, Safari, Mozilla, and Opera