I had a brief look at the CSS3 Selectors spec but couldn't find anything how to get round this problem. Additionally, I wasn't expecting the result from this to change when you move the CSS declarations around but it does. Any help would be great.
div.green_colour div.has_colour{
background-color: green;
}
div.red_colour div.has_colour{
background-color: red;
}
<div class="red_colour">
<div class="green_colour">
<div class="has_colour">
I would like this to be green
</div>
</div>
</div>
<div class="green_colour">
<div class="red_colour">
<div class="has_colour">
I would like this to be red
</div>
</div>
</div>
You can use the E > F child selector as a solution to your problem as such:
div.green_colour > div.has_colour{
background-color: green;
}
div.red_colour > div.has_colour{
background-color: red;
}
According to this chart http://www.quirksmode.org/css/contents.html it is compatible with all major browsers and IE 7+
There are other ways to implement the solution above (e.g. via javascript) if you are interested.
-- Edit:
I'm not 100% sure if the reason for your solution not to work is due to the fact that browsers parse CSS from right to left instead of left to right, but I assume it has something to do with it. Someone please correct me if I'm wrong.
Related
I have done everything I could to make a decent web page validated with W3C validator etc and tried to make a responsive design and did all i could to enhance SEO onsite and off site. But all my efforts go down the drain with stupid IE ! I am using IE 8 now. How I wish internet bans IE for its various vagrancies !
My problem is I am not able to get a solution for clicking on elements laid over a div background image. Whether I use background color or not. If I use -ms-filter with opacity, the div disappears !
Somebody please give a proper solution ! I have tried posting the issue in another question. I just got one suggestion that did not work. Hence I am trying again.
My code
HTML
<div id="header">
<h1 style='float:left;margin-left:20px;color:white;font-family:verdana'>Landshoppe</h1>
<div id="smshare">
<img src="share.png" width="20" height="20" alt="Share on Social Media">
<div id="smp"></div>
</div>
<div style="clear:both"></div>
<div class="header-small-image">
<img src="images/bldg1.jpg" width="180" height='170' alt="Landshoppe"><br>
<div style="font-size:bold;text-align:center;margin:1px;width:100%">Landshoppe</div>
<div style="clear:both"></div>
</div>
<div class="opaq">
BLOGS
LOANS
SEARCH PROPERTY
FREE LISTING
</div>
<?php include('searchbox.php');?>
<div style="clear:both"></div>
</div>
CSS
#header{background:url('images/Thane2.jpg') no-repeat;background- size:cover;-webkit-background-size:cover;-moz-background-size:cover;-o- background-size:cover;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/Thane2.jpg ',sizingMethod='scale') no-repeat;-ms- filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/Thane2.jpg',sizingMethod='scale') no-repeat;height:350px;border:1px solid black;margin-bottom:30px;}
#header h2{font-size:35px;color:white;text-align:center}
#searchbox{text-align:center;padding:5px;width:60%;margin:0px auto;margin- top:20px;z-index:5}
#searchbox input[type=text]{width:80%;padding:10px;font-size:25px;border- radius:1px;float:right;height:30px;margin-right:2px;border-radius:5px}
#searchbox input[type=submit]{float:right;
background: url("images/searchicon2.jpg") no-repeat;background-size:cover;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/searchicon2.jpg',sizingMethod='scale') no-repeat;-ms-filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/searchicon2.jpg',sizingMethod='scale') no-repeat;
width:55px;
height:51px;
border:none;border:1px solid whitesmoke;
cursor:pointer;
padding:0px;
border-radius:0px;-webkit-border-radius:0px;-moz-border-radius:0px;-0-border-radius:0px;;
}
My site is www.landshoppe.com
Your header element has pointer-events: none; set in the css.
#header {
...
pointer-events: none; //remove this line
}
Remove pointer-events: none; from header and then click events will work within it.
Also this issue isn't IE specific. Didn't work for me in Chrome either. pointer-event: none makes that element and its child elements not clickable, and clicks to fall through to the underlying element.
#Arathi, I found a solution by putting all the events inside the div into another within this div and making its position:absolute. Now it works ! Though I have some issue in mobile responsive design. Guess I will tackle that as next level :)
Reference: http://www.stephenkelzer.com/design.html
Optimized for firefox only so far (may find extra bugs if viewing in other browsers
--First time poster guys, I could really use some help here, Thanks!
I am building a really simple portfolio page here, I plan to expand on it later.
I want to add a layered effect to each module like Chris Coyier did on his site: http://css-tricks.com/
I have made the layers green and yellow to help them stand out
HTML markup:
<div id="mh-com" class="abc portmodule">
<div class="portmoduleimg"></div>
<div class="portmoduleinfo">
<h3>MarlonHeimerl.com</h3>
<p>...</p>
</div>
</div>
<div id="business-template" class="zxc portmodule">
<div class="portmoduleimg"></div>
<div class="portmoduleinfo">
<h3>Business Template</h3>
<p>...</p>
</div>
</div>
CSS markup:
.portmodule {
margin-top: 25px;
height:300px;
overflow: hidden;
width:969px;
background-color:rgb(98, 109, 111);
color: rgb(192,204,206);
}
.portmodule:after, .portmodule:before {
content:"";
position: absolute;
top:6px;
left:6px;
background-color: green;
width:100%;
height:100%;
z-index: -1;
}
.portmodule:before {
top:12px;
left:12px;
background-color: yellow;
}
I want to make it so that each separate module has a layered effect to it. I hope you guys can help me out! Thank you!
http://www.codepen.io/thestevekelzer/pen/ibmta
I have found a 'minor-solution'...
By that I mean that I don't consider this a preferred method.
It seems that the absolute positioning of the :before & :after pseudo-elements is all based on the parent element, not the child element like I thought.
You will notice in my forked codepen that I have increased the top adjustment for the 'business-template' element to accommodate it being lower on the page.
I would still love it if someone knows a more simple solution. Thank you!!!
Is there a common CSS layout technique for controlling the vertical source order of a page?
For example, can I change this...
<container>
<header></header>
<content></content>
<footer></footer>
</container>
...to this...
<container>
<content></content>
<header></header>
<footer></footer>
</container>
...while still having the <header> appear at the top of the page, above the <content>?
In other words, I'd like to apply the techniques used for controlling horizontal source order, such as "One True Layout" and "Holy Grail", to the vertical source order of the page.
This question asks essentially the same thing, but the responders didn't seem to get what was being asked and the asker's solution seems cumbersome.
I might get criticism for micro-optimizing, but Mega Menus and responsive design keep pushing my page content down further and further.
Littlefool's answer works well if you know the height of the block you are moving (if you are swapping two blocks, it's sufficient for either of them to have a fixed height).
However it doesn't help if the blocks all have flexible height. In that case you can try the technique from http://tanalin.com/en/articles/css-block-order/:
<div class="container">
<div class="block-1">1st block</div>
<div class="block-2">2nd block</div>
<div class="block-3">3rd block</div>
</div>
<style>
.container { display: table; width: 100%; }
.block-1 { display: table-footer-group; } /* Will display at the bottom. */
.block-2 { display: table-row-group; } /* Will display in the middle. */
.block-3 { display: table-header-group; } /* Will display at the top. */
</style>
(see demo: http://jsbin.com/etujad/11/edit)
Caveats:
It only works for up to 3 blocks (you may be able to achieve more by nesting).
It doesn't work in IE6/7, and there are some wrinkles in IE8.
Many browsers (except Firefox?) don't allow replaced elements like images to be given these display values (testcase), so you'd have to wrap them in a div and reorder the div instead.
You could either supplement this with JavaScript for old IE, or depending on the design it might be acceptable to just leave the blocks in the wrong order in old IE (note that very few smartphones run old versions of IE, as even Windows Phone 7.5 runs IE9, so this is a good option if you're only swapping the source order on mobile devices).
You cannot alter the source of a page with CSS. You can, to some mild degree, alter the HTML output, but not in this way.
The order of elements in an HTML document has meaning. So typically it won't make sense for your source to have a heading which comes after its related content. It is the order which defines that relationship in many cases.
What you can do is use CSS techniques to lay out these elements visually so that they appear to be in different order.
But their vertical order in HTML should be semantically logical.
You should know that searching for "the holy grail" is quite useless. Although I can understand why you want to have the content section in front. Usually search engines index the pages on the content as they appear in html. Having first a bunch of headers and other things won't do any good.
I haven't had time to look into HTML5 and CSS3 yet, but it is quite possible to alter your layout with only css. I'm a developer so my css and html skills are less then real web producer but you can play around with the position properties in CSS.
<div id="content">this is your content</div>
<div id="header">this is the header</div>
<div id="footer">this is your footer</div>
This html can still show the header tag on top of your page with the following css.
#header
{
height:100px;
width:100%;
background-color:Red;
position:absolute;
top:0;
}
#content
{
margin-top:100px;
height:500px;
background-color:Green;
}
#footer
{
height:100px;
background-color:Blue;
}
I hope it gives you an idea of what is possible. (since you mention HTML5 I suppose you don't need to worry about older browsers but only the latest releases).
You can use the old friend display:table to re order your element.
Lets say this is your source.
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
In order to reorder try this.
#container{
display: table;
}
#content{
display: table-header-group;
}
#header{
display: table-row-group;
}
#footer{
display: table-footer-group;
}
bam. you got it. Here is the proof of concept. http://jsfiddle.net/k0La8egp/1/
This is HTML.
<div class="container">
<div> background of this i need in white </div>
<div> background of this i need in red </div>
<div> background of this i need in white </div>
<div> background of this i need in red </div>
</div>
I want to select alternate div without adding class or id .
Is it possible with CSS only (no Javascript) with IE 7 support
IE7 doesn't support the selector you would require, which is :nth-child().
Generally you would use
.container div:nth-child(even) {
background: red;
}
IE7 does not support it, unfortunately.
You will need to use JavaScript, or add a class to every odd or even row (perhaps using a server side language).
can't we select every second div inside <div class="container"> [with the CSS2 selectors introduced by IE7]?
Well kind of, with the adjacency selector:
.container div { background: white; }
.container div+div { background: red; }
.container div+div+div { background: white; }
.container div+div+div+div { background: red; }
But that means writing out a rule (of increasingly unwieldy length) for each child. The above covers the example markup with four children, so it's manageable for short, fixed-number-of-children elements, but impractical for elements with a large or unlimited number of children.
This cannot be done.
Use in-line style tags, like,
the following works in IE 7
not tested for others.
<div style="background-color:#ffff00" > Hello YOU div</div>
div:nth-child(odd) { background-color:#ffffff; }
div:nth-child(even) { background-color:#ff0000; }
but i don't know (and can't test) if this works in IE7 - if not, you'll have to use different classes for the divs.
I have some problem that i want to change it with css
<div class="a">
<div class="b">
<span></span>
</div>
<div class="c">
<span></span>
</div>
<div class="d">
<span class="e"></span>
</div>
</div>
I want to change background of div.b and div.c by using span.e
Please help me.
Thanks
The following answer assumes you are asking how to use span.e as part of a selector to change the rules for div.b and div.c. For example:
span.e:parent:prevAll.b { background:red } // concept-code, doesn't actually work
You can't do that with CSS alone, you would need to use something like jQuery (javascript) to handle this for you. With CSS, you can reference children from parents, but not parents from children. Or in this case uncles from nephews...
At current, CSS cannot go up the chain (child to parent) only down the chain (parent to child). You could probably use jQuery to do what you want here, but you should probably rewrite the HTML so its not difficult.
You can't do that with CSS, you'd need something like jQuery. It's difficult to know exactly what to suggest since it's unclear how you want the system to work, but this should help:
$('.e').parents('div').eq(0).addClass('red');
You would already have a class in your CSS: .red { background-color: red; } (you might want to name it better though).