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
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 created a DIV which on the right top corner must have two links (Menu and Options):
<div class="Clear">
<ul class="Clear">
<li><a>Menu</a></li>
<li><a>Options</a></li>
</ul>
<h2>Header</h2>
<p>Text</p>
</div>
To align the ul on the right I used "float: right".
The online example is in: http://jsfiddle.net/y2hhm/8/
Each link text will be replace by an icon image using background-image.
It looks fine on the first DIV. But on the second the table is pushed down.
I also tried "position:absolute" but it makes hard to align it on the right.
Does anyone knows how to make the Menu/Options list look the same in both?
EDIT:
Tables have default styles applied to them by the browser. To solve this specific problem on your second fiddle (yellow-orange one), you need to set the table's border-spacing: 0;.
Perhaps you can turn to CSS resets if these pre-set properties annoy you.
-----------------------------
I think you might have overlooked the fact that ul's and ol's have a default styling applied to them, which differs from browser to browser. Some might set padding, others margin (I haven't tested it myself).
All you need to do is add this to your CSS: (tested and working in your fiddle)
ul {
padding: 0;
margin: 0;
}
Your h2 element and table element respond differently to the float of the ul. If you set your h2 CSS to clear:both the margin from the ul will also impact it. The table element for some reason considers the margin of your floated element (I can't explain why).
NB: // are not valid CSS comments. Use /* */.
If you absolutely want the menu to be removed from the flow, set the parent div to position: relative; and the ul to position: absolute; margin-left: 80%; margin-top: 0%;.
The disadvantage of this method is that you have to approximately estimate the menu's length. (in this case I took 80% margin, so estimated at 20%) . Given that your divs have dynamic widths, it will also cause the menu to float outside of the table when the viewport is too small. You can prevent this by setting the div to overflow: hidden;, but overall...
If this were a problem I had to solve, I would simply stick with the float: right; and leave some whitespace between the menu and the next elements...
I would like to centrally align a multiple-row list within a div:
http://jsfiddle.net/8Wu2S/
In this example I have set a fixed width on the ul to demonstrate what I want to achieve. However, I need the width of the ul to be dynamic, so that it just contains the list items (which are fixed width), i.e. shrink to fit. Each row of list items should start from the left and fit as many items as it can before flowing onto a new line.
The div is variable width, so for example, if the div was a little wider it would look like this:
http://jsfiddle.net/8Wu2S/1/
I've tried all sorts, but it seems to be a lot more difficult than I had thought!
ul {
background-color: red;
width: 80%;
margin: 0 auto;
}
li {
display: inline-block;
width: 49%;
border: 1px solid black;
}
I used 49% but you could use CSS box-sizing: border-box to avoid that and use a solid 50%.
Set the ul and li elements to display inline.
<div style="width:20%;">
<ul style="display:inline;">
<li style="display:inline;">Foo</li>
<li style="display:inline;">bar</li>
</ul>
</div>
jsFiddle example: http://jsfiddle.net/QcNTW/4/
I managed to find essentially the same problem:
CSS - how to make DIV with wrapped floats inside only be as large as it needs to be to hold the floats?
It turns out there is no nice solution. One way is using media queries to set the width of the ul. The other way is using a jQuery plugin like Masonry.
I was probably going to use Masonry on my site anyway, so I think I'll go down this route, with non-javascript users falling back to a non-centered layout.
I am working on the following website http://bestofdesigns.be/studioregenbogen/index.html.
Can somebody please look at the css and tell me why the footer is not attached to the content and why there is a gap between the menu and the contentwrapper?
I have looked at this for 2 days and cannot seem to find what goes wrong.
Thanks,
Ben
#footer p {
padding-top: 5px;
margin: 0;
}
why there is a gap between the menu and the contentwrapper?
The gap is due to the margin applied by default by each browser to the list <ul> element and the title <h1>.
Remove it or adjust it
Screenshot
hi now give to #footer overflow:hidden and give to your footer p tagmargin :0;`
as like this
#footer{
overflow:hidden;
}
#footer p{
margin:0;
}
I am suggesting one more thing did you ever opened your design using firebug and checked how your middle content looks. It's bad design. Use div tags extensively don't use padding much.In the body style put text-align:justify property.
Your error is in
#footer p {
padding-top: 5px;
margin: 0;
}
Divide the content wrapper class into two vertical div classes and then divide the below vertical classes into another two vertical classes. Divide the first vertical tag into two horizontal div classes. In that put your image in first horizontal tag and in second your paragraph. In the bottom vertical class your second paragraph.