Please go to my website . We build the site under Jupiter theme which uses bootstrap. I'd like to add one more section towards the right side of my logo which is CALL NOW and WhatsApp. Refer the below image.
Add this code after <a></a> which have http://www.b4bconsultancy.com/ link inside .header-logo div
<div class="rgt-side">
<a class="call" href="#">
<span>CALL NOW</span>
</a>
<a class="whatsapp" href="#">
<img src="whats-app-logo.png" class="img-rseponsive">
</a>
</div>
And put css styles as below
.mk-header .fit-logo-img a { floa:left; }
.rgt-side { display: inline-block; float: left; }
a.call { float:left; }
a.whatsapp { float:left; }
Try above code and ask any help you want.
Note - use neccerry styles for further adjustments such as margin, padding etc.
Cheers !!!
How to disabled this thumbnail using bootstrap class:
<div class="row row-menu-s0s1">
<div class="col-md-12 col-xs-12 thumb">
<a class="thumbnail" href="<c:url value='/${area}/link'/>">
<img class="img-responsive img-menu" src="<%=request.getContextPath()%>/resources/css/img/menu-box-02.jpg" alt="">
</a>
</div>
</div>
*to clarify: I would like some of thumbnail inside my pages to be disabled because of certain reason. so far ive been trying to add disabled class to <a>,div.thumb,and even img. however that doesnt works. the link still active and the pointer still showing i need something to give idea to user that this thumbnail is not active and to stop link from working.
*the answer: while my initial idea is to fade the thumbnail and return pointer to normal cursor. i realised from the answer i could just use css pointer-events: none;cursor: not-allowed; with combination <a class=disabled> and some jquery :
$('a.disabled').click(function (e) {
e.preventDefault();
});
while this might be just a workaround not real proper way. but im more than contented to accept any working answer right now.
use pointer-events: none;
.thumb a {
pointer-events: none;
cursor: not-allowed;
}
When we insert a image to blogger post it automatically inserts a separator with 'text-align:center;'. I want to remove it(and set it to left instead of center). But it's hard to remove it manually for every image in every post. Is there a easy way to do this automatically?
I tried .post-body img{float:left;} template CSS. This gets the image to left, but then texts flow to right side of the image instead of under the image. Please help me to do this.
Edit: Below is the normal div that an image would be automatically surrounded when a image is added to a blogger post. Below that is the texts of post.
<div class="separator" style="clear: both; text-align: center;">
<a href="-----.html"; imageanchor="1" style="margin-left: 0em; margin-right: 1em;">
<img alt="" border="0" src="1.bp.blogspot.com/1.JPG"; title="" />
</a></div>
<br/>
<span style="font-size: large;">text paragraph texts texts</span><br />
Within the <b:skin> or in a separate <style> within the <head> of your template include the following CSS code:
.post-body .separator {
text-align:left !important
}
I can't see the rest of your code, if you uploaded something like a js.fiddle that would help! The code below should fix the text alignment with your images, if it doesn't let me know!
.post-body img {
float: left;
text-align: left;
}
.post-body .separator a {
margin: 0!important;
}
I have a section in my rails web application's view page which is nothing but a code that's displaying the facebook like, twitter tweet and other sharing options. The code goes like this:-
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_pinterest_pinit"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-50effbad1fc26ade"></script>
<!-- AddThis Button END -->
I wanted to move this div to center. So my css code for this is like:
.center {
text-align: center;
}
And I then added the <div class="center"> to my code...
But it's node moving everything center. What could be the reason??
Thanks in advance...
try puting a value to the width of your .center! For your convenience you can use a background color to keep your eyes on different div s what difference it makes.
.center {
text-align: center;
width: 70%
/*For the sake of understanding divs sometimes background color helps*/
background-color:#b0e0e6;
}
<html>
<head>
</head>
<body>
<div>
<a href="http://www.google.com">
<span>title<br></span>
<span>description<br></span>
<span>some url</span>
</a>
</div>
</body>
</html>
I am pretty new to CSS, I have a simple case like the above. I would like to make the "title" and "some url" clickable but want to make description as non-clickable. Is there any way to do that by applying some CSS on the span so that whatever inside that span, it is not clickable.
My constraint is that, I do not want to change the structure of the div, instead just applying css can we make a span which is inside an anchor tag, not clickable ?
Actually, you can achieve this via CSS. There's an almost unknown css rule named pointer-events. The a element will still be clickable but your description span won't.
a span.description {
pointer-events: none;
}
there are other values like: all, stroke, painted, etc.
ref: http://robertnyman.com/2010/03/22/css-pointer-events-to-allow-clicks-on-underlying-elements/
UPDATE: As of 2016, all browsers now accept it: http://caniuse.com/#search=pointer-events
UPDATE: As of 2022, browsers behavior may have changed, another option can be:
a {
pointer-events: none;
}
a span:not(.description) {
pointer-events: initial;
}
Not with CSS. You could do it with JavaScript easily, though, by canceling the default event handling for those elements. In jQuery:
$('a span:nth-child(2)').click(function(event) { event.preventDefault(); });
CSS is used for applying styling i.e. the visual aspects of an interface.
That clicking an anchor element causes an action to be performed is a behavioural aspect of an interface, not a stylistic aspect.
You cannot achieve what you want using only CSS.
JavaScript is used for applying behaviours to an interface. You can use JavaScript to modify the behaviour of a link.
In response to piemesons rant against jQuery, a Vanilla JavaScript(TM) solution (tested on FF and IE):
Put this in a script tag after your markup is loaded (right before the close of the body tag) and you'll get a similar effect to the jQuery example.
a = document.getElementsByTagName('a');
for (var i = 0; i < a.length;i++) {
a[i].getElementsByTagName('span')[1].onclick = function() { return false;};
}
This will disable the click on every 2nd span inside of an a tag.
You could also check the innerHTML of each span for "description", or set an attribute or class and check that.
This is the simplest way I would have done it. Without bordering about CSS or javascript :
<html>
<head>
</head>
<body>
<div>
<p>
<a href="http://www.google.com">
<span>title<br></span>
</a>
<span>description<br></span>
<a href="http://www.google.com">
<span>some url</span>
</a>
</p>
</div>
</body>
</html>
You can replace the tag with anything you want.
Yes you can....
you can place something on top of the link element.
<!DOCTYPE html>
<html>
<head>
<title>Yes you CAN</title>
<style type="text/css">
ul{
width: 500px;
border: 5px solid black;
}
.product-type-simple {
position: relative;
height: 150px;
width: 150px;
}
.product-type-simple:before{
position: absolute;
height: 100% ;
width: 100% ;
content: '';
background: green;//for debugging purposes , remove this if you want to see whats behind
z-index: 999999999999;
}
</style>
</head>
<body>
<ul>
<li class='product-type-simple'>
<a href="/link1">
<img src="http://placehold.it/150x150">
</a>
</li>
<li class='product-type-simple'>
<a href="/link2">
<img src="http://placehold.it/150x150">
</a>
</li>
</ul>
</body>
</html>
the magic sauce happens at product-type-simple:before class
Whats happening here is that for each element that has class of product-type-simple you create something that has the width and height equal to that of the product-type-simple , then you increase its z-index to make sure it will place it self on top of the content of product-type-simple. You can toggle the background color if you want to see whats going on.
here is an example of the code
https://jsfiddle.net/92qky63j/
CSS relates to visual styling and not behaviour, so the answer is no really.
You could however either use javascript to modify the behaviour or change the styling of the span in question so that it doesn't have the pointy finger, underline, etc. Styling it like that will still leave it clickable.
Even better, change your markup so that it reflects what you want it to do.
Using CSS you cannot, CSS will only change the appearance of the span. However you can do it without changing the structure of the div by adding an onclick handler to the span:
<html>
<head>
</head>
<body>
<div>
<a href="http://www.google.com">
<span>title<br></span>
<span onclick='return false;'>description<br></span>
<span>some url</span>
</a>
</div>
</body>
</html>
You can then style it so that it looks un-clickable too:
<html>
<head>
<style type='text/css'>
a span.unclickable { text-decoration: none; }
a span.unclickable:hover { cursor: default; }
</style>
</head>
<body>
<div>
<a href="http://www.google.com">
<span>title<br></span>
<span class='unclickable' onclick='return false;'>description<br></span>
<span>some url</span>
</a>
</div>
</body>
</html>