I have a long list of li's.
<ul>
<li>
<img src="test.jpg">
</li>
<li>
<img src="test.jpg">
</li>
//etc
Each li has this styling:
width: 10%;
display: inline-block;
vertical-align: middle;
When I get to more than 10 li's in a row, they go on to the next row.
Is this the correct way to do it? or should I wrap each 10 li's into something that breaks the line? What the best/correct method? i intialy chose this method as it would be easily to loop out data from a database.
That is a perfectly valid method, and a very easy one to change. Let's say you decide actually, you want five on a line. Just change 10% to 20% and ta-da! Instantly done.
Just be aware that whitespace can be an issue, if you have spaces between your <li> elements (but if you're properly minifying your HTML, then you shouldn't have this issue).
Another point, it may be more meaningful to use a higher-level language such as LESS to generate your CSS. In LESS, you can do this:
width: (100% / 10);
This will calculate the percentage for you, with 10 being the number you want per line. What was already easy is now even easier (especially if you want, say, seven on a line). CSS calc(100% / 10) can do it too but it's not compatible with older browsers.
Just should create a div list with table properties. Like this DEMO
.table{
display:table;
margin:0;
padding:0;
}
.cell{
margin:0;
display:table-cell;
}
img{
max-width:100%;
}
Related
How to reduce the gap between two video tag, I have tried with margin and padding its not worked any help are appreciated
DEMO
My HTML
<div class="videoTest">
<video controls="controls"></video>
<video controls="controls"></video>
<video controls="controls"></video>
<video controls="controls"></video>
</div>
My CSS
.videoTest > video{
border:1px solid red;
margin:0;
padding:0;
}
The <video> element is an inline element by default. That's why there are gaps between them representing the whitespaces and/or line-breaks in your markup.
.videoTest > video {
display: inline-block;
border:1px solid red;
margin:0;
padding:0;
}
.videoTest {
font-size: 0;
}
By using font-size: 0, the line-breaks and whitespaces are being kind of ignored and you get rid of the gaps. Their size is set to 0.
Updated Fiddle
This is a common workaround when working with inline-blocks and is in some situations superior to floats when it comes to centering for example.
try this
http://jsfiddle.net/Ng6XU/5/
.videoTest > video{
border:1px solid red;
margin:0px;
padding:0;
float:left;
}
TRY THIS CSS :
.videoTest > video{
border:1px solid red;
margin:0;
padding:0;
float:left;
}
I have found the link which gives various method to solve this issue, may be helpful to some one Reference : http://css-tricks.com
Published April 21, 2012 by Chris Coyier
Here's the deal: a series of inline-block elements formatted like you normally format HTML will have spaces in between them.
In other words:
<nav>
One
Two
Three
</nav>
nav a {
display: inline-block;
padding: 5px;
background: red;
}
Will result in:
Often highly undesirable (check the link for the output)
We often want the elements to butt up against each other. In the case of navigation, that means it avoids the awkward little unclickable gaps.
This isn't a "bug" (I don't think). It's just the way setting elements on a line works. You want spaces between words that you type to be spaces right? The spaces between these blocks are just like spaces between words. That's not to say the spec couldn't be updated to say that spaces between inline-block elements should be nothing, but I'm fairly certain that is a huge can of worms that is unlikely to ever happen.
Here's some ways to fight the gap and get inline-block elements sitting directly next to each other.
Remove the spaces
The reason you get the spaces is because, well, you have spaces between the elements (a line break and a few tabs counts as a space, just to be clear). Minimized HTML will solve this problem, or one of these tricks:
<ul>
<li>
one</li><li>
two</li><li>
three</li>
</ul>
or
<ul>
<li>one</li
><li>two</li
><li>three</li>
</ul>
or with comments...
<ul>
<li>one</li><!--
--><li>two</li><!--
--><li>three</li>
</ul>
They're all pretty funky, but it does the trick.
Negative margin
You can scoot the elements back into place with negative 4px of margin (may need to be adjusted based on font size of parent). Apparently this is problematic in older IE (6 & 7), but if you don't care about those browsers at least you can keep the code formatting clean.
nav a {
display: inline-block;
margin-right: -4px;
}
Skip the closing tag
HTML5 doesn't care anyway. Although you gotta admit, it feels weird.
<ul>
<li>one
<li>two
<li>three
</ul>
Set the font size to zero
A space that has zero font-size is... zero width.
nav {
font-size: 0;
}
nav a {
font-size: 16px;
}
Matt Stow reports that the font-size: 0; technique has some problems on Android. Quote: "Pre-Jellybean does not remove the space at all, and Jellybean has a bug whereby the last element randomly has a tiny bit of space." See research.
Also note, if you're sizing fonts in ems, this zero font size thing can be an issue, since ems cascade the children would also have zero font size. Rems would be of help here, otherwise any other non-cascading font-size to bump it back up.
Another weirdness! Doug Stewart showed me that if you use #font-face with this technique, the fonts will lose anti-aliasing in Safari 5.0.x. (test case) (screenshot).
Just float them instead
Maybe they don't need to be inline-block at all, maybe they can just be floated one way or another. That allows you to set their width and height and padding and stuff. You just can't center them like you can by text-align: center; the parent of inline-block elements. Well... you kinda can but it's weird.
Just use flexbox instead
If the browser support is acceptable to you and what you need out of inline-block is centering, you could use flexbox. They aren't exactly interchangeable layout models or anything, but you might get what you need out of it.
Since the video tag defaults as an inline-block element, simply make the video tag a block element in CSS. Bob's your uncle.
video {display: block;}
In my case, I was using 640x480 for the video size. I changed it to 640x360 and that removed the white space above the video.
I would say that in my case setting this css helped:
height:auto;
<style>
ul{margin:0px;padding:0px;}
ul li{margin:0px 5px 5px 0px;padding:0px;list-style-type:none;float:left;}
</style>
<ul class="clearfix">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
The first li contains more content than the rest.
So, I have the following problem:
problem http://img830.imageshack.us/img830/240/problemc.png
But how do I move the next row down, so it looks like that:
want this http://img440.imageshack.us/img440/9750/solutionm.png
I tried using display:inline-block; instead of float:left; for the lis, which works, but I'd still rather use float:left; over inline-block.
Any ideas on how to do this?
Solution for IE:
http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
The best solution is to use a little-known display style called table-cell.
I've had to do this a few times. Here's how you do it:
/* -*- CSS -*- */
ul li .wrapper
{
display:table-cell;
width:100px; /*replace here*/
min-height:100px;/* " " */
}
ul li
{
float:left;
display:inline-block;
}
ul
{
display:table;
}
...
<!-- HTML -->
<ul>
<li><div class="wrapper">my-content</div></li>
<li><div class="wrapper">my-content</div></li>
<li><div class="wrapper">my-content</div></li>
<li><div class="wrapper">my-content</div></li>
</ul>
How this works:
When the parser sees that there's a UL object, it treats it like a table instead of a list. This gives you the distinct advantage that you're beginning to /act/ like you're working with tables (but you're not!)
The rule then runs against the wrapper class -- this creates a "Table cell". We don't want to put it in the li because OTHERWISE the li will act as the table cell. This is kinda bad. the work around is that your li is actually aligned left. There's some argument whether or not is a good idea to do it this way -- this is the "Most Effective" because it forces the box model to comply. Its fugly, I know.
the REASON its bad for the li to be treated like a table-cell is that it won't wrap. The reason it wont wrap is that table-cells aren't supposed to wrap.
There is ONE other solution that might work, however I haven't tested it.
/* -*- CSS -*- */
ul li { display: inline-block; float:left; min-height:200px;width:200px; }
Its not as ugly, but it should work by making the box model force the alignment as well.
First of all: Are you sure you're using the right markup? A list generally doesn't end up to look like that.
Second. Do you know how many items you will have on a row? In your image they seem to have the same width. If you know that you can add clear:both; to the forth li (and other you may need) and force it down. This would be the only way to do it with left floating lis.
You can't do this using only float:left; the blocks just fall into place where they fit as your first example shows. If you intend for your content to always display in three columns, you could programmatically clear the float on the first item in each row.
Scenario: I have an unordered list < ul > of width (lets say 200px) with four < li > elements that are sized equally. Therefore each should be 50px. When I add a 5th < li > element each width should re-size to 40px. If I change the width of the < ul > to 500px with 5 < li > elements, each < li > element should be 100px.
Is this possible with only CSS? If yes, how is it implemented?
Currently, I have a solution that meets the above requirements but it includes jQuery to re-size the < li > elements based on mathematical calculations.
Thanks for the attention.
Aparently you can fake tables like here, but I am not sure if this works in all browsers(edit: it works on winxp ie8, chrome 7, firefox).
<div id="menu">
<ul>
<li>
...
</li>
<!-- other list items -->
</ul>
</div>
#menu {
display: table;
}
ul {
display: table-row;
}
li {
display: table-cell;
}
Also example on fiddle.net here
Your question doesn't completely make sense to me. If you leave the widths off, the list will be as wide as it needs to be. But here's a crack at your question:
<style type="text/css">
ul
{
width:500px;
}
li
{
width:100px;
}
</style>
<ul>
<li>1. one</li>
<li>2. two</li>
<li>3. three</li>
<li>4. four</li>
<li>5. five</li>
</ul>
Using CSS expressions it is possible, but CSS Expressions come with a very heavy performance penalty. JavaScript (and jQuery for that matter) is the appropriate tool to use to create the effect you want.
CSS should only be used for styling, HTML should only be used for structure, and JavaScript should be used whenever you want to create dynamic content.
Until such a time as browsers implement the calc(), min() and max() functions this isn't possible outside of scripting (either server-, or client-, side) or using a table.
Currently, and surprisingly (perhaps only to me), neither Firefox, Webkit or Opera support calc() function, not even with the various flavours of vendor prefix.
That said, one day something like the following might work (but not today, sadly):
ul {
counter-reset: numListItems;
width: 60%;
}
ul li {
counter-increment: numListItems;
width: calc(100%/numListItems);
}
But, obviously, for that to work browsers would need to implement some form, and understanding, of variables within the scope of calc(), which doesn't appear to be necessarily on the road-map (I'm not sure that the counter() is, or is intended to be, interoperable with the calc()).
I'm trying to stray away from using tables to form the layout of my content, and I can think of two alternatives that I'd like to better learn: (1) styling list items to be side-by-side, and (2) using div blocks that float onto the same line. Both of these would have their own uses for what I'm working on.
I'm already using div tags to form the entire layout of my three-column template, but what I need to do now is a bit different. In case it helps, my project can be found here.
In short, here's my question; how would I style a div so that the width of it is 50% of the width of the area it occupies, rather than 50% of the width of the page?
As for my other question, what would be the best approach to styling list items so that they are side-by-side? I'm working on a registration script now, and instead of using a table with "Username" on the left and the input text on the right, I can use two list items.
It's late and I've been working on this project of mine for about 8 hours straight now, so I apologize if I'm asking anything confusing. Feel free to ask me any questions about what I'm trying to do.
Thanks, friends. :)
When you use percentage units for widths and heights, it is relative to the first ancestor element which has defined a width or height. Therefore, all you need to do is set up a div which is as wide as two columns:
<div class="columnContainer">
<div class="column">
Column 1
</div>
<div class="column">
Column 2
</div>
</div>
.columnContainer {
width: 800px;
}
.column {
float: left;
width: 50%;
}
There's a lot more fiddling about required than just the code above, but that's the basics. As Gabriel said, you might get a lot of value out of using a CSS framework like 960.gs
ok, so to help you out best I am going to point you to http://960.gs this is a great tool for prototyping this sort of scenario and getting solid reliable code. On to your actual issue, you probably want to set:
width: 50%;
float: left;
display: block;
on the elements you want split. Good luck.
For the width, any relative sizing is relative to the parent, so put it as a child inside the element you want to be half of. For the list items... use display: inline; or float: left;
Inline list are simple but have some drawbacks, you cant set height or width for example.
ul li {
display:inline;
}
If you need block elements you need to float list items and floats can be tedious sometimes, for example you need to take care of clearing [uod]l element.
ul {
overflow:hidden;
}
ul li {
float:left;
display:block;
}
You probably want to remove margins and paddings on list itself in both cases.
ul {
margin:0;
padding:0;
}
I'm trying to put together a navigation bar using a table:
There are n links to different parts of the website
There is one "logout" link, which is an icon of fixed size
What I'd like to do is the following. The available width for the whole bar (which is known in advance) minus the required width of the icon should be divided equally among the cells containing the n links for navigation (ignoring the size of the links inside, this is not a problem).
Currently, I'm performing this computation in PHP and use to achieve this. However, this does not comply with the XHTML 1.0 Strict standards. According to the W3C validator, I should use CSS to set the width of the column. Problem is: I don't know how to do this, and if it is at all possible. Probably this problem is a hint that I shouldn't be using tables for this, but I have no other ideas at the time.
How can I achieve the effect, using tables or something else, in an XHTML Strict and CSS compliant way?
First off, scrap the tables. Your links are not tabular data.
Basics
Start off with this:
CSS
ul.navbar
{
padding-right: 25px;
list-style:none;
}
ul.navbar li
{
margin: 0px;
padding: 0px;
border: 0px;
display: block;
float: left;
}
ul.navbar li.icon
{
margin-right: -25px;
width: 25px;
float:right
}
HTML
<ul class="navbar">
<li>Home</li>
<li>FAQ</li>
<li>Contact</li>
<li class="icon"></li>
</ul>
Equal width
The icon li should be hugging the right edge. Now, there are a few ways you can acheive the equal spacing. One way would be to have these classes, and apply them to the ul, with either php or jquery:
CSS
ul.navbar.links1 li
{
width:100%;
}
ul.navbar.links2 li
{
width:50%;
}
ul.navbar.links3 li
{
width:33%;
}
ul.navbar.links4 li
{
width:25%;
}
ul.navbar.links5 li
{
width:20%;
}
jQuery
$(function()
{
var n = $("ul.navbar").children().length-1;
//Get the number of links: -1 because of logout
$("ul.navbar").addClass("links"+n);
});
Alternatively, you could just directly modify the width with jQuery or PHP. Up to you. Either way, you should use percentages.
$(function()
{
var n = $("ul.navbar").children().length-1;
//Get the number of links: -1 because of logout
$("ul.navbar").width((100/n)+"%");
});
The easiest way would be to put the links into little boxes (all the same size). Since CSS has no way to make calculations, you must still set the width of the boxes but by using CSS, you can do this once. Use DIV for the boxes. The class for the boxes must say display: inline; so they behave like words in text (the browser will place them next to each other on a line).
After that, you just calculate the width per box in PHP and send this width in a little piece of inline CSS in the header of the HTML page. That way, all boxes will have the same width and they will all be in the same line.
For an example how to create a navigation bar with CSS, look at the source code of the page you're reading just now.