I'm building a WISYWIG in which I have an iframe that needs to have content.css applied to it.
content.css: (will be applied to the iframe (src: ./content/home.php))
#content h4
{
font-size:30px;
color:brown;
text-shadow: 1px 1px #000000;
text-align:center;
}
editpage.php: // wisywig
<iframe id="content" src="./content/home.php"></iframe>
home.php contains content that needs to be shown on the homepage of my website. As you can imagine the #content in front of my h4 is used to apply this same css to a div inside my website. However, when I apply this same css to my iframe this css wont find a #content inside the iframe. Hence my previous question.
How can I apply this CSS to both a <div id="content"> and an iframe?
Yes. To apply your style to everything inside #lol, just use the * selector:
#lol * {
display:inline-block;
color:green;
}
If you only want direct descendants of #lol:
#lol > * {
display:inline-block;
color:green;
}
Related
I am trying to get my header background to change color using css, however I am unable to change anything other than the position of my nav <div>.
https://jsfiddle.net/70d40nnt/2/
<style type="text/css">
#header {
background:#7D72F7;
text-align:center;
padding:5px;
}
.clearfix {
overflow: auto;
}
#nav {
line-height:30px;
background-color:#eeeeee;
height:200px;
width:150px;
float:right;
padding:5px;
text-align:center;
}
#section {
width:350px;
padding:10px;
float:left;
}
</style>
Remove the <style></style> from your stylesheet and your jsfiddle works. Indeed, they are needed only for css directives inside a html page.
Just remove the <style> tags from the "CSS" box (and <body> from the "HTML" one), and it will work.
remove the style tag in css block in js fiddle. JS fiddle doesn't need style tag to be defined. Directly write the styles.
I guess the answer to this may be simple, but I can't figure it out on my own.
I've got the following HTML:
<div id="excerpt">
<p class="chapter">Chapter One</p>
<p>Text</p>
<div class="copyright-notice">
<p>Copyright © 2014 Name. All rights reserved.</p>
</div>
<!--end copyright-notice-->
</div>
<!--end excerpt-->
and the following CSS to go with it:
#excerpt {
padding:20px;
color:#000000;
}
#excerpt p {
line-height:1.4em;
text-indent:45px;
text-align:justify;
}
p.chapter {
text-align:center;
text-indent:0;
font-size:16pt;
text-transform:uppercase;
}
.copyright-notice {
border-bottom: 1px solid #999999;
border-top: 1px solid #999999;
margin:20px auto;
padding:20px;
}
.copyright-notice p {
display: block;
color:#666666;
text-align: center;
text-indent:0;
}
JS Fiddle reproduction.
As you can see I try to center the text and set the indent to 0 for the paragraph with the chapter class as well as the text within the copyright notice. But it doesn't work.
If I apply the style to the paragraph directly in the HTML file like:
<p style="text-align:center;text-indent:0;">text</p>
JS Fiddle reproduction.
It'll work. But as soon as I try to style those paragraphs through CSS text-align and text-indent get ignored.
Any idea what I'm doing wrong? Thanks for your help!
This is just a specificity issue.
The selector #excerpt p is more specific than p.chapter. Therefore text-indent:0 isn't applied. The reason it was applied when using the style attribute, is because inline CSS is more specific.
More specifically, (pun intended), #excerpt p has a specificity calculation of 101. Whereas p.chapter has a specificity of 11. (An id is 100 points, a class is 10, and an element is 1).
As for a solution, use either of the following to avoid the specifity conflict.
p {
text-indent:45px;
}
p.chapter {
text-indent:0;
}
or..
#excerpt p {
text-indent:45px;
}
#excerpt p.chapter {
text-indent:0;
}
(Other styling omitted from brevity.)
The latter example is probably what you should go with because you don't want all paragraph elements to be indented, just those that are a descendant of #excerpt. I'd avoid using id's in CSS as much as possible though - save those for JS.
I am going to create a cascading menu with divs, for example when an <a> hovered another div shows:
I can create it with li and ul but want to do it with div.
My problem: When mouse pointer is on <a> the div shows but when mouse pointer come to div, div will disappear (display:none;)
this is my demo
<div id="topDiv">
<img src="http://www.balit.ir/kgl/pic/user/logo.png" id="logo"/>
<div id="rightTopMenu">
<a href="about.html">About KGL
<div class="hoverMenuDiv">
About Samuel
About Hoshange
About GhochAli
</div>
</a>
Contact KGL
KGL Website
KGL Gallery
</div>
My CSS:
body{
margin:0;
}
#topDiv{
position:absolute;
background: black;
}
#logo{
width:65px;
height:auto;
margin-left:40px;
}
#rightTopMenu{
float:right;
margin-top:20px;
}
#rightTopMenu a{
position:relative;
color: white;
display: inline-block;
text-align: center;
text-decoration:none;
width: 103px;
}
.hoverMenuDiv{
position:absolute;
top:40px;
background:#CAD20E;
display:none;
text-align:center;
width:130px;
}
#rightTopMenu a:hover, #rightTopMenu a:focus{
color:#CAD20E;
}
#rightTopMenu a:hover+.hoverMenuDiv{
display:block;
}
JSFiddle
In your CSS, you need
.hoverMenuDiv:hover{
display:block;
}
This ensures that when you hover over the div, it will stay there.
Also, in my JSFiddle, I've put your HTML to this:
About KGL
<div class="hoverMenuDiv">
About Samuel
About Hoshange
About GhochAli
</div>
You can't have <a> tags in <a>'s.
Here is a second JSFiddle with the previous work done, but also deleting top in .hoverMenuTop. I think it looks better this way and behaves how most websites would.
You have to add this when the user is inside menu.
.hoverMenuDiv:hover{
display:block;
}
also remove top from this class .hoverMenuDiv
fiddle
This selector is too broad. It is targeting ALL of your anchors.
#rightTopMenu a { ... }
You need to only select the immediate child:
#rightTopMenu > a {
Also, consider using an unordered list as your menu container, not nested A-tags.
See: http://www.dhtmlgoodies.com/?whichScript=dhtmlgoodies_menu3
Consider using the '>' selector instead of the '+' selector, like this:
#rightTopMenu:hover>.hoverMenuDiv{
display:block;
}
The '+' selector is used for finding subsequent tags, but .hoverMenuDiv is actually a child tag of #rightTopMenu.
See w3 schools for a quick reference on this.
On this simple site, I have made several changes without a hitch. The footer, however, is not cooperating. Nothing I do to the elements within the footer has any effect. At this point, I'm just trying to apply ANY property to the child elements to see if they hold, but to no avail. The only properties that are affecting the child elements are 4 properties applied to the parent div, the footer. These four properties are what's leading the child elements to take their current position:
#footer {
color: #FFFFFF;
font-family: Helvetica,sans-serif;
font-size: 14px;
text-align: center;
}
That's it! There's is nothing else I'm able to do. If I delete those properties, the child elements react accordingly, but there is no property I can apply to the child elements themselves for any change to occur. Does this have anything to do with the badges? What am I not seeing? I use Firebug through Firefox, and even there, when I click on the child elements, Firebug keeps showing me the CSS styles above, meaning the styles I'm writing for the child elements are not even being recognized.
Actually, the problem on your site seems to be a missing closing parenthesis on the footer div. It is causing the next rule to be ignored, which is having a cascading effect.
Fix these errors and you should be seeing the changes you apply:
You have an error in your css which might be causing all this:
#footer{
width: auto;
height:auto;
font-family:Helvetica, sans-serif;
font-size:14px;
color:#FFF;
clear:both;
background-color:#000;
text-align:center;
margin-left:auto;
margin-right:auto;
padding-top:4px;
padding-bottom: 4px;
a:link { /* big no no... take this out of the #footer rules */
color: #FF0;
text-decoration: none;
}
.clearfix{clear:both;}
<div id="footer">
<div style="float:left;width:50%;height:50px">11</div>
<div style="float:left;width:50%;height:50px">111</div>
<div class="clearfix></div>
<div>
I want to make all text links at my website have a bottom border. I use:
a
{
border-bottom: 1px dotted #333;
}
... but it adds a border to image links too and I don't want that.
How do I make it work for text links only?
a { border-bottom:1px dotted #333; }
a img { border:0; }
Just override the inherited rule, the native css way.
Edit: Wow, I'm really not paying attention. Can you just throw a class to anchors that include images?
a.contains-image { border:0; }
This would be the only non-scripting solution without relying on CSS3's not selector.
Add this:
img {
border: none;
}
That will get rid of borders on images.
Adding a border on links and removing it if it contains some img isn't possible in CSS, with or without :not()
You can't select an element depending on its descendants (CSS isn't XPath) and you can't affect parents styling.
I'd use jQuery selectors (Sizzle to be precise) and add a class depending on the presence of an image:
<style type="text/css">
.underline { border: 4px dotted #333; }
a img { border:0; /* remove the default blue border from images within links */}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a:not(:has(img))').addClass('underline');
});
If you've not only 100% text and a>img:only-child links but also text+img mixed in links, you could also target img:only-child or wrap text in links (except img) in span elements to style mixed links in a certain way, if you've these edge cases in your page.