It seems like a simple problem but whatever i did i couldn't solve it. I post a link about what i am talking. http://www.olmasigereken.com/demo/?view=listen&artist=ibrahim+ferrer&track=dos+gardenias
If you look at page codes you will see that order of items is red arrow artistname dash(-) trackname twitter and facebook links. However the output is not like that. I want to put everything on one line with correct order which is red image artistname dash trackname twitter and facebook links.
Note: When you click it if you don't see anything please refresh the page.
<li>
<img src="img/track_arrow.gif" alt="" />
<div class="singer">
<?php echo $a[artistname]?>
</div>
-
<div class="song">
<?php echo $a[trackname]?>
</div>
<div class="fav">
<a target="_blank" href="#" /><img src="img/twit.gif" alt="share on twitter" /></a>
<a target="_blank" href="#"> <img src="img/face.gif" alt="share on facebook" /> </a>
</div>
<br />
</li>
The floating left of links inside is causing conflict. If you remove the float: left as seen in the following screenshot, I think you will get what you want...
You need to set some css propertys like
.ikinciSol ul li {
widht: 375px;
}
.fav{
float: right;
}
Hope this may helpful to you.
try this to put each element between li balises and use the css attributewith ul element: list-style-type:none;
Related
I have this image: http://fs5.directupload.net/images/160602/xfrddbfa.png
and I would like to add it into my website. But, I'd also like to add a small gap in between each and every flag.
Is that somehow possible? Here is the HTML where I'd like to place it as a pseudo element before the class "headline":
<div class="bottom_dual">
<a title="title" href="#">
<span class="headline">Lorem ipsum</span>
</a>
<span class="caption">Lorem ipsum.</span>
<span class="more">
<a class="teaser_link" href="#">more</a>
</span>
</div>
Thanks for your help!
Image editing isout of the scope of HTML/CSS and I would really suggest just making separate images using image editing software for each flag if this is what you intend to do, but I will provide an ugly work around if you truly wish to do this.
Also, I'm not sure you're using pseudo element correctly.
Place the image tag 5 times - 1 for each flag.
<img id="flag1" src="example.com" />
<img id="flag2" src="example.com" />
<img id="flag3" src="example.com" />
<img id="flag4" src="example.com" />
<img id="flag5" src="example.com" />
Use CSS to crop each image to each flag.
#flag1{
position: absolute;
clip:(rect, 0px, 30px, 20px, 0px); // Position of the flag
}
etc..
I hate myself for even giving that answer. Seriously, just edit the image.
The best way to solve this problem is to use photoshop..
Cut your 5 flags out from that one single image
Then move them (space them )...
Links which You could refer to:
https://www.youtube.com/watch?v=6aMbMk9IGoM
https://www.youtube.com/watch?v=VTHudF4fo2I
The above links explain you on how to cut (crop ) an image and to move them..
Hope this helps you..
use this style :
.headline:before{
padding-left:30px;
background:url(http://fs5.directupload.net/images/160602/xfrddbfa.png) no-repeat -66px 0px;
content:" ";
}
Here's my code
<div class="table">
<div class="tr">
<div class="td">
<h1 class="logo-fill">
<a href="#" title="Logo">
<img alt="logo" src="./images/logo.png" />
</a>
</h1>
</div>
<div class="td">
<a href="#" title="AdSpace">
<img alt="adspace" src="./images/adspace.png" />
</a>
</div>
</div>
</div>
For some reason, the second image (adspace.png) is not displaying at all. If I remove the entire img tag and replace it with text, the text is displayed. Alternativly if I change the img tag to:
<iframe src="https://clients.ragezone.com/out.php/display/show_custom?id=48" scrolling="no" style="padding: 0px; overflow: hidden;" width="468px" height="60px" frameborder="no"></iframe>
Apparently that works as well. adspace.png is simply a 468px x 60px green box.
My money would be on the fact that you have an adblocker in your browser. Try changing class names and img name.
Adblocker plugins search for certain keywords in the code and block the page elements based on that.
In your image source path I saw one [dot] miss placed that may be a one problem.
This is your code
<img alt="adspace" src="./images/adspace.png" />
And try with this one
<img alt="adspace" src="../images/adspace.png" />
And other problem is your image name I also faced to this issue your image name is adspace.png and you added alt="adspace" and wrap it with link tag having the title with Adspace so the reason is some of plugins in your browser block all the images and divs starting with "ads / ad" this is called adblock plugins.
So you can easily change your img name and change everything starting with "ad" then you can find some useful fixing. Other way is you can remove the adblock plugins from your browser.
And please check your network too some networks admin can block ads too.
I am trying to create a link section in a HTML document. I have a couple links containing images. The code is here: http://jsfiddle.net/u6Tmt/. As you can see after the SO image there is a little black bar which looks almost like an underscore. What is causing this black bar to appear and how do I get rid of it?
In case you don't know what I'm talking about, here is an image to help:
Also here is another copy of the code:
<div id="links">
<a href="http://stackoverflow.com/users/1916721/cabellicar123">
<img src="http://cdn.sstatic.net/stackoverflow/img/favicon.ico" alt="stack overflow">
</a>
<a href="https://github.com/cabellicar123">
<img src="https://assets-cdn.github.com/favicon.ico" alt="github">
</a>
</div>
The bar is the default underline of hyperlinks.
Add this rule to your CSS stylesheet to get rid of it
DIV#links A { text-decoration: none; }
I wouldnt have thought it an issue but if you change
<img src="image URL" alt="stack overflow">
to
<img src="image URL" alt="stack overflow"/>
and remove all spaces in the
<A>
your fiddle fixes
Edit: This & cobra_fast's answer
There seems to be a space in your first a-tag and the hyperlink is underlining it. When you use the a-tags with images, put it on the same line and it seems to work:
<div id="links">
<img src="https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico" alt="stack overflow">
<img src="https://web.archive.org/web/20190109105720/https://assets-cdn.github.com/favicon.ico" alt="github">
</div>
I have - img id="logo" SO I can have my logo on my website, the full code for it being:
<img id="logo" src="nsc/logo2.png" alt="logo" />
How can I link this logo image using <a href=""> ???
I've tried many different ways but they don't work :/
<img id="logo" src="nsc/logo2.png" alt="logo" />
It would be nice to embed in a link tag. :)
<a href="your.html">
<img id="logo" src="nsc/logo2.png" alt="BrandLog" />
</a>
it's clean and no need of javascript :)
It's super simple, just wrap the <img> tag with an anchor tag <a>:
<a href="myUrl.html">
<img id="logo" src="nsc/logo2.png" alt="logo" />
</a>
This will turn the entire image into a link for you :)
For people who want to receive click event on a tag instead of img tag
<a href="/chat" style="background: red; display: inline-block;">
<img src="chat.svg" style="pointer-events: none; display: block;" width=40 height=40>
</a>
On a tag
display: inline-block in a: allows to set a width and height on a tag
On img tag
display: block: help remove extra space below the image
pointer-events: none: ignore click on img, click event will fired on a tag
If you can't wrap the image in a link, an image map should work just as well without requiring JavaScript & without needing to wrap the element.
I add id in img tag like this:
<img id={logo.id} src={logo.url} onError={this.handleImageError} />
Since I am working on React that's why I used JSX in the id and src attribute. onError attribute is used if the image is broken. It gives me an event, So this is how I access the id attribute:
handleImageError = (e) => { console.log(e.target.id) }
Here is the solution for you,
<img id="logo" src="nsc/logo2.png" alt="logo" onClick="window.open('http://yahoo.com');" />
Simple code:
<a href="#">
<div>
<img src="http://dummyimage.com/600x400/000/fff&text=image" class="image" />
<img src="http://dummyimage.com/600x15/000/fff" alt="" class="shadow" />
</div>
</a>
Two images have margin and padding of 0 but there's still a gap between them.
How to avoid this behavior?
And YES that's not a mistake, the whole thing has to be in A tag.
Example:
http://jsfiddle.net/fqrfU/
I believe it's the line-height that's causing the problem. Check it out.
On a different note, I know you said it was intended to be that way but it's actually invalid(?) HTML to have the div tag inside of the anchor. Try using spans instead.
The two images are displayed inline. This means the baseline of the image is aligned with the baseline of the text. Below text there usually is some more space to account for letters like pjgq that go below the baseline.
Just making the images display: block; resolves this in your scenario.
This page describes your situation quite clearly: http://devedge-temp.mozilla.org/viewsource/2002/img-table/
add in both display:block;
Demo: http://jsfiddle.net/fqrfU/22/
You can float and clear them:
img {
clear: both;
float: left;
}
http://jsfiddle.net/lukemartin/fqrfU/11/
<a href="#">
<div>
<img src="http://dummyimage.com/600x400/000/fff&text=image" class="image" /><img src="http://dummyimage.com/600x15/000/fff" alt="" class="shadow" />
</div>
</a>
Are you having a problem in IE?
Try putting both images tags on the same line in the HTML, w/o any spaces in between...
Simply your css by doing,
.image, .shadow {
margin: 0;
padding: 0;
display:block;
}
http://jsfiddle.net/fqrfU/43/
What Bogdan said, or:
<div>
<img src="http://dummyimage.com/600x400/000/fff&text=image" class="image" /><img
src="http://dummyimage.com/600x15/000/fff" alt="" class="shadow" />
</div>
</a>
See, the whitespace between /> and the second <img is actually rendered, which gives the space between the two pics.
-- pete
This worked for me just now:
img
{
display: block;
}