I am trying to make the "alt" text of the brand-logo and brand-logo-collapsed link white instead of the default blue like all the other ones. But am unable to figure out the proper css to specifically call that portion. Will someone please guide me in the correct direction.
<a href="#/" class="navbar-brand">
<div class="brand-logo">
<img src="#" alt="Dealer Tracking" class="img-responsive">
</div>
<div class="brand-logo-collapsed">
<img src="#" alt="Dealer Tracking" class="img-responsive">
</div>
</a>
CSS
a > navbar-brand > img {
color: #fff;
}
Your element with navbar-brand class is the same element as the anchor, so need to be treated as such in the CSS (be removing the space in between). Also classnames should be prepended with a ., and as you have a div in between the image and the anchor, it will break the rule, as > only selected direct descendants, so get rid of that:
a.navbar-brand img {
color: #fff;
}
Should get it working.
You can do this:
.brand-logo > img, .brand-logo-collapsed img{
color: white;
}
And if you want to to this for all of your images:
img{
color: white;
}
Related
After clicking on either right or left in this carousel, the button remains darker, even after you mouse off the elelemnt. I assume the reason is some sort of visited state, but looking at the CSS, I don't see anything relevant. Is there any way to prevent that effect?
I've written a JSFiddle to demonstrate it, and copied the HTML below.
<div class='container'>
<div class='row'>
<div class='carousel slide' data-interval='false' id='product-image-carousel'>
<!-- Wrapper for slides -->
<center class='carousel-inner'>
<div class='active item'>
<img alt='...' src='http://placehold.it/300x200'>
</div>
<div class='item'>
<img alt='...' src='http://placehold.it/300x200'>
</div>
</center>
<!-- Controls -->
<a class='left carousel-control' data-slide='prev' href='#product-image-carousel' role='button'>
<span class='glyphicon glyphicon-chevron-left'></span>
</a>
<a class='right carousel-control' data-slide='next' href='#product-image-carousel' role='button'>
<span class='glyphicon glyphicon-chevron-right'></span>
</a>
</div>
<!-- Carousel -->
</div>
</div>
Quick workaround: Overwrite bootstrap's css.
.carousel-control:hover,
.carousel-control:focus {
color: #fff;
text-decoration: none;
opacity: .9;
filter: alpha(opacity=90);
}
Remove completely the :focus selector
You can use this workaround:
$(".carousel-control").focus(function(event){
$(this).blur();
});
It works for me.
Simply fix this with css , Decrease the opacity to this .carousel-control:hover, .carousel-control:focus classess , apply the below code your fiddle or your page you can see the difference , Thanks
#product-image-carousel a {
outline: none !important; /* this will remove the outline when we click the anchor tag */
}
.carousel-control:hover, .carousel-control:focus {
opacity: 0.5; /* this will remove the darker color on focus and hover */
}
jsfiddle Update
.carousel-control:focus {
outline: none;
opacity: 0.5;
}
.carousel-control:hover {
opacity: 0.8;
}
Why does the css :hover effect not work?
http://jsfiddle.net/t7on1k15/
body,html
{
font-family: courier;
height:100%;
min-width: 100%;
margin:0;
padding: 0;
}
#idDivBodyWrapper
{
margin:0;
padding:0;
height: 100%;
width: 100%;
background: lightgray;
}
#four:hover
{
color:black;
}
The HTML
<div id="idDivBodyWrapper" style="vertical-align:middle;">
<div style="position:absolute;display:block;float:left;left:0;Top:0"><button class="btn btn-default btn-lg" style="opacity:1;background:transparent;font-family:courier;font-weight:bold;" onclick="location.href='http://vqplan.com';"><i style="color:white;opacity:1;" class="fa fa-th fa-fw fa-5x"></i><br><span style="opacity:1;color:white">home</span></button></div>
<table style="width:100%;height:100%;background:black;clear:both;vertical-align:middle;text-align:center;"><tr><td>
<h1 id="four" style="font-size:10vh;color:white;">Code that lasts.<br><br><i id="one" class="fa fa-terminal fa-3x fa-fw" style="color:white;"></i></h1>
</td></tr></table>
</div><!--end idDivBodyWrapper-->
Here is one that does work:
http://jsfiddle.net/tuxdukz4/
CSS - CASCADING style sheets. You've got style="color:white" inside your h1#four element. That color:white is at a higher precedence level than your external style sheet rule, so color: white overrides the :hover style.
If you mod your fiddle and put color:purple into the h1's style= attribute, you'll get the exact same behavior: the hover won't work.
Because of CSS Specificity. I truly recommend you to read about it: http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
You have an element-level style color: white that overrides the hover effect.
Check this for a working one: http://jsfiddle.net/t7on1k15/1/
fiddle: http://jsfiddle.net/t7on1k15/2/
change the <h1 id="four" style="font-size:10vh;color:white;"> html to this:
<h1 id="four">Code that lasts.<br><br></h1>
and then add this css:
#four {
font-size:10vh;color:white;
}
your inline style has highest precedence over other css code.
I believe that putting the style inline ("style="font-size:10vh;color:white;") takes precedence over css. Inline style has higher priority. You actually couldn't style #four without hover in css if you use an inline style.
I have a word spacing issue which I cannot seem to resolve.
The web page is www.c5d.co.uk/captaintwo.php
The word spacing under the top images look ridiculous. Yet as far as I can see, the CSS is the same.
What am I missing ? If I put a /p tag after Wrigley it works fine but fails validation as there is no opening p tag
Relevant HTML and CSS is as follows:
.captain{word-spacing:185px;display:inline;}
.pres {display:inline; }
.ladycaptain{word-spacing:120px;display:inline; }
<img class="lewis" src="http://www.c5d.co.uk/captain.png" alt="The Captain">
<img class="socialtwo" src="http://www.c5d.co.uk/president.png" alt="President">
<p class="pres">
<br>Captain: John</p> <p class="captain">Lewis President:</p> Bill Wrigley
<img class="lewis" src="http://www.c5d.co.uk/ladycaptain.png" alt="Lady Captain">
<img class="socialtwo" src="http://www.c5d.co.uk/juniorcaptain.png" alt="Junior Captain">
<p class="pres">
<br>Lady Captain: Beryl</p> <p class="ladycaptain">Harrison Junior</p> Captain: Kieran Metcalf
Make the following changes:
.pres {
/* display: inline (remove) */
display: inline-block;
width: 270px;
text-align: center;
}
.captain {
/* display: inline (remove) */
display: inline-block;
width: 270px;
text-align: center;
}
<br> is outdated. Use the self-closing <br /> instead. The names should be wrapped in something (p, span, h3, something). There are 2 styles (one inline (inside the document) and one attached to #header) that are adding around 500px of space there. That's why there is a large gap.
Consider making it easier on yourself.. use 1 class to define each TYPE of object.
#people {
styles for container div
}
.box {
styles for the individual boxes
}
.photo {
styles for <img>
}
.title {
styles for names of people
}
Then just apply the classes to the appropriate item like so
<div id="people">
<div class="box">
<img src="path/image.jpg" class="photo" />
<h3 class="title">Position, name</h3>
</div>
<div class="box">
<img src="path/image.jpg" class="photo" />
<h3 class="title">Position, name</h3>
</div>
etc...
</div>
Subj. I've got a module for Joomla (don't blame me for using joomla, it's not me, i'm just helping my friend) with advertisment. The problem is that i can't get source codes for any modules, so I have to fix most of the problems via CSS (display:none method mostly).
<div style="text-align: right;">
<a style="text-decoration:none; color: #c0c0c0; font-family: arial,helvetica,sans-serif; font-size: 5pt; " target="_blank" href="http://joomline.ru/">ADVERTISMENT HERE</a>
</div>
If only div was declared, I would simply make it invisible using the display:none method...
Looking forward to help !
EDIT:
<div class="content">
<div id="jlvkgroup41016340" style="background: none repeat scroll 0% 0% transparent; height: 301px; width: 270px;">
...
</div>
<script type="text/javascript"> ... </script>
<div style="text-align: right;">
<a style="text-decoration:none; color: #c0c0c0; font-family: arial,helvetica,sans-serif; font-size: 5pt; " target="_blank" href="ADVERT LINK">TEXT ADVERT</a>
</div>
</div>
Assuming you're trying to hide the link (with that specific href):
a[href^="http://joomline.ru"] {
display: none;
}
JS Fiddle demo.
Based on the newly-added HTML, you can target the specific a element using sibling-combinators:
#jlvkgroup41016340 + script + div a {
display: none;
}
JS Fiddle demo.
This targets the a elements that are a descendant of a div element that's the immediately-adjacent sibling of a script element that is itself the adjacent sibling of the element with the id of jlvkgroup41016340.
Or:
#jlvkgroup41016340 ~ div a {
display: none;
}
JS Fiddle demo.
This targets the a descendants of a div which is the later-sibling of the element of id="jlvkgroup41016340".
References:
General-sibling (~) combinator.
Adjacent-sibling (+) combinator.
I have an icon that I display on top, right of a div on hovering over the div. My code is like this:
<div class='edit_hover_class'>
<!-- some code -->
</div>
And the corresponding css file contains:
.edit_hover_class:hover {
background: url("trash.gif") no-repeat scroll right top;
}
I want to attach a link to the edit icon, is it possible with plain css? If so, how?
You could hide a link until hover like so:
<div class='edit_hover_class'>
<a href='#'><img src='icons/trash.gif' /></a>
</div>
.edit_hover_class a{
visibility:hidden;
}
.edit_hover_class:hover a {
visibility:visible;
}
See jsfiddle:
http://jsfiddle.net/Auzm5/
Or if you only want the icon to link, use CSS visibility:
http://jsfiddle.net/Auzm5/1/
I havent tested this but its worth a try:
HTML
<div class='edit_hover_class'>
<a href='#'><img src='icons/trash.gif' /></a>
</div>
CSS
.edit_hover_class a {
pointer-events: none;
cursor: default;
}
.edit_hover_class a:hover {
pointer-events: auto;
cursor: pointer;
}