I have header in such a way that I would like to hide my image and span's in my pheader div if "banner" exists. Is there a quick way to do this using CSS selectors? Below is the HTML code.
<header>
<div id="banner">
<!-- main content -->
</div>
<div class="pheader">
<div class="user-panel">
<div id="hey-user" class="d2c-user-panel">
<img src="../images/defaultHeadshot_lg.png" class="userimg">
<!-- Hide This -->
<span class="caret" id="down-arrow"></span>
<span class="hey-user d2c-header-username"><b>Hello</span>
</div>
</header>
Yes.
#banner + .pheader img,
#banner + .pheader span {
display:none;
}
This selector only applies if .pheader is directly after #banner.
You might find this Tutsplus article useful:
The 30 CSS Selectors You Must Memorize
.pheader {
padding: 1em;
background: lightblue;
}
#banner + .pheader img,
#banner + .pheader span {
display: none;
}
<header>
<div id="banner">
<!-- main content -->
</div>
<div class="pheader">
<div class="user-panel">
<div id="hey-user" class="d2c-user-panel">
<img src="http://lorempixel.com/output/animals-q-c-100-100-3.jpg" class="userimg" />
<span class="caret" id="down-arrow">Arrow</span>
<span class="hey-user d2c-header-username"><b>Hello</b></span>
</div>
</div>
</div>
</header>
It's probably worth noting that I've had to close a few divs in your original HTML structure which were missing from your code.
Try this. Link https://jsfiddle.net/7bv53xqd/
#banner + .pheader img {
display: none;
}
#banner + .pheader span {
display: none;
}
Related
my left sidebar has no structure and I want it to be like a menu with a background color. I also have no idea how to make the changes in CSS so I can change the width and height...etc
here is the code for the sidebar
<div class="sidebar">
<nav>
<h1>Menu</h1>
<ul>
<li><strong>Home</strong></li>
<li><strong>Workshop </strong></li>
<li><strong>Team </strong></li>
<li><strong>Resources </strong></li>
<li><strong>Publication </strong></li>
<li><strong>Opportunities </strong></li>
</div><!-- /sidebar -->
CSS syntax can be called for in three ways.
Internal CSS: <style> tags, which must be underneath a <head> element that precede your <body>.
External CSS: Linking external CSS with just the CSS syntax, void of any HTML tags. You connect the two documents with a <link> tag using the href attribute
Block-level/Inline elements: CSS can be placed inside of block-level elements and inline elements (a list of which appear here)
Here is how to color your sidebar's background using the first method:
<head>
<style>
.sidebar {
background-color: gray;
}
</style>
</head>
And here's one way to add containers/boxes around your sidebar using the first method:
<head>
<style>
.box {
background-color: #eee;
margin-top: 5px;
padding: 10px;
text-align: center;
}
.sidebar {
display: block;
width: 150px;
font-family: Arial, sans-serif;
}
.row:after {
clear: both;
content: "";
display: table;
}
</style>
</head>
<body>
<div class="row">
<div class="sidebar">
<div class="box">
<strong>Home</strong>
</div>
<div class="box">
<strong>Workshop</strong>
</div>
<div class="box">
<strong>Team</strong>
</div>
<div class="box">
<strong>Resources </strong>
</div>
<div class="box">
<strong>Publication</strong>
</div>
<div class="box">
<strong>Opportunities</strong>
</div>
</div>
</div>
</body>
I'm not sure if this is exactly what you're looking for, but you can change the font, margins, and padding underneath the <style> tag however you want.
Also, I would suggest going through w3school's CSS introduction just to familiarize yourself with how it all works. Another tip: Make sure all of your starting tags have the necessary end tags! For example, in the code you wrote a closing </ul> and </nav> are missing.
I want to make boxes for those images, not for the entire row.
I've tried putting div tag with a class named caja-img, which contains a specific width.
HTML
<div class="col-md">
<div class="contenido">
<div class="caja-img">
<img src="img/icon1.png" alt="Autogestion">
</div>
<h3 class='text-center'>Facil y seguro!</h3>
</div>
</div>
CSS
.caja-img {
background-color: red;
}
Instead of coloring all the row, i just want to color the image.
You can style all <img> tags in your <div>. The CSS would look like this:
.caja-img img{
background-color: red;
}
What this is doing is styling all of the img elements inside of .caja-img.
You can set the element with the class .caja-img to display: inline-block.
See the code example below:
.caja-img {
background-color: red;
display: inline-block;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md">
<div class="contenido">
<div class="caja-img">
<img src="img/icon1.png" alt="Autogestion">
</div>
<h3 class='text-center'>Facil y seguro!</h3>
</div>
</div>
Is it possible to select a specific <div> when another <div> which is not a parent is :hover?
All that in HTML5/CSS3 only, without JS.
<section>
<div id=first></div>
</section>
<section>
<div class=second></div>
</section>
As an example, i want <div class=second> to show when <div id=first> is :hover.
This is possible, but only if the two elements have the same parent.
Using the element1 ~ element2 selector. For example:
HTML:
<div class="first">
<!-- content -->
</div>
<span class="example-element"></span>
<div class="second">
<!-- content -->
</div>
CSS:
.first:hover ~ .second {
/* styles */
}
If you need to select an element that does not have the same parent, you need to use javascript.
this is two ways to achive that, with click adding an a tag or with hover that its a little tricky
.second{
display:none;
}
#second:target {
display:block;
}
#first a{
text-decoration:none;
color:black;
}
.disp1:hover + .disp2{
display:block;
}
.disp2{
display:none;
}
<section>
<div id="first"><a href="#second" >div one</a></div>
</section>
<section>
<div id="second" class="second">div two</div>
</section>
<div class="disp1">first div</div>
<div class="disp1 disp2">second div</div>
I am trying to have a display that changes when hovering a div class. The idea is to have one div disappear when hovering another. I have tried using general sibling selectors to make the display change from inline to none. The CSS is as follows:
#Inicio {width: 100%;
height: 100%;
background-color: yellow;
position: absolute;
display: inline;
}
.buttons:hover ~ #Inicio {display: none;}
.buttons {width: 80%;
margin-left: auto;
margin-right: auto;
position: static;
margin-left: 10%;
font-size: 22px;
border-top: 1px solid white;
padding-top: 20px;
padding-bottom: 20px; }
.buttons:hover {font-size: 24px;
transition: all .5s ;}
And the HTML:
<div id="wrapper">
<div id="menubar">
<div id="menu">
<h1>Menu</h1>
</div>
<div class="buttons">
Inicio
</div>
<div class="buttons">
Productos
</div>
<div class="buttons">
Localizacion
</div>
<div class="buttons">
El equipo
</div>
<div class="buttons">
Ideas
</div>
<div class="buttons">
La pagina
</div>
</div>
<div id="content">
<div id="inicio"></div>
</div>
</div>
First of all, your id names doesn't match, its case sensitive, you #inicio and #Inicio are completely two different things..
And as I commented, the issue is that you cannot pop out of the element using CSS means you cannot select the parent element and than go ahead and select the parents sibling element, so you need to change your DOM, you are trying to select an element which is adjacent to the buttons parent element and not the button itself, so the best you can do is this
.buttons:hover ~ #content > #inicio {
display: none;
}
Demo
Altered DOM, you need to bring the elements on the same level, if #inicio is nested, it's fine, but to select it's parent, bring the elements adjacent to each other on the same level so that all are direct child to an element having an id of #wrapper
<div id="wrapper">
<div id="menu">
<h1>Menu</h1>
</div>
<div class="buttons">
Inicio
</div>
<div class="buttons">
Productos
</div>
<div id="content">
<div id="inicio">Disappear this</div>
</div>
</div>
As #enguerranws commented, I thought to put a compatibility table as well,
Credits - Support Table
Maybe because it's #inicio, not #Inicio ?
Then you need to change your DOM. You have to put #inicio in .buttons div. Or :
.buttons:hover ~ #Inicio
Won't work.
<div id="wrapper">
<div id="menubar">
<div id="menu">
<h1>Menu</h1>
</div>
<div class="buttons">
<span>Inicio</span>
<div id="inicio"></div>
</div>
</div>
<div id="content">
</div>
</div>
You should use that structure. Btw, I added a span to wrap your text, as it's not valid to put text directly in block element (here: div).
I have the following html:
<div class="wrapper">
<h1>Ipods</h1>
<div class="main-topright-bottom">
<h1>Related Products</h1>
<div>Check items to add to the cart or select all.</div>
<div class="relatedproduct">
<div class="relatedproductimage">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR-YiokcA1U38PFCbIYklGbbqu-4E7gj6p-c4txmJjZxblroYu40A" />
</div>
<div class="relatedproducttext">
<div class="relatedproductheading">A red ipod nano.</div>
<div class="price">$140.00</div>
<div class="addtowishlist">Add to Wishlist</div>
</div>
</div>
<div class="relatedproduct">
<div class="relatedproductimage">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR-YiokcA1U38PFCbIYklGbbqu-4E7gj6p-c4txmJjZxblroYu40A" />
</div>
<div class="relatedproducttext">
<div class="relatedproductheading">A blue ipod nano.</div>
<div class="price">$140.00</div>
<div class="addtowishlist">Add to Wishlist</div>
</div>
</div>
</div>
</div>
and css:
.wrapper { background: blue; }
.relatedproduct { clear: both; }
.relatedproductimage { float: left; }
.relatedproducttext { float: left; }
I want to know how come the blue background does not extend to the bottom div.
What am I doin wrong?
http://jsfiddle.net/johngoche99/C9NKP/2/
Thanks.
Floats aren't contained by default. You make it do this by floating the wrapper too, or giving it an overflow property.
.wrapper {
overflow: hidden;
}
jsfiddle demo
Read http://colinaarts.com/articles/float-containment/ for another (better) alternative if you don't want to hide overflow as a side-effect.
More information at https://developer.mozilla.org/en-US/docs/Web/CSS/Block_formatting_context
change
.wrapper { background: blue; }
To
.wrapper { background: blue;overflow:hidden;}