I have a horizontal list on my page.
<ul class="period-selection">
<li>Monthly</li>
<li>Weekly</li>
<li>Daily</li>
</ul>
Here is my css:
.period-selection {
width: 33.3%;
text-align: center;
float: right;
list-style: none;
}
.period-selection li {
float: left;
width: 18%;
}
.period-selection li:last-child {
margin-left: -12px;
}
As I collapse the page, the text start to overlap each other. How do I keep the text separate or stop it from overlapping?
You're setting a fixed width of 33.33% for the li's, regardless of the length of the text within. Try setting it to auto.
And remove the
margin-left: -12px;
on the li:last-child.
Related
I have this site here: http://dev.jmret.com/index.php but i have a problem on the content page i have two <li> underneath each other and one floating next to it. But it only floats next to the second. How would i make i float next to the first <li>?
So it looks something like this.
CSS (what i am using currently):
.sub-info {
display: inline-block;
position: relative;
width: 67%;
margin-bottom: 25px;
margin-right: 1%;
padding-left: 3%;
float: none;
}
.sub-info2 {
display: inline-block;
position: relative;
width: 26%;
margin-bottom: 25px;
/* margin-right: 1%; */
float: left;
/* padding-right: 5%; */
padding-left: 1%;
}
So what i need to do is make it so that the 3 <li> stack correctly, how can i make this happen in css?
Many thanks
You have to wrap your ul into a div, and then make it float next to it. First change the css to this :
.sub-info {
display: inline;
position: relative;
width: 95%;
margin-bottom: 25px;
margin-right: 1%;
padding-left: 3%;
float: left;
}
then in your li.body-section, wrap the two first ul's into a div and leave the last ul outside like this :
<div class="wrapper">
<ul></ul>
<ul></ul>
</div>
<ul></ul>
and add the css :
.wrapper {
float : left;
}
I believe you wanted something like this :
This is because your ul containing the right column has display: block;.
Change to display: inline-block; on the ul containing .sub-info2 and remove the width on .sub-info2.
Like this (inline styling, but you'll get the point):
<ul style="display: inline-block;">
<li class="sub-info2" style="width: auto">
<ul>
<li class="text tablet">
I have a menu that's generated by a plugin, and I need it to span 2 lines instead of 1 like so:
Example:
I Cannot:
I can't wrap certain li in a div/span
I can't add a <br> where I need the break
I Tried:
I tried adding a Pseudo Element to "Happy" with display: block to create a line break, but couldn't get it to work the way I intended
jsFiddle: http://jsfiddle.net/3xy405oj/
Using content: "\A"; white-space: pre; on the after pseudo-element might help you
JSFiddle
Just add a width to the ul :
ul {
width: 40%;
}
To make it pretty, remove text-align center from the li and add it to ul instead.
Then add margin 0 auto to ul to make it pretty :)
ul {
text-align: center;
margin: 0 auto;
}
Fiddle - http://jsfiddle.net/kq03kzwt/
You can do this:
CSS
ul {
width: 40%;
text-align: center;
margin: 0 auto;
padding: 0;
}
li {
display: inline-block;
margin: 0 2%;
text-align: center;
width: 20%;
}
HTML
<ul>
<li>Crazy</li>
<li>Awesome</li>
<li>Smile</li>
<li class="break-after">Happy</li>
<li>Jitter</li>
<li>Cool</li>
<li>Mango</li>
</ul>
DEMO HERE
You can just float all the elements inside the ul and use clear: left.
<ul>
<li>Crazy</li>
<li>Awesome</li>
<li>Smile</li>
<li>Happy</li>
<li class="break">Jitter</li>
<li>Cool</li>
<li>Mango</li>
</ul>
ul {
width: 100%;
text-align: center;
overflow: auto;
}
li {
margin: 0 5px;
float: left;
}
.break {
clear: left;
}
I need to align my banner with the buttons, banner size is w:967 h:106, tried to directly add the image but it pushes all the buttons to the right.
This is what my code looks like so far:
HTML
<nav>
<img src="png"/>
<ul class="fancyNav">
<li id="home">Home</li>
<li id="s">Social</li>
<li id="p">Political</li>
</ul>
</nav>
CSS
.fancyNav{
overflow: hidden;
display: inline-block;
position: absolute;
text-align: center;
top: 16%;
margin-left: 170px;
}
Site link: http://mops.pcriot.com/main.html
This is caused by display: inline-block; which behaves like this:
Displays an element as an inline-level block container.
The inside of this block is formatted as block-level box,
and the element itself is formatted as an inline-level box.
Using display: block will solve this, but then you may need to do more to align the navigation. Anything with inline in it, will cause what you're seeing.
Here are your other options for the display: property:
http://www.w3schools.com/cssref/pr_class_display.asp
.fancNav {
top: 110px;
}
adjust 110 to whatever looks best
make some changes in your class
.fancyNav {
overflow: hidden;
display: inline-block;
text-align: center;
top: 16%;
margin-left: 170px;
width: 100%;
}
Left Aligned - Try removing:
.fancyNav {
margin-left: 170px;
}
Then add:
.fancyNav {
padding: 0;
}
Center Aligned - Do as above then add:
nav {
margin-left: 170px;
}
or instead (probably better):
nav {
width: 967px;
margin: 0 auto;
}
I have a list. Each item in the list contains an icon span and text span like so:
<ul id="features">
<li>
<span class="icon"></span>
<span class="text">blah blah blahlrceoahuoa steohuasnoet huntaoheu saoetnhu saoetuhsaoe tuhsaoetnhu saoehtuasoetnhu saou</span>
</li>
</ul>
Using the following CSS
#features { list-style-type: none; }
#features li { overflow: auto;}
#features li span { float: left; }
#features .icon { background: #000; height: 55px; width: 55px; display: inline-block;}
#features .text { margin-left: 24px; display: inline-block; }
I believe this code should produce text which floats next to the icon, and automatically adjusts its width accordingly. However this isn't the case see jsfiddle.
Why isn't the text floating next to the icon?
width: auto will instruct the text span to assume as much width as it requires, based on its content. This is what causes the entire span to wrap when that space is not available.
Ah, trying to make fixed and fluid width live together in harmony... an old problem.
Here's an updated fiddle with the solution: http://jsfiddle.net/dwZaN/11/
#features { list-style-type: none; margin-top: 24px; margin-right: 24px; }
#features li { margin-bottom: 24px; overflow: auto; width: 100%; }
#features li span { }
#features .icon { background: #000; height: 55px; width: 55px; float: left; }
#features .text { padding-left: 75px; display: block; }
Basically...
Float your fixed-width icon
Don't float your fluid-width element, but give it padding-left with enough room to account for your icon and some buffer room (this automatically gives it 100% and subtracts whatever padding-left you specify)
Both elements should be block-level. You don't actually need to specify anything for the icon, but your text span needs to be display: block (or you can just switch to DIV's which are already block-level)
Also, since you specify a right margin in your parent UL, adding width: 100% makes it expand beyond the browser window and creates a horizontal scrollbar. Simply remove it.
You should be using a CSS background in the inner element and floating the LI. You do not need a separate element for the icon.
#features li { float left }
#features li span {
display:block;
background-image: url(...);
background-repeat:no-repeat;
height:25px;
padding-left:30px;
}
See my tutorial: I love lists.
If you want to use a font instead of an image, you can use position:relative, on your LI and add:
li:before {
content: "\25A0"; <--- this is a UTF-8 square
left: -1em;
position: absolute;
top: 0.1em;
}
(adjust your spacing values accordingly)
I have a nested unordered list which has main content on the left, and I would like to add options which are floated right, such that they are aligned on the right regardless of the level of indentation.
<ul>
<li> Item 1 <span class='options'> link </span> </li>
<li> Item 2 <span class='options'> link </span>
<ul>
<li>Item 3 <span class='options'> link </span> </li>
</ul>
</li>
</ul>
I have the following css:
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
padding-left: 15px;
width: 400px;
}
.options {
float: right;
width: 50px;
}
When this is used however the options span is aligned to the right, but 1 line below the expected line.
How can I get the options span to line up with the list item?
TIA,
Adam
Instead of floating, you may want to try absolute positioning.
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
padding-left: 15px;
width: 400px;
position: relative;
}
.options {
width: 50px;
position: absolute;
right: 0px;
}
Using this CSS:
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
padding-left: 15px;
width:400px;
}
.options {
float: right;
width: 50px;
}
li li { width:385px}
This unfortunately requires your to define a width minus the padding. depending on your flexibility this will work. Tested in Chrome 3.0.
If modifying the HTML code is OK, you could enclose "Item 1" in a first span and:
float it to left (still floating .options to the right)
use display: inline-block on both span and text-align: right on .options, instead of floats (no compatible with Fx2 though, and only working in IE6/7 because span is an inline elements by default. Would not work with div)