I have a simple question, I am using a widget which has a text and I can customize the css for the division..
In the widget, the code to show the text and image is
<div>
<div class="image"><img src=""~~</div>
<div class="text">text</div>
</div>
Now, am looking to let the text on top and the image after the text and in center, but I can not edit the html, so is there any way I could achieve it only through css??
I don't think using top margin-top would work up here, beacause it is a layout, and top or margin-top might breakout .
Thanks in Advance
Mohit
If the markup and class names will be the same throughout, you could also use jQuery:
$('.image').each(function () {
var container = $(this).parent('div');
var image = $(this).detach();
container.append(image);
});
JSFiddle: http://jsfiddle.net/9psQh/
Related
I'm trying to educate myself about Flickity. The carousel auto plays and the selected cell (denoted by the grey background) is automatically in the middle. I would like the selected cell not to be in the middle. I'm looking for a way to may it be the cell to the left, so it is above the dots (desktop view).
Hope that makes sense. Here is the jsfiddle for it.
The only method that I can think of is using jQuery to find the prev sibling for the "is-selected" class and adding a class to it, but I was hoping there may be a simpler method
Thanks in advance for your feedback!
<div class="carousel-outer-flick">
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell is-initial-select"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
</div>
add this
<Slider
options {{
cellAlign: 'left' //this part will shift your entire slide to left
}}>
...
My scenario is to achieve a section in web page looks like this:
I am okay to use image and I am okay to use css. But as I am working in Salesforce, it is quite hard to put images into css file or section which means I can't use css code like this:
.wStatusCompleted {
background: #DBFBD6 url(../img/wizardCompleted.png) 20px 16px no-repeat;
}
Everything else is fine but putting the url of image in the css will result in resource not found. So I am trying to achieve it via html way and here is what I tried:
<div style="float:left">
<img src="{!$Resource.wizardCompleted}"/>
</div>
<div>
<span style="font-size:18px;margin-bottom:20px;"> Completed</span>
<br />
<span>Well done, you have successfully completed this request and received payment.</span>
</div>
I have tried a couple of things and this is the closest one but still not what I want. Any suggestions?
Edit
To answer the comment, the above html will result in an image as shown below:
You should be floating both of your divs not just the one wrapping the image:
<div style="float:left;">
<img src="http://www.placecage.com/50/50"/>
</div>
<div style="float:left;">
<span style="font-size:18px;margin-bottom:20px;"> Completed</span><br/>
<span>Well done, you have successfully completed this request and received payment.</span>
</div>
Be sure to clear your floats using overflow:hidden or a clearfix on a parent element or (in the event that there is no parent) by adding an empty element set to clear:both. This appeared to be working but your second container was actually sitting behind the image because of the float:left
FIDDLE
To align the text in the middle just use display:inline-block instead of float:left and set vertical-align:middle; for both of them:
NEW FIDDLE
You can try also display:inline to make the img behave like a text element.
<img src="http://png.findicons.com/files/icons/985/affel/128/tick.png" style="display:inline-block;"/>
<div style="display:inline-block; vertical-align:top; margin-top:2em;">
<span style="font-size:18px;margin-bottom:20px;">Completed</span><br/>
<span>Well done, you have successfully completed this request and received payment.</span>
</div>
Fiddle to play with
I have searched for several things, but i just couldnt find the answer. Maybe you could help me out.
I want to align div elements like on Pinterest. Not all divs are the same height, but the gutter width stays the same. I am designing something and i would like to program it as well.
Here is an image of what I mean, for clarification: http://nl.tinypic.com/r/ekkkte/8
Graphicburger.com uses the same thing I mean to do. I just want to know how one would align his content like that.
Well, one way to achieve this is by using Masonry. I think this is what Pinterest actually uses for their layout. This also happens to work jQuery, if you are using that as well. If you are looking for more on the theory behind this, check out this link
The following is the demo code from the Masonry plugin/library link:
HTML
<div id="container">
<div class="item">...</div>
<div class="item w2">...</div>
<div class="item">...</div>
...
</div>
<script src="/path/to/masonry.pkgd.min.js"></script>
CSS
.item { width: 25%; }
.item.w2 { width: 50%; }
Javascript
var container = document.querySelector('#container');
var msnry = new Masonry( container, {
// options
columnWidth: 200,
itemSelector: '.item'
});
i have answered a very similar post few days ago.. with sample code of html and css: How to create grid position elements like in this image css
mind to take a look?
There is my code :
<div class='f-left vignetteFamille box-sizing'>
<div class='relative contenuVignetteFamille box-sizing' style='z-index:1;'>
<br/><br/><br/><br/>
<img class='absolute' src='./charte/famille/fondBasGaucheVignetteFamille' style='bottom:-21px;left:-4px;z-index:0;'>
</div>
</div>
I want my div contenuVignetteFamille hover the image but this doesn't work and I don't know why
EDIT:
there is my css but I don't know if will help you :
.vignetteFamille{background-image:url('./charte/famille/fondVignetteFamille.png'); background-repeat:no-repeat;background-position:bottom right;margin-right:16px;width:201px;margin-top:2px;padding-bottom:19px;padding-right:19px;}
.contenuVignetteFamille{width:100%;border:solid 4px #FFC600;}
I'm not sure if I understood your question correctly but I'm assuming you want to highlight the image when hovering the div contenuVignetteFamille?
This can be solved by adding css to the child when hovering the parent, like this:
.contenuVignetteFamille:hover img {
opacity: 0.5;
}
See my fiddle here.
On another note, don't use br tags to get some height on your div, add a height value instead. I've also moved your inline styling to the external one.
idI have these links on a page:
<div>
Item 1
Item 2
Item 3
</div>
I want to add a hover feature using css so that when a link is hovered over a image specific to that link appears as background image in the container div. I'm fairly new to jquery and js but I'd prefer a pure css solution if possible.
You have the answer to this question in your post: hover The CSS would be this:
#eq1:hover {
background-image: url ('../link_to_file.png');
}
jQuery:
You can do that in jQuery. But to do that in jQuery would be this, and also, do you have an image? I will tell you how to link the image. Use your image for that.
Example:
$(document).ready(function () {
$("#eq1").mouseover(function () { // function to run, when mouse comes over eq1
$("div").css("background", "image_image_link.png");
}
});
Instead of using div you can use (this).parent too because you said, you wanted the image to show up for the parent div. You can repeart the code for all of the three links.
Note: You cannot add CSS properties to some other divs in CSS, for that you must use jQuery.
Edit:
You wanted to add the images in some other div. That would be something like:
<div class="all-images">Add all the images here..</div>
<div class="image-viewer"></div>
Now what this actually is something like this: The .all-images is the container, that will contain all the images like thumbnails. And the .image-viewer will be used to show the image.
$(document).ready(function () {
$(".all-images").click(function () { //
$(".image-viewer").css("background", "image_image_link.png");
}
});
In the example I used, the click on the the image (.all-images) will show the image in the div. But remember to use something like a name of the image. Because jQuery won't remember which image was clicked. You can use something like src of that img.
try this
div:hover #id1{
background: white url('path/to/image.png') no-repeat top left;
}