Centering li elements of an unordered list using CSS - javascript

My ul has a few free li elements which have images in them and I wanted to center those li elements. I tried to find the solution but am facing a hard time to figuring it out. Could you guys suggest some way of doing it. I was thinking of surrounding the ul with a div, and then centering the ul within the div. Do you think that will work? I also wanted to mention that I wanted to maintain the float left property.
Here is the code:
<ul class="thumb">
<li><img src="photos/home9.jpg" /></li>
<li><img src="photos/home1.jpg" /></li>
<li><img src="photos/home3.jpg" /></li>
<li><img src="photos/home4.jpg" /></li>
</ul>
CSS:
.thumb {
list-style: none;
width: 90%;
margin: auto;
height: 750px;
}
.thumb li {
float: left;
}
.thumb li img {
height: 200px;
width: 200px;
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
}

You need to make your li's inline-blocks, instead of float. In short, doing so will cause your li's to take up space like a block element, but behave like an inline element, which will make them follow a text-align:center; that you will want to add to your ul element. Visually, they will appear sort of like a "centered float," for lack of a better term.
Here's the CSS and a jsfiddle (http://jsfiddle.net/rgthree/RTt8g/):
.thumb {
list-style: none;
width: 90%;
margin: auto;
height: 750px;
text-align:center; /* center inline and inline-block elements */
}
.thumb li {
display:inline-block; /* no float; by making these inline-blocks they will center b/c their parent is text-align:center */
}
.thumb li img {
height: 200px;
width: 200px;
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
}

If you want to keep the float:left; then you will need to add a container div to the ul with a width and margin:auto;
Here is how:
http://codepen.io/anon/pen/jneEq
But this will only cause the ul to appear centred if you set the width exactly to the width of the images.

If you want to center the images, then you will need to add this:
ul {
text-align: center;
}
If you center the ul which is a child for the div, the ul will be placed in the center, but the li items won't be. So it would be better if you place the list items in the center, you can moreover add the margin: 0; padding: 0 to the ul too! as
ul {
margin: 0;
padding: 0;
}
I hope this way you will have the images placed in center when there is no other margins and paddings! :)
You can try all this here: http://jsfiddle.net/afzaal_ahmad_zeeshan/b29D8/

can you check this up ?
I have updated the css to use text-align: center;
.thumb li {
text-align:center;
}
http://jsfiddle.net/XZt2b/

If you have no luck with the other options, you can use:
li {
display:block;
width: 200px;
margin: 0 auto;
}
This will make sure they are always in the middle of the available space.

You also might want to remove
.thumb li {
float: left;
}
As well as consider Afzaal's answer
http://jsfiddle.net/EbCZ4/

One way to accomplish this is to set display: block; margin: auto on the <img> elements.
http://codepen.io/jessegavin/pen/jBpdo
.thumb {
list-style: none;
width: 90%;
height: 750px;
}
.thumb li img {
display: block;
margin: auto;
height: 200px;
width: 200px;
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
}

I try to make it with a little bit jquery, try it:
var totalWidth = 0;
$('.thumb > ul > li').each(function(){
totalWidth+= $(this).width();
});
$('.thumb > ul').css('width', totalWidth + 'px');
Here is full demo

Related

Draggable into Sortable as Grid

I'm trying to create using jquery a draggable list into a sortable list.
Everything works, except when using CSS to transform this list into a grid. As soon as everything is displayed as a grid, the draggable into the sortable stops to work.
My HTML is:
<ul id="sortable2">
<li class="ui-state-highlight">A</li>
<li class="ui-state-highlight">B</li>
<li class="ui-state-highlight">C</li>
<li class="ui-state-highlight">D</li>
</ul>
<ul id="sortable">
<li class="ui-state-default">1</li>
<li class="ui-state-default">2</li>
<li class="ui-state-default">3</li>
</ul>
My page SCRIPT is:
$(function() {
$("#sortable").sortable();
$("#sortable2 li").draggable({
connectToSortable: "#sortable",
helper: "clone"
});
});
And the CSS I've added to make both UL display as grid is:
#sortable {
list-style-type: none;
margin: 0;
padding: 0;
width: 450px;
}
#sortable li {
margin: 3px 3px 3px 0;
padding: 1px;
float: left;
width: 100px;
height: 90px;
font-size: 4em;
text-align: center;
}
#sortable2 {
list-style-type: none;
margin: 0;
padding: 0;
width: 450px;
}
#sortable2 li {
margin: 3px 3px 3px 0;
padding: 1px;
float: left;
width: 100px;
height: 90px;
font-size: 4em;
text-align: center;
}
Any ideas?
I'm using jquery-ui.css, jquery-ui.js and jquery.min.js.
Thanks
The reason this is occurring is because the children li elements are floated.
When an element is floated, it is essentially removed from the normal document flow, and in this case results in the parent element collapsing upon itself with a height of 0:
As a result, you can't drop elements into the #sortable element because it doesn't have a height.
The most common work-around is to use a clearfix to prevent the parent element from collapsing.
Either add overflow: auto to the container element (example):
ul {
overflow: auto;
}
or use a pseudo-element (example):
ul:after {
content: '';
clear: both;
display: table;
}
Alternatively, you could also just remove float: left from the li elements and set their display to inline-block instead. Additionally, vertical-align: top should be added to resolve a minor alignment issue when dragging the elements (example):
ul li {
display: inline-block;
vertical-align: top;
}

Subcategories in vertical navigation are hidden and not displayed properly

Can someone please tell me how to solve the problem. I recently tried to make a navigation menu for my website which opens subcategories on hover. But the problem is that the subcategory LI items are not displayed properly, they are displayed behind the other objects and are not visible. I tried to put z-index and some other solutions to fix the problem, but I havent managed to do that
Here's a picture that will show you whats the exact problem
http://s27.postimg.org/soa5vro1f/Untitled.jpg
This is the CSS and JS code i used for it, only CSS Code is here:
<style>
#menu-v li, #menu-v a {zoom:1;} /* Hacks for IE6, IE7 */
#menu-v, #menu-v ul
{
width: 180px; /* Main Menu Item widths */
border: 1px solid #ccc;
border-top:none;
position: relative; font-size:0;
list-style: none; margin: 0; padding: 0; display:block;
}
/* Top level menu links style
---------------------------------------*/
.showMe
{
z-index: 99999999999;
}
#menu-v li
{
list-style: none; margin: 0; padding: 0;
}
#menu-v li a
{
font: normal 12px Arial;
border-top: 1px solid #ccc;
display: block;
/*overflow: auto; force hasLayout in IE7 */
color: black;
text-decoration: none;
line-height:26px;
padding-left:26px;
}
#menu-v ul li a
{
}
#menu-v li a.arrow:hover
{
background-image:url(arrowon.gif);
background-repeat: no-repeat;
background-position: 97% 50%;
}
/*Sub level menu items
---------------------------------------*/
#menu-v li ul
{
position: absolute;
width: 200px; /*Sub Menu Items width */
visibility:hidden;
z-index: 9999999999;
}
#menu-v a.arrow
{
background-image:url(arrow.gif);
background-repeat: no-repeat;
background-position: 97% 50%;
}
#menu-v li:hover, #menu-v li.onhover
{
background-position:0 -62px;
}
#menu-v ul li
{
background: rgba(255, 255, 255, 0.86);
background-image:none;
}
#menu-v ul li:hover, #menu-v ul li.onhover
{
background: #eeeeee;
background-image:none;
}
/* Holly Hack for IE \
* html #menu-v li
{
float:left;
height: 1%;
}
* html #menu-v li a
{
height: 1%;
}*/
/* End */
</style>
And this is part of the ul list, the JS code is not included:
<ul id="menu-v">
<li><a class=" arrow" href=""><strong></strong></a>
<ul style="left: 180px; top: 0px; display: none;" class=" sub showMe">
<li ><i class="icon-double-angle-right"></i> Преносни компјутери</li>
<li ><i class="icon-double-angle-right"></i> Опрема за преносни компјутери</li>
<li ><i class="icon-double-angle-right"></i> Таблет компјутери (Tablet PC)</li>
</ul>
</li>
You have a couple problems here:
1. NO INLINE STYLES!
As a rule of thumb, NEVER EVER EVER EVER EVER EVER EVER put styles inline. It is hideous and hard to debug and can't be overridden easily by other CSS. One style in particular, your display:none in your submenu <ul> is causing you grief here.
2. Use display:none in your CSS for your submenu, not visibility:hidden
So to remedy this, you put it in your CSS:
#menu-v li ul
{
display:none;
/*visibility:hidden <----NO!*/
}
3. Use li:hover to show the submenu
#menu-v li:hover ul
{
display:block;
}
Voila!
JSFiddle

CSS tricky hover effect

How can I display an image or text whenever I hover over an image? Can you guys help me?
An example:
This actually isn't complicated at all... Use a similar HTML structure as below and just change the display property of the span on hover.
http://jsfiddle.net/kkxfk/2/
<ul>
<li>Link Title<span>Link Desc.</span></li>
</ul>
Use absolute positioning to position the span where you want it.
ul li a span {
display: none;
}
ul li a:hover span {
display: block;
position: absolute;
}
i used it with my own idea and get fully satisfied ,you have to make 2 images, first non-texted and second with your text and hower on them..... try it.....
<style type="text/css">
.leftPan{width:200px; float:right;; margin-top:2px}
#c1 {
margin:6px;
border: thin solid black;
width: 200px;
height: 200px;
background: url(1.jpg) no-repeat;
display: inline-block;
}
#c1:hover {
background: url(2_photo.jpg) no-repeat;
}
</style>
Use a background-image on the a element.
You can then control when it's visible with css
a:hover {
background-image: url(url/to/img);
}
Like this
html
<nav>
Räätälöity-toimitus
<img src="http://placehold.it/200x200&text=image" alt="Räätälöity toimitus" />
</nav>
css
nav {
position: relative;
display: inline-block;
}
a {
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: center;
line-height: 7;
}
a:hover {
background-image: url(http://placehold.it/50x50/E8117F/E8117F/);
background-repeat: no-repeat;
background-position: top right;
}
http://jsfiddle.net/UpGKf/

How to set dynamic width in iScroll for scroller?

In this example http://bit.ly/t2ImYS width of wrapper of all elements is fixed 8520px
#scroller {
width: 8520px;
height: 100%;
float: left;
padding: 0;}
I want width dynamic so if i add more elements inside <div id="scroller"> this #scroller should take the width upon elements inside it.
So tried to set width
#scroller {
width: 100%;}
and
#scroller {
width: auto}
but then scroller doesn't work properly.
is there a way to get width in % with properly working scroll?
Set the li elements to display:inline-block; and remove the float:left; (you could also remove the vertical-align, since that will only work on table-cell elements)
Remove the fixed width from the wrapper.
Add white-space:nowrap; to the ul
And you should be fine...
(Except in <=ie7, but I suppose that's no problem in your case?)
#scroller li {
display: inline-block;/* changed */
/*float:left; */ /* deleted */
padding: 0 10px;
width: 120px;
height: 100%;
border-left: 1px solid #CCC;
border-right: 1px solid white;
background-color: #FAFAFA;
font-size: 14px;
}
#scroller ul {
list-style: none;
display: block;
float: left;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
text-align: left;
white-space:nowrap; /* added */
}
#scroller {
/* width: 8520px; */ /* deleted */
height: 100%;
float: left;
padding: 0;
}
If you are using iScroll4 you should refresh the scroller or destroy and recreate it.
Excerpt from here:
"iScroll needs to know the correct dimensions of both the wrapper and the scroller. They are computed the first time at start up but if your code changes the elements size, iScroll needs to be warned that you are messing with the DOM."
Using Display:inline-block
and using percentages worked for me:
#scroller li {
height: 100%;
width: 2%;
display: inline-block;
}
#scroller ul {
list-style: none;
display: block;
float: left;
width: 100%;
height: 100%;
}
#scroller {
width: 5000%;
height: 100%;
float: left;
}
Try calling the iscroll refresh() method after adding dynamic items within the scroller to set the width.
try this css code, it worked for me: http://jsfiddle.net/manseuk/r9VL2/2/
#wrapper {
z-index:1;
width:100%;
background:#aaa;
overflow:auto;
}
#scroller {
z-index:1;
/* -webkit-touch-callout:none;*/
-webkit-tap-highlight-color:rgba(0,0,0,0);
width:100%;
padding:0;
}
#scroller ul {
list-style:none;
padding:0;
margin:0;
width:100%;
text-align:left;
}
#scroller li
{
background-color: White !important;
padding:0 10px;
height:40px;
line-height:40px;
border-bottom:1px solid #ccc;
border-top:1px solid #fff;
background-color:#fafafa;
font-size:14px;
}

Lite-Javascript Gallery - Can I position the img absolutely in relationship to the <li>s?

I have a lite-javascript run image gallery. The javascript grabs each <img> element in the list and places it as a background in the parent <li> element. Then the CSS styles the thumbnails as small blocks with a defined height/width. A click-event for each <li> object toggles its child’s <img> element’s visibility and adds an “active” class name to the <li>. Using CSS, I'm trying to place the <img> absolutely to make it appear at the same position for each thumb, but it's moving in relation to the thumbs.
Here's the CSS:
#jgal li {
background-position:50% 50%;
background-repeat:no-repeat;
border:solid #999 4px;
cursor:pointer;
display:block;
float:left;
height:60px;
width:60px;
margin-bottom:14px;
margin-right:14px;
opacity:0.5;
}
#jgal li img {
position:absolute;
top:0px;
left:210px;
display:none;
}
And the site: http://www.erisdesigns.net
Thanks in advance for any help!
if you want the <img> to appear at the same position:
#jgal {
list-style: none outside;
margin-top: 30px;
position: relative;
width: 200px;
}
#jgal li {
background-position: 50% 50%;
background-repeat: no-repeat;
border: 3px solid #999999;
cursor: pointer;
display: block;
float: left;
height: 60px;
margin: 0 14px 14px 0;
opacity: 0.75;
position: static; // Need to specify static since you have style li { position: relative; } inside another css file
width: 60px;
}
#jgal li img {
border: medium none;
display: none;
left: 300px;
position: absolute;
top: 0;
}
If you want img to be shown near the thumb - change position: static; to position: relative; for #jgal li {
position:absolute elements base their positioning to the closest parent element with position:relative
If you want the image to be relative to the <li>'s position, all you should need to do is add position:relative; to the #jgal li.
If you want to position it relative to #jgal, you can apply the position:relative there instead, and make sure the #jgal li is position:static (which is default, unless you are overriding it somewhere)

Categories

Resources