I struck up with CSS issue. I have a situation as below
<div>
<ul>
<li> <img src="a.jpg" ></li>
<li> <img src="a.jpg" ></li>
<li> <img src="a.jpg" ></li>
<li> <img src="a.jpg" ></li>
</ul>
</div>
I want to center all my UL tag, but images has to be left align.
I am getting images as center, when I use text-align: center. But, last image in ul is displaying in center which I don't want to display.
Can any one helps me?
Thanks in Advance.
Write like this:
div{text-align:center}
ul{
display:inline-block;
*display:inline;/* for IE7 */
*zoom:1;
text-align:left;
}
try something like this
HTML
<div id="menu">
<ul>
<li><span></span>Add Some Text</li>
<li><span></span>Add Some Text</li>
<li><span></span>Add Some Text</li>
<li><span></span>Add Some Text</li>
<li><span></span>Add Some Text</li>
</ul>
</div>
CSS
#menu li {
clear: left;
}
#menu li a {
padding: 5px 0 0 40px;
display:block;
}
#menu li span {
float: left;
display: block;
height: 32px;
width:32px;
background: url(images/icon.png) no-repeat;
}
Calling the icon image by using a span tag then having control over your text and icon image through your css is the way to go. Of course you can remove the text
Here's the example http://jsfiddle.net/DUjfd/
Related
How do I to align the last line in left, keeping the first line alignment?
this code:
<ul style="position:inline-block; text-align:center; width:120px; background-color:green; margin:0; padding:0;">
<img src="http://img2.timeinc.net/instyle/images/2011/GalxMonth/2012-Charlize-Theron-400.jpg" width="33px">
<img src="http://img2.timeinc.net/instyle/images/2011/GalxMonth/2012-Charlize-Theron-400.jpg" width="33px">
<img src="http://img2.timeinc.net/instyle/images/2011/GalxMonth/2012-Charlize-Theron-400.jpg" width="33px">
<img src="http://img2.timeinc.net/instyle/images/2011/GalxMonth/2012-Charlize-Theron-400.jpg" width="33px">
<img src="http://img2.timeinc.net/instyle/images/2011/GalxMonth/2012-Charlize-Theron-400.jpg" width="33px">
</ul>
http://jsfiddle.net/vinoli/59cLmvxo/
You can target the last item of the list, exemple :
html:
<ul class="myList">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
css:
ul.myList li { background-color: #ff0000; }
ul.myList li:last-child { background-color: #00ff00; }
Just put the css you want for each case.
fiddle
Add an id to your tag such as to reference it directly in your styles.css then use the align left as you would normally.
Alternatively, you could just put in an inline style for just that item specifically instead of just your ul. Like this:
<il style="position:inline-block; text-align:left; width:120px; background-color:green; padding:5px;">
<img src="http://img2.timeinc.net/instyle/images/2011/GalxMonth/2012-Charlize-Theron-400.jpg" width="33px">
</il>
It's li tag and not il and please don't use inline style instead of css file. You can dispose a line with centered images and a line with images align to the left like:
ul {
position:inline-block;
width:120px;
background-color:green;
padding:5px;
list-style: none;
}
.align-left: {
text-align: left;
}
.align-center {
text-align: center;
}
img {
width: 33px;
display: inline-block;
}
<ul>
<li class="align-center">
<img src="http://img2.timeinc.net/instyle/images/2011/GalxMonth/2012-Charlize-Theron-400.jpg">
<img src="http://img2.timeinc.net/instyle/images/2011/GalxMonth/2012-Charlize-Theron-400.jpg">
<img src="http://img2.timeinc.net/instyle/images/2011/GalxMonth/2012-Charlize-Theron-400.jpg">
</li>
<li class="align-left">
<img src="http://img2.timeinc.net/instyle/images/2011/GalxMonth/2012-Charlize-Theron-400.jpg">
<img src="http://img2.timeinc.net/instyle/images/2011/GalxMonth/2012-Charlize-Theron-400.jpg">
</li>
</ul>
Got an issue in ie7!, see the image below for how the dropdown menu looks. This works fine in every other browser but in ie7, as soon as you venture outside of the main li 'i.e.: the top link' the menu dissapears. I have already checked setting red boxes around everything and the li element is extending correctly to contain the sub menu but I cannot fix it. Any ideas?
Example of markup:
<nav>
<ul class="clearfix">
<li class="dropdown-link">Top Link
<ul class="clearfix dropdown-holder">
<li>
<div class="arrow"></div>
<div class="dropdown-holder-inner">
<ul class="dropdown">
<li>Link</li>
<li>Link</li>
<li>Linky</li>
<li>Link</li>
<li>Link</li>
<li class="last-child">Link</li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
</nav>
CSS is quite heavy so I have put the Full Code on jsfiddle: http://jsfiddle.net/n2kgX/3/
image: http://i.stack.imgur.com/k24Du.png
I create a sample here: http://jsfiddle.net/jho1086/bbULV/5/, I change the html code and css a little bit because in my opinion container are too many. And I change the HTML5 tag (<nav>) because IE8 and below is not supported with HTML5, unless you have a fixed.
<div id="nav">
<ul class="clearfix sf-menu">
<li class="dropdown-link">Top Link
<div class="clearfix dropdown-holder">
<div class="arrow"></div>
<ul class="dropdown clearfix">
<li>Link</li>
<li>Link</li>
<li>Linky</li>
<li>Link</li>
<li>Link</li>
<li class="last-child">Link</li>
</ul>
</div>
</li>
</ul>
</div>
css
#nav { background:#6B6C6E; width:300px; margin:30px auto 0;}
.sf-menu li{float:left; font:12px/1em 'arial'; position:relative; padding:0 0 5px;}
.sf-menu li a{float:left;padding:12px 10px 5px;color:#fff; text-transform:uppercase;}
.sf-menu .dropdown-holder{
position:absolute;
left:-999em;
width:218px;
top:93%;
}
.sf-menu li:hover .dropdown-holder {left:-999em;}
.sf-menu li:hover .dropdown-holder {left:0;}
.arrow { background:url(arrow.png) no-repeat left top; width:32px; height:8px; position:relative; z-index:2; left:10px;}
.dropdown {
box-shadow:0 0 5px #bec2c8;
background:#fff;
height:100%;
position:relative;
z-index:1;
padding:10px 10px 5px;
}
.sf-menu .dropdown li{text-transform:capitalize; border-bottom:1px solid #ccc;}
.sf-menu .dropdown li.last-child { border:0;}
.sf-menu .dropdown a{
float:left;
padding:5px 0;
width:198px;
color:#333;
}
Hope it helps.
I have a feeling that Your example is overcomplicated.
This is the simplest implementation of nested menu (with hover) I know of:
<ul class="outer">
<li>
<p>TOP MENU</p>
<ul class="inner">
<li>link1</li>
<li>link2
<ul class="inner">
<li>link2.1</li>
</ul>
</li>
<li>link3</li>
</ul>
</li>
</ul>
With a little bit of css:
.outer {
border: 1px solid red;
width: 100px;
}
.inner {
display: none;
}
.inner li {
padding: 0 0 0 10px;
}
.outer li:hover > .inner {
display: block;
}
Tested on IE8 (in IE7 mode with IE7 Standards). Check here: http://jsfiddle.net/BUuyV/11/
Here is what you can do:
<!--[if lte IE 7]>
<style type="text/css">
nav ul li:first-child ul.dropdown-holder{
left: 0px;
top:-4px;
}
</style>
<![endif]-->
Note: For :first-child to work in IE8 and earlier, a <!DOCTYPE> must be declared.
I am currently working with a bottom navigation bar for a test site. The problem is that the navigation bar does not center properly. I have added the .left attribute to keep each block list beside each other. How can I get this bottom navigation bar to center automatically(no matter the amount of lists added)? Example
CSS related to bottom navigation
<style>
.bottomnavControls {
padding-top:10px;
padding-bottom:10px;
padding-right:0;
text-decoration:none;
list-style:none;
}
#footer {
position: absolute;
width: 100%;
bottom: 0;
background: #7a7a7a;
border-bottom: 15px solid #000;
}
.left {
float: left;
}
.right {
float: right;
}
</style>
HTML
<div id="footer">
<div class="bottomNav">
<ul class="bottomnavControls left">
<li style="padding-bottom:5px;"><b>Home</b></li>
<li>Login</li>
</ul>
<ul class="bottomnavControls left">
<li style="padding-bottom:5px;"><b>Category</b></li>
<li>Games</li>
</ul>
<ul class="bottomnavControls left">
<li style="padding-bottom:5px;"><b>About</b></li>
<li>Who We Are</li>
</ul>
<ul class="bottomnavControls left">
<li style="padding-bottom:5px;"><b>Links</b></li>
<li>Google</li>
</ul>
<ul class="bottomnavControls left">
<li style="padding-bottom:5px;"><b>Other Stuff</b></li>
<li>Stuff</li>
</ul>
</div>
</div>
My current Bottom navigation:
My desired outcome:
Instead of float, you should use display: inline-block here. This way, you can easily center them by putting text-align: center on the container.
.bottomNav { text-align: center; }
.bottomnavControls { display: inline-block; }
and remove left class.
Note: display: inline-block works fine in modern browsers, but it needs a hack in IE7.
I have the following structure in some HTML:
<ul class="li_inline">
<li>
<ul class="li_block">
<li>Stuff</li>
<li>Stuff under stuff</li>
</ul>
</li>
<li>
<ul class="li_block">
<li>Stuff</li>
<li>Stuff under stuff</li>
</ul>
</li>
</ul>
With the CSS like this:
.li_inline li
{
display: inline;
}
.li_block li
{
display: block;
}
What I would like to happen is to have the two inner <ul>s side by side, but any <li>s inside them to be below each other. This is so I can get a sidebar and main body side by side, but elements inside them behave normally (ie. one below the other).
Can someone suggest some CSS I can use so that the inner (li_block) lists' <li> elements are displayed as block elements, but the <ul>s themselves are displayed side by side?
Thanks,
James
Use a reset rule.
ul ul { list-style:none; padding: 5px 20px; margin: 5px 10px; }
In your case using the !important can get your job done. But try not to use it
UPDATE
Solution: http://jsfiddle.net/Starx/KHjmP/ (FF3+, Safari 4+, IE8+)
it ain't pretty but you get the jist of it :)
<div style="overflow: hidden;">
<ul class="li_block" style="float: left;">
<li>Stuff</li>
<li>Stuff under stuff</li>
</ul>
<ul class="li_block" style="float: left;">
<li>Stuff</li>
<li>Stuff under stuff</li>
</ul>
</div>
This worked for me:
<html>
<head>
<style type="text/css">
ul.outer{}
ul.outer > li{
float: left;
}
ul.outer > li > ul > li{
display: block;
}
</style>
</head>
<body>
<ul class="outer">
<li>
<ul>
<li>1.1</li>
<li>1.2</li>
</ul>
</li>
<li>
<ul>
<li>2.1</li>
<li>2.2</li>
</ul>
</li>
</ul>
</body>
</html>
You should be able to do something as simple as the following. I tested it in Firefox, Chrome and IE7.
.li_inline > li {
display: inline;
}
.li_inline > li > ul {
float: left;
}
http://jsfiddle.net/fzBnG/
.li_inline li {
display: inline-block;
float: left;
}
.li_block li {
display: block;
clear:both;
}
First, thanks for everyone's help! I'm really sorry to look like I'm ignoring your hard efforts away, but I have taken note of all your answers, and they're all very handy.
The solution I have come up with is to simply use display: inline-block for both inner uls, with the outer one left default.
Once again, thanks for your help everyone.
James
I have an outer div, and inside of that, I have an inner div which contains a list of images. When the images are wider than the outer div, I want to have it scroll horizontally, but instead, it just puts the image on the next line instead of expanding. If I add many rows, the div does scroll vertically, but horizontally, it doesn't do it. This happens on every browser I've tried - Firefox, Chrome, IE, and Safari.
Here is the css:
#grid-container { left:33px; position:relative; width:300px; }
#grid { width:310px; height:400px; overflow:auto; margin-bottom: 15px; }
#grid-container ul { width:305px; }
#grid-container li { float:left; list-style-type:none; padding:5px 15px 5px 15px; height:88px; text-align:center; }
.image-row { float:left; margin-left: 10px; }
.grid-image { height:50px; margin-left:-20px; }
Here is the html:
<div id="grid-container">
<div id="grid">
<div id="row1" class="image-row">
<ul>
<li>
<img id="img1" class="grid-image" src="images/img1.jpg">
</li>
<li>
<img id="img2" class="grid-image" src="images/img2.jpg">
</li>
<li>
<img id="img3" class="grid-image" src="images/img3.jpg">
</li>
<li>
<img id="img4" class="grid-image" src="images/img4.jpg">
</li>
</ul>
</div>
<div id="row2" class="image-row">
<ul>
<li>
<img id="img5" class="grid-image" src="images/img5.jpg">
</li>
<li>
<img id="img6" class="grid-image" src="images/img6.jpg">
</li>
</ul>
</div>
</div>
</div>
The problem is img4 is showing on the second row (with img5 and img5 on the third row), even though it should on the first row and the grid div should scroll horizontally. It does scroll vertically. Can I force the div to expand? If I remove the width from the grid div, I do get the horizontal scroll bar, but the image is still on the second row.
Will this do? I simplified it somewhat.
CSS (you can remove the borders, they are just so you can see what is happening):
#grid-container {position: relative; width: 300px; height: 400px; overflow: auto; border: 1px red solid;}
#grid {border: 1px blue solid;}
#grid ul {height: 40px; list-style-type: none; white-space: nowrap; padding: 0; margin: 0; border: 1px green solid;}
#grid ul li {display: inline; padding: 0; margin: 0;}
#grid ul li img {height: 50px;}
HTML:
<div id="grid-container">
<div id="grid">
<ul>
<li><img src="testimage.jpg"></li>
<li><img src="testimage.jpg"></li>
<li><img src="testimage.jpg"></li>
<li><img src="testimage.jpg"></li>
<li><img src="testimage.jpg"></li>
<li><img src="testimage.jpg"></li>
</ul>
<ul>
<li><img src="testimage.jpg"></li>
<li><img src="testimage.jpg"></li>
<li><img src="testimage.jpg"></li>
</ul>
</div>
</div>
You need to put a white-space:nowrap; on the UL and LI tags. You also need the LI elements to be display inline rather than floating them.
CSS:
#grid-container { left:33px; position:relative; width:300px; }
#grid { width:310px; height:400px; overflow:auto; margin-bottom: 15px; }
#grid-container ul { width:305px; }
#grid-container li {
display:inline;
list-style-type:none;
padding:5px 15px 5px 15px;
height:88px;
margin:0;
text-align:center;
}
ul, li{
white-space:nowrap;
}
HTML:
<div id="grid-container">
<div id="grid">
<div class="image-row">
<ul>
<li>
<img id="img1" class="grid-image" src="test.jpg" />
</li>
<li>
<img id="img2" class="grid-image" src="test.jpg" />
</li>
<li>
<img id="img3" class="grid-image" src="test.jpg" />
</li>
<li>
<img id="img4" class="grid-image" src="test.jpg" />
</li>
</ul>
</div>
<div class="image-row">
<ul>
<li>
<img id="img5" class="grid-image" src="test.jpg" />
</li>
<li>
<img id="img6" class="grid-image" src="test.jpg" />
</li>
</ul>
</div>
This works in latest versions of IE, FF, Safari and Chrome.
try this:
#grid-container li {
display: inline;
list-style-type:none;
padding:5px 15px 5px 15px;
height:88px;
text-align:center;
white-space: nowrap;
}
You're already on the right path: Your approach to set "float: left;" on the <li>s, in combination with setting "width: 305px" on the <ul>s should basically work to avoid float dropping.
However, a few things to check:
Are 305px really enough? (It must be at least as large as the combined width of the elements in row 1, including margins, paddings and borders) Try setting it to a much larger value. overflow: auto won't help, since the floats will always wrap instead of causing an overflow. Setting a large enough width works perfectly for me (at least in my own example).
Other things to try:
Try it without floating ".image-row".
Try setting a width on the images.
You have the id "row1" twice in your HTML - that's invalid.