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 !
Related
jsfiddle at http://jsfiddle.net/Sapphireblue/781rrymp/39/ & code at bottom
I have four nav elements, each text in LIs side-by-side via float:left, in a UL, in a DIV, in a NAV, in a DIV whose width is a percentage of its parent element(s). (I am using a responsive grid layout and these LIs are populated by a WordPress menu, so there may well be a more efficient way to achieve this with less overhead, but that efficiency is not part of the spec for this project.)
What I want to do is to keep the left edge of the left-most LI at the left edge of all its parents; the right edge of the right-most LI at the right edge of all its parents; and have the other two LIs evenly spaced between the outer two. So kind of like a fully justified line of text.
Turns out, this is hard. Between the percentage-width div, which means that any margin I specify for the LIs is unsuitable as soon as you resize, and the fact that the text items in the LIs are of different widths so, and etc etc, I can't get the last LI flush right in a way that stays there for any resize (not even setting LI last-child margin-right to 0}.
I've played with various units for my LIs and none is right. I tried media queries for small adjustments to font sizes on the LIs as you resize the browser window and that parent div shrinks, which helps, but unless I set a breakpoint every 5 pixels, this isn't workable as a solution. If I work out margins that are ~close~ to what I want and then just set float:right on the last-child LI, it looks dumb if you resize the window down to where that last LI appears on its own line.
Gotta be a way to do this. And sorry if the question has been asked; I did browse but didn't find anything quite a match.
(Note: I'm not worried about widths so small the LIs wrap onto 2 lines, I just don't want there to be a gap of whitespace to the right of the UL, at any width where the UL can be contained on the one line.)
#myDiv {
width:50%;
margin:0;
border:1px solid red;
overflow:auto;
}
#myDiv ul {
padding:0;
margin:0 0 0 0;
height:auto;
}
#myDiv li {
list-style-type: none;
float:left;
background-color:yellow;
margin-right:20px; /* this value is only good for one
specific viewport width: ugggh */
}
#myDiv li:last-child {
margin-right:0px;
}
<div id="myDiv">
<nav>
<div>
<ul>
<li>Item 1</li>
<li>Item Two</li>
<li>#3</li>
<li>Longer Item Four</li>
</ul>
</div>
</nav>
</div>
If I understand correctly, this sounds like it would be difficult to achieve and unreliable, especially given that the nav text can be edited through a CMS.
In this situation I'd be inclined to handle it a little differently, using display: inline-block on the list items.
#myDiv li {
list-style-type: none;
display: inline-block;
background-color:yellow;
margin: 0 2px;
}
http://jsfiddle.net/781rrymp/40/
How about using TABLE instead of UL. The code would be:
<style type="text/css">
#myDiv {
width:50%;
margin:0;
border:1px solid red;
overflow:auto;
}
#myDiv table {
padding:0;
margin:0 0 0 0;
height:auto;
width: 100%;
}
#myDiv td {
width: 25%;
background-color: yellow;
border-right: 20px solid white;
}
#myDiv td:last-child {
border-right: 0px;
}
</style>
<div id="myDiv">
<nav>
<table>
<tr>
<td>Item 1</td>
<td>Item Two</td>
<td>#3</td>
<td>Longer Item Four</td>
</tr>
</table>
</nav>
</div>
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>
<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 have some text links inside a list, then within two divs. I want the hover effects to expand past the list to the outside of the outer div. Is there a way to do it with negative padding? Another way? Possible at all?
Visuals will be easier
How it is now-
Highlight of the padding in the surrounding div-
How I want the a:hover effect to look-
Basically the code looks like this-
.1 { padding: 10px;}
.2 { padding: 5px;}
<div class="1">
<div class="2">
<ul>
<li>
<a>abcde</a>
</li>
<li>
<a>fghij</a>
</li>
</ul>
</div>
</div>
Negative margin/padding are invalid and don't work as expect,
but is possible, you have to take out all his
parents margins and add padding to the links to get
the same effect but with all wide anchors:
/* CSS CODE */
.parent { padding:0px; border:1px solid red }
.child { padding:0px; }
.parent h2 { margin:10px; font-size:22px; }
.child ul li a { display:block; padding:10px 15px; }
.child ul li a:hover { background:green; }
you can see an example in: http://jsfiddle.net/3zANs/
Negative padding is invalid (and simply won't work), negative margin on the other hand is valid and it might be useful in your case.
I believe, also invalid are classes that stars with numbers.
Each time i get this problem.. but the old fix doesn't work this time...
I have a <ul> full of <li> that are floated left
those are perfect.... but i like to have a nice box around... and i style the <ul>
but the <ul> is "sort of empty" because the insides are floated...
the trick with the <div style="clear:both"> dont work...
but event if it work.. it's ugly..
what is the "right" method to get the <ul> a size.. without hardcoding the width and height ?
as both point out... the solution was : OVERFLOW
here is the explaination (for future ference) :
The overflow property specifies what happens if content overflows an element's box.
The new solution
It was Alex Walker who first posted a new, simpler solution, though he gives the credits for actually inventing it to Paul O'Brien. In any case, the solution seems to be:
div.container {
border: 1px solid #000000;
overflow: auto;
width: 100%
}
Set overflow to auto for the ul elements..
ul{overflow:auto;}
I found a better solution:
Set ul properties:
list-style-type:none;
margin:0;
padding:0;
border: 1px solid #000;
Set its li properties:
display:inline-block;
position:relative;
This worked for me. The ul is now wrapped around the li.
Note: However the space between two li can't be cleared in this sense.