I have a pagination output which is show within . An example is posted here: http://jsfiddle.net/6N4bD/1/
The ul is wrapped around 2 divs
1st div is 550 width
2nd div called "paginationDiv" basically wraps the ul around
The ul has list-style: none. What I am trying to do is make it float right, but it keeps appearing as a block. I have tried quite a few things but nothing seems to work. If I add a width to the paginationDiv then it works but it's not accurate because it will never be fixed width
Here is what it looks like:
<div class="parentDiv">
<div class="paginationDiv">
<ul id="paginationLinks">
<li>Page 1</li>
<li>Page 2</li>
</ul>
</div>
</div>
That's the html code
Here is the css:
div.parentDiv {
width: 550px;
}
div.paginationDiv {
float: right;
}
#paginationLinks ul {
border: 0;
padding: 0;
margin: 0;
}
#paginationLinks li {
list-style: none;
}
I have posted an example here: http://jsfiddle.net/6N4bD/1/
What seems to work is adding display: inline; to the li elements.
http://jsfiddle.net/XFdqT/ has a demo of this.
give float:left to #paginationLinks li and then see the result
Related
I have created a menu using ul and li, but it shows me in reverse order. For example:
FAQ PRICING TOUR HOME instead of the expected HOME TOUR PRICING FAQ
.header ul {
}
.header li {
list-style-type: none;
margin-left: 40px;
float: right;
}
<div class="header">
<ul>
<li>HOME</li>
<li>TOUR</li>
<li>PRICING</li>
<li>FAQ</li>
</ul>
</div>
What's wrong in my code?
You should float only the ul right. The list items should be floated left in the correct (expected) order:
.header ul {
float:right;
}
// expected order. It's the default value if not overriden,
// therefore it is not realy needed
.header li
{
float:left;
}
Instead of taking float right take it as left then you will get the result HOME TOUR PRICING FAQ
To understand it let us see :
Here you are trying to print HOME TOUR PRICING FAQ and if you will float this to the right it means you are telling to print from right and that's why it gives you the output as
FAQ PRICING TOUR HOME so that's why we use float: left;
.header ul
{
}
.header li
{
list-style-type: none;
margin-left: 40px;
float: left;
}
<div class="header">
<ul>
<li>HOME</li>
<li>TOUR</li>
<li>PRICING</li>
<li>FAQ</li>
</ul>
</div>
DEMO
It's because you're floating each list element right.
Set float: right on the parent element instead.
.header ul {
float: right;
}
There are various other solutions, see here
Here's a demo
The reasons seems to be the float element. When you give float:right, it takes the first element to the right most side and rest of the items after that. However if you give float:left, the items seems to come in correct order with positioning the first item in the left and rest of the items after that.
try something like this
.header ul {
float: right;
}
.header li {
list-style-type: none;
margin-left: 40px;
float: left;
}
Reason
you are floating li element to right so instead float it to left.
float li parent element ie ul to left.
Here is my code: http://jsfiddle.net/DFN5y/
As you can see the list items on the right are on the line below. Can anyone please tell me how to remedy this? This is my code:
<ul id="nav">
<li>Features</li>
<li>Pricing</li>
</ul>
<ul id="nav" style="float:right;">
<li>Sign up</li>
<li>Login</li>
</ul>
You could set them inline by making ul as inline-block element
ul {
display: inline-block;
}
but you have two nav's and duplicate id's so look at the example below and try to follow that style in future coding
<ul id="nav">
<li>Features</li>
<li>Pricing</li>
<li class="right">Sign up</li>
<li class="right">Login</li>
</ul>
#nav li {
display: inline-block;
padding-left: 40px;
}
.right{
float: right;
}
or you could float them without class e.g.
#nav li:nth-child(3),
#nav li:nth-child(4) {
float: right;
}
or even simpler by moving just third element e.g.
#nav li:nth-child(n+3) {
float: right;
}
FIDDLE
your #nav is having 100% width and does not have float, thats why its taking complete space till right edge.
#nav {
float: left;
padding-left: 100px;
}
Fiddle
Try:
ul li {
display: block;
float:left;
padding-left: 40px;
}
Just add this to your CSS :
ul{ display : inline-block;}
And please change the id's of your ùl`tags so that they are different ! Id's should be unique on the page.
Have a look at this fiddle.
Basically i have changed the original in 4 ways:
replaced the id nav, which had been issued twice, by a class of the same name
distinguished between the first and the second nav-ul in css formatting
moved the style dfinitions from the element attribute to the css (somehow the float rule messed up teh alignment)
all nav-ul being displayed as inline-block to assue verticla alignment.
You'd be better off adding them all to the same ul element and then using the :nth-child pseudo-selector to add additional padding to the middle elements to create the separation you want.
http://jsfiddle.net/DFN5y/17/
ul li:nth-child(3){
padding-left: 20%;
background: red;
}
I want to place some text to the right of blue ribbon so that it would be on the same line with already existing elements. All my attempts to try doing that causes text occuring on the next line.
What can you recommend?
Here is the code: (JSFiddle)
HTML
<div id='ribbon'>
<ul id='topMenu'>
<li>Thing one</li>
<li>Thing two</li>
<li>Thing three</li>
</ul>
</div>
CSS
#topMenu {
height: 35px;
margin: 0; padding: 0;
}
#topMenu a {
color: black;
}
#topMenu li {
padding: 0 10px 0 10px;
float: left;
list-style-type: none;
}
#topMenu li:hover {
color: white;
background-color: #00D0FF;
}
UPD: But if I need that text not to be <li> element? I mean, not to use general <li> stylesheet.
You can use nth-of-type pseudo and float the elements to the right, for example
#topMenu li:nth-of-type(2), #topMenu li:nth-of-type(3) {
float: right;
}
Demo
Or you can simply use
#topMenu li:last-child {
float: right;
}
To shift the last li to the right. Also make sure you clear your floating elements nested inside ul, you can use a self clearing class like -
.clear_self:after {
content: "";
display: table;
clear: both;
}
So that it doesn't mess up your document flow. Just call that class on the ul element, i.e container element holding floated elements.
Also, you can alternative call classes on the li element which you want to float to the right of the ribbon, but incase if you don't want to increase your markup, you can use pseudo here..
As per your update
Demo 2
Explanation: Float your entire ul element to the left, and this will create an empty space on the right, so that the next div will shift to right cuz we are using float: right;, also make sure you clear your floating elements, else, the next div will sit right in the empty space, for more info on clearing floats, you can read my answer here..
Check out my fiddle. You needed to add float right to the last li. I separated it with a class of .last
#topMenu li.last{float:right;}
http://jsfiddle.net/9GGLE/2/
If you are trying to float another element, sibling of #ribbon, you can check out this jsFiddle
.floated { float:right; margin-top:-30px; /* this is to overcome height+padding of the ribbon */ }
I have following html for menu
<ul>
<li id="btnHome">Link One</li>
<li id="btnAbout">Link Two</li>
<li id="btnContact">Link Three</li>
<li id="btnLinks">Link Four</li>
</ul>
and following is my css for it
ul {
margin: 0;
padding: 0;
}
ul li {
list-style-type: none;
}
#nav {
background: #999;
padding: 2%;
}
#nav ul li {
float: left;
margin-right: 2%;
}
I use above for IE6 and 7 in order to display links in a single row. float: left displays menu items in a row but it also changes the style for #nav div and menu items do not appear inside #nav div anymore.
How can I fix this issue for IE6 and 7?
Note: I am using display: inline-block for modern browser and this works fine.
You could use a CSS declaration like zoom: 1; for #nav element to trigger hasLayout on IE 6-7.
#nav {
background: #999;
padding: 2%;
*zoom: 1;
}
Note: The star/asterisk prefix is a CSS hack for targeting IE 6/7.
Other options
Using overflow: hidden; for the #nav element to create a new block formatting context.
Creating an element with clear: both; CSS declaration as the last child of the #nav element.
You might want to take a look at Nicolas Gallagher's micro clearfix hack.
Not sure without the rest of the document but you could try adding a
<div style="clear:both;"></div>
right after your close your ul element, that should grow the size of your containing #nav to the place your floated content occupies in it.
So what I need help with, is how do I remove the newline after a <li> and or <ul>
This is my css:
#ranks li {
background: url(/img.png) no-repeat top left;
}
#ranks .sprite-admin{ background-position: 0 0; width: 157px; height: 44px; }
#ranks .sprite-banned{ background-position: -207px 0; width: 157px; height: 44px; }
and this is the html:
<ul id="ranks"><li class="sprite-admin"></li></ul>
It all works well while only one of the <ul id ="etc"> is there, but if there are multiple, it will make a new line and 'stack' them.. is it possible to make them not stack, and just go left to right?
Thanks
EDIT:
Demo : /removed/
You have a few options:
#ranks li {
float: left;
}
This will float all of your list items to the left, without wrapping, until horizontal screen space is no longer available. Alternatively,
#ranks li {
display: inline-block;
}
Which will also put your elements side-by-side, but handle them as bock level elements. If you don't care about block-level styling, you could go with straight inline-display:
#ranks li {
display: inline;
}
Which will treat the list items like any other inline element (such as <span> or <a>).
There are some other inherent styles that exist on list items, as well as their list parent, that you may need to do away with. Be sure to check out margin, and padding.
Demo: http://jsbin.com/iconud/edit#html,live
Look Out Ahead!
You may find that there is an unsightly gap between your list items when they're positioned side-by-side. This is a common problem with inline-lists. One solution is to remove the newline space between closing and opening list item tags:
<ul id="ranks"><li>
Index</li><li>
Contact</li><li>
Portfolio</li>
</ul>
Or have them all inline, a little less discernible:
<ul id="ranks">
<li>Index</li><li>Contact</li><li>Portfolio</li>
</ul>
This is a little tough on the eyes. With HTML, since closing tags aren't always required, you can also leave off the closing tag (though this makes me a bit nervous):
<ul id="ranks">
<li>Index
<li>Contact
<li>Portfolio
</ul>
Multiple Lists Inline Too!
From some of the OP's comments, it appears they might be trying to get not only list items inline, but lists themselves. If that's the case, apply the same aforementioned rules to the lists themselves:
#ranks,
#specs {
margin: 0;
padding: 0;
display: inline-block;
}
#ranks li,
#specs li {
display: inline-block;
border: 1px solid #CCC;
padding: 5px 10px;
}
Here were have identified two sets of rules using selectors that search for id's, and then tags. You could simplify this by apply a common class to the lists, or by basing the selectors off of a common parent element. Next is the markup:
<ul id="ranks">
<li>Index</li>
<li>Contact</li>
<li>Portfolio</li>
</ul>
<ul id="specs">
<li>Foo</li>
<li>Bar</li>
</ul>
This results in both lists, and their items, being displayed in a horizontal fashion.
Demo: http://jsbin.com/iconud/2/edit
with some css
<style type="text/css">
#ranks li { display:block; float:left; }
</style>
updated as comments: with display:block
ul li{ display:inline;} do the trick?
<li> by default is display:block;
if you give it display:inline; or diplay:inline-block; that should remove the linebreak
This is a basic example of horizontal UL's
HTML
<ul id="list">
<li class="item">Item 1</li>
<li class="item">Item 2</li>
<li class="item">Item 3</li>
</ul>
<span class="clearFloats">
CSS
.item {
float: left;
}
.clearFloats {
clear: both;
}
JSFiddle Example: http://jsfiddle.net/peterf/DEUBf/
Another option is to set font-size: 0 in the ul, then restore the desired font-size in the li tags. I prefer this as it's contained within the ul tag, doesn't need further hacks like clear:both, and explains better what the styling is meant to do (hide anything not inside a list item).
ul {
list-style-type: none;
font-size: 0;
}
li {
display: inline-block; /* Or inline, as you like */
font-size: 16px;
}