I am facing a weird problem. I have an un-ordered list of images. List has 4 Items. I want to include it in responsive page and all I want is that all items should have a 25% width and the list itself should span the width of whole screen. Well it all sounds easy and straight-forward but for some odd reason I can't assign 25% width to the list-items and only three items accommodate in one line if I assign width:25%.
If I reduce the width to 24.4% the items are in line. But then again weirdly when I resize browser one of the item goes into 2nd line.
I am using Google chrome. Here is the HTML:
<ul class="imgs">
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
<li>dddd</li>
</ul>
Here is the CSS:
.imgs {
width: 100%;
list-style: none;
margin: auto;
padding:0px;
}
.imgs li {
width: 24.4%;
margin: 0px !important;
padding: 0px !important;
display: inline-block;
}
And here is the Fiddle Demo:
http://jsfiddle.net/7HXw7/2/
WIth inline-bock elements, the browser will interpret the space between the li's as actual spaces and that's why your elements aren't lining up. If you just remove the space, it'll line up. See code:
<ul class="imgs"><li>aaaa</li><li>bbbb</li><li>cccc</li><li>dddd</li></ul>
Or the fiddle, here: http://jsfiddle.net/dgvc9/
Alternately, if you find this as annoying as would think you do, you can make the li's block elements and float them left.
See alternate fiddle: http://jsfiddle.net/8Gxvd/
Try adding:
float: left;
to .imgs li
Fiddle
Related
I'm trying to work with grids which are whole numbers, that perfectly match up, e.g 20% for 5 menu items would fill 100%.
I have the following code:
#menu-primary-navigation li{display:inline-block;font-size:0;width:20%;}
#menu-primary-navigation li a{font-size:22px;}
I understand the issue of whitespace between ul li elements that means 20% elements will not fit into 100% due to the white space in between each element. However I thought I had got around this issue by making font-size:0; where the elements sit and then only setting the font size inside the element.
Yet you can see in my JSFiddle that the five menu items still do not fit perfectly to 100% of the container.
In my example, the width is 600px and each element is 20%. I can see from inspecting the elements that they are all equal to 120px. Well 120 x 5 = 600, so why does the last element always fall to the next line?
<div class="wrapper">
<ul id="menu-primary-navigation" class="menu">
<li class="menu-item">
Home
</li>
<li class="menu-item">
Tutorials
</li>
<li class="menu-item">
<a>Logo</a>
</li>
<li class="menu-item">
Projects
</li>
<li class="menu-item">
Articles
</li>
</ul>
</div>
http://jsfiddle.net/franhaselden/kq9o4t0v/
Using display: inline-block; is notoriously problematic in this situation. You could consider using display: table-cell; achieve the same result with less hassle.
HTML can remain the same, but try this CSS:
.wrapper{width:600px;}
ul,li{padding:0;margin:0;}
/* needed for use with display: table-cell; */
.menu{ display: table; width: 100%; }
/* changed to table-cell */
#menu-primary-navigation li{display:table-cell; text-align: center;}
#menu-primary-navigation li a{font-size:22px;}
However as I am supposed to be answering the question the part you went wrong is you need to set the font size on the parent i.e the ul in order to effect the white-space. Do note however, I think certain versions of IE will not like font-size: 0;
CSS:
.wrapper{width:600px;}
/* you need it set on the parent */
ul,li{padding:0;margin:0; font-size: 0; }
#menu-primary-navigation li{display: inline-block; width: 20%; text-align: center;}
#menu-primary-navigation li a{font-size:22px;}
You are setting font-size:0 on the li tag to remove whitespace. However the li's are contained in the ul, so you need to set the font-size there.
In your jsfiddle the issue is resolved by setting
.wrapper{width:600px;}
ul,li{padding:0;margin:0;font-size:0}
I would like a horizontally scrollable gallery like the one on the image.
My current markup is this (it is slim.):
.col-xs-12
.row-fluid.clearfix
ul.ace-thumbnails
- #equipment_uses.each do |gear|
= content_tag_for(:li, gear) do
a.cboxElement data-rel="colorbox" href="#" title=("Photo Title")
= image_tag gear.image, size: '80x80', alt: "150x150", class: 'img-thumbnail thumbnail'
If I set the 'overflow-x: scroll' fro the .col-xs-12 div and 'width:10000px' for the '.row-fluid.clearfix' div then it is working but the horizontal div too long. I would like to outspread the width of the .row-fluid.clearfix to be to total width of the images.
This is not exactly an answer, but this page has some great tutorials on exactly this topic, covering a few different versions. I would have left a comment rather than an answer but my reputation has prevented this.
Basic horizontally scrolling list of images using HTML & CSS:
HTML:
<ul class="images">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
CSS:
ul.images {
margin: 0;
padding: 0;
white-space: nowrap;
width: 900px;
overflow-x: auto;
background-color: #ddd;
}
ul.images li {
display: inline;
width: 150px;
height: 150px;
}
The trick in the CSS is to set the lis to display:inline, so they are treated as characters and placed next to each other, and set white-space:nowrap on the ul so that no line breaking is done.
The scrolling is then simply overflow-x:auto and the rest is obvious. Adding prev/next buttons could be done with position:absolute, or with float:left, or whatever other method you fancy.
See demo
friends,
I decided to ask this because I've seen many answers on the internet, but no one seems to be a definitive answer.
In out HTML documents we have many elements one inside another. Eventually we'll want to add paddings and margins to these elements.
So, what if we want to have all content horizontally aligned to the center of the page? If the content has 1000px of width and the screen resolution will change from device to device, the most common solution is something like (will work on netscape based browsers):
body{
width: 100%;
}
#content{
width: 1000px;
margin: 0 auto;
}
But if we have lots of other elements inside the #content element, like a table made of DIV elements, we start to face some problems. The parent's height will not adjust to its children's height and padding and margin will not work properly (if we inspect the element we will see that the width and height is not behaving as expected) unless we add some new rules.
I use float: left but then the headache starts! When I add float: left only those elements will work fine, but the parents will not. If I add float: left to an element that already has margin: 0 auto set, it will no longer be aligned to the center of the page...
I've seen some solutions using text-align: center to the parent and display: inline-block; float: none; to the element we want to be aligned to the center. But it also has many problems (for example, we can't set the float rule)
How do you deal with this problem guys?
You need to use clear after you use float on elements in order to 'clear the floats' and make the height propagate up to its parents. You can use clear:left (or right) to just clear float:left elements but typically it's fine to just use clear:both.
In the below example there are two versions of clearfixes, one that uses a pseudo-element on the container and another that is just another element.
Demo
HTML
<div id="content">
<nav>
<ul>
<li>Home</li>
<li>Second</li>
<li>Third</li>
</ul>
</nav>
<div class="float-me">Test1</div>
<div class="float-me">Test2</div>
<div class="clear"></div>
</div>
CSS
#content {
width: 500px;
margin: 0 auto;
}
li {
float:left;
}
/* our pseudo-element clearfix */
ul:after {
display: block;
content: "";
clear: both;
}
.float-me {
float:left;
}
.clear {
clear:both;
}
I have a list of names which is rendered inside <ul>. I am applied some CSS code but facing some browser specific issues.
Chrome : List element is getting displaced by 1 row.
Firefox : All list items collapsing to one item.
Code snippet (JS bin editor)
HTML
<div id='container'>
<ul class='list'>
<li> <div class='rel'>
<div class='abs'> item 1 </div>
</div> </li>
... More items similar to above one
Css
#container {
height: 100px;
overflow-y:scroll;
width: 200px
}
.list {
background-color: skyblue;
}
.rel {
position: relative;
}
div.abs {
position: absolute;
left: 20px;
}
I want to know the reason of this misbehavior in both the browsers. Have I written wrong CSS ?
Update: With in <div class='abs'> I have a lot of code which I have not added here as it is not necessary and the content of abs div is positioned with respect to its parent i.e. <div class='rel'>
The problem is indeed the
div.abs {
position: absolute;
left: 20px;
}
This positions every element with class "abs" 20px to the left (and 0px from top) of the ul element.
What would you like to achieve? Your menu horizontally or vertically?
Horizontally: Use float:left or display:inline with a margin-left:20px;
Vertically: for a 20px margin-left:
http://jsbin.com/ediloh/17/edit
I first added margin:0px to delete the top and bottom margin of the ul element. Next I added a left margin of 20px to move it to the right.
alternative: put margin-left on the li-element instead. This will not move the circles
The divs with position:absolute are taken out of the page flow, basically causing their parent divs to have no content at all (no content amounting to any width or height that is). So they will collapse.
What outcome do you actually want. You are fixing the div.abs to be indented by 20px inside its containing div.rel.
Could you give some idea of what you are trying to achieve.
Wing
I have a div called NAV and inside of NAV I have an UL with 5 li which I float to the left, the li's that is but when I do that the NAV collapses. I know this because I put a border around NAV to see if it collapses and it does. Here is the example.
collapsed http://img401.imageshack.us/img401/8867/collapsedze4.png
no collapsed http://img71.imageshack.us/img71/879/nocollapsedkx7.png
as you can see in the first image, the links in the NAV div are floated left and that
black border ontop is the actual div called NAV.
in this image you can see how it has top and bottom border and it not collapsed.
here is some of the html and css I used.
alt text http://img301.imageshack.us/img301/5514/codejc8.png
#nav #ulListNavi a {
float: left;
}
Add any overflow value other than visible to your container:
div#nav { overflow:auto; }
Then add width to restore the width
div#nav { width: 100%; overflow:auto; }
One solution is to add a "clear:both" style to an element after the last floated anchor, for instance:
<div id="nav">
<ul id="ulListNavi">
<li>Home</li>
<li>Search</li>
<li>Flowers</li>
<li>My Account</li>
<li>Contact Us</li>
</ul>
<div style="clear:both;"></div>
</div>
This causes the containing element to clear all floating elements before closing the containing box.
A few other options for clearing floats here:
http://www.quirksmode.org/css/clearing.html
http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/
As to the best way of doing it, that's almost a holy war, the purists would freak about the extra div, if you are not fussed by a little extra markup, the addition of the cleared div as suggested by Joshua and AJ will work fine, and is a reliable technique, but there are at least 17 other ways of doing it...
add this code after your ul:
<div style="clear: both"></div>
Try floating the containing element to the left too.
Don't bother with clearing elements or overflow. Add this:
#nav {
float: left;
}
When you float the LI's, the #nav no longer "contains" anything so it collapses. But if the #nav is floated also, it contains anything floated inside it, so it expands again.
(Also consider removing the #nav div and just applying the same styles to the UL.)
Your problem is because you are floating the <A> elements, but each of them is inside an <LI> element. LIs display as blocks by default, so each <LI> is forcing it's child <A> to begin on a new line.
If you float the <LI>s, I think you'll solve your problem.
#nav #ulListNavi li {
float: left;
}
The quickest solution would be to add overflow:hidden to clear the float on the parent element:
#nav{overflow:hidden;}
Without changing your HTML:
#nav
{
width: 100%;
overflow: auto;
border: solid 1px red;
}
#ulListNavi
{
margin: 0;
padding: 0;
list-style: none;
}
#nav #ulListNavi li
{
float: left;
}
#nav #ulListNavi li a
{
margin-left: 5px;
}
Works in IE8 and FF 3.5