I don't necessarily know how to describe my problem. Just after creating the list, a dash appears after the last <li> tag (see photo in the attachment). How can i remove that line? Can you help me please?
Photo desribing my problem
Code bellow:
CSS:
#app_ulist ul {
padding-left: 30px;
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
list-style-type: none;
position: relative;
}
#app_ulist>ul>li:before {
content: "\2713";
}
#app_ulist>ul:after, #app_ulist>ul:before {
content: " ";
display: table;
}
#app_ulist>ul>li:before {
color: #fff;
display: block;
font-family: fontello;
font-size: 12px;
font-weight: 400;
left: -29px;
line-height: 20px;
margin-top: -1px;
position: absolute;
text-align: center;
width: 20px;
text-indent: 1px;
}
#app_ulist>ul>li {
margin-bottom: 10px;
padding-top: 0;
position: relative;
}
#app_ulist> ul > li::before {
background-color: #698e9e;
}
HTML:
<div id="app_ulist" class="mt-5">
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</div>
You need to remove the margin-top: -1px from #app_ulist>ul>li:before.
#app_ulist>ul>li:before {
color: #fff;
display: block;
font-family: fontello;
font-size: 12px;
font-weight: 400;
left: -29px;
line-height: 20px;
position: absolute;
text-align: center;
width: 20px;
text-indent: 1px;
}
Related
I'm trying to center the text in my navbar and my social links too, but I just can't. I've searched on google, tried everything, it doesn't work. I'm a beginner btw. I've tried every solution I've found on google for about 1hr and all I did is getting mad. damn
I don't get it. In the snippet everything works fine, it is centered as I want. But in my PC, it looks like this: pic
Can you explain to me why does it happen?
//Header
#header {
position: absolute;
top: 0;
}
//bara navigatie
#bara {
width: 100%;
margin: 0;
}
#bara-wrap {
position: absolute;
top: 0;
width: 100%;
background: #111111;
}
.butoane ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.butoane li {
float: left;
font-weight: bold;
margin-right: 4em;
font-size: 1em;
}
.butoane li a {
display: block;
color: white;
text-decoration: none;
}
.logo {
width: 11em;
margin-left: 45em;
float: left;
}
.social {
color: white;
float: right;
display: inline-block;
font-weight: bold;
}
<header id="header" style="opacity: 1; top: 0px;">
<div id="bara-wrap">
<img src="img/logo.png" alt="LOGO" class="logo" />
<nav id="bara">
<ul class="butoane">
<li>home</li>
<li>about</li>
<li>skills</li>
<li>contact</li>
</ul>
</nav>
<ul class="social">
<li class="facebook">facebook</li>
</ul>
</div>
</header>
Remove the butoane class and copy the posted right now css file and paste it into your css file....
//Header
#header {
position: absolute;
top: 0;
}
//bara navigatie
#bara {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
#bara-wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 70px;
background: #111111;
}
img{
margin-top: 25px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
ul li {
margin-top: 25px;
float: left;
font-weight: bold;
margin-right: 4em;
font-size: 1em;
}
li a {
display: block;
color: white;
text-decoration: none;
}
.logo {
width: 11em;
margin-left: 100px;
float: left;
}
.social {
position: absolute;
right: 20%;
top: 0;
color: white;
float: right;
display: inline-block;
font-weight: bold;
}
use this one i made some changes in your html and css.
html
<header id="header" style="opacity: 1; top: 0px;">
<div id="bara-wrap">
<img src="img/logo.png" alt="LOGO" class="logo" />
<nav id="bara">
<ul class="butoane">
<li>home</li>
<li>about</li>
<li>skills</li>
<li>contact</li>
</ul>
<ul class="social">
<li class="facebook">facebook</li>
</ul>
</nav>
</div>
</header>
css
#header {
position: absolute;
top: 0;
}
//bara navigatie
#bara {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
#bara-wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 70px;
background: #111111;
}
.butoane ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.butoane li {
float: left;
font-weight: bold;
margin-right: 4em;
font-size: 1em;
}
.butoane li a {
display: block;
color: white;
text-decoration: none;
}
.logo {
width: 11em;
margin-left: 100px;
float: left;
}
.social {
position: absolute;
right: 20%;
top: 0;
color: white;
float: right;
display: inline-block;
font-weight: bold;
}
I was playing around with a little nav menu and pseudo elements and I was wondering why the tiny light orange square I have created displays on the first child element but not the other elements when it is copied over and put in the nth-child(2).
body {
margin: 0;
}
* {
margin: 0;
padding: 0;
}
#orangeNavBar {
height: 45px;
width: 627px;
background-color: #E87966;
margin-left: auto;
margin-right: auto;
margin-top: 15px;
}
ul {
list-style: none;
}
ul li {
float: left;
font-family: times new roman;
font-size: 1.1em;
font-weight: bold;
color: black;
height: 45px;
box-sizing: border-box;
padding: 10px 20px;
border: 1px solid black;
}
ul li:first-child::after {
content: "";
height: 8px;
width: 8px;
background: #F1BAAF;
display: block;
float: right;
position: relative;
left: 20px;
top: 7.5px;
}
ul li:nth-child(2)::after {
content: "";
height: 8px;
width: 8px;
background: #F1BAAF;
display: block;
float: right;
position: relative;
left: 20px;
top: 7.5px;
}
<div id="orangeNavBar">
<ul>
<li>Home</li>
<li>Products</li>
<li>Company</li>
<li>Contact</li>
</ul>
</div>
Because
ul li:nth-child(2)::after
only selects the second item
You need
ul li:nth-child(n+2)::after
so each child after the first one is selected.
body {
margin: 0;
}
* {
margin: 0;
padding: 0;
}
#orangeNavBar {
height: 45px;
background-color: #E87966;
margin-left: auto;
margin-right: auto;
margin-top: 15px;
}
ul {
list-style: none;
}
ul li {
float: left;
font-family: times new roman;
font-size: 1.1em;
font-weight: bold;
color: black;
height: 45px;
box-sizing: border-box;
padding: 10px 20px;
border: 1px solid black;
}
ul li:first-child::after {
content: "";
height: 8px;
width: 8px;
background: #F1BAAF;
display: block;
float: right;
position: relative;
left: 20px;
top: 7.5px;
}
ul li:nth-child(n+2)::after {
content: "";
height: 8px;
width: 8px;
background: #F1BAAF;
display: block;
float: right;
position: relative;
left: 20px;
top: 7.5px;
}
<div id="orangeNavBar">
<ul>
<li>Home</li>
<li>Products</li>
<li>Company</li>
<li>Contact</li>
</ul>
</div>
I try to create a progress line for my page that looks like that:
(1)------------(2)------------(3)------------(4)
Step #1 Step #2 Step #3 Step #4
but I cannot set the last bullet of my list to stay at the very very right.
The code I have write is based on ul list, and you can find the sample code on jsfiddle.
My code is the following:
.container {
padding: 60px;
}
#progress-container {
margin: 0;
padding: 0;
list-style: none;
border-top: 2px solid #999;
position: relative;
margin-top: 20px;
}
#progress-container li {
margin: 0;
padding: 0;
list-style: none;
position: relative;
display: inline-block;
width: 24%;
text-align: center;
padding-top: 20px;
font-size: 16px;
color: #2A668A;
}
#progress-container li::before {
content: '1';
position: absolute;
top: -20px;
left: 45%;
background: #EEB0B1;
padding: 5px 12px;
font-size: 18px;
text-align: center;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: #FFF;
font-weight: bold;
}
#progress-container li.active::before {
background: #d33434;
}
#progress-container li:nth-child(1) {
margin-left: -12%;
}
#progress-container li:nth-child(1)::before {
content: '1';
}
#progress-container li:nth-child(2) {
margin-left: 6%;
}
#progress-container li:nth-child(2)::before {
content: '2';
}
#progress-container li:nth-child(3) {
margin-left: 6%;
}
#progress-container li:nth-child(3)::before {
content: '3';
}
#progress-container li:nth-child(4) {
margin-right: 12%;
}
#progress-container li:nth-child(4)::before {
content: '4';
}
<div class="container">
<ul id="progress-container">
<li class="active">
Level #1
</li>
<li>
Level #2
</li>
<li>
Level #3
</li>
<li>
Level #4
</li>
</ul>
</div>
Note : The code in JsFiddle is the current one that needs to be corrected. If you have any suggestion on how to fix the visual problem, please help, or if you have any other way to do it, just tell me :)
UPDATE
Just if somebody is interested in the feature the code is here:
#progress-container.horizontal {
margin: 20px 0 0;
padding: 0;
list-style: none;
border-top: 2px solid #999;
position: relative;
}
#progress-container.horizontal li {
margin: 0;
padding: 20px 0 0;
list-style: none;
position: relative;
display: inline-block;
width: 24%;
text-align: center;
font-size: 16px;
color: #2A668A;
}
#progress-container.horizontal li::before {
content: '1';
position: absolute;
top: -20px;
left: 41%;
background: #EEB0B1;
padding: 5px 12px;
font-size: 18px;
text-align: center;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: #FFF;
font-weight: bold;
}
#progress-container.horizontal li.active::before {
background: #d33434;
}
#progress-container.horizontal li:nth-child(1) {
left: -12%;
}
#progress-container.horizontal li:nth-child(1)::before {
content: '1';
}
#progress-container.horizontal li:nth-child(2) {
left: -3%;
}
#progress-container.horizontal li:nth-child(2)::before {
content: '2';
}
#progress-container.horizontal li:nth-child(3) {
left: 5%;
}
#progress-container.horizontal li:nth-child(3)::before {
content: '3';
}
#progress-container.horizontal li:nth-child(4) {
left: 14%;
}
#progress-container.horizontal li:nth-child(4)::before {
content: '4';
}
#progress-container.vertical {
margin: 20px 0 0;
padding: 0;
list-style: none;
border-left: 2px solid #999;
position: relative;
}
#progress-container.vertical li {
margin: 0 0 25px;
padding: 0 0 0 50px;
list-style: none;
position: relative;
font-size: 16px;
color: #2A668A;
display: block;
left: -18px;
}
#progress-container.vertical li::before {
content: '';
position: absolute;
top: -6px;
left: 0;
background: #EEB0B1;
padding: 5px 12px;
font-size: 18px;
text-align: center;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: #FFF;
font-weight: bold;
}
#progress-container.vertical li.active::before {
background: #d33434;
}
#progress-container.vertical li:nth-child(1)::before {
content: '1';
}
#progress-container.vertical li:nth-child(2)::before {
content: '2';
}
#progress-container.vertical li:nth-child(3)::before {
content: '3';
}
#progress-container.vertical li:nth-child(4)::before {
content: '4';
}
<ul id="progress-container" class="horizontal hidden-xs">
<li class="active">
Step 1
</li>
<li>
Step 2
</li>
<li>
Step 3
</li>
<li>
Step 4
</li>
</ul>
<ul id="progress-container" class="vertical visible-xs">
<li class="active">
Step 1
</li>
<li>
Step 2
</li>
<li>
Step 3
</li>
<li>
Step 4
</li>
</ul>
Use CSS counters
*{box-sizing: border-box}
body{padding: 60px 0}
ul {
counter-reset: section;
list-style-type: none;
text-align: center
}
li:before {
counter-increment: section;
content: counters(section,"");
position: absolute;
top: -60px;
left: 50%;
margin-left: -15px;
width: 32px;
height: 32px;
border-radius: 50%;
background: red;
text-align: center;
line-height: 32px;
color: white
}
li.active, li:hover, li:hover:before{
color: #7cbee6
}
li.active:before, li:hover:before{
background: #012e54
}
li:not(:last-child):after{
content: '';
position: absolute;
top: -44px;
left: 70px;
width: 40px;
height: 1px;
border-top:2px dashed red
}
li{
display: inline;
position: relative;
padding: 10px 14px;
}
<div class="container">
<ul id="progress-container">
<li class="active">
Level #1
</li>
<li>
Level #2
</li>
<li>
Level #3
</li>
<li>
Level #4
</li>
</ul>
</div>
This seam to do the trick:
http://jsfiddle.net/3kngwfgf/2/
#progress-container li:nth-child(4) {
left: 12%;
}
I removed the margin-left: and just added left:
I have a navigation bar with CSS & HTML but a little problem.
I want to make all the area of the text (Homepage f.e.) darker, not only the text.
CSS:
#navi {
background: #008cba url(http://img3.wikia.nocookie.net/__cb20101125042233/habbo/en/images/7/7f/Frank.gif) no- repeat;
background-position: 1272px -14px;
margin-left: -8px;
margin-right: -8px;
height: 43px;
}
a {
text-decoration: none;
color: white;
font-size: 16px;
}
ul {
list-style-type: none;
margin-top: -8px;
padding: 10px;
padding-left: 5px;
margin-left: -15px;
}
li {
display: inline;
margin-left: 15px;
font-size: 14px;
}
li:hover {
background-color: black;
}
How i can make the complety area of the text darker?
-> http://i.imgur.com/exd9eNR.png
Thanks in advance.
Refine your css a little bit, add height to li element, change it to inline-block and add line-height to a :)
* {
margin: 0px;
}
#navi {
background: #008cba url(http://img3.wikia.nocookie.net/__cb20101125042233/habbo/en/images/7/7f/Frank.gif) no-repeat;
background-position: 1272px -14px;
height: 43px;
}
a {
text-decoration: none;
color: white;
font-size: 16px;
line-height: 43px;
padding: 0px 10px;
}
ul {
list-style: none;
padding: 0px;
margin: 0px;
}
li {
display: inline-block;
margin-left: 15px;
font-size: 14px;
height: 43px;
}
li:hover {
background-color: black;
}
<div id="navi">
<ul>
<li>Home
</li>
<li>Home
</li>
<li>Home
</li>
<li>Home
</li>
</ul>
</div>
I am working on a website but I've got a problem with making the navbar. I have created a navbar but when I want to click on the left ones they aren't clickable and the right ones are.. my question is: How do I fix it I've tried different methodes but I am a noob and hope/think there's a simple solution for this that I don't know about.
Thanks anyways.
CSS:
.navlay{
background-image: url(./img/noise.png);
position: absolute;
width: 80%;
height: 7%;
margin-top: 19.4%;
margin-right:10%;
margin-left:10%;
}
.left {
position: absolute;
width: 80%;
margin-left: 8%;
margin-top: 20.3%;
text-decoration: none;
display: inline;
list-style: none;
font-size: 100%;
font-family: webbie;
font-weight: bold;
}
.right {
position: absolute;
width: 80%;
margin-top: 20.3%;
list-style: none;
text-decoration: none;
display: inline;
font-size: 100%;
font-family: webbie;
font-weight: bold;
}
.left li {
float: left;
padding-left: 3%;
padding-right: 3%;
}
.right li {
float: left;
padding-left: 3%;
padding-right: 3%;
}
.right li:first-child {
float: left;
padding-left: 80%;
padding-right: 3%;
}
.left li a {
color: #949494;
}
.right li a {
color: #949494;
}
.left li a:hover {
opacity: 0.6;
color: #949494;
cursor: pointer;
}
.right li a:hover {
opacity: 0.6;
color: #949494;
cursor: pointer;
}
Image: http://i.imgur.com/lL6MsgD.png
HTML:
<ul class="left">
<li>Home</li>
<li>About</li>
<li>Apply</li>
<li>Team-Members</li>
</ul>
<ul class="right">
<li>Login</li>
<li>Signup</li>
</ul>
You are not able to click on left because of width of right that you have set. You can try following css.
Here's Demo Fiddle
.left {
position: absolute;
width: 50%;
margin-left: 8%;
margin-top: 20.3%;
text-decoration: none;
display: inline;
list-style: none;
font-size: 100%;
font-family: webbie;
font-weight: bold;
z-index: 1;
}
.right {
position: absolute;
width: 80%;
margin-top: 20.3%;
list-style: none;
text-decoration: none;
display: inline;
font-size: 100%;
font-family: webbie;
font-weight: bold;
}
.right li:first-child {
float: left;
padding-left: 80%;
padding-right: 3%;
z-index: 2;
}