Hello I have 3 flags (Italian, german, english) with the purpose to change language for the whole site in future. How can I make a border on a hover effect that could alxo work with IE ?
this is the CCS
.miniflags {
float:right
margin : 5px 20px;
padding-right:10px;
}
and here the HTML
<div id="bandiere">
<a><img src="ita.png" class="miniflags" /></a>
<a><img src="ger.png" class="miniflags" /></a>
<a><img src="eng.png" class="miniflags" /></a>
</div>
Thanx for help
Alex
add
.miniflags img:hover {
border: 1px solid #000;
}
or
.miniflags a:hover {
border: 1px solid #000;
}
to your css
i believe the 2nd will work better (a:hover)
If you apply the miniflags class to the <a> instead, the :hover pseudoselector will work.
The miniflags class hardly seems necessary. Just remember that :hover works only for links in older versions of IE, so you will need to apply it to the <a> tags instead of the <img>.
<div id="bandiere">
<a><img src="ita.png" /></a>
<a><img src="ger.png" /></a>
<a><img src="eng.png" /></a>
</div>
<style type="text/css">
#bandiere img {
float:right
margin : 5px 20px;
padding-right:10px;
}
#bandiere a:hover, #bandiere a:focus {
border: 1px solid red;
}
</style>
IE (until 6 IIRC) only allows hover for links. So you'd have to add the :hover to the a not to the image. The <a> must have a href attribute for this to work of course.
Related
I have these small blue lines under and over the 2 images.
I tried to apply
style="border: 0;" but it didnt work.
Also tried to apply the css border:0px, outline:0px in the css file.
but it din't work too.
I assume that these are links or stuff like that.
Anyone can help me to remove these small blue lines?
.kategorien1{
margin-bottom: 50px;
margin-left: 75px;
margin-right: -35px;
box-shadow: 0px 0px 3px 0px black;
transition-property: all;
transition-duration: 400ms;
}
.kategorien2{
margin-bottom: 80px;
margin-left: 300px;
box-shadow: 0px 0px 3px 0px black;
transition-property: all;
transition-duration: 400ms;
}
<!DOCTYPE html>
<html= lang=de>
<head>
<link href="style.css" rel= "stylesheet" type="text/css">
<meta charset="utf-8">
<title>Handgefertigte Armbänder online shoppen bei handform</title>
</head>
<body>
<!--BILDER UNTERKATEGORIEN-->
<a href="damem-lederimitat.html">
<img class="kategorien1" src="Lederimitat.jpeg" width="40%" style="border: 0;">
</a>
<a href="damem-armreifen.html">
<img class="kategorien1" src="armreifen.jpeg" width="40%" style="border: 0;">
</a>
<a href="damem-perlenarmbänder.html">
<img class="kategorien1" src="Perlenarmb%C3%A4nder.jpeg" width="40%" style="border: 0;">
</a>
<a href="damem-verschiedene-armbänder.html">
<img class="kategorien1" src="verschiedene_b%C3%A4nder.jpeg" width="40%" style="border: 0;">
</a>
<a href="damem-verschiedene-armbänder.html">
<img class="kategorien2" src="M%C3%A4nnerarmb%C3%A4nder.jpeg" width="40%" style="border: 0;">
</a>
</body>
</html>
It's from the a tags, as in the blue underline from the hyperlink. Add this to your css to remove them:
a {
text-decoration: none;
}
To cover yourself totally, it might be a good idea to apply this to both states of the a tag (you know how it goes purple once clicked?), so try this css:
a, a:visited {
text-decoration: none;
}
What this will do though, is remove the underline from all links on your page. So it might be a good idea to create a class and add it to the links you don't want underlined, like this:
a.no-underline,
a.no-underline:visited {
text-decoration: none;
}
<a class="no-underline" href="#">This isn't underlined</a>
But this is!
You have text decoration on your a tag.
a{text-decoration: none;}
This will get rid of it. Just use a better selector as the above will remove all underlines for links.
When you use images as links browser by default applies the css. to remove it you should remove all default properties of <a> like:
a{
text-decoration:none;
}
or you can assign separate class for <a> and then deine the properties..!
Just use following CSS for this
img, a, a:focus {
outline: none;
}
a, a:hover {
text-decoration: none;
}
I have a scenario where I want to have the text links with border-bottom, and set-up the css like this
a:hover {
color: #492512;
border-bottom: 2px dashed #94705A;
}
The problem is that the images that are wrapped in links also have this border-bottom, eg.
<a href="home">
<img src="logo.jpg" alt="Logo" class="logo-img">
</a>
How can I target the a:hover that it is only for text links? Pure CSS would be preferable.
No problem.
Add a class to your text links. Then target those links like this.
a.testing:hover {
color: #492512;
border-bottom: 2px dashed #94705A;
}
<a href="home">
<img src="http://cdn.sstatic.net/stackoverflow/img/sprites.svg?v=bc7c2f3904bf" alt="Logo" class="logo-img">
</a>
<a class="testing" href="home">
TESTING
</a>
Hope this helps.
Added with EDIT
Here is Another Option
a:hover {
color: #492512;
border-bottom: 2px dashed #94705A;
}
a[href*='ignorethis'] {
text-decoration: none !important;
border-bottom: 0 none !important;
}
<a href="http://www.milk.com?ignorethis">
<img src="http://s.w.org/style/images/wp-header-logo.png" alt="Logo" class="logo-img">
</a>
<a href="http://www.milk.com">
TESTED
</a>
This achieves the same thing by targeting target all anchors whose href attribute contains the given value ('ignore this'). Other ways this can be used.
attribute *= contains value
attribute ^= begins with value
attribute $= ends with value
To use this just append '#special-test-value' to the end of the link or in the case of a targeted link append '?special-test-value=0' or in the case where the query string already exists use '&special-test-value=0'
I thought this was an interesting way to target links and that it might be new to a lot of people.
Another use case
If the case is that a single url or a specific set of urls you could use them to end target them and exclude the anchored images that way.
a[href$='somedomain.com/url1/'], a[href$='somedomain.com/url2/'], a[href$='somedomain.com/url.../'], a[href$='somedomain.com/urlN/'] {
text-decoration: none !important;
border-bottom: 0 none !important;
}
OK that's it have a great night.
Two ways, either wrap the text in a span (below sample) or set a unique class to links with text only.
a {
text-decoration: none;
}
a:hover {
color: #492512;
}
a:hover :not(img) {
border-bottom: 2px dashed #94705A;
}
<a href="home">
<img src="http://placehold.it/50/100/" alt="Logo" class="logo-img" />
</a>
<br>
<br>
<a href="home">
<span>Text</span>
</a>
It seems that pure CSS global styling doesn't work, so I resorted to jQuery to add a class to anchors which have images, like this:
jQuery("a").each(function(){
if ( jQuery(this).children('img').length > 0 ) {
jQuery(this).addClass("noborder");
}
});
And the CSS is:
a:hover {
border-bottom: 2px dashed #94705A;
}
a.noborder:hover {
border-bottom: none;
}
Thanks for all the comments and suggestions.
Cheers!
Well you can make a separate class for image links:
a:hover {
color: #492512;
border-bottom: 2px dashed #94705A;
}
a.image-anchor:hover {
border-bottom: 0 none;
}
<p>Text link</p>
<p><a class="image_anchor" href="stackoverflow.com"><img src="https://blog.stackoverflow.com/images/wordpress/stackoverflow-logo-300.png"></a></p>
I do not want the picture to be underlined, but I need the hyperlink in the text to be underlined. How can I do that? It is a wordpress theme so I can't change the html I have to stay with css
.post-desc a{
border-bottom: 1px solid #FBCF00;
}
.post-desc a img{
border-bottom: none;
}
<div class="post-desc">
<img class="alignnone wp-image-2763 size-full" src="http://www.montrealguidecondo.ca/news/wp-content/uploads/2016/01/exterieur-1.jpg" alt="extérieur de Tod condo" width="639" height="438">
</div>
You can remove it under the image using display:table; on image, like this:
.post-desc a img{
border-bottom: none;
display:table;
}
Snippet:
.post-desc a {
border-bottom: 1px solid #FBCF00;
}
.post-desc a img {
border-bottom: none;
display: table;
}
<div class="post-desc">
<a href="http://www.montrealguidecondo.ca/news/wp-content/uploads/2016/01/exterieur-1.jpg" target="_blank" rel="attachment wp-att-2763">
<img class="alignnone wp-image-2763 size-full" src="http://www.montrealguidecondo.ca/news/wp-content/uploads/2016/01/exterieur-1.jpg" alt="extérieur de Tod condo" width="639" height="438">
</a>
</div>
to make it simple you may use vertical-align with a negative value to drop img as much as needed under the base line:
a {
border-bottom: solid;
}
a img {
vertical-align: -0.5em;/* average -0.25em equals vertical-align:bottom */
/* demo purpose: see border under img */
opacity:0.75;
}
text
<a href="#">
<img src="http://dummyimage.com/60" />
</a>
within the last stylesheet of your website , test this
a img {
margin-top:0.5em;
vertical-align: -0.5em;
}
or if you like better:
a img {
position:relative;
top: 0.5em;
}
The idea is to hide the border with the image itself
Text decoration underline
<div><a style="text-decoration:underline" href="http://www.montrealguidecondo.ca/news/wp-content/uploads/2016/01/exterieur-1.jpg" target="_blank" rel="attachment wp-att-2763"><img class="alignnone wp-image-2763 size-full" src="http://www.montrealguidecondo.ca/news/wp-content/uploads/2016/01/exterieur-1.jpg" alt="extérieur de Tod condo" width="639" height="438"></a>
You have set the border attributes on the <a> tags, so you can't just remove them on the containing <img> elements. Unfortunately, there is no "conatining" selector in css (yet) and apparently you can't edit the html, so we have to stick with the informations we've got.
The links with the containing images have the word attachment in the attribute rel. This is how to select them and disable their border:
a[rel~="attachment"] {
border-bottom: none !important;
}
I'm trying to apply a hover for a whole block (the same block must point to a link), but can't make this happen.
http://codepen.io/anon/pen/GogjQK
I've tried to wrap an <a> tag around the entire frame class and edit the hover states individually, but nothing happens.
This is how I'm trying to make it appear on hover, as well when the the link is clicked and active
Hope someone can help me out with this one. Thank you in advance.
You can use child selectors on your frame div to affect the children within.
For example, I added the following code to color the h3 tag when the main frame is hovers.
.frame:hover > div > h3 {
color: #00bb00;
}
If you modify your HTML slightly to be
<div class="frame">
<img src="http://imagizer.imageshack.us/v2/xq90/903/WUtWQJ.png" class="thumbnail" />
<img src="http://placehold.it/60x60" class="thumbnail" id="hidden" />
<div class="info">
<h3>H3</h3>
<p>pppppp</p>
</div>
</div>
You can use the following CSS to change the image as well:
.frame:hover > .thumbnail {
display:none;
}
.frame:hover > #hidden {
display:inline;
}
#hidden {
display:none;
}
Here's an example codepen.
Try adding a hyper reference after the creation of the div that contains your block, like this:
<div class="frame"> <a href="http://stackoverflow.com">
<img src="http://imagizer.imageshack.us/v2/xq90/903/WUtWQJ.png"
class="thumbnail" />
<div class="info">
<h3>H3</h3>
<p>pppppp</p>
</div>
</a>
</div>
Then in CSS, refer to the entire block as a link, like this:
.frame a {
float: left;
width: 300px;
min-height: 60px;
background-color: ##00F;
margin: 0px 10px;
border: 1px solid black
}
.frame a:hover > .info > h3 {
color: green;
}
Example: codepen
so I am pretty much making a table with images that when you hover over show color. Right now it's pretty much just very simple, but I was wondering how I could add a border to do the table, and maybe a grey background?
My HTML:
<table>
<tbody>
<tr>
<td><a href="http://online.wsj.com/news/articles/SB10001424052702304626804579361520890893170" target="_blank">
<img class="homepghovr" src="https://www.realtyshares.com/Media/Default/Content%20Images/AsSeenOn/wsj1.png" alt="" />
</a></td>
<td><a href="http://www.forbes.com/sites/rodebrahimi/2013/12/12/how-crowdfunding-will-impact-real-estate-investing-an-interview-with-realtyshares/" target="_blank">
<img class="homepghovr" src="https://www.realtyshares.com/Media/Default/Content%20Images/AsSeenOn/forbes1-1.png" alt="" />
</a></td>
<td><a href="http://money.cnn.com/news/newsfeeds/gigaom/articles/2014_02_04_finally_you_can_do_something_useful_with_bitcoin_invest_in_real_estate.html" target="_blank">
<img class="homepghovr" src="https://www.realtyshares.com/Media/Default/Content%20Images/AsSeenOn/cnnmoney1.png" alt="" />
</a></td>
<td><a href="http://www.bizjournals.com/sanfrancisco/print-edition/2013/08/09/rebooting-real-estate.html?page=all" target="_blank">
<img class="homepghovr" src="https://www.realtyshares.com/Media/Default/Content%20Images/AsSeenOn/business_times1.png" alt="" />
</a></td>
<td><a href="http://www.inman.com/2013/11/13/realtyshares-real-estate-crowdfunder-launches-first-equity-deal/" target="_blank">
<img class="homepghovr" src="https://www.realtyshares.com/Media/Default/Content%20Images/AsSeenOn/inman1.png" alt="" />
</a></td>
<td><a href="http://www.investorsbeat.com/all-in-one-investing-made-easy-with-realtyshares/" target="_blank">
<img class="homepghovr" src="https://www.realtyshares.com/Media/Default/Content%20Images/AsSeenOn/investorsbeat1.png" alt="" />
</a></td>
</tr>
</tbody>
</table>
My CSS:
IMG.homepghovr
{
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
IMG.homepghovr:hover
{
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
Fiddle: http://jsfiddle.net/v2JA9/
I was also told that I shouldn't be using a table for something like this, but rather be using div's, and ul's? Is that true? If so can someone point me to the right direction to utilize those tags?
Thank you very much!
If you just need a border to the table or container and grey colored background,just add this to your css,
table{
border:1px solid #000;
background-color:#eee;
}
if you need border for each item then just use
table,tr,td{
border:1px solid #000;
background-color:#eee;
border-collapse: collapse;
}
Demo here
if you need to use divs like a table
then
use
the parent container(or div) as display:table in css
and inner divs as display:table-cell
I'll answer that by telling you to not use a table. Obsolete for this kind of stuff, really.
Change < td> to < li>, remove < tr>, < tbody>, < table>, you need just one tag around li elements: < ul>. And check this out:
http://jsfiddle.net/v2JA9/3/
li {
float: left;
list-style: none;
}
ul {
background: #ccc;
border: 2px solid black;
padding: 0;
}
ul:after {
clear: both;
content: "";
display: block;
}
Basically, let's float (google: "floats css") them. ul:after being there as clearfix (google that as well), so it's as big as floating elements inside of it.
http://jsfiddle.net/v2JA9/6/
li {
display: inline-block;
list-style: none;
}
ul {
background: #ccc;
border: 2px solid black;
padding: 0;
}
Make li inline instead, so many of them don't mind standing in one line. Here: "display: inline-block", "inline" will work as well, but is less flexible. On the flipside, older browsers (IE...) can have some problems with inline-block. Up to you.
EDIT:
Someone mentioned it, let's work with it. Making ul behave like a table, with css.
http://jsfiddle.net/v2JA9/7/
Basically: "display: table;" on < ul> (container) + "display: table-cell;" on < li> (actual list elements, err, table cells...).
Solving your question (by keeping the tables) is super basic: JSFiddle
table, tr, td {
border: 1px solid black;
background-color: #e6e6e6;
border-collapse: collapse;
}
Using DIVs is definetely the best approach for building your site in a way that will allow you to leverage current and future web technologies: JSFiddle
I used display: inline-block;, but you could accomplish similar layout with display: block; and float: left;
div {
display: inline-block;
border: 1px solid black;
background-color: #e6e6e6;
}
Hope this helps get you started.
Yes, this can be done with list items as well - this is preferable because you have more options
<ul>
<li>
<a href="http://online.wsj.com/news/articles/SB10001424052702304626804579361520890893170" target="_blank">
<img class="homepghovr" src="https://www.realtyshares.com/Media/Default/Content%20Images/AsSeenOn/wsj1.png" alt="" />
</a>
</li>
<li>
<a href="http://www.forbes.com/sites/rodebrahimi/2013/12/12/how-crowdfunding-will-impact-real-estate-investing-an-interview-with-realtyshares/" target="_blank">
<img class="homepghovr" src="https://www.realtyshares.com/Media/Default/Content%20Images/AsSeenOn/forbes1-1.png" alt="" />
</a>
</li>
<li>
<a href="http://money.cnn.com/news/newsfeeds/gigaom/articles/2014_02_04_finally_you_can_do_something_useful_with_bitcoin_invest_in_real_estate.html" target="_blank">
<img class="homepghovr" src="https://www.realtyshares.com/Media/Default/Content%20Images/AsSeenOn/cnnmoney1.png" alt="" />
</a>
</li>
<li>
<a href="http://www.bizjournals.com/sanfrancisco/print-edition/2013/08/09/rebooting-real-estate.html?page=all" target="_blank">
<img class="homepghovr" src="https://www.realtyshares.com/Media/Default/Content%20Images/AsSeenOn/business_times1.png" alt="" />
</a>
</li>
<li>
<a href="http://www.inman.com/2013/11/13/realtyshares-real-estate-crowdfunder-launches-first-equity-deal/" target="_blank">
<img class="homepghovr" src="https://www.realtyshares.com/Media/Default/Content%20Images/AsSeenOn/inman1.png" alt="" />
</a>
</li>
<li>
<a href="http://www.investorsbeat.com/all-in-one-investing-made-easy-with-realtyshares/" target="_blank">
<img class="homepghovr" src="https://www.realtyshares.com/Media/Default/Content%20Images/AsSeenOn/investorsbeat1.png" alt="" />
</a>
</li>
The CSS for the list could look like this
IMG.homepghovr
{
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
IMG.homepghovr:hover
{
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
li{
list-style:none;
float:left;
border: 1px dashed black;
background-color: lightgrey;
}
The CSS for ur Table would look like this:
table{
border: 1px dashed black;
background-color: lightgrey;
}
You can use this code for better output
table{
border: 1px solid gray;
border-spacing: 0;
border-collapse: collapse;
}
table td{
border-left: 1px solid gray
}
table td:first-child{
border: none;
}
Check this Demo
For a border, add this:
<table border="1">
...
</table>
A ul is an unordered list. See an example here.
A div "divides" a webpage into a section. See here.
EDIT
Based on what it looks like you're trying to do, I wouldn't recommend a ul because then you'd get bullet points next to each icon.