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.
Related
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 am using a cms system that allows me to write html in a source box, a bit like wordpress. There is a div currently showing on my site that i cannot directly access the html or css of so i am un-able to get rid of it. Is it possible for me to write something with html that will allow me to hide this div ?
You can try using document.addEventListener inside a <script> tag to change the properties of the interested <div> block after the page is completed loaded.
Considering your below line:
.......css of so i am un-able to get rid of it.
lets say id of div is div1 then on the main HTML page which you have access to, add below lines :
<style>
#div1 { display:none }
</style>
Not very sure on this but logically this should work!!
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.
I'm trying to link to an element on the same page like this
Link
...
<div id="myelement">...</div>
But the browser keeps prepending the full domain to the link and it ends up linking to
http://example.com/#myelement
causing it to reload the page instead of moving to an element on the page. How do I get it to just link to #myelement?
The problem is the <base href="http://hecotravel.com/"> element, which dictates that all links are relative to http://hecotravel.com/. Therefore a link to #traveler is a link to http://hecotravel.com/#traveler, which is a different page than http://hecotravel.com/request.
Either remove the <base> element or link to request#traveler.
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.