I have a UL and inside of that UL I have an image which I have set in css to be 200px wide. However, when it is rendered on a web page, there is an extra 4px to the right of the image. Chrome's inspect element shows that for some reason the UL itself is 204px. I can fix this by setting the UL to width:200px, however that doesn't work in the long run because I need to add padding to the image and if I do that the image gets offset.
Here's all the relevant CSS:
#imagesUl {
display:inline-block;
border:1px solid rgba(85, 85, 85, 0.2);
margin-left:40px;
margin-top:20px;
height:220px;
}
#imagesUl h1{
padding-top:0px;
margin:0px;
font-weight:bold;
display:inline-block;
color: #515050;
}
#imagesUl img {
width:200px;
padding:0px;
}
And a picture of it in chrome (you can see the extra 4px on the right of the image)
display:inline-block has a problem with adding 4px of extra space
http://css-tricks.com/fighting-the-space-between-inline-block-elements/
Suppose you had this markup:
<p><img src="img1.jpg" />
<img src="img2.jpg" /></p>
You would expect to see a gap between these two images because there is a line break between them. This is interpreted as horizontal white space. The same thing is happening with your <ul> elements. If you remove the horizontal white space between them, the problem will go away.
In other words change this:
<ul>
<li>...</li>
</ul>
<ul>
<li>...</li>
</ul>
to this:
<ul>
<li>...</li>
</ul><ul>
<li>...</li>
</ul>
Related
Hi i am trying to write a footer which should have balanced width items because of their width.
In my example , if the sentence is long, it s seems that there is a more large padding. "Blog" has a little padding, "First column very long" has a large one.
Thx for the help.
<div class=footer>
<UL>
<LI>First column very long</LI>
<LI>Contact us</LI>
<LI>Blog</LI>
<LI>Privacy policy very large title</LI>
<LI>why?</LI>
<LI>The last sentence</LI>
</UL>
</div>
.footer{
width:100%;
border: 1px solid yellow;
}
.footer ul
{
list-style-type:none;
display:table;
width:100%;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
padding:0;
}
.footer ul li
{
display:table-cell;
text-align:center;
border:1px solid red;
}
https://jsfiddle.net/rtjposu9/
This is a very normal phenomenon. If you wish to balance the widths of the elements, use width in percentage to help you, for example width:16.66%;
However, since that will instead cause another problem of words overflowing, you should also use overflow:hidden and word-wrap:break-word
Here I have this markup:
<div class="cabinet">
<ul>
<li>This is short</li>
<li>This one is longer</li>
<li>Yet this one is a lot more longer</li>
</ul>
</div>
And here's the CSS:
div.cabinet{
width:120px;
border-right:5px solid #e7e8e1;
white-space:nowrap;
}
I need the content not to overlap the right border of the div but instead be padded some 5px away. Here's the jsfiddle. I tried to play with z-index but it didn't help. What should I do?
Demo Fiddle
How about the following:
div.cabinet{
border-right:5px solid #e7e8e1;
white-space:nowrap;
display:inline-block;
padding-right:5px;
}
Use inline-block to make the div fit the content, then add padding. If you only wish the child ul to do this, simply apply those properties to div.cabinet ul instead (as well as the border).
Add a Padding to your UL or LI tag,
ul{padding:5px;} /** Will be applicable to all li's or you can also give it seperately **/
you can change that 5px value, but it will be enough !
<div id="menuNav">
<ul id="menuNav-ul">
<li>Home</li>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</div>
I have a JSFiddle that I've made here:
http://jsfiddle.net/agzF5/
If you hover over the menu items that aren't the first of type you'll notice there is some strange margin appearing after where the border would be if it were set, I was wondering as to how I can remove that?
Matt
JSFiddle here
You had your list items as display:inline-block;
I've floated them left, added display:block; and changed some properties on the wrapping element. so it still contains the floated elements, see below.
#menuNav-ul {
background: lightgrey repeat-x;
list-style-type: none;
padding: 0;
margin: 0;
border-bottom: 2px solid darkgrey;
display:block;
overflow:hidden;
}
#menuNav-ul li {
display: block;
border-right: 1px solid #bfbfbf;
margin: 0px;
padding: 0px;
float:left;
}
add
html, body{margin:0;}
to the top, body alone should probably work as well..
Others have answered with good solutions.
I wanted to leave this here in case it helps someone though.
The reason for this is that there is whitespace in your markup (totally fine), which inline-block renders as spaces.
If you are working with inline-block elements, you can to set the font-size of the parent to 0, then explicitly set the font-size of the child elements as a workaround for this.
You're setting your LI elements to be display:inline-block which means they will have a inline whitespace space between them (usually ~4px).
3 solutions:
1. LIVE DEMO
add font-size:0; to the UL
reset the font size to px for the LI elements
2. don't add display:inline-block; but float:left; your LI elements
3. (not recommended) add a -4px margin-left to your LI elements
P.S: an additional suggestion is not to style (colors, borders etc) you LI elements. Treat them like simple positioned containers for your styled <a> elements.
Well the simple solution is to add comment between your li items:
<div id="menuNav">
<ul id="menuNav-ul">
<li>Home</li><!--
--><li>Page 1</li><!--
--><li>Page 2</li>
</ul>
</div>
Check it in action: http://jsfiddle.net/agzF5/7/
I'm displaying a series of boxes as <li>s like this:
I want the text vertically centered in the boxes, but as you can see they are way too low. This is my HTML:
<div class="pagelinks">
<ul>
<li>1</li>
<li>2</li>
...
<li>6</li>
</ul>
</div>
and my CSS:
.pagelinks { float:right; margin:0; }
.pagelinks li {
display:inline-block;
width:20px;
height:15px;
border:2px solid #394E7E;
margin:0;
font-weight:bold;
text-align:center;
}
.pagelinks a, .pagelinks a:hover { text-decoration:none; }
I already had a look at vertically-align, but I think it will align the <li> in the <ul>, not the text in the <li>.
How do I fix this?
PS: in the accepted answer to a similar question it was suggested to use <sub>/<sup>, but I'm sure that not the way to do it.
Use line-height.
li{
line-height:15px; // the hight of the li
}
DEMO
Add line-height: 15px; to your li class
FIDDLE
The example you posted is incorrectly formatted HTML. The <a> tag should be inside the <li>.
Also, remove the height from the <li> elements and just use line-height on the <a> tags.
JSFiddle Example
I want to have a left-aligned navigation bar across the top of the page, but before (i.e. to the left of) the menu items, I would like a bit of text ("John Doe") that (i) has a substantially larger font size than the menu items but (ii) has the same baseline as the menu items.
From what I understand, the preferred/recommended way to do navigation bars is with floated <li>'s. However, I haven't found a way to use a left floated list and also have the menus align to the same baseline as the text to the left. My current CSS and HTML are:
<html>
<head>
<style>
#navdiv {
overflow:hidden;
border-bottom:solid 1px red;
}
#nav {
list-style:none;
margin:0;
padding:0;
}
#nav li~li {
float:left;
border:solid 1px blue;
width:100px;
}
#name {
float:left;
border:solid 1px blue;
font-size:40px;
width:250px;
}
</style>
</head>
<body>
<div id='navdiv'>
<ul id='nav'>
<li id='name'>John Doe</li>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
</body>
</html>
Is there any way to vertically align all left floated <li>'s to the bottom of the container <div>?
I should say: I can easily achieve the intended effect by using a table instead of a floated list (using vertical-align:bottom on the menu <td>'s), but since floated lists seem to be the recommended standard, I'd like to know if it's possible with them. (Though I really don't understand the animus folks seem to have against using tables for layout.)
Don't need to use float, in fact it's better if you don't, you can just set the display type to a table-cell
#navdiv {
overflow:hidden;
border-bottom:solid 1px red;
}
#nav {
list-style:none;
margin:0;
padding:0;
}
#nav li {
display: table-cell;
vertical-align: bottom;
border:solid 1px blue;
width:100px;
}
#nav li#name {
font-size:40px;
width:250px;
}
also, the extra border style was unnecessary, just change the selectors to #nav li and #nav li#name and you can supersede anything in #nav li with what's in #nav li#name because it has higher priority.
tables are bad mostly because of the way they load, as far as I understand they require the whole table to build before content can load, while using individual elements can load as they please, or something to that affect, i'm sure someone else could explain that part better.