I have a link with link icon on the left, and an arrow to the right. What I am having problem with is as the link text wraps, it doesn't justify very well. How can I achieve something like here http://jsfiddle.net/MrLister/3xbfyqkh/, but with my given markup?
<div class="linkitem" id="myTools" style=
"display:inline-block; padding:4px 0 4px 0; width:90%;">
<a href="{$ItemEditURL}" id="InlineEditLink" style=
"cursor: pointer; position:relative; top: 4px; margin-right:5px;"><img height="14"
src=
"https://maxcdn.icons8.com/Android_L/PNG/24/Programming/edit_property-24.png"
title="Edit" width="14"></a> <a href="{$SafeLinkUrl}" style=
"color: white !important!" target="_blank" title="{#LinkToolTip}">A
very long descriptive Link text goes here</a>
</div>
<div class="wrapperArrow" style="float:right; padding-top:5px;"><img alt=""
src=
"https://maxcdn.icons8.com/windows10/PNG/16/Arrows/double_right-16.png"></div><br>
<br><br><br><br><br><br><br>
<hr>
Free Icons provided by Icons8
My fiddle here...
https://jsfiddle.net/a2gruae6/
Update this code in your inline style as solve your problem
<div class="linkitem" id="myTools" style=
"display:inline-block; padding:4px 0 4px 0; width:90%;">
<a href="{$ItemEditURL}" id="InlineEditLink" style=
"cursor: pointer;position: absolute;float:left;width:20px;"><img height="14"
src=
"https://maxcdn.icons8.com/Android_L/PNG/24/Programming/edit_property-24.png"
title="Edit" width="14"></a> <a href="{$SafeLinkUrl}" style=
"color: white !important!;float:left;margin-left: 20px;" target="_blank" title="{#LinkToolTip}">A
very long descriptive Link text goes here</a>
</div>
<div class="wrapperArrow" style="float:right; padding-top:5px;"><img alt=""
src=
"https://maxcdn.icons8.com/windows10/PNG/16/Arrows/double_right-16.png"></div><br>
<br><br><br><br><br><br><br>
<hr>
Free Icons provided by Icons8
Related
Here is the HTML and then the CSS. As you can see the aside is covering all the li items. The CSS is using the aside tag to add the border around all of these elements, but it is only adding a border around the first li item. I have tried adding a separate aside element around each li to overcome this but this didn't work. I have inspected using chrome dev tools and couldn't understand why this is happening.
<aside>[enter image description here][1]
<h5><strong>Related posts</strong></h5>
<ul>
<li class="related-post">
<img
src="img/mantyping.jpg"
alt="mantyping"
width="100"
height="70"
/>
<div>
<a href="Howtolearnwebdevelopment.html" class="related-link"
>How to learn web development</a
>
<p class="related-author"><strong>By Jonas Schmed</strong></p>
</li>
</div>
<li class="related-post">
<img
src="img/csspower.jpg"
alt="lightning"
width="100"
height="70"
/>
<div>
<a href="Unknownpowersofcss.html" class="related-link"
>The unknown powers of css</a
>
<p class="related-author"><strong>By Jim Dillon</strong></p>
</li>
</div>
<li class="related-post">
<img
src="img/javascriptcode.png"
alt="javascript code"
width="100"
height="70"
/>
<div>
<a href="javascriptisawesome.html" class="related-link"
>Why Javascript is awesome</a
>
<p class="related-author"><strong>By Matilda</strong></p>
</li>
</div>
</ul>
</aside>
aside {
background-color: #f7f7f7;
border-top: 5px solid #1098ad;
border-bottom: 5px solid #1098ad;
padding: 50px;
width: 500px;
}````
[1]: https://i.stack.imgur.com/1hIls.png
I am not sure if you are looking forward to adding a border to all list items or want to add a border to the entire aside. In this solution, I'm showing how you can add borders to each list of items. If you want to add a border to the entire <aside>, just replace the .related-post class with aside. Be careful about the code formatting with correct opening and closing tags, else it may break the UI.
/* aside { */
.related-post {
background-color: #f7f7f7;
border: 5px solid #1098ad;
padding: 50px;
width: 500px;
list-style-type: none; /* It removes the bullet */
}
<aside>
<h5>
<strong>Related posts</strong>
</h5>
<ul>
<li class="related-post">
<img src="https://image.shutterstock.com/image-photo/smiling-young-man-sit-table-600w-1939452445.jpg" alt="mantyping" width="100" height="70" />
<div>
How to learn web development
<p class="related-author">
<strong>By Jonas Schmed</strong>
</p>
</div>
</li>
<li class="related-post">
<img src="https://image.shutterstock.com/image-vector/vector-illustration-abstract-electric-lightning-600w-1706216764.jpg" alt="lightning" width="100" height="70" />
<div>
The unknown powers of css
<p class="related-author">
<strong>By Jim Dillon</strong>
</p>
</div>
</li>
<li class="related-post">
<img src="https://image.shutterstock.com/image-photo/digital-technology-software-development-concept-600w-2111828198.jpg" alt="javascript code" width="100" height="70" />
<div>
Why Javascript is awesome
<p class="related-author">
<strong>By Matilda</strong>
</p>
</div>
</li>
</ul>
</aside>
Hope it helps.
Problem
I have some inline images on a web page. When hovering over left images (but not the rightmost image) a white dash appears at the border between two or more inline images.
What I've tried
I replaced the image with another image but that doesn't solve the problem.
Placing a br tag between the images solves the problem but the images are then no longer inline.
Using a span tag to insert a hidden white space between the anchor tags doesn't work.
Here's the HTML:
<a href="https://www.plos.org/open-access/">
<img src="/images/Open.png" alt="Open Access" style="margin: 0px 20px" height="55px" width="70px">
</a>
<a href="https://opensource.org/">
<img src="/images/source.png" alt="Open Source" style="margin: 0px 40px 0px 40px" height="75px" width="75px">
</a>
just remove the spaces between your links and imgs JS Fiddle
<a href="https://www.plos.org/open-access/">
<img src="//placehold.it/75x75?text=4" alt="Open Access" style="margin: 0px 20px" height="55px" width="70px"></a>
<a href="https://opensource.org/"><img src="//placehold.it/75x75?text=5" alt="Open Source" style="margin: 0px 40px 0px 40px" height="75px" width="75px">
That’s a combination of the white space you have between the tags, and text-decoration:underline for the links.
So either remove the white space:
<img …>
or set text-decoration:none for those links.
Put this all in table or div like this:
<table class = "tableStyle" align = "center">
<td>
<a href="https://www.plos.org/open-access/">
<img src="/images/Open.png" alt="Open Access" style="margin: 0px 20px" height="55px" width="70px">
</a>
</td>
<td>
<a href="https://opensource.org/">
<img src="/images/source.png" alt="Open Source" style="margin: 0px 40px 0px 40px" height="75px" width="75px">
</a>
</td>
</table>
Also use this css:
.tableStyle {
background-color:transparent;
}
I have the following code.
I cannot understand why after the image (videoCmera_icon.png) it puts and underscore.
I find that this happens only when I have
style="display:inline;
Here is the code:
<div id='HomeVideo1' style="display:inline;">
<a href="#">
<img src="images/videoCamera_icon.png" border="0">
</a>
<a href="#" style="text-decoration: none">
<span class="text3">View Video</span>
</a>
</div>
Inline elements will respect whitespace between their child elements. So the whitespace between the <img> and the closing </a> tag shows up as a space (with an underline because it's part of a link).
Removing the whitespace between the <img> and its <a> tags helps:
<div id='HomeVideo1' style="display:inline;">
<img src="images/videoCamera_icon.png" border="0" />
<span class="text3">View Video</span>
</div>
http://jsfiddle.net/5abbx/
in this piece of html,
<div>
<a href="http://www.facebook.com/" target="_blank">
<img border="0" width="26" height="25" src="facebook.gif" alt="Facebook"/>
</a>
<a href="http://twitter.com/" target="_blank">
<img border="0" width="26" height="25" src="twitter.gif" alt="Twitter"/>
</a>
</div>
when it's displayed in the browser, there's a small mark next to the first image. Why does it appear and how can i remove it?
Here's an image to show it :
Just try setting the text-decoration: none for the two links above.
The problem you are facing is that the links are underlined by default, and there might be a line-break after the image that is causing a white-space characters, and the default text-decoration: underline; is showing an underline under that white-space character.
Remove the white-space between <img ...> and </a> like this:
<div>
<a href="http://www.facebook.com/" target="_blank">
<img border="0" width="26" height="25" src="facebook.gif" alt="Facebook"/></a>
<a href="http://twitter.com/" target="_blank">
<img border="0" width="26" height="25" src="twitter.gif" alt="Twitter"/></a>
</div>
I don't know the reason as I too have been struggling with this for a long time (something to do with white-space). However, what I have found is that if you set the display to inline-block, this problem goes away.
a { display: inline-block; }
See this fiddle: http://jsfiddle.net/mznMY/
You are using an a anchor which contains underline symbol
Put text-decoration: none to your a.
<a href="service.html">
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Sea Freight.png"/>
</a>
<a href="airfreight.html" >
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Air Freight.png">
</a>
<a href="projectcargo.html">
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Project Cargo.png">
</a>
<br/>
<a href="customclearance.html" >
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Custom Clearance.png">
</a>
<a href="transportation.html" >
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Domestic Transportation.png">
</a>
<a href="thirdparty.html" >
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Warehousing and Distribution.png">
</a>
</br>
<a href="coastalcargo.html" >
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Coastal Cargo.png">
</a>
<a href="veseelchartering.html" >
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Vessel Chertring.png">
</a>
</br>
I have create button by using img tag within anchor.
why I am getting small dash at right corner??
thanks in advance
There is a default text-decoration:underline associated with an anchor <a> tag. Since there is a space in the <a> </a>, that underline is the line you see.
Use text-decoration:none on <a>, that should solve it.
a {
text-decoration: none;
}
This appears to happen when:
the closing anchor tag is on a separate line from the rest of the element
AND the visible text of the anchor is an image
AND you have multiple images on the same line
and also the anchor/image is not the last item in the horizontal series
In the following example, you will not see dashes after the third and fifth images, but the other images will show a dash to the right of the image/link:
<p>
<a href="#">
<img src="image.jpg" alt="Test 1" />
</a>
<a href="#"><img src="image.jpg" alt="Test 2" />
</a>
<a href="#">
<img src="image.jpg" alt="Test 3" /></a>
<a href="#"><img src="image.jpg" alt="Test 4" />
</a>
<a href="#"><img src="image.jpg" alt="Test 5" />
</a>
</p>
I can't find any information to say if this is a violation of an HTML rule regarding splitting elements across multiple lines. I replicated the same issue in Chrome, Firefox and IE 11.
I can only guess that a space is being added after the image, since the closing tag is on a separate line. And this relates to the answers given above - the space is being automatically styled with an underline. But I don't know why the space is added after an image but not after text, or why this only happens when the images are on the same line.
<a> is an inline element. If you leave space between enclosed elements and the </a> element, it will be formatted automatically which is with an underscore.