I have a project: the name (div "h_name") has a fixed position. It's the first div in body, so it should, as I know, stay under all the elements. Unfortunately, somehow it stays above everything. How do I make it go under all other divs? Z-index doesn't work for it too.
Codepen -- https://codepen.io/polina-sotnikova/pen/VwQyXYG
<h1 class="h_name">dyslexia</h1>
You need a background on the content element or the stacking order will make no difference to what you see on the page. Here is a very simplified example based on the code you provided:
.h_name {
...
background:red;
z-index:-1;
}
.header {
background:blue;
}
And a full snippet here: https://codepen.io/29b6/pen/KKQZoMg
use a id for your class and apply below css.Hope it works...
HTML
<h1 class="h_name" id="h_name">dyslexia</h1>
CSS
#h_name{
z-index:-1!important;
}
Related
I have some clickable link and it was working fine. But if I applied css for an another section those link. Here is the CSS:
.strong-view .wpmslider-wrapper {
position: relative;
}
This css is only applicable for .strong-view class. But link of another section is not working. Here is the live link: http://www.cp3472.bmekuet.org/ Here 'Read More' button under Recent News is not working. If I just remove
.strong-view .wpmslider-wrapper {
position: relative;
}
It works fine.
It is really strange!. What problem is going on? Thanks in advance.
It's because you have floated the 3 sections in the middle and didn't clear that float, and .testimonial-container displays below it, but is actually consuming all of the space where the 3 floated sections are because those floats aren't cleared.
The easiest fix is to add
.testmonial-container {
clear: both;
}
A better fix would be to wrap the 3 floated sections in an element with a "clearfix" applied - https://css-tricks.com/snippets/css/clear-fix/
Position relative may affect the z-index of an element (yes, I know that makes no sense, but that's how it seems to me, if anyone has any documentation behind that, I'd love to read it, this is just from my own experiences). Do you have anything else on the page with a z-index? If you change this class's z-index to something higher than your other z-indexes, it will probably solve the clicking problem.
I have a div and I need to color one of its children div. I was thinking of setting a CSS class to the parent div instead of directly on the children div since I have a javascript class that already have a reference to the parent, so I don't need to lookup for the children.
Is it a bad pratice ? Could it cause me trouble in the future ?
Here an example http://codepen.io/anon/pen/pJgzJp?editors=110
html:
Is this better
<div class="parent1 whatIPrefer">
<div class="children1">
</div>
</div>
than
<div class="parent2">
<div class="children2 meh">
</div>
</div>
css
.parent1{
width:200px;
height:200px;
}
.children1{
width:200px;
height:200px;
}
.whatIPrefer .children1{
background-color: gold;
}
.parent2{
width:200px;
height:200px;
}
.children2{
width:200px;
height:200px;
}
.meh{
background-color: tomato;
}
More Context: I want to display problematic items in a red in my page. There could be many items colored that way, my javascript code to colour it look like this
for (var i = 0; i < this._report.WorksheetSectionIDs.length; i++) {
var worksheetSection = this._report.GetWorksheetSection(i);
if (worksheetSection._worksheet._grid.getColumns().length != columnsCount) {
this.Errors.push("Worksheet " + worksheetSection._sectionID + " doesn't have the right number of columns.");
worksheetSection.SetInErrorState();
}
}
where each worksheetSection has a reference to the parent element, so I can easily add a class to it.
Your situation is largely dependent on your use case. You did not provide much context, so this may be the best or not the best application for targeting your child div.
You can access the child of a div using the child selector for css:
.whatIPrefer > div { styles }
Here is an excellent article on selecting children of a parent element - check it out.
Hope this helps. Please comment below with any other questions. Thanks
It depends on web structure, and on elements, that you are styling. For example, if you know, that header will be just one, you can easilly style directly the header, but if there is more headers with different styles, for example header in body, header in head and so on. In that case it is good to style throw parent element.
In my projects, i always style throw parent elements, sometimes it is useless, but it is a good practise and you never know, when your web will need new elements.
My Problem
I want to be able to handle my CSS this way, that when I add a class named "sold-out" to my div , it should add a sold-out overlay stamp. At the moment I have the problem, that it seems like I am destroying the CSS of other classes. However I hope you can help me with a good solution.
My HTML:
<div class="rotate sold-out">
<a href="images/packages/background01.jpg" rel="imagebox" title="">
<img src="images/packages/background01.jpg" alt=""/></a>
</div>
As you can see I have inserted an image there and the sold-out stamp (which is a transparent .png) should be shown at the highest layer ofcourse.
My CSS try:
.sold-out {
content: url(../images/sold_out_stamp.png);
}
This is what happened:
The image inside the div is completely gone. I only see the Sold-out-stamp with a white background.
You are on the right track. Instead of replacing the sold-out element's content with the overlay image (and thereby replacing it entirely) you should set the pseudo element's content and position it over the sold-out element.
.sold-out{ position:relative; }
.sold-out::before{
content:url(../images/sold_out_stamp.png);
position:absolute;
z-index:2;
top:0;
left:0;
}
*didn't test, but should work in theory... If you make a fiddle with the correct images linked I'm happy to refine, but this should at least be close.
Let me know if you need further direction.
I have following code:
<div class='parent'>
<div class='left-child"'></div>
<div class="right-child"></div>
</div>
What I want to do is, if height of "left-child" is going to increase then height of "right-child" is also going to increase.
This might be a simple question as I'have less knowledge of html and css.
I don't want to use any of the java script code.
I want only css and html code for this.
Thanks.
Have a look at:
Demo
The most cross-browsers solution is styling your divs with table properties. This is also the least semantic solution.
.parent{
display:table;
}
.parent > div {
display:table-cell;
}
DEMO
You can create the illusion of the left and right child having the same height, by adding the background you want to use in the right column to .parent. I've added an example:
http://jsfiddle.net/3MCzm/
I'm trying to use the css hover, and I have it working on a div by doing:
#complete-paper:hover{
background:url('/static/images/blue-aarow.jpg') no-repeat;
background-position:192px 35px;
background-color:#17aedf;
color:#ffffff;
}
my question is, is there a way to target another html element, like a totally unrelated div, when I hover over the property with the ID of complete-paper? So when you hover over the div with complete-paper, it'll do the above hover css changes, as well as change another div on the page?
Thanks
Edit: The question I had is if it's possible if the div's are unrelated. But in this case they are related, It's actually a p inside a div when you hover over the div, I want the p to also change
Not unless the other div is nested in #compete-paper where the css would look like:
#complete-paper:hover{
background:url('/static/images/blue-aarow.jpg') no-repeat;
background-position:192px 35px;
background-color:#17aedf;
color:#ffffff;
}
#complete-paper:hover .other-div{
/* different css */
}
Not unless the other div is a descendant or sibling of the hovered element.
Since you said it's a descendant, then do it like this:
#complete-paper:hover #decendant_id {
// stuff
}
While the actual HTML elements in the file must be either nested or contained in a single element to be valid ':hover' targets to each other, the css 'position' attribute can be used to display any element where ever you want. I used position:fixed to place the target of my ':hover' action where I wanted it on the user's screen regardless to its location in the HTML document.
So the element is where the browser wants it in the code, and where the user wants it on the screen.
See detailed post->