I added the logo for my site in the html before like this:
and that looks great. But now i want different css-files to load different logos.
.companylogo {
background-image: url("/Images/Logo.png");
width: 166px;
height: 14px;
border: none;
}
but when i do this i get a little border around the images.
How do i get that little boarder to disappear?
THis might not be the best jsfiddle https://jsfiddle.net/bewsbews/z9kf21fp/ but as you can see the two first images have a little border around them and they were both made with css and the big burgerking logo is made in the html and that doesn't have a border around it.
A live demo would be better, i think somewhere in your css is the problem, the code above seems okay.
put this in the top of css file
img, a {border:0, outline: none;}
Ok so it is pretty unnecessary to use an img tag when i don't use the src propertie of the image tag. So i changed it to a div and that solved the problem. Obviously there is no need to have a background-image of an img-tag.
Related
I have an a tag with an image inside of it and for some reason the a tag looks like it extends below the image and is causing a little blue tic mark on the bottom right side. I've tried setting border to none and a few other css solutions but nothing seems to be working. I appreciate any help anyone can give. Here is a link to the test page. Header_test.
There are a couple of options. First of which, the reason why you see the extra border is because the a tag is overflowing into the space between the images... so you can always just eliminate the spaces like so:
<img class="announcement" src="../resources/images/headers/20150723announcement.png">
<img class="announcement" src="../resources/images/headers/20150723announcement.png">
<img class="announcement" src="../resources/images/headers/20150723announcement.png">
Alternatively, change the CSS for your a tags to:
a { display: inline-block; }
or:
a { text-decoration: none; }
to remove the underline.
In your CSS, remove the fixed width/height for the a and apply text-decoration: none to it.
Change the a styles in header.css line 63 for these one:
a { display: inline-block; }
I'd like to decorate the bottom of my page with a repeated triangle. The picture shows one triangle, but I want to fill the whole horizontal div.
Screenshot of what I've got so far: http://i.stack.imgur.com/JJA6D.png
<div class="container triangle"> </div>
.triangle {
width: 0px;
height: 0px;
border-style: solid;
border-width: 15px 15px 0 15px;
border-color: #c2cf31 transparent transparent transparent;
background-color: white;
}
Is this possible or do I have to use an img as background?
Thank you for any help.
Use a background image in your CSS-
background:url("http://site.com/img/whatever.svg");
And then set it to repeat only horizontally-
background-repeat:repeat-x;
This means that yes, you do have to use a background image.
You could clone the element using jQuery or something but I don't think it's worth it.
background-image:url('your image url');
background-repeat:repeat-x;
My opinion is to use background images in CSS if they are not being used as links etc. Basically, if you aren't fussed about the SEO on those images. With that in mind, just use some CSS for your image.
background-image: url("yoururl/image.jpg") repeat-x;
As it has been mentioned you could technically use JQuery's clone method. This is a bad idea. Why add extra things for the page to do when CSS handles it.
If you want to experiment, there's a CSS property that gives you the ability to use an element (your triangle div in this case) as a background image. This property is the background:element().
You can see a demo here in Firefox.
However, this property works only in Mozilla with the -moz- prefix but there have been attempts to work in webkit browsers as well. So, hopefully this can be implemented in the future with wider browser support.
use the img as background and let it repeat.
I have to say that I like background images more instead of the image in the html code.
This is cause people can't copy them easily as the image in the html code
Weird question I think its more of I am not sure what it is called. But I have an img wrapped in an link
example
...<li>
<a href="#link">
<img ...>
</a>
</li> .....
Now I have the css border rules all to 0. So their is no Blue border. But in Firefox their seems to be a pink mini dashed border only when I click on the image? In other browsers there is no border at any time. Im not sure if its from the browser itself or something I am missing. In my css I have border set to 0 on the a,:hover,:visited I even put text-decoration to none thinking that might help. But to know avail. I tried searching online for help but all I get is info on removing the border caused from placing the image in the link. So any help or a point in the right direction would be great. !
edit// I added a picture to better explain what I am talking about.
Links (<a>’s) by default have a dotted outline around them when they become “active” or “focused”. In Firefox 3, the color is determined by the color of the text
To remove it, simply use:
a {
outline: none;
}
Or you can do what I do, and remove it from all elements (I use my own focus/active rules) and do
* {
outline: none;
}
This will remove it from all elements.
#link img a
{
border:0;
outline:none;
}
Install Firebug and see what's going on. I think what's going on is img tag probably has a default border.
To remove it maybe you can try putting your a and img tags inside of a div with an id and using following CSS:
Your HTML:
<div id="test">
<a...>
<img .../>
</a>
</div>
And use the following CSS:
#test img {
border-style: none;
}
I'm trying to create a breezebrowser template (used for generating image galleries locally, outputs HTML). I've taken the HTML from my wordpress template and managed to generate the following gallery http://uploads.peasyphotos.com/20100607t-candids/gallery/ but each image goes on a new line and i don't know why, i presume it's in the CSS. What should I be looking for in the CSS to try and stop this, or what can I put around my template code to disable the CSS for that part?
Thanks
So i've got a posible answer for you.
First you have to add this css-styles to the a tag of the pictures:
display: inline-block;
height: 150px;
widht: 150px;
text-align: center;
vertical-align: top;
It works with Firefox 3.6. I'm not sure if it will work with oure lovley IE :P
I hope i could help!
In you css files, you have one file called reset.css. At line number 57, you have a one line called display block. comment it out a see. may not be a nice view. but images wont go next line.
For the anchor element having the photos use the float like this. This would take care.
float:left;
your images parent anchor tag do not have correct css. Put a class images over the anchor tags and use following css for them.
a.images {
border-bottom:1px solid #D8048D;
color:#D8048D;
display:block;
float:left;
height:159px;
margin:0 10px;
text-decoration:none;
width:100px;
}
Firstly I would recommend validating your html.
Secondly, I would suggest putting the images in a container element of some sort: possibly an unordered list. There are serious accessibility issues around having a series of links running into each other like this, with no separating non white-space characters.
Thirdly, I would use a css class on the list, and style it like this:
ul.gallery { list-style: none}
ul.gallery li { float: left; clear: none; list-style: none}
This is my HTML:
<div id="links">
Link 1
Link 2
Link 3
Link 4
</div>
And these are the CSS styles:
#links {
position: absolute;
border: 1px solid #000;
}
#links a {
display: block;
}
#links a:hover {
background-color: #CCC;
}
This displays a list of links, the problem is that in IE, I can only click a link by directly clicking the text link, which is not the case with other browsers (where you can click anywhere whether the text link or anywhere else as long as it's in the link block), is there any fix for that (with only CSS, no javascript)?
Please note that I don't want to specify a width for the links or the div.
I have had the same problem and none of the solutions above worked for me.
I also needed the background of the links to be transparent.
A very uncomfortable solution, but one that worked perfectly is to set the background to a transparent gif. Only needs to be 1x1 px as it will repeat.
#links a
{
display: block;
background: url(/images/interface/blank/1dot.gif);
}
This seems to have no side effects apart from one additional request to the server.
Put position:relative; in your CSS at #links a{ }
like this
It will fix it :)
Enclose the link text in a span element. Then it will accept clicks anywhere within its bounds.
I have no idea why, but giving the anchor a background color seemed to fix this problem for me.
Setting the background color to #FFF and an opacity of 0 worked for me in IE9, Chrome and Firefox. Don't know about other versions though. Setting it to transparent didn't help me.
This has the advantage of being pure CSS and cross-browser, so maybe it could be a better alternative.
Ok, the fix for this problem is to give the anchors a background property other than transparent. Some proposed to give the anchors a transparent background image. I have an addition to this: The image does not have to exist. You can simply write any path and it will make it work:
a {
background:url('dummy/doesnotexist.png') no-repeat;
}
Insert this inside your a-tag style:
background:url('images/dot.png') no-repeat;
where dot.png is a 1x1 transparent image.