Is it possible to prevent non-clickable area between lines in a multi-line html anchor tag? Here in this example I use line height 1.5 and you can't click between lines.
I know in html5 we can put block-level tags in anchor like <a><div>Link</div></a> but the problem is this part of content can be edited by users and I can't ask them to write their anchor links like this. Is it possible to fix this issue with css only?
CSS:
a {
line-height:1.5em;
}
HTML:
This is a <br> multiline anchor
<br><br><br>
This is a very long anchor displayed as a multiline anchor without BR
DEMO:
http://jsfiddle.net/ergec/F52uY/2/
You can set display: inline-block; or display: block to a, and then it will be clickable.
Example: http://jsfiddle.net/RMXfc/
Or you can increase padding and set negative margin at the same time. This will reduce gap.
Example: http://jsfiddle.net/693z4/
If you give your anchor tags a display: block; you will have a solid clickable area.
a {
line-height:1.5em;
display: block;
}
JSFIDDLE
One problem with display: block; is without a specified width, then entire 100% width is clickable.
The only way to approximate it without messing with the rest of the layout of your text (including the surrounding text of the link) is to add some top/bottom paddings to these links..
So adding padding:3px 0; to your code would fix the issue.
(it will require adjusting, though, in relation to your font-size and line-height)
Demo at http://jsfiddle.net/F52uY/7/
Related
I'm trying to learn the basics in CSS but I still have some problems.
How can I hide this "a" space under the img?
I gave it a red background to make it easier to explain which part I'm talking about.
here is the problem:
http://jsfiddle.net/3c48P/7/
.feedEkList li a {
background: red;
}
This is the CSS but I cannot hide it (I want to keep the img of course)
Try display:block on image:
http://jsfiddle.net/3c48P/9/
.feedEkList li a img
{
display:block;
}
The issue is that your <a> and <img> are both inline elements so spaces are preserved during display.
However, you are treating them as block level elements and expect them to contain no such spaces.
The simplest (without going in-depth into other issues) is to make both the <a> tags and <img> tags display: block (although as salivan pointed out the img tag alone should be sufficient).
Just add this line display:block;. it will solve your problem because the img is shown in line by default
Add it in the css like this
img {
width:100%;
height: auto;
display: block;
}
img elements are "inline", just like text. This white space is the part of the line that holds the descending part of letters (for example j or g) and the vertical align of the image is set at the "baseline" of the line, where the bottom of most letters rest (abcd).
One option is, as pointed, display block in spite of it's default "inline" display. You can also avoid it changing the "vertical-align" to "bottom".
I need the anchor text to wrap to the second line and still maintain the layout.
I have tried everything and I am not sure what I am doing wrong here.
Above is how I want it. My demo site where u can see the live layout : http://www.iamvishal.com/residen/?q=node/54
I have tried many variations
max-width
word-wrap
but nothing seems to work.
The strange wrapping is due to the use of padding on an inline element. You should either move the padding to the li elements instead of the anchors or change the anchors to display: block or display: inline-block.
I played arnd with your CSS on your website. This seems to do the trick. Do post your css and html on jsFiddle so we can better help you.
#navigation .links, #navigation .menu {
text-align: -moz-center;
}
http://down123.xxmn.com/wemade/
there is no padding or margin under the image. but i don't know why there is about 1px under the image.which locates at the top right of the page.
how to remove the 1px which ix under the image? thank you
While Andres' solution works, it doesn't actually deal with the issue directly, which is the vertical alignment of the image. The way to fix it is to give the image an alignment other than baseline, such as top or bottom.
This is what I usually use:
img {
vertical-align: top;
}
This way you aren't 'hacking' together a solution by changing the image's natural display mode, but rather dealing with the problem directly.
Also, if you are worried about the way that the inline anchor wraps the inline image, then change the display mode on the anchor, not the image (i.e. block or inline-block).
Just define your image as a block level element to allow your link to properly wrap around your image;
#top a img {
display: block;
}
Inline elements are great, because their width is the width of the content and because it's possible to center them with on rule of CSS:
text-align: center
But inline elements stay on the same line. Is it possible to align them vertically?
Fiddle: http://jsfiddle.net/_bop/NhVaF/
Full screen fiddle: http://jsfiddle.net/_bop/NhVaF/show
Please don't:
Change the HTML in the example. Change the CSS!
Come up with other techniques to center elements, unless you have a better solution that works on elements with unspecified width and doesn't need tons of containers and/or float hacks.
Thanks in advance!
In your markup, if the span are on different rows you could add on the parent container:
white-space: pre-line;
With this CSS declaration, your span are still centered, and you don`t have to add HTML markup.
pre-line
- This value will cause sequences of whitespace to collapse into a single space character. Line breaks will occur wherever
necessary to fill line boxes, and at new lines in the markup (or at
occurrences of "\a" in generated content). In other words, it’s like
normal except that it’ll honor explicit line breaks.
You can find more informations here about white-space:
http://reference.sitepoint.com/css/white-space
http://www.w3.org/TR/css3-text/#white-space
For an IE7 compatibility, you could also add on the parent container:
*white-space: pre /*FixIE7*/;
You need some holding block to hold your spans if you want to display it on top of another. This is the best I can do.
http://jsfiddle.net/NhVaF/5/
If you want to make it work without altering the html, then your best bet is to simply float: left; clear: left; like so:
span {
float: left;
clear: left;
color: #FFF;
padding: 30px;
}
display: block; will not work because it requires you to set a width (or else they'll fill the available space).
display: inline-block; will not work because still display on the same line.
I was just playing around with this too, and found my solution by simply placing <br> after each inline-block element. I know it's altering the html but only slightly!
If you want to create line breaks with CSS try using the :after pseudo class. Would something like this work?
div.class:after {
content:"\a";
white-space: pre;
}
break :after trick: https://stackoverflow.com/a/10934138/6586407
I have this CSS and I cannot set the width on a span element. Any ideas what I am doing wrong?
#address-readonly
{
margin-left:150px !important;
padding-left:100px;
}
I am using this in 2 areas in my application. Here is the first area:
<tr>
<th colspan="2">Address Details</th>
<th><span id="address-readonly" class="address-readonly"></span></th>
</tr>
And here is the second area:
<div id="addressHeader" class="addressHeader">
<span>Address Details</span>
<span id="address-readonly" class="address-readonly"></span>
I want the address-readonly span to be more right aligned. The padding/margin combo has almost no effect. What should I be doing here? I don't want to add a bunch of non-breaking spaces, but that's basically the effect I am looking for. This particular client has an office full of IE7 machines, so no FireFox or Safari etc... I have tried setting the width of the span as well.
Try this:
#address-readonly
{
display:block;
float:left;
margin-left: 150px;
width: 100px; /* If you want to set the width */
}
or you could use a div and not set the display attribute.
If applicable, you could try using display: block:
#address-readonly {
display: block;
width: 200px;
}
Without floating, the span will be on it's own row. Hope that helps.
Your only choice is a display value of block or inline-block, because inline elements are resized by their content. Also, please note that inline-block is not that well supported.
Guillaume's and Wicked Flea's answer complement each other, but some points are missing.
Only "box elements" can have its width/height attribute set. Span is a inline element, so it will resize it self to fit content.
So, if you want your elements to have width set, you should use a box element. The problem here is that box elements do not line up in the same row by default. You can then use float and margins to align a box element with another box element.
All that being said, it would be good to use Guillaume's answer. BUT some quirks may appear, check this link link about clearing floats.
What would I do: Use the workaround presented in the link, then use both spans as divs, and have them floated to the left, with your widths and paddings set.