#world1 {
background: url(/images/home/1.jpg) 0 0 no-repeat;
float: left;
width: 2%;
height: 4%;
position: absolute;
top: 0%;
left: 0%;
z-index: -1;
margin-top: -20px;
margin-left: -20px;
}
#world1:hover {
background-position: 0 -40px;
cursor: pointer;
I have many (about 100) of these #world(number) divs on a single page. The only thing that changes are the top and left values and the background jpg source. Everything else is the same so clearly it is a huge amount of code. Is there some way I can avoid copying the content that remains the same between all divs and only change the absolute position and background source of each individual div?
Thanks
Also give the div a class, for example: class="worlds".
And put all the generic styling in that class
.world { generic styling }
#wordl1 { custom styling }
Would it be acceptable to add a shared class to all of the #worldN divs?:
.world { /* Styles general to class="world" */ }
#world1 { /* Styles specific to id="world1" */ }
#world1:hover { /* Styles specific to id="world1" hover state */ }
#world2 { /* Styles specific to id="world2" */ }
#world2:hover { /* Styles specific to id="world2" hover state */ }
And in your HTML:
<div class="world" id="world1"></div>
<div class="world" id="world2"></div>
Use classes for common style for all divs, and id's for unique style:
HTML:
<div class="myClass" id="div1" />
<div class="myClass" id="div2" />
<div class="myClass" id="div3" />
<div class="myClass" id="div4" />
CSS:
.myClass
{
///all your repeating CSS
}
#div1{}
#div2{}
#div3{}
#div4{}
You can group same rules of many elements with their class: http://www.w3.org/TR/html4/struct/global.html#h-7.5.2
ID will be used to apply UNIQUE styles.
Yes, just put everything that's common into a div css optionally giving it a class that the div must include then just add the specialist css to each world div. Note you can also do class="class1 class2 class3" to use more than one css class.
Take a loot at http://sass-lang.com/
Related
I have two elements: tooltip and tooltip-line.
There is common properties for each elements:
[tooltip]::after, [tooltip-line]::after {
position: absolute;
opacity: 0;
visibility: hidden;
/* Other common properties */
}
Next, I have different properties for each element.
[tooltip-line]::after { /* One line tooltip */
content: attr(tooltip-line);
white-space: nowrap;
}
[tooltip]::after { /* Multiline tooltip */
content: attr(tooltip);
width: 200px;
white-space: normal;
}
Is this a correct usage? Including similar classes. Or should I copy all properties to each declaration block?
Here's a different approach which might be slightly more scalable. Using CSS custom variables, we can override any default class values by resetting them in the multiline class. Finally, I would make the attributes containing the tooltip content identical—and valid data attributes—if possible.
.tooltip::after {
--tooltip-white-space: nowrap;
content: attr(data-tooltip-content);
white-space: var(--tooltip-white-space);
}
.tooltip.multiline::after {
--tooltip-white-space: normal;
}
.container {
width: 250px;
border: 1px solid red;
}
<div class="container">
<div class="tooltip" data-tooltip-content="my tooltip content should not wrap no matter what"></div>
<div class="tooltip multiline" data-tooltip-content="my multliline tooltip content should wrap"></div>
</div>
jsFiddle
It's absolutely right to divide the css in multiple blocks.
One of the first thing to know while writing code in any language is NOT to repeat yourself.
I am building a website with WordPress. On my homepage I want a picture grid (10 x 3) of different products, and when you hover over each picture, a caption with the product name will pop up.
I have managed to do 3/4 of it but there's this massive white space below each row. :(
I am using the SiteOrigin editor widget to insert the image, and using HTML and CSS to code the hover effects. See below for the current coding.
HTML:
<div id="pic">
<img class="hover" src="http://peacefruit.net/wp-content/uploads/2016/11/Hassaku.png" />
<p class="text">Summer Mikan</p>
</div>
CSS:
.text {
color: #000000;
font-size: 16px;
font-weight: bold;
text-align: center;
background: rgba(255, 255, 255, 0.5);
}
#pic .text {
position:relative;
bottom:80px;
left:0px;
visibility:hidden;
}
#pic:hover .text {
visibility:visible;
}
Here's the website so you can see what I've done: http://peacefruit.net
The top row has the captions, but also, the pesky gap. The bottom three rows are examples of how I want it to look (no borders or gaps between pics). All rows and individual widgets have no padding, margins or gutters and I've already adjusted the theme padding to 0 with CSS.
I'm sure it's a simple line of code I'm missing, but it's driving me crazy!
Please send help.
Try adding to your inline css for siteorigin-panels-stretch
overflow:hidden;
height:164.89px;
Hope this works.
Thanks!
In your case
the id should be unique.
So, it is better to change #pic to a class
Also, the <p> tag in your style contain padding-bottom and it will case the white space problem.
Change each pic to the following
HTML:
<div class="pic">
<img class="hover" src="http://peacefruit.net/wp- content/uploads/2016/11/Hassaku.png">
<div class="text">Summer Mikan</div>
</div>
CSS:
.pic{
position: relative;
}
.pic .text{
position: absolute;
top: 80px;
width: 100%;
visibility: hidden;
}
then it should be work.
Stylesheets for WordPress themes can have a lot of CSS bloat, so you're on the right track creating a custom stylesheet, to tackle the styling nuances you desire.
Since this is a responsive theme, it's best to begin solving this from a mobile-first perspective.
The first thing to prune is the bottom-margin: 30px; for .panel-grid-cell, like this:
.home #main .panel-grid-cell {
margin-bottom: 0;
}
The next thing is to correct your HTML mark-up. The value of pic is given to multiple id attributes. An id attribute is used to denote a unique element. The class attribute denotes a non-unique element. pic should be assigned to class attributes instead, since many elements in your layout utilize this hook value. Like this:
<div class="pic">
I'm noticing that img.hover and p.text are getting wrapped in an unnecessary <p> tag. Make sure that this does not happen in the SiteOrigin editor.
You should then prune the bottom-margin: 1.5em for paragraphs inside of the .pic divs (note the designation of pic as a class hook .pic, rather than an id hook, which would have been #pic):
.pic p {
margin-bottom: 0;
}
To get even closer, relative positioning should be used on the .pic div to ensure that the subsequent styling suggestion (position: absolute;) will take effect:
.pic {
position: relative;
}
And then, for the text that appears when hovering an image:
p.text {
position: absolute;
width: 100%;
}
The styles above will work for mobile, but your theme is responsive, and you might need to account for some styling variations with different screen sizes.
For tablets, you'd need a media query like this:
#media (min-width: 600px) {
.some-class {
some-property: some-value;
}
etc...
}
And finally, for desktop:
#media (min-width: 1000px) {
.some-class {
some-property: some-value;
}
etc....
}
Thanks everyone for your help :) After some fiddling around with the suggestions and a software update, there is no gap now!
I thought I'd post my final code in case anyone has a similar problem and it might be of some help. (Note: there are some minor style changes which differ from the original post but have no effect on how it works).
HTML:
<div class="pic">
<img class="hover" src="http://peacefruit.net/wp-content/uploads/2016/11/Summer-Mikan.png"/>
<div class="text">Summer Mikan</div>
</div>
WIDGET CLASS:
fade
CSS:
.fade {
-webkit-opacity: 0.6;
-moz-opacity: 0.6;
opacity: 0.6;
}
.fade:hover {
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
}
.pic {
position: relative;
}
.text {
color: #FFFFFF;
font-size: 22px;
font-weight: bold;
text-align: center;
background: rgba(214, 187, 14, 0.85);
}
.pic .text {
position:absolute;
top: 0px;
width: 100%;
visibility:hidden;
}
.pic:hover .text {
visibility:visible;
}
.pic p {
margin-bottom: 0px;
}
So glad it finally works, much appreciation to everyone!
I'm actually a brand-new coder, just starting on HTML (started yesterday) and I'm having a bit of trouble with something that I can't quite seem to find out how to do. I used CSS to make an image transparent on my main page, but unfortunately, it makes all the other images transparent as well, despite the fact that all the others are meant to be opaque. Here's the source code for my index.html
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("bg.png");
background-color: #cccccc;
}
h1 {color:green}
p {color:blue}
h1 {
text-align: center;
}
p {
text-align: center;
}
header {
position:fixed;
top:0;
background-color:#333;
opacity: 0.4;
width:100%;
height:40px;
padding:20px;
text-align:center;
}
footer {
width: 100%;
bottom: 0;
background-color:#333;
opacity: 0.4;
position: fixed;
text-align:center;
}
#main{
padding-top:100px;
text-align:center;
}
img {
opacity: 0.4;
}
img:hover {
opacity: 1.4;
}
</style>
</head>
<title>Jordan's Test Site (iCarlos)</title>
<body center>
<header> Deal with it B)</header>
<div id="main">
<p><img src="giphy.gif" alt=Deal with it! style="width:500px;height:273px"></p>
<p>Hello! I am a website. Testing, testing, 1 2 3.</p>
<p><img src="deal-with-it.png" alt=Clic! style="width:450px;height:80px"></p>
<p>Click here to go to the table!</p>
</div>
<footer>
<p><img src="home.png" alt=source style=width:124;height:124></p>
</footer>
</body /center>
Thanks for the help, guys!
The simplest approach would be to define a class for transparent images (your current selector img adds the opacity rule to ALL the images) and then add these rules:
img.transparent {
opacity: 0.4;
}
img.transparent:hover {
opacity: 1; // no point in going higher than 1 here
}
Then in the HTML, just add the class to those images you want transparent:
<img src="image.jpg" class="transparent" alt="" />
You need to select your specific image.
Right now, img selects the tag img and not a specific image. You need to select an additional attribute to specify which image. You can do that by adding a class attribute, an id attribute or using your existing attributes like so (though I wouldn't generally recommend this):
img[alt=Clic!] {
opacity: 0.4;
}
img[alt=Clic!]:hover {
opacity: 1;
}
At the moment you're targetting every single imgtag in your HTML.
You have two easy ways to target only some images :
Add a class to the images you want to make transparent, in your HTML, and target that class in CSS
Example HTML :
<img class="transparent" src="..." alt="...">
And in the CSS :
img.transparent{
opacity: 0.5; /* Example, set it to whatever you want */
}
You can also keep your HTML structure and target your element more precisely with CSS
Let's say that you want to change the opacity of the img that are contained in the header, and not the opacity of the images that are not in the header, you could do this :
header img{
opacity: 0.5; /* Example, set it to whatever you want */
}
This is very basic in CSS and I recommand that you read a few tutorials, all of this should be covered.
Here is a good tutorial for beginners : http://css-tricks.com/how-css-selectors-work/
Here's an example of how you can target different images with a CSS class:
img {
opacity: 0.8;
width:200px;
height:200px;
transition: all 0.2s;
}
img:hover {
opacity: 1;
}
.transparent {
opacity: 0.2;
width:200px;
height:200px;
transition: all 0.2s;
}
.transparent:hover {
opacity: 0;
}
<img src="http://placekitten.com/1000/1000" class="transparent"><img src="http://placekitten.com/1000/1000" class="transparent"><img src="http://placekitten.com/1000/1000" class="transparent"><img src="http://placekitten.com/1000/1000"><img src="http://placekitten.com/1000/1000"><img src="http://placekitten.com/1000/1000">
Hope this helps!
First option: Give the image an ID (or class, or select by its alt-attribute as Josh Burgess makes clear) and add a style rule to reflect its opacity
HTML
<img src="giphy.gif" id="transparent-image" alt="Deal with it!" style="width:500px;height:273px">
CSS
#transparent-image {opacity: 0.4;}
You can also use classes. Classes can be used on multiple elements in a document. IDs should never be used multiple times! A passport is for one individual in the whole wide world. Similarly, an ID is for only one element in your HTML. In your cases it might be useful to use a class so that you can have multiple transparent items with only one class:
.transparent-image {opacity: 0.4;}
Now, when you add the following HTML to an element, it will have this opacity value:
class="transparent-image"
For example:
<img src="giphy.gif" class="transparent-image" alt="Deal with it!" style="width:500px;height:273px">
Second option: Use inline styling
<img src="giphy.gif" alt="Deal with it!" style="width:500px;height:273px;opacity:0.4">
The first option is the best. Inline styles should not be used unless it concerns small chunks that are smaller than an added class would be. In your case, get rid of the inline styles all together and use stylesheets.
I have the following HTML:
<div class="float-left inline orderby">
<div class="arrow up" style="margin-bottom: 2px; margin-left: 2px"></div>
<div class="arrow down" style="margin-left: 2px;"></div>
<input type="checkbox" data-ng-model="inverse" style="margin-left: 0px; margin-right: 10px;">
</div>
I'm trying to use the less pre-processor to create my CSS.
How can I use less to create CSS to remove the styles from this example. In particular I am not sure how to handle the difference between the 1st and 2nd DIV
You mean you want to remove the inline styles?
.orderby .arrow, .orderby input {
margin: 0;
&.up {
/* styles for first div */
}
&.down {
/* styles for second div */
}
}
It's a little unclear exactly what your question is. I can read it two ways:
(1) You cannot remove css set with style with LESS
If you actually have a style property on your html elements, then that cannot be directly affected by LESS at all (so it cannot be "removed" by LESS). Additionally, the only way to overcome those styles with LESS is by using the exact same solution you would have available with CSS, the !important attribute (which I despise, but the facts are the facts when it comes to what is available for CSS styling). So this would remove the margins imposed by the style for all direct children in your div (as your example has):
.orderby > * {
margin: 0 !important;
}
But perhaps you want to know how...
(2) You can move the code from the style to the LESS
In which case, it is something like this:
LESS
.orderby {
.arrow {
margin-left: 2px;
&:first-child { /* or could use &.up */
margin-top: 2px;
}
}
input {
margin-left: 0;
margin-right: 10px;
}
}
CSS Output
.orderby {
.arrow {
margin-left: 2px
&:first-child { /* or could use &.up */
margin-top: 2px;
}
}
input {
margin-left: 0;
margin-right: 10px;
}
}
How can I achieve the affect like here on SO when you hover over a comment:
an arrow up to vote up
a flag to mark that message
if you are the comment author you get option to delete as well
How can I make links and images like that show when hovering over a DIV or even a table cell?
Try this:
.comment .button {
visibility: hidden;
}
.comment:hover .button {
visibility: visible;
}
Assuming your HTML is something like this:
<div class="comment">
<a ...><img class="vote button" ...></a>
<a ...><img class="flag button" ...></a>
<a ...><img class="delete button" ...></a>
<span class="comment-text">...</span>
</div>
Andrew noted that this pure CSS solution won't work in IE6. And as Noel pointed out, hovering just isn't an option in mobile browsers. You can use progressive enhancement to have the buttons always visible in those cases.
<style type="text/css" media="screen">
.comment .button {
visibility: hidden;
}
.comment:hover .button {
visibility: visible;
}
</style>
<!--[if lt IE 7]>
<style type="text/css">
.comment .button {
visibility: visible;
}
</style>
<![endif]-->
IE6 will understand the first style, making the buttons hidden, but not the second, making them visible again on hover. The third style is in a conditional comment, which non-IE browsers and IE7+ will ignore. It overrides the first style, making the buttons visible always.
div:hover {
background-image:url('arrow.gif');
}
The key to what you are trying to do -- as I think the other answers are saying-- isn't to create the content on hover, but to make it "visible" on hover. It's always there, just not in a way the user can see or interact with. So you'd have something like:
<div class="vote_arrow">
<a ...>Clicking on me is fun</a>
</div>
and then a CSS rule like:
.vote_arrow a {
display:none;
}
.vote_arrow:hover a {
display: block;
}
Be aware, though, that this method requires that the user have CSS turned on. Make your hidden content set up in such a way that if I have CSS off, the links still make some amount of sense.
Consider the following HTML:
<div class="special">
<div class="links_holder">
<a class="flag" title="Flag" href="flag.html">Flag</a>
</div>
<div class="content">
Hello, this is my content!
</div>
</div>
You can use the following CSS to hide the links:
div.special div.links_holder {
float: left;
width: 16px; /* For a 16x16 link image */
margin: 0 4px 0 0; padding: 0;
visibility: hidden;
}
div.links_holder a.flag {
display: block;
width: 16px; height: 16px;
overflow: hidden;
/* Move the text out of the way
It's there for screen readers */
text-indent: -9999px;
background: url('flag.gif') top left no-repeat;
}
div.special:hover div.links_holder {
visibility: visible;
}
Note that this will not work in IE6 since IE6 and below only supports the :hover pseudo-tag on <a> tags. In which case you'll need to revert back to a JavaScript solution. Example with MooTools:
$$('div.links_holder a.flag').each(function(el) {
el.addEvents({
'mouseenter': function() {
el.addClass('hover');
},
'mouseleave': function() {
el.removeClass('hover');
}
});
}, this);