Im using CSS generated content on a list. When the list text is long enough to wrap it moves too far to the left. I want the text to stay inline with itself when it wraps.
<ul>
<li>List item text</li>
<li>List item with longer text</li>
</ul>
li {
list-style: none;
margin-bottom: 20px;
}
li:before {
content: "+";
color: red;
margin-right: 10px;
}
ul {
width: 120px;
}
http://codepen.io/anon/pen/uFchG
You could slightly change your CSS so that it's a position:aboluste; and the li (parent) is a position:relative; then move it slightly out.
CodePen Example
li {
list-style: none;
margin-bottom: 20px;
position:relative;
}
li:before {
content: "+";
position:absolute;
color: red;
left:-15px;
}
ul {
width: 120px;
}
Alternatively, you could give the li a margin-left and the :after left:-npx; so it's all still within the li element's boundaries.
Try to add these two lines
li {
list-style: none;
margin-bottom: 20px;
padding-left: 1em;
text-indent: -1em;
}
add this in ul:
text-align:center;
Related
My predicament is this. I have a list, a simple cart, login, user registration list. I want to move the list up by adding padding. But I cannot with out the list adding line height. What is the way around this? See examples below. This list is in the header.
Before:
.content{
border: 2px solid #000;
}
li {
list-style-type: none;
font-size: 10px;
direction: right;
text-align: right;
padding-bottom: 20px;
line-height: 1;
display: block;
}
<div class="content">
<ul>
<li>Cart</li>
<li>Login</li>
<li>Customer Registration</li>
</ul>
</div>
After:
You need to add the padding to the ul and not the li .
give margin-top in minus so it will move upside
Try This:
ul {
margin-top: 0;
}
ul {
margin-top: 0;
}
li {
list-style-type: none;
font-size: 10px;
direction: right;
text-align: right;
padding-bottom: 20px;
line-height: 1;
display: block;
}
<ul>
<li>Cart</li>
<li>Login</li>
<li>Customer Registration</li>
</ul
I have a nav that holds a ul with several ils. The problem is that im unable to get rid of the ul's first and last child's divider.
here's a demo: http://jsfiddle.net/Rvs3C/1/
i've added this code to my CSS file but seems like it makes no difference:
nav ul a li:first-child{
content: none;
}
nav ul a li:last-child{
content: none;
}
You markup is wrong. The corret way is <a> tag being the children of tag <li>.
The way you made the correct selector would:
nav ul a:first-child li{
content: none;
}
nav ul a:last-child li{
content: none;
}
But remembering, this is not the right way to do.
The correct is change you html to:
<ul class="showing">
<li>home</li>
...
As mentioned elsewhere your HTML structure is off, li must me a direct child of ul, no other element as a child is valid. With this said, you also need to change your selectors per the below.
Updated Fiddle
HTML
<nav>
<ul class="showing">
<li>home
</li>
<li>about me
</li>
<li>content
</li>
<li>browse
</li>
<li>rate
</li>
<li class="nav_arr"><img src="http://www.irvinewelsh.net/images/arrow-left.png" />
</li>
</ul>
</nav>
CSS
nav {
margin-right: 150px;
}
nav ul {
background-color: #494A4C;
overflow: hidden;
text-align: right;
}
nav li img {
margin-left: 20px;
vertical-align: top;
}
nav ul li a {
color: white;
text-decoration: none;
font-family:arial;
font-size: 14px;
padding: 0px;
font-weight: bold;
}
nav ul li:first-child:before {
content: none;
}
nav ul li:last-child:before {
content: none;
}
nav li:before {
content:"|";
padding: 5px;
font-weight: bold;
color:lightblue;
font-size: 20px;
}
nav ul li {
display: inline-block;
}
Something has bugged me for years. If you look at this fiddle
you'll see a simple unordered list with some padding on the a element and a background colour to create a box.
There is white space between each item in the list. How can you get rid of it so the boxes are touching horizontally?
Html is:
<div id="dvLinks">
<ul>
<li>One
</li>
<li>Two
</li>
<li>Three
</li>
</ul>
</div>
css is:
#dvLinks ul {
margin: 0;
padding: 0;
list - style - type: none;
}
#dvLinks ul li {
display: inline;
}
#dvLinks ul li a {
text - decoration: none;
padding: .1em 1em;
color: #000;
background-color: # 33EEDD;
}
There are several ways. A few are:
1) Remove thew white space between the list item elements:
<li>One</li><li>Two</li><li>Three</li>
jsFiddle example
2) Put HTML comments between the list item elements
<li>One</li><!--
--><li>Two</li><!--
--><li>Three</li>
jsFiddle example
3) Float them left:
#dvLinks ul li {
display: inline;
float:left;
}
jsFiddle example
It's very simple:
CSS
#dvLinks ul li { display: table-cell; }
RESULTS
inline leaves white-space between elements.
Write elements on same line rather than writing them on different lines.
Change
<li>One</li>
<li>Two</li>
<li>Three</li>
to
<li>One</li><li>Two</li><li>Three</li>
Updated fiddle here.
You have to set the ul font-size to 0 and then you have to set the font-size of the li in what ever your like
#dvLinks ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 0;
}
#dvLinks ul li { display: inline; font-size: 16px; }
#dvLinks ul li a
{
text-decoration: none;
padding: .1em 1em;
color: #000;
background-color: #33EEDD;
}
See the Demo here
This is a common problem with the inline/inline-block.
Another solution is the following:
// All elements in one line
<ul><li>Element #1</li><li>Element #2</li>...</ul>
// Or
// No space between li elements
<ul><li>
Element #1</li><li>
Element #2</li>...
</ul>
// Or
// Comments between li elements
<ul><li>
Element #1</li><!--
--><li>Element #2</li><!--
...-->
</ul>
// Or by using CSS
// Change the li display attribute to
ul li
{
display : table-cell;
}
Anyway, best solution for me is the float left. You can do it like that:
<ul id="list" class="clearfix">
<li>Element #1</li>
<li>Element #2</li>
<li>Element #3</li>
</ul>
and in CSS
/* Clear fix resource : http://www.webtoolkit.info/css-clearfix.html */
.clearfix:after
{
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix
{
display: inline-block;
}
html[xmlns] .clearfix
{
display: block;
}
* html .clearfix
{
height: 1%;
}
#list li
{
display : block;
float : left;
}
You can use negative margins.
#dvLinks ul li {
margin: 0 -1px;
}
You could add
li { margin-left: -5px;}
http://jsfiddle.net/3gmZa/6/
I have this css code here
.navigation{
width:100%;
background-color:#7a7a7a;
font-size:18px;
}
.navigation ul {
list-style-type: none;
margin: 0;
}
.navigation li {
float: left;
}
.navigation ul a {
color: #ffffff;
display: block;
padding: 0 65px 0 0;
text-decoration: none;
}
What I am trying to do is center my class navigation. I tried using text-align:center; and vertical-align:middle; but neither of them worked.
and here is the HTML Code
<div class="navigation">
<ul>
<li>home</li>
<li>about</li>
<li>tutors</li>
<li>students</li>
<li>contact us</li>
</ul>
</div><!--navigation-->
When I say its not working, I mean the text is aligned to the left.
Change the rule on your <a> element from:
.navigation ul a {
color: #000;
display: block;
padding: 0 65px 0 0;
text-decoration: none;
}
to
.navigation ul a {
color: #000;
display: block;
padding: 0 65px 0 0;
text-decoration: none;
width:100%;
text-align:center;
}
Just add two new rules (width:100%; and text-align:center;). You need to make the anchor expand to take up the full width of the list item and then text-align center it.
jsFiddle example
You have to make the UL inside the div behave like a block. Try adding
.navigation ul {
display: inline-block;
}
I try to avoid floating elements unless the design really needs it. Because you have floated the <li> they are out of normal flow.
If you add .navigation { text-align:center; } and change .navigation li { float: left; } to .navigation li { display: inline-block; } then entire navigation will be centred.
One caveat to this approach is that display: inline-block; is not supported in IE6 and needs a workaround to make it work in IE7.
I'm trying to make a CSS drop down menu but the problem is that child list items overlap parent list items as you can see in the picture.
I found the source of the problem to be the padding: 10px 5px; in line 12 - When removed, the problem is solved. But I need the padding for the look. I read Inline elements and padding which addresses a similar issue but even the solution provided in the article - using float: left; instead of display: inline; - does not solve my problem.
Why does this happen and what is the solution?
HTML Code
<ul id="navigation_2">
<li>Home</li>
<li>About
<ul>
<li>Who We Are</li>
<li>Our Goal</li>
</ul>
</li>
</ul>
CSS Code
ul#navigation_2
{
margin: 0;
padding: 0;
list-style: none;
font-family: "Century Gothic","HelveticaNeueLT Pro 45 Lt",sans-serif;
}
ul#navigation_2 li
{
float: left;
position: relative;
padding: 10px 5px;
font-size: 114%;
text-align: center;
width: 100px;
}
ul#navigation_2 li a
{
text-decoration: none;
}
ul#navigation_2 li a:link, a:visited, a:active
{
color: black;
}
ul#navigation_2 li:hover
{
background-color: red;
}
ul#navigation_2 li ul
{
margin: 0;
padding: 0;
list-style: none;
display: none;
}
ul#navigation_2 li ul li
{
display: block;
width: 150px;
text-align: left;
}
ul#navigation_2 li:hover ul
{
display: block;
position: absolute;
background-color: #CBD966;
}
Here, I have a working example:
http://jsfiddle.net/hzCZY/2/
Never underestimate the power of inline-block! Basically your list was colliding with the text 'About' as opposed to the red box around the text 'About'. I formatted the actual a tag to be the red block instead, an inline-block, which then collided correctly with the ul below it.
If you need any more explanation I'd be more than happy to help.