I can't use two cursors in a page on the different elements can anyone help me why is happening?
.c-scrolldown{
cursor:pointer;
}
.c-scrolldown2{
cursor:pointer;
}
<div class="c-scrolldown2" id="pointer-cursor">
<div class="c-line2"></div>
</div>
<div class="c-scrolldown">
<div class="c-line"></div>
</div>
Just add some content inside divs and change cursor that you need.
.c-scrolldown{
cursor: pointer;
}
.c-scrolldown2{
cursor: progress;
}
<div class="c-scrolldown2" id="pointer-cursor">
Test 1
<div class="c-line2"></div>
</div>
<div class="c-scrolldown">
Test 2
<div class="c-line"></div>
</div>
Here you can find a bunch of different mouse cursors.
Sure you can.
You just need either some content or a defined height for your DIVs (in your code the DIVs have zero height):
.c-scrolldown,
.c-scrolldown2 {
height: 200px;
background: #ddd;
}
.c-scrolldown {
cursor: pointer;
}
.c-scrolldown2 {
cursor: crosshair;
}
<div class="c-scrolldown2" id="pointer-cursor">
<div class="c-line2"></div>
</div>
<br>
<div class="c-scrolldown">
<div class="c-line"></div>
</div>
You can use different cursors for different elements if you want to use it.
<html>
<head>
<style>
.c-scrolldown{
cursor:pointer;
}
.c-scrolldown2{
cursor:crosshair;
margin-bottom:30px;
}</style>
</head>
<body>
<div class="c-scrolldown2" id="pointer-cursor">
<div class="c-line2">Crosshair</div>
</div>
<div class="c-scrolldown">
<div class="c-line">Pointer</div>
</div>
<body>
<html>
Related
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>
I've seen both this and this question, but they're both Javascript-oriented.
I'm looking to select the only div which has no ID or Class.
Example:
<body>
<div class="X" ... />
<div class="Z" ... />
...
<div class="Y" ... />
<div>Select me</div>
<div id="footnote" ... /> <!-- Notice I have no class. -->
...
</body>
There will only ever be one div with no class and id.
The div may change places, or be not present.
No Javascript. However any language which can compile to CSS like SASS is fine.
The divs in question will only ever be directly under <body>.
I may not always know what classes or IDs there will be.
You can use the :not:
CSS:
div:not([class]):not([id]) {
height: 200px;
width: 200px;
background-color: red;
}
HTML:
<div></div>
<div class="shikaka"></div>
<div id="shikaka2"></div>
http://jsfiddle.net/qcq0qedj/
You can do:
body > div:not([class]):not([id]) { }
JSFiddle
Ah... the beauty of :not. (AKA - not:ugly)
div:not([class]):not([id]) {
color: #fff;
padding: 2px 4px;
background: red;
}
<body>
<div class="X">...</div>
<div>Select me</div>
<div class="Z">...</div>
<div class="Y">...</div>
<div>Select me, too!</div>
<div id="footnote">...</div>
</body>
http://jsfiddle.net/stevenventimiglia/53Lqekod/
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).
Here is what my print page look like,
Here is my html glimpse,
<style>
.container{
float: left;
border: 1px solid Black;
width: 400px;
height: 350px;
margin: 10px;
padding: 10px;
page-break-inside: avoid;
}
.container img{
max-width: 200px;
max-height: 200px;
}
</style>
<div class="container">
<b>Name: </b>#Product.Name<br />
<b>Model: </b>#Product.ModelNumber<br />
<img src="#Product.ImagePath" /><br />
<span style="font-size: 20px">DetailedDescriptions</span><br />
#foreach(var attr in Product.DetailedDescriptions){
#attr.Header<br />
}
<span style="font-size: 20px">KeyAttributes</span><br />
#foreach(var attr in Product.KeyAttributes){
#attr.Name<br />
#attr.Value<br />
}
</div>
How to make sure that the page break after every 6 divs using css
You should encapsulate your divs and create a better structure of this type in HTML:
<body>
<div class="container-holder">
<div class="container-row">
<div class="container"></div>
<div class="container"></div>
</div>
<div class="container-row">
<div class="container"></div>
<div class="container"></div>
</div>
<div class="container-row">
<div class="container"></div>
<div class="container"></div>
</div>
</div>
<div class="container-holder">
<div class="container-row">
<div class="container"></div>
<div class="container"></div>
</div>
<!-- keep adding more container-rows -->
</div>
</body>
Then in CSS take several things into account:
let body take up whole page
use page-break-inside: avoid;
give specific width and height in pixels to divs
containers should have the display: inline-block and vertical-align: bottom;
container-holders should have display:block property
[bonus] avoid inline style
Here is a working jsFiddle
I have tried it outside of jsFiddle and I get this result:
You can use
div:nth-of-type(6n) {
page-break-after:always;
}
to insert a page-break after each 6. div, but I think this will not work with floats.
You could do it this way:
FIDDLE
.wrapper div:nth-child(6n)
{
margin-bottom: 300px;
}
Which means: after every 6 containers - add a bottom margin of x px (how ever much you need) so that it pushes the next boxes to the next page.
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;}