I have an background image for a menu bar as follows
and it has four constant text displayed on each of the box. right most box is empty place. This image is made with all those static four vertical bars.
Now the problem is those four texts are so dynamic and are of variable lengths for different situation. Because of the variable lengths, its overlapping with those vertical bars when the texts not able to accommodate inside the box.
What is the best option to deal with this scenario using styling or another way.?
Thanks in advance.
Case 1: Using Borders
You can give the links a border-right instead of relying on the image.
.nav li a {border-right: 2px solid #000;}
Case 2: Using Ellipsis
You can give a text-ellipsis for those links and make sure they come fit inside the lines:
.nav li a {max-width: 150px; text-ellipsis: ellipsis; overflow: hidden; display: inline-block;} /* Get this thing right */
Related
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/
I have been researching and working so hard to fix such a strange problem. I have a div that is supposed to hold some text. This div should be able to resize with that text, so that if there are two lines of text the div gets taller, etc. All that seems to work fine, but for some reason there's some sort of padding added to the top of the text and to the bottom of the text. I can't find what is causing that padding, and I really want to make the div fit the text more compactly. Here is an image of what i'm talking about:
http://i.imgur.com/ZblaLJX.png
The light blue box should be shorter in height so it fits the text more closely. Here is my CSS code for this div:
.captionCSS {
max-width:70%;
margin-top:10px;
margin-bottom:20px;
padding-left:5px;
padding-right:5px;
padding-top:0px;
padding-bottom:0;
background-color:#aef7f8;
overflow:hidden;
color:black;
}
I have messed around with all of the margins and paddings, setting them to zero and then setting them back again and nothing seems to work. The line height is inherited from another div and is 18px, while the font size is 12px, and i tried decreasing the line height but it didn't have any effect on the top and bottom padding/gap.
Also, when the text takes up two lines, it get a bit worse in that there is an extra bit of padding on the side, which i want to get rid of:
http://i.imgur.com/Ecdxdtq.png
So yeah, that's my issue. Ideally I would like a 5px gap from the edge of the div to the top of the text, so if there is anyway to do that please let me know! Thanks so much for your help!
You might try the following.
If your code looks similar to this:
<p>Some text with <span class="captionCSS">highlighted text</span>.</p>
apply the following CSS rules:
p {
background-color: gray;
padding: 5px;
}
.captionCSS {
max-width:70%;
padding: 0 5px;
background-color:#aef7f8;
display: inline-block;
line-height: 1.00;
}
If you set display: inline-block to the caption wrapper, then the line height value will have some effect.
line-height: 1.00 forces the line height to be the same size as the font-size for the element. If you set the value to be less than 1, you will get a tighter fit but you may also clip ascenders and descenders of certain characters depending on the font.
See demo at: http://jsfiddle.net/audetwebdesign/2cyaF/
Without the HTML I can't be sure, but my first guess is that the text has a parent block level element that already has styling rules. (ex: <hX> or <p>)
You can clear those styles through css by doing something like this:
h1,h2,h3,p{
padding:0;
margin:0;
}
Here are some example cases using your style: http://jsfiddle.net/JTrWL/
I have horizontally stacked divs using the following code below:
.basic {
width:100px;
position:relative;
display:inline-block;
border: 1px solid red;
text-align:center;
margin:0;
padding:0;
}
#container {
white-space: nowrap;
border: 1px solid black;
width:300px;
overflow:auto;
}
The 'container' has white-space:nowrap for stacking it's children horizontally. However, the horizontal children have spaces to their right. Here's a fiddle showing the demo. Inspecting box layout there doesn't seem to be any margin/padding. But just some mysterious 'dark matter' pushing it out :P
The queer thing is that the same code is used at different places in my application but this anomaly shows up in one place as shown in the image below:
Don't worry about the garbled text on the top. I haven't rotated the div 90 degrees CCW as yet :)
However, pay attention to the bottom part of the image. The textbox divs are stuck to each other whereas the ones on the top aren't. They use the same CSS as above, but differ in structure. The top Div has two floats which are cleared by the div with the arrow towards the bottom. So no 'uncleared' floats there. Rather than posting the entire HTML/CSS I recreated the problem in the fiddle.
What I fail to understand is that even after having 0 margin/padding and display:inline-block for the child divs why is there still some space? I'm sure this has been asked quite a few times here but why would this happen once and not in another place? Besides, how best to 'fix it'??
display: inline-block places a margin to the right if there exists a whitespace between the current and the next element. This space is calculated as a product of 4px and the current font-size in ems. Notice the difference between the first and second rows in this fiddle: http://jsfiddle.net/MkasM/
In your case, this can be controlled simply by setting margin-right: -4px since you haven't changed the font-size.
More here: http://css-tricks.com/fighting-the-space-between-inline-block-elements/
Also, it is good practice to give your elements 'box-sizing: border-box' if you haven't already. It will contain the 'padding' and border-widths within the blocks so it wont interfere with the layout.
To read: http://paulirish.com/2012/box-sizing-border-box-ftw/
I'm struggling with an anchor (specifically a:hover) tag in CSS. Here's my JSFiddle:
http://jsfiddle.net/yXwng/
Basically I have a nav bar with a custom image (in the fiddle I got rid of it because I'm just trying to understand the syntax and line things up). The nav bar is a div and I have five links on the nav bar which are all nested divs.
In order to make the each of the nested divs links (I made the entire div a link), I added a transparent png as the background image and set the link to the background image, thus the nav bar custom image still shows and you can click the link on the nav bar.
Now, I'm trying to make a hover/rollover image for each nav bar element. When I rollover, it shows the new image but it's aligned completely wrong (down and to the right of where the original image was). On my fiddle, I used the code, but instead of the images I'm using, I just used borders for alignment purposes. You can see on the example that the red box (which is the anchor) is not lined up for some reason with the div. That is exactly where the hover image shows up when I try to implement it.
Any ideas? Thanks!
if you add the same dimensions to your a link, it should work perfectly:
#homelink a{
border:1px solid red;
width: 200px;
height: 40px;
display:inline-block;
}
You need to give a display block and some line height to <a> like this:
#homelink a {
border: 1px solid red;
display: block;
line-height: 10px;
}
It will be aligned with div. BTW you need to use UL LI structure for it.
I'm making a menu. Looks something like thing:
<div>
<ul>
<li><a>menu/<br/>item</a></li>
</ul>
</div>
I want to center the text vertically. I usually go with
ul li { height: 50px; line-height: 50px; }
for example. But obviously this does not work since it is a tag in the menu. I need the text to look like
menu/
item
in the menu. Any ideas how to solve this? Thanks!
You could just set a smaller line height and equal padding top and bottom, like so:
ul li {
padding: 20px 0;
line-height: 14px;
}
This method assumes each item list contains two lines of text for them all to be equal height.
It would look something like this - http://jsfiddle.net/ajcw/fVamh/
Vertical Align is only supported in table cells. You can either adjust your padding to move the text around (will only work for your particular font size and if that changes you will have to re-adjust your padding), or as Dan Andrews mentioned above, you can use display: table-cell, however, this is only supported by the newer browsers, so depending on your audience, it may not be a viable solution.
For table-cell support, see QuirksMode.com