Is it possible to set the background color of frames (I know, the assignment asks for it) using a single CSS instead of doing one for each frame. The assignment specifically asks for the use of CSS intead of tags. I have tried the following:
<frameset.........>
<frame src="frames/leftframe.htm" class="LeftFrame" name="leftframe" noresize>
<frame.......>
<frame.......>
</frameset>
I have page called leftframe.htm, with:
<html>
<link rel="stylesheet" type="text/css" href="../styles/allframes.css">
<body>
<p>..........</p>
</body>
</html>
The style-sheet allframes.css has:
.LeftFrame
{
background-color:#b0c4de;
}
I have not been able to get this to work. I am able to set the background-color per frame, as long as I have a separate style-sheet. If this is not possible I will just make separate style-sheets for each frame.
The stylesheets of a frameset page cannot set the backgrounds of the pages it frames. It can set a background on the frame elements, but that’s a different issue: such a background would be seen only if the framed document had a transparent background. And in practice, not even then: the framed document will be displayed as if its ultimate background were white.
So what you can do is to set the background on the framed documents. You can use the same style sheet, but then you must not refer to anything that relates to the framing document, like the .leftFrame selector. You would simply write e.g.
body { background:#b0c4de; }
in a stylesheet that you link to from each of the framed document.
Related
I have three images and i want to add some code that makes it so the images sizes changes if the window's size/ratio is changed. I just want to add that i'm really new to programming and even more html so if you could be understanding and answering in a simple way, thanks!
Glad you've decided to start getting involved in programming and HTML! I hope you're having fun ♥
When we are styling our components on a web page, we should think about it separately to the mark-up (HTML). HTML describes the structure of our page, but CSS describes the look and feel of it.
To make your image scale, you should provide a CSS rule to describe it. For example if you wanted to make your image take up 50% of the container it is contained in you would have the rule:
.image {
width: 50%;
}
This rule should be defined in a separate file e.g. style.css, and should be linked to your HTML page using a reference:
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
Finally, to apply the style rule to your HTML element, you need to reference the class from your stylesheet, e.g.:
<img src="..." class="image" />
You can see an example of CSS being use to scale an image here: https://jsfiddle.net/yp5fd41h/, by stretching the window left and right, the size of the image will change
I am trying to style an paypal iframe for a WordPress website. My only problem is that I can't get my styles to actually work. They don't even show up in the styles when inspecting. I can only style the iframe element but none of the contents.
the code goes something like this
<iframe>
#document
<!doctype html>
<html>
<head>
</head>
<body>
//content
</body>
</html>
</iframe>
What could be stopping me from styling anything inside the iframe? When I look at the styles that are already applied to the contents inside the iframe they are coming from a stylesheet called common.css. From What I have read this stylesheet doesn't exist inside my files instead it is generated on the server side. I could be wrong though. Thanks
A stylesheet only applies to the page to which it is applied. An iframe is a window to a completely different page.
A stylesheet applied to the parent document will not be able to select the elements in the document loaded in the frame.
In order to style elements in the frame, you would need to add the stylesheet to that document. i.e. change the code on Paypal's servers.
I'm trying to get this style to work for the body of the HTML page, it works when the style is applied within the tags but not when used with an external style sheet.
CSS Doesn't work with this code.
body {
background-image:url(img/geometric.jpg);
}
HTML Works here.
<body style="background-image:url('img/geometric.jpg');">
</body>
I want to use external styling for the whole page. I'm curious on how to fix this odd issue.
The path to the image must be relative to the CSS file that references it, not the HTML file that it will appear in.
I'd like to be able to edit 3 different body css tags. I want one page to not include any overflow scrollbars but I need another page to use a vertical scroll only and the third to use a horizontal scroll only.
is it possible to do this? I read somewhere it can cause some browsers to choke but Im not sure how reliable that source was.
Also how would you call it in the CSS if it was a Class would it be written like any other CSS?
.body1{
}
.body2{
}
.body3{
}
I think you are actually asking "How can I style the body tag differently on each page of a website".
Similar to your original suggestion, I would add an id instead of a class to the body tag:
Page 1 HTML
<body id="firstPage">
Page 2 HTML
<body id="secondPage">
Page 3 HTML
<body id="thirdPage">
Then in the CSS you would target them like this:
#firstPage{
/*styling in here*/
}
#secondPage{
/*styling in here*/
}
#thirdPage{
/*styling in here*/
}
The answer to your question's title is that:
No, you can't use many body tags inside an HTML document.
However, to have many scrollbars, use CSS:
.scrollableContainer
{
overflow: auto;
}
You can simply have thee different div elements on your page.
Honestly you can have multiple body tags or even nested bodies in your website. Most of browsers will render your page as you expected. But it's not valid HTML to have multiple body tags in one page. If you want different overflows in your different pages and you only have one css file to do this you can add class or id to your body tag to target every specific page body tag in your CSS file. To add id to your body tag you can use server side scripts or JavaScript.
To add an ID to your page using JavaScript add this script tag in your page:
<script type="text/javascript>
document.body.setAttribute("id", "thePage1Id");
</script>
Then in your CSS file you can use those ID's to target your pages:
body#thePage1Id{overflow:auto;}
body#thePage2Id{overflow:scroll}
...
In reply to duri:
I had to reply you here becasue I need to sho you this image:
Just because webkit browsers ignore multiple body tag you can't say we can't have multiple bodies. Still you can have multiple bodies in a page but it's not valid HTML and maybe it don't work well.
No you cannont use more than 1 body tag in a page but you can apply a different style to the body tag on different pages as you suggest - yes of course.
You could have a different stylesheet to control the body tag for each page layout.
So:
page one pulls in page1.css (with accompanying body styles - no overflow scrollbars)
page two pulls in page2.css (with accompanying body styles - vertical scroll only)
page three pulls in page3.css (with accompanying body styles - horizontal scroll only)
(obviously without stupid file names)
I like this better than multiple style sets within a single file for readability and maintainability.
I'm trying to incorporate this yui drop down menu control in a web page:
http://developer.yahoo.com/yui/menu/
I have it working for the most part but I discovered that one of the css files that I need to link to as part of the control mess up the formatting for the rest of my web page. This is the css file in question:
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.8.2r1/build/reset-fonts-grids/reset-fonts-grids.css">
and this is the guilty line:
body{text-align:center;}
I'm not that experienced with css, but this doesn't seem like the friendliest design. This property is being assigned to the entire body section of the html file and could (or does in my case) impact content separate from the yahoo stuff. I know that I can fix this by putting a div tag around my stuff and setting the text-align property back to what I want it to be, but I don't feel this should be necessary. Or am I missing something here?
You do need to add a div around your body. Just redefine body style in your CSS file like
body{text-align:left;} and make sure your CSS file comes after yahoo's css file.
You can also do it inline like
<body style="text-align:left;">
This will override yahoo's body declaration for text-align.