I have this code HTML:
<div id="top"></div>
<div id="mid" style="display:none;">
<div class="close">INCHIDE X</div>
<p id="first_paragraph">
TEXT
</p>
</div>
This is code CSS:
#top {
margin: auto;
width: 400px;
height: 38px;
background: url(images/DESPRE-NOI.png) no-repeat;
}
body.page-id-10#top {
display:none;
}
I want to #top deactivation of the page in wordpress which has ID 10.
I tried but unfortunately does not work ... Can you tell me please what is wrong?
This is the site:
www.avocat.dac-proiect.ro/wp
Thanks in advance!
You can do something like this to give you hooks (for JavaScript or CSS) on #top depending whether or not you are on the page with ID 10.
<?php
if(is_page(10)) {
<div id="top" class="top-inactive"></div>
} else {
<div id="top" class="top-active"></div>
}
?>
You need to use a child or descendant selector:
Child body.page-id-10>#top
Descendant body.page-id-10 #top
Related
I have a problem when writing the proper CSS code for a given HTML snippet.
Here's my HTML:
<div class="FourSquares">
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
<div id="fourth"></div>
</div>
I need to set the location of id named first. Here's the common CSS attributes for all div tags.
.FourSquares{
border: 2px solid black;
height: 130px;
width: 220px;
position: absolute;
}
But I need to set the location of each id differently. I tried this method but it does not work.
.FourSquares .first{
left: 260px;
top: 785px;
}
Can you anyone please help me to understand how to properly write the CSS code for instances like this?
Incorrect use of id in code css.
The id Attribute
<div class="FourSquares">
<div id="first"></div>
</div>
then define a style for the element with the specific id:
.ForSquares #first {
left: 260px;
top: 785px;
}
.first: Selects all elements with class="first"
#first: Selects the element with id="first"
you use of id in html code, so :
Change :
.FourSquares .first{
To:
.FourSquares #first{
My text/header is not showing over my image which I'm trying to use as a background to this webpage. This is the code I have right now:
HTML:
<body id="body">
<div id="navbar">
<h1 id="name">Lorem ipsum</h1>
<img class="backgroundimg" src="leaf.jpg" alt="A leaf"/>
</div>
<div class="backimg">
<img class="backgroundimg" src="buildings.jpg"/>
</div>
<div class="backimg">
<img class="backgroundimg" src="squares.jpg"/>
</div>
</body>
CSS:
body {
background-color:black
}
backgroundimg {
position:relative;
width:1175px;
}
name {
position:absolute;
color: white;
z-index;
}
Any tips?
P.S. I took out the '#' and '.' to the appropriate names in CSS.
Use z-index to show the text over image.
You can use z-index, like Anil Panwar said(https://stackoverflow.com/a/34374513/4900669)
#name {
position:absolute;
color: white;
z-index: 10;
}
https://jsfiddle.net/08voh0fp/
Add this to your css file
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
adjust top,left and width according your need,
let me know if this helped
I have the following elements and css in an html file.
HTML
<div id="eastern">All times are Eastern</div>
<div id="calendar-container">
<div id="calendar">
<div id="saturday"> ... </div>
<div id="sunday"> ... </div>
</div>
</div>
<h2>First event</h2>
CSS
#eastern {
text-align:center;
}
#calendar {
width:700px;
margin:auto;
}
#saturday,#sunday {
width:350px;
float:left;
}
For some reason, the <h2> element is floating up along the right side of the #eastern. The browser is acting like the element is completely empty even though it has plenty of content in the #saturdy and #sunday elements. Since #calendar-container isn't being floated I think it should force the <h2> element beneath.
I know I could just fix it using clear:both, but I feel like I'm missing something. Any help? Please? Thanks!!
please don't forget to clear your float inside of "#calendar" by using a simple:
#calendar {
overflow: hidden;
}
Or even better: you use the cleaner version with an additional class "clearfix".
If you do so, you'll get your lost boxmodel of "#calendar" back.
Now you'll be able to position <h2> underneath your calendar.
If you have any further questions feel free to let me know!
Here a full example:
CSS:
#eastern {
text-align:center;
}
#calendar {
width: 700px;
margin: 0 auto;
outline: 1px solid red;
overflow: hidden; /* dirty version if you don't have a
class "clearfix" in your Stylesheet */
}
#saturday,#sunday {
width:350px;
float:left;
}
HTML: (Cleaner Version with class "clearfix")
<div id="eastern">All times are Eastern</div>
<div id="calendar-container">
<div id="calendar" class="clearfix">
<div id="saturday"> ... </div>
<div id="sunday"> ... </div>
</div>
</div>
<h2>First event</h2>
Please try below code where i have added clear class with clear both left and right:
HTML
<div id="eastern">All times are Eastern</div>
<div id="calendar-container">
<div id="calendar">
<div id="saturday"> ... </div>
<div id="sunday"> ... </div>
</div>
</div>
<div class="clear"></div>
<h2>First event</h2>
CSS
#eastern {
text-align:center;
}
#calendar {
width:700px;
margin:auto;
}
#saturday,#sunday {
width:350px;
float:left;
}
.clear{
clear:both;
}
I want to hide a div con1 when i hover div con2 and vice versa. I am able to hide con2 when i hover con1 but can't do the same vice-versa. Why it is not working when i hover con2 to hide con1.
Below are the codes:
<html>
<head>
<title>Home</title>
<style type="text/css">
#con1{
float: left;
width: 500px;
height: 300px;
background: #f00;
}
#con2{
float:left;
width: 500px;
height: 300px;
background: #808;
}
#con1:hover ~#con2{
visibility:hidden;
}
#con2:hover ~#con1{
display:none;
}
</style>
</head>
<body>
<div id="con1">
</div>
<div id="con2">
</div>
</body>
</html>
Example: http://jsfiddle.net/mendesjuan/s8bbe/
I believe this is not possible with the general sibling selector as it only applies to elements after it in the html-structure. See more: http://css-tricks.com/child-and-sibling-selectors/
A possible (althought not especially elegant solution):
http://jsfiddle.net/s8bbe/4/
<div id="wrapper">
<div id="con1">
</div>
<div id="con2">
</div>
#con1{
float: left;
width: 500px;
height: 300px;
background: #f00;
}
#con2{
float:left;
width: 500px;
height: 300px;
background: #808;
}
#con1:hover ~#con2{
visibility:hidden;
}
#wrapper:hover #con1:not(:hover){
visibility:hidden;
}
Example: http://jsfiddle.net/s8bbe/5/
#KnutSv's solution is great. Here's an add-on if using more than 2 divs.
<div id="con-wrapper">
<div id="con1">
</div>
<div id="con2">
</div>
<div id="con3">
</div>
</div>
And a one-line css with :hover, :not(:hover).
#con1{
float: left;
width: 500px;
height: 300px;
background: #f00;
}
#con2{
float:left;
width: 500px;
height: 300px;
background: #808;
}
#con3{
float:left;
width: 500px;
height: 300px;
background: #606;
}
#con-wrapper:hover > div:not(:hover) {
visibility: hidden;
}
Using "> div" will target all #con-wrapper direct div children, which are not hovered, and hide them.
Use #con-wrapper:hover > div[id^=con]:not(:hover) if only cons needed to be targeted.
Putting the divs in one container div you can hide all contained divs on hoover, but not the actually 'hovered over' one with:
div:hover div {
visibility: hidden;
}
div:hover div:hover {
visibility: visible;
}
See demo: http://jsfiddle.net/TcPJZ/3/
EDIT: It actually works well for arbitrary number of divs (see demo).
Maybe you are using wrong selectors
try this
.con2:hover ~ div {display:none}
But this is "Hard code" if you will want to add more divs before con-2 they will be dissappearing too
I try it on jsfiddle and I get the problem.
When you have this:
<div id="con1">
</div>
<div id="con2">
</div>
Hover on "con1" works, but when you change the positions:
<div id="con2">
</div>
<div id="con1">
</div>
Now it's "con2" which is working and now not "con1".
So , I don't know how to fix it, but I can tell you about make it by Javascript/Jquery.
I think that can be solve the problem.
CSS doesn't support previous sibling selection. If you still want to have a previous sibling selector then you should look in to javascript.
var con1 = document.getElementById('con1');
var con2 = document.getElementById('con2');
function displayElem(el, property, value){
el.style[property] = value;
}
con1.onmouseover = displayElem.bind(null, con2, 'display', "none");
con1.onmouseout = displayElem.bind(null, con2, 'display', "");
con2.onmouseover = displayElem.bind(null, con1, 'visibility', "hidden");
con2.onmouseout = displayElem.bind(null, con1, 'visibility', "");
Working Fiddle
In the above fiddle, I even moved the next sibling selection to javascript so that to let you keep the code structured. if you don't want to do so, then happily don't events to the first element :)
it will be easily done by using below code using jquery , why you depend only on css
$("#con1").hover(function(){
$("#con2").css("visibility","hidden");
},function(){
$("#con2").css("visibility","visible");
});
here is the working sample http://jsfiddle.net/5jRXm/
What is the correct way to select a link of a certain class within a body of specific class. For example my body has the class "abc" and my link has the class "efg", what would my css code look like? (I'm trying to create active links for a Magento block)
body.body_class a.link_class
This question is a bit basic - you should try to learn this stuff a bit.
You have to do some research
body.abc a.efg {
rules
}
even w3c can help you with that
You should write something like this:
.abc .efg {
/*Your CSS Rules*/
}
SEE DEMO
Check this example
<html>
<head>
<style>
.outer
{
background-color: red;
height: 40px;
margin: 10px;
}
.inner
{
background-color: blue;
height: 20px;
margin: 5px;
}
.outer .inner
{
background-color: green;
}
</style>
</head>
<body onload="loadCars()">
Check div style.
<div id="mydiv" class="inner">
</div>
</div>
<div id="mydiv" class="outer">
<div id="mydiv" class="inner"></div>
</div>
</body>
</html>
Save the above code in an html file and open it.