I am using float right to make two links appear on the right of every list item. But they do not stick to the right side for all the list items, causing it to appear like a step. I have tried a lot of combinations from various answers on SO for about 4 days. Nothing seemed to work.
I asked this question, two days ago on SO, and did not get any response, probably because it had JSF code. So I have stripped down the html generated to the minimal code that replicates this issue.
https://jsfiddle.net/9g5h6687/10/
.labelTitleBox {
overflow: hidden;
width: 100%;
display: inline;
}
.layerPanelButton {
font-size: 18pt !important;
text-decoration: none;
color: #0092cf !important;
}
.layerPanelButtonWrap {
width: auto;
float: right;
padding-left: 4px;
padding-right: 4px;
color: #0092cf !important;
}
.label {
width: auto;
display: inline;
white-space: normal;
}
<div id="form:layerTree" class="ui-widget-content">
<ul>
<li id="form:layerTree:0">
<span class="label">
<span class="layerPanelButtonWrap">%</span>
<div class="labelTitleBox">Node 0</div>
</span>
<ul class="">
<li id="form:layerTree:0_0">
<span class="label">
<span class="layerPanelButtonWrap">=</span>
<span class="layerPanelButtonWrap">%</span>
<div class="labelTitleBox">Node 0.0</div>
</span>
</li>
<li id="form:layerTree:0_1">
<span class="label">
<span class="layerPanelButtonWrap">=</span>
<span class="layerPanelButtonWrap">%</span>
<div class="labelTitleBox">Node 0.1</div>
</span>
</li>
<li id="form:layerTree:0_2">
<span class="label">
<span class="layerPanelButtonWrap">=</span>
<span class="layerPanelButtonWrap">%</span>
<div class="labelTitleBox">Node 0.2</div>
</span>
</li>
</ul>
</li>
</ul>
</div>
You need to clear the floats because the font size of the floated items are larger than the line-height of li so they stack on each other
ul ul {clear:right;}
li:after {display:block; clear:right; content:'';}
Updated fiddle
Also, nothing to do with the problem but you have invalid html in your answer - div is not allowed to be a child element of a span
It is the wrapping element's height that causes the indent of the floating elements.
If you add a height the spans will float right as expected.
li {
height:50pt;
}
This will not fix your list completly, but it could point you in the right direction.
https://jsfiddle.net/9g5h6687/13/
Related
At the moment, I've just been manually defining the widths of my elements when hovered (view-source from this site: http://plotme.worldcretornica.com)
I've been trying a lot to make them auto width, like they would with this fiddle
Heres what I've been trying to do (it uses font-awesome),
HTML:
<nav>
<ul>
<li>
<span class="description">Download portal</span>
</li>
<li>
<span class="description">Join the discussion at Spigot</span>
</li>
<li>
<span class="description">Read what PlotMe is about</span>
</li>
<li>
<span class="description">Report an issue or request a new feature</span>
</li>
<li>
<span class="description">Commands and Permissions</span>
</li>
<li>
<span class="description">Configurations explained</span>
</li>
<li>
<span class="description">How to setup/upgrade PlotMe</span>
</li>
<li>
<span class="description">PlotMe Stats</span>
</li>
<li>
<span class="description">Fork me on GitHub!</span>
</li>
</ul>
</nav>
CSS:
#hover {
display: none;
}
#hover:hover span {
display: table;
margin: 0px auto;
border-radius: 5px;
padding: 5px 10px 5px 10px;
background: #f0f0f0 no-repeat 100% 5%;
margin-top: 15px;
position: absolute;
top: 85px;
text-decoration: none;
color: gray;
}
Anyone have a suggestion on how I make the spans auto width?I'm trying to learn, so please be gentle. Thanks!
Add this to your span
#hover:hover span {
white-space: nowrap;
display: inline-block;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
This will make the span auto center in the holder "a".
Note that for this to work you need to have the span with position absolute and the holder "a" with position relative.
You can ask the browser to prevent the white space to wrap as next line.
#hover:hover span {
white-space: nowrap;
}
Output:
try display:block;, padding:any_value; and overflow:hidden; or wrp this in a invisible wide element and use text-align:center (for centring pourposes)
I'm creating a website using my own design, and I had a complication recently. It's about the way the menu style is positioned. I find this problem hard to explain, so firstly, I'll show the images.
It should look like:
http://i.imgur.com/XINIlXC.jpg
It looks like:
http://i.imgur.com/RKrFZVz.jpg
As you can see, It's a simple horizontal menu with seperators between menu items, but the tricky part is the corner. In the image where everything works perfectly, I use a messy code, that's not compatable with lists, which I will need for drop-down menus later.
So, this is the messy code:
<div class="menu" id="menu-item">
<img src="images/top_menu_edge.png" style="margin-left:-23px;"/> <span style="margin-right:10px"> 1aaaa <span class="ms"></span> 2bbbb <span class="ms"></span> 3 </span>
</div>
The span.ms is just the menu seperator. As for all the other parts, I'm gonna show a css code.
#menu-item
{
position: absolute; /* The absolute position shouldn't be a problem, because everything is contained in div#header, and it's position is relative. */
bottom: 12px;
right: 0;
height: 34px;
background-position: bottom right;
z-index: 5;
color: #192c51;
}
.menu
{
position: absolute;
bottom: 0;
right: 0;
height: 34px;
background-image: url('images/top_menu_bg.png');
background-position: bottom right;
z-index: 5;
color: #192c51;
}
And this is the code that's fixed up, but for some reason, the image is not working:
<div class="menu" id="menu-item">
<div class="menu-item">
<img src="images/top_menu_edge.png" style="margin-left:-23px;"/>
<ul id="nav">
<li> Pagrindinis </li>
<li> Apie mus </li>
<li> Paslaugos </li>
<li> Kontaktai </li>
</ul>
</div>
</div>
And the extra css lines for ul and li:
#nav
{
list-style:none;
float:left;
}
#nav > li {
float: left;
}
#nav li+li
{
background:url('images/top_menu_sep.png') no-repeat top left;
padding-left:10px;
}
That's pretty much it, and I don't really get it why the tag ruins it all, yet I need it to do it. Does anyone have any subjections, how to fix it, or could show me the way? I'd be really thankful.
Cheers :)
If you give elements float, they will not have width if you place a non-float element nexto it. Remove all the floats and switch to display: inline-block or give everything float
Image Sprites, by themselves, are not evil; however, trying to get these to work in an unordered list is difficult. Going a step further and trying to get this unordered list to display horizontally (working example >> HERE <<) is certainly an enigma.
Here is my jsFiddle Project: jsFiddle: hNJmD
It seems like every time I get something working, I make the smallest edit to customize it for my app and it breaks.
Does it matter what order items in a CSS file are declared?
Does a <ul> tag have to be defined before a <li> tag?
Does height: need to be specified before width:? (I generally try to list things alphabetically so I don't accidentally have duplicates)
Here is the image I am using as my Sprite:
My Goal:
Center the menu horizontally the page
Have the full image display (all 50 px)
Disable the a.hover effect for the active item (Link 1)
The CSS is:
#nav {
text-shadow: 4px 4px 8px #696969;
white-space:nowrap;
vertical-align: middle;
}
#nav ul {
list-style-type:none; /* removes the bullet from the list */
}
#nav li {
display: inline-block;
text-align: center;
height: 50px;
width: 192px;
}
#nav a {
background: url('http://i.imgur.com/Sp7jc.gif') 0 -100px no-repeat;
display: block;
color:Blue;
}
#nav a:hover {
background-position: 0 -50px;
color:Red;
}
#nav .active, a:hover {
background-position: 0 0;
color:Black;
}
#nav span {
top: 15px;
padding-left: 5px;
}
The HTML used in the jsFiddle is repeated here as well:
<body>
<div>
<ul id="nav">
<li>
<a class="active" href="#">
<span>Link 1</span>
</a>
</li>
<li>
<a href="#">
<span>Link 2</span>
</a>
</li>
<li>
<a href="#">
<span>Link 3</span>
</a>
</li>
</ul>
</div>
<br/>
<br/>
<br/>
<br/>
<div style="text-align:center;">
<p>REFERENCE: Sprite (Width: 192, Height: 150):</p>
<img src="http://i.imgur.com/Sp7jc.gif">
</div>
</body>
Can somebody show me how to get this crazy thing to work?
If you want it to look like this: jsFiddle example, then this is what I did:
Combined your #nav and #nav ul rules since they refer to the same thing.
To that rule I added margin:0 auto; and width:600px; which centers the items
Then on #nav a I added display: block; and height:50px; which allows the links to take up the proper amount of height.
Finally I added a rule, #nav .active:hover that only affects the active element so it doesn't appear to change.
And to answer one of your questions about whether the order of CSS rules matters, the answer is yes and no. With respect to width and height in a rule, the order is irrelevant, but the order the rules appear in can matter, as does the specificity of the rule.
How do I get two buttons to appear one above the other in a span? The buttons should both be the same size also. I've tried vertical-align:middle and display:inline-block but with no success. The end goal is to have one list on the left, two buttons in the middle, and one list on the right. The buttons in the middle will be "Add" and "Remove" and move items between the two lists. I found this link but it was updated in 2004 and seems like a very poor way to do it. I've been searching for awhile and I must not be looking for the right things, so some guidance would be appreciated.
Here two buttons are aligned one above the other.
First between two lists:
http://jsfiddle.net/xGXER/
<!DOCTYPE html>
<html>
<head>
<title>Buttons in between</title>
</head>
<body>
<ul style="background: #afa; display: inline-block; width: 100px; vertical-align: top;">
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
</ul>
<span style="display: inline-block; width: 70px; background: #6af; vertical-align: top;">
<button style="width: 70px;">Add</button>
<button style="width: 70px;">Remove</button>
</span>
<ul style="background: #afa; display: inline-block; width: 100px; text-align: right; vertical-align: top;">
<li>Ein</li>
<li>Zwei</li>
<li>Drei</li>
<li>Vier</li>
</ul>
</body>
</html>
...and then between two spans:
http://jsfiddle.net/JtXj2/
<!DOCTYPE html>
<html>
<head>
<title>Buttons in between spans</title>
</head>
<body>
<span style="background: #f06; vertical-align: top;">Foo bar has left the building</span>
<span style="display: inline-block; width: 70px; height: 52px; background: #06f;">
<button style="width: 70px;">Add</button>
<button style="width: 70px;">Remove</button>
</span>
<span style="background: #0f0; vertical-align: top;">Bar hopping is what we do at Friday nights</span>
</body>
</html>
span { display:block; }
span button { float: left; width:100px; height:100px; margin:10px; clear:left; }
span .clearingelement { clear:left; }
The span element is an inline display element. Why not use a div element which is a block element? I don't see the point of styling a span to act like a div
Have you has only two buttons inside a <SPAN>? I guess the <SPAN> are inside a <P>, so I hope this would be what you need:
http://jsfiddle.net/Gpt6a/
This seems too simple, but - if the question actually is "How do I get two buttons to appear one above the other in a span?", then... I think this is your answer.
<span>
BUTTON 1<br />
BUTTON 2
</span>
EDIT:
Set the width of the list and float it:
<ul style="width:100px; float:left;">
<li>list item 1</li>
<li>list item 2</li>
</ul>
<span>button1<br />button2</span>
I have the following HTML code:
<ul class="blogEntry">
<li class="title section">
<span><asp:Literal ID="litTitle" runat="server" /></span>
<span class="date"><asp:Literal ID="litDate" runat="server" Text="10/1/1000" /></span>
</li>
<li class="body section"><asp:Literal ID="litBody" runat="server" /></li>
<li class="tags section">
<ul class="tags">
<li class="tag">Tag 1</li>
<li class="tag">Tag 2</li>
<li class="tag">Tag 3</li>
</ul>
</li>
</ul>
And the following CSS code:
ul.blogEntry
{
border: 1px solid black;
border-bottom: 0px;
padding: 0px;
}
ul.blogEntry li.section, ul.blogEntry li.lastsection
{
list-style: none;
}
ul.blogEntry li.title
{
background-color: #67A7FF;
font-size: 14px;
font-weight: bold;
}
ul.blogEntry li.title span
{
display: inline;
}
ul.blogEntry li.title.section span.date
{
float: right;
}
ul.blogEntry li.section
{
padding: 4px;
border-bottom: 1px solid black;
}
As is, the date will drop to a new line and float to the right. If I change the ul.blogEntry li.title span CSS and add float: left; The outer LI element's height shrinks and the bottom border cuts right through the spans' text. Advice?
Please don't add any elements for clearing. Elements which only enable specific styling significantly breaks semantics and separation of concerns.
The simple answer is to add overflow:auto; to the container element (i.e. li.title) but there are other ways:
http://www.positioniseverything.net/easyclearing.html
http://www.innovatingtomorrow.net/2008/03/24/how-clear-floats-css
http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/
Clearing blocks are EVIL.
try:
.section {min-height: 10px;}
that should clear your floats for all your section classes in ie7 and 8. you may try floating the element above your date left to see if that works.
also, when floating something, you should usually set the width