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.
Related
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 have a SVG logo i want to place a few times on a single page. Each time it should show up in a different color. That colors are defined via the Wordpress backend. The colors get applied with a snippet like that:
<div class="logo" style="fill:<?php the_field('op-about-color', 'option'); ?>;"></div>
The SVG is placed in the CSS and is base64 encoded. Inside the <svg>tag i've also included the class logotest. But the problem is the SVG isn't getting colored. I've created an example pen with the base64 encoded svg:
http://codepen.io/rpkoller/pen/DuqBh
It stays black.Opposite to the fact that the inline style filled it red and even the assignment of the fill color green for the sktest class has no effect at all.
If i place an unencoded svg code right into the html into a div everything works as expected. Inline style assignment as well as with the logotest class:
http://codepen.io/rpkoller/pen/rdFup
Is there a way to get things going with the base64 variant? Best regards Ralf
Your problem is in your implementation. It's not necessarily that base64 is the issue so to speak, but the difference between including the image as a CSS background, versus including it in HTML.
In HTML... You literally can read the code of the SVG in the HTML. Because that HTML markup exists in the DOM, it is editable via CSS through your classes. If you were to right click the page and click "View page source" you would see the code of the SVG in the HTML.
In CSS, you are adding the image as a background image. Background images don't get any sort of HTML markup that is outputted into the DOM. It is... an "effect" if you want to say it that way, which is applied to some HTML element that you define. If you right click the page and click "View page source" you will see the element that you are applying the background image to, but there is no additional markup outputted that further CSS could then read and modify.
What are your options? Well, you could apply the inline styling directly to the SVG image, but that isn't in any way dynamic, so you won't be able to do your back-end snippet for class names and such.
The other option is to include the SVG like you have done already, which is called "Inline SVG". This way you can effect it with CSS code.
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.
Dumb question with a simple answer, I think.
I am building a site that has a completely different layout on one page from the rest. On one page, the design requires a liquid vertical layout, so I need the following code: *{height:100%;}On the other pages I just want the default height.
I tried to add a class to the html tag, which works in the html, but not in the CSS file. I tried:
*.myClass
and
html.myClass
but it doesn't seem to work.
I can't seem to find any info on this online. Is it even possible to add classes to the html tag?
I am using wordpress, so I can easily check to see which page I'm on and add myClass.
I guess I could also use #import to get a different style sheet based on the page I'm on, but that seems like a longwinded way of doing things.
How can I specify height:100% as a value of the html tag on specific pages only?
Can anyone point me in the right direction?
Thanks,
J
Perhaps .myClass, .myClass body {height: 100%}?
It is indeed possible to add a class to the <html> tag.
Live Demo (see code)
This will work, because I just applied this in one of my projects earlier today. :)
html,body {
height:100%
}
If you have pages that require the default height, then don't load this css style. You can place it in a separate CSS file.