This question already has an answer here:
css3 "::after" pseudo-element not working
(1 answer)
Closed 5 years ago.
I use the li:after to add content after the li, but not work.
body {
margin: 0;
padding: 0;
}
#banner {
height: 30px;
width: 750px;
margin: 0 auto;
background-color: aquamarine;
}
#banner ul {
list-style: none;
height: 30px;
padding: 0;
display: flex;
align-items: center;
}
#banner ul li {
float: left;
margin: auto 0;
height: 30px;
line-height: 30px;
width: 100px;
text-align: center;
}
#banner ul li :after {
content: "a";
top: 1px;
bottom: 1px;
right: 0;
width: 5px;
background-color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<link rel="stylesheet" href="styles/index.css" type="text/css">
</head>
<body>
<div id="banner">
<ul>
<li>Home</li>
<li>link</li>
<li>product</li>
<li>phone</li>
<li>cat</li>
<li>about</li>
</ul>
</div>
</body>
</html>
Why the contents do not shows ?
Because you have this top: 1px; bottom: 1px; right: 0; you need to use position and there is a space between a and ::after
with that space, it would apply ::after to all children of li. So it is the same as
#banner ul li *::after
See a Snippet
body {
margin: 0;
padding: 0;
}
#banner {
height: 30px;
max-width: 750px;
margin: 0 auto;
background-color: aquamarine;
}
#banner ul {
list-style: none;
height: 30px;
padding: 0;
display: flex;
align-items: center;
}
#banner ul li {
float: left;
margin: auto 0;
height: 30px;
line-height: 30px;
width: 100px;
text-align: center;
position:relative;
}
#banner ul li::after {
content: "a";
position:absolute;
top: 1px;
bottom: 1px;
right: 5px;
width: 5px;
background-color: red;
}
<div id="banner">
<ul>
<li>Home</li>
<li>link</li>
<li>product</li>
<li>phone</li>
<li>cat</li>
<li>about</li>
</ul>
</div>
There should be no space between the element (li) and :after.
It should be:
#banner ul li:after
and not
#banner ul li :after
body {
margin: 0;
padding: 0;
}
#banner {
height: 30px;
width: 750px;
margin: 0 auto;
background-color: aquamarine;
}
#banner ul {
list-style: none;
height: 30px;
padding: 0;
display: flex;
align-items: center;
}
#banner ul li {
float: left;
margin: auto 0;
height: 30px;
line-height: 30px;
width: 100px;
text-align: center;
}
#banner ul li:after {
content: "a";
top: 1px;
bottom: 1px;
right: 0;
width: 5px;
background-color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<link rel="stylesheet" href="styles/index.css" type="text/css">
</head>
<body>
<div id="banner">
<ul>
<li>Home</li>
<li>link</li>
<li>product</li>
<li>phone</li>
<li>cat</li>
<li>about</li>
</ul>
</div>
</body>
</html>
Related
I've been trying to make a navbar, but even when I set the width to 100%, it doesn't take up the width. I attached my code here.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
li {
display: inline;
float: left;
}
li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#nav {
display: block;
padding: 8px;
background-color: #dddddd;
}
<ul>
<li>Home</li>
<li>Generator</li>
<li>Contact</li>
<li>About</li>
</ul>
Remove the default margin on the body or add left:0 to your ul rules:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
li {
display: inline;
float: left;
}
li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#nav {
display: block;
padding: 8px;
background-color: #dddddd;
}
body {margin:0;}
<ul>
<li>Home</li>
<li>Generator</li>
<li>Contact</li>
<li>About</li>
</ul>
*{
box-sizing: border-box;
margin: 0;
padding:0;
}
ul{
width: 100vw;
height: 10vw;
background-color: #003580;
display: flex;
justify-content:flex-end;
align-items: center;
}
ul li{
background-color: #dddd;
border-radius: 3px;
padding: 0 2px;
margin-right: 10px;
list-style: none;
}
.nav{
color: black;
text-decoration: none;
font-size: 25px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Barra de navegación</title>
<link rel="stylesheet" href="./stylos.css">
</head>
<body>
<header>
<ul>
<li>Home</li>
<li>Generator</li>
<li>Contact</li>
<li>About</li>
</ul>
</header>
</body>
</html>
I have two questions:
Can I set the border-right's height?
Can I hide the last li's border-right?
body {
margin: 0;
padding: 0;
}
#banner {
height: 30px;
width: 750px;
margin: 0 auto;
background-color: aquamarine;
}
#banner ul {
list-style: none;
height: 30px;
padding: 0;
}
#banner ul li {
float: left;
margin: auto 0;
height: 30px;
line-height: 30px;
width: 100px;
text-align: center;
border-right: 1px solid #aba;
}
<div id="banner">
<ul>
<li>Home</li>
<li>link</li>
<li>product</li>
<li>phone</li>
<li>cat</li>
<li>about</li>
</ul>
</div>
Instead of a border you can experiment with ::before and ::after
ul {
display: flex;
}
li {
position: relative;
display: flex;
justify-content: center;
flex: 1;
padding: 10px 0;
background-color: gray;
list-style-type: none;
}
li::after {
content: "";
position: absolute;
top: 5px; /* control the 'height' with top/bottom */
bottom: 5px;
right: 0;
width: 5px; /*same as what your border was */
background-color: black; /* instead of border-color */
}
li:last-child::after { /*hides last 'border' */
display: none;
}
<div>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
Try #banner ul li:last-child { border-right: 0; or border-right-color: hsla(0, 0%, 0%, 0);}
fiddle
https://jsfiddle.net/Hastig/kkx33des/
Hide the last border
This is your border:
li { border-right: 1px solid #aba; }
But you don't want it to appear on the last item. So try this instead:
li + li {
border-left: 1px solid #aba;
}
The new rule applies a left-side border to li elements that come immediately after another li. This will exclude a left border on the first li and a right border on the last li.
Shorter borders
You want the borders to be less than full height. You can achieve the effect with absolutely-positioned pseudo-elements:
li {
position: relative; /* establish the containing block for abspos children */
}
li+li::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
height: 50%;
width: 2px;
background-color: red;
}
body {
margin: 0;
padding: 0;
}
#banner {
height: 30px;
width: 750px;
margin: 0 auto;
background-color: aquamarine;
}
#banner ul {
list-style: none;
height: 30px;
padding: 0;
}
#banner ul li {
float: left;
margin: auto 0;
height: 30px;
line-height: 30px;
width: 100px;
text-align: center;
/* border-right: 1px solid #aba; */
position: relative;
}
li+li::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
height: 50%;
width: 2px;
background-color: red;
}
<div id="banner">
<ul>
<li>Home</li>
<li>link</li>
<li>product</li>
<li>phone</li>
<li>cat</li>
<li>about</li>
</ul>
</div>
Try This :
li:not(:last-child):after {
content: "";
display: inline-block;
margin-left: 40px;
border-right: 3px solid orange;
height: 20px;
top: 5px;
position: absolute;
}
Full Code :
body {
margin: 0;
padding:0;
}
#banner {
height:30px;
width: 750px;
margin: 0 auto;
background-color: aquamarine;
vertical-align: middle;
}
#banner ul{
list-style: none;
height:30px;
padding: 0;
position: relative;
}
#banner ul li {
float: left;
margin: auto 0;
height: 30px;
line-height: 30px;
width: 100px;
text-align:center;
}
li:not(:last-child):after {
content: "";
display: inline-block;
margin-left: 40px;
border-right: 3px solid orange;
height: 20px;
top: 5px;
position: absolute;
}
<div id="banner">
<ul >
<li>Home</li>
<li>link</li>
<li>product</li>
<li>phone</li>
<li>cat</li>
<li>about</li>
</ul>
</div>
To remove the border for the last li, use the pseudo-class :last-child
I used display:flex and align-item:center after adding a margin to the top and bottom of the li to center it
body {
margin: 0;
padding:0;
}
#banner {
height:30px;
width: 750px;
margin: 0 auto;
background-color: aquamarine;
}
#banner ul{
list-style: none;
height:30px;
padding: 0;
display: flex;
align-items: center;
}
#banner ul li {
float: left;
width: 100px;
text-align:center;
border-right:1px solid #aba;
margin-top:10px;
margin-bottom: 10px;
}
#banner ul li:last-child {
border-right: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<link rel="stylesheet" href="styles/index.css" type="text/css">
</head>
<body>
<div id="banner">
<ul >
<li>Home</li>
<li>link</li>
<li>product</li>
<li>phone</li>
<li>cat</li>
<li>about</li>
</ul>
</div>
</body>
</html>
U can try pipe symbol as an alternaten using :after selector of each li
You need :last-child pseudo Css selector to hide the border of last li
I have two questions. The first is that when I write in my html tag I cannot use my the hyperlink when running the page. The other and main reason is that my code will not stretch across the entire page.
Here is the css I wrote for styling the page
body {
background: #B2906F;
font-family: arial;
margin: 0;
height: 100%;
}
.maincontainer{
width: 100%;
margin: 0 auto;
}
.picture{
display: inline;
margin: 0;
padding: 0;
position: fixed;
z-index: -1;
background-size: 100%;
}
.button{
padding: 10px 15px;
text-decoration: none;
border-radius: 5px;
background-color: #05280c;
}
.button-primary:hover {
background-color: #05370c;
}
h1 {
display: inline;
margin: 0;
background-color: #2c421f;
padding: 5px;
position: absolute;
}
ul{
margin: 0;
display: inline;
padding: 0px 0px 0px 250px;
}
ul li {
display: inline-block;
list-style-type: none;
padding: 15px 10px;
color: #050c0c;
margin: 0;
border-radius: 5px;
}
ul li a {
color: black;
}
footer{
clear: both;
}
nav {
color:
height: 100%;
margin: 0;
background-color: #2c421f;
}
and this is my html I wrote for the page. Any help would be awesome. I have been stuck here for a couple days.
<!DOCTYPE html>
<html>
<head>
<title>NWWolfPack</title>
<link href="main.css" rel="stylesheet" />
</head>
<body>
<div class="maincontainer">
<h1>NW Wolf Pack</h1>
<div class="picture"><img src="camo.jpg" width="100%" height="150">
<header>
<nav>
<ul>
<li class="button"><strong>Home</strong></li>
<li><strong>Records</strong></li>
<li><strong>Membership</strong></li>
<li><strong>Contact Us</strong></li>
</ul>
</nav>
</header>
</div>
<footer>2017 Dillan Hall</footer>
</body>
</html>
Follow this:
body {
background: #B2906F;
font-family: arial;
margin: 0;
height: 100%;
}
.maincontainer {
width: 100%;
margin: 0 auto;
}
.picture {
display: inline;
margin: 0;
padding: 0;
position: fixed;
left: 0;
right: 0;
z-index: -1;
background-size: 100%;
}
.button {
padding: 10px 15px;
text-decoration: none;
border-radius: 5px;
background-color: #05280c;
}
.button-primary:hover {
background-color: #05370c;
}
h1 {
display: inline;
margin: 0;
background-color: #2c421f;
padding: 5px;
position: absolute;
}
ul {
margin: 0;
display: inline;
padding: 0px 0px 0px 250px;
}
ul li {
display: inline-block;
list-style-type: none;
padding: 15px 10px;
color: #050c0c;
margin: 0;
border-radius: 5px;
}
ul li a {
color: black;
}
footer {
clear: both;
}
nav {
color: height: 100%;
margin: 0;
background-color: #2c421f;
}
<div class="maincontainer">
<h1>NW Wolf Pack</h1>
<div class="picture"><img src="camo.jpg" width="100%" height="150">
<header>
<nav>
<ul>
<li class="button"><strong>Home</strong></li>
<li><strong>Records</strong></li>
<li><strong>Membership</strong></li>
<li><strong>Contact Us</strong></li>
</ul>
</nav>
</header>
</div>
<footer>2017 Dillan Hall</footer>
It is the position:fixed on the .picture in your css that is causing your issue. Also I just noticed that your maincontainer does not have the closing div.
Remove position:fixed from your class picture
.picture{
display: inline;
margin: 0;
padding: 0;
z-index: -1;
background-size: 100%;
}
And your hyperlink seems to be working..Isnt that what you meant?
Use this one:
<!DOCTYPE html>
<html>
<head>
<title>NWWolfPack</title>
<link href="main.css" rel="stylesheet" />
</head>
<body>
<div class="maincontainer">
<h1>NW Wolf Pack</h1>
<div class="picture"><img src="http://www.dvd-ppt-slideshow.com/images/ppt-background/background-5.jpg" width="100%" height="150">
<header>
<nav>
<ul>
<li class="button"><strong>Home</strong></li>
<li><strong>Records</strong></li>
<li><strong>Membership</strong></li>
<li><strong>Contact Us</strong></li>
</ul>
</nav>
</header>
</div>
<footer>2017 Dillan Hall</footer>
</body>
</html>
STYLE:
<style>
button{
padding: 10px 15px;
text-decoration: none;
border-radius: 5px;
background-color: #05280c;
}
.button-primary:hover {
background-color: #05370c;
}
h1 {
display: inline;
margin: 0;
background-color: #2c421f;
padding: 5px;
position: absolute;
}
ul{
margin: 0;
display: inline;
padding: 0px 0px 0px 250px;
}
ul li {
display: inline-block;
list-style-type: none;
padding: 15px 10px;
color: #050c0c;
margin: 0;
border-radius: 5px;
}
ul li a {
color: black;
}
footer{
clear: both;
}
nav {
color:
height: 100%;
margin: 0;
background-color: #2c421f;
}
</style>
Hope this will help you. If any other question let me know?
When I put my cursor right on top of the link text, the link is not clickable, but if I put my cursor a little bit below the text, it becomes clickable. I'm learning right now so please explain to me why it's doing that and how to fix it.
HTML
<!DOCTYPE html>
<html Lang="en">
<head>
<meta charset="utf-8">
<title>Welcome!</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
*{
margin: 0;
padding: 0;
}
header{
width: 1024px;
margin: 0 auto;
background-color: #81D4FA;
height: 50px;
}
header h1{
color: white;
position: relative;
left: 100px;
top: 5px;
}
nav{
margin-top: -20px;
margin-right: 100px;
}
nav ul{
float: right;
margin: 0;
padding: 0;
}
nav ul li{
list-style-type: none;
display: inline-block;
}
nav ul li a{
text-decoration: none;
color: white;
padding: 16px 20px;
}
a:hover{
background-color: #84FFFF;
}
.main{
width: 1024px;
margin-left: auto;
margin-right: auto;
}
.laptop{
width: 1024px;
}
.title{
background-color: #0D23FD;
height: 50px;
width: 300px;
position: relative;
top: -650px;
left: -10px;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
}
.title h3{
color: white;
text-align: center;
position: relative;
top: 13px;
}
<header>
<h1>Jack Smith</h1>
<nav>
<ul>
<li>About</li>
<li>My Work</li>
<li>Contact Me</li>
</ul>
</nav>
</header>
<div class="main">
<img class="laptop" src="images/laptop.jpg">
<div class="title">
<h3>Front-End Web developer</h3>
</div>
</div>
It's because your <h1> is a block-level element, which will lay over the menu elements. If you give it display: inline-block, it will work as supposed.
A block-level element always starts on a new line and takes up the
full width available (stretches out to the left and right as far as it
can).
See my example below.
* {
margin: 0;
padding: 0;
}
header {
width: 1024px;
margin: 0 auto;
background-color: #81D4FA;
height: 50px;
}
header h1 {
color: white;
position: relative;
left: 100px;
top: 5px;
display: inline-block;
/* Added */
}
nav {
margin-top: -20px;
margin-right: 100px;
}
nav ul {
float: right;
margin: 0;
padding: 0;
}
nav ul li {
list-style-type: none;
display: inline-block;
}
nav ul li a {
text-decoration: none;
color: white;
padding: 16px 20px;
}
a:hover {
background-color: #84FFFF;
}
.main {
width: 1024px;
margin-left: auto;
margin-right: auto;
}
.laptop {
width: 1024px;
}
.title {
background-color: #0D23FD;
height: 50px;
width: 300px;
position: relative;
top: -650px;
left: -10px;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
}
.title h3 {
color: white;
text-align: center;
position: relative;
top: 13px;
}
<header>
<h1>Jack Smith</h1>
<nav>
<ul>
<li>About
</li>
<li>My Work
</li>
<li>Contact Me
</li>
</ul>
</nav>
</header>
<div class="main">
<img class="laptop" src="images/laptop.jpg">
<div class="title">
<h3>Front-End Web developer</h3>
</div>
</div>
The problem is occurring because of the interaction between some of your styles. You're floating the nav ul element to the right, but you're also setting the nav ul li display to inline-block which is also doing an implicit float (try replacing it with float: left and you'll see the same behavior).
If you set the position:relative on your nav ul, it willforce the elements to float correctly within the ul container.
nav ul{
float: right;
margin: 0;
padding: 0;
position:relative; /*ADD THIS*/
}
I’m creating this website and I made this nav bar. It had dummy links in the anchor tags and I had a hover property on my buttons. All of this was working properly. I had made a few changes to the code and now none of it works. I cannot figure out where I went wrong. I was editing properties and things just stopped working.
* {
margin: 0 auto;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
font-family: "Arial";
color: white;
}
html,
body {
margin: 0 auto;
background-color: black;
max-width: 940px;
min-height: 100%;
}
.wrapper {
margin: 0 auto;
width: 92%;
background-image: url("images/backgrounds/wood.jpg");
}
/*********************************************************************************************************************************************
HEADER STYLING
*********************************************************************************************************************************************/
.header {
position: relative;
height: 100px;
background-color: #111111;
}
.header h1 {
position: relative;
margin: 0;
height: 20px;
text-align: center;
font-size: 2.3em;
top: 25%;
}
.header p {
position: relative;
top: 25%;
width: 100%;
font-size: 1em;
text-align: center;
}
/*********************************************************************************************************************************************
NAVIGATION BAR STYLING
*********************************************************************************************************************************************/
nav {
height: 40px;
}
nav ul {}
nav ul li {
background-color: #111111;
text-align: center;
list-style-type: none;
width: 25%;
float: left;
/*margin: 0 1%;
border-radius: 10px;
box-shadow: 5px 5px 5px #000;*/
}
nav ul li a {
text-decoration: none;
line-height: 40px;
display: block;
}
nav ul li a:hover {
background-color: #222222;
}
/*********************************************************************************************************************************************
JUMBOTRON STYLING
*********************************************************************************************************************************************/
.jumbotron {
position: relative;
background-image: url(images/jumbotron/studiopic.jpg);
background-repeat: no-repeat;
background-size: cover;
width: 100%;
max-height: 53%;
}
.jumbotext h1 {
display: inline-block;
position: absolute;
bottom: 0px;
text-align: right;
}
/*********************************************************************************************************************************************
FOOTER STYLING
*********************************************************************************************************************************************/
.footer {
height: 100px;
width: 100%;
background-color: #111111;
}
<!DOCTYPE html>
<html>
<head>
<title>CM Sound | Home</title>
<meta charset="UTF-8">
<meta name="description" content="CM Sound's studio webpage">
<meta name="author" content="Ryan Buck | May 2015">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="header">
<h1>CM Sound</h1><br/>
<p>Create with us</p>
</div>
<nav>
<ul>
<li>Home</li>
<li>Audio</li>
<li>Pricing</li>
<li>Contact</li>
</ul>
</nav>
<div class="jumbotron">
<div class="jumbotext">
</div>
</div>
<div class="footer">
</div>
</div>
</body>
</html>
Add this in nav ul li a
:
position: relative;
* {
margin: 0 auto;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
font-family: "Arial";
color: white;
}
html, body {
margin: 0 auto;
background-color: black;
max-width: 940px;
min-height: 100%;
}
.wrapper {
margin: 0 auto;
width: 92%;
background-image: url("images/backgrounds/wood.jpg");
}
/*********************************************************************************************************************************************
HEADER STYLING
*********************************************************************************************************************************************/
.header {
position: relative;
height: 100px;
background-color: #111111;
}
.header h1 {
position: relative;
margin: 0;
height: 20px;
text-align: center;
font-size: 2.3em;
top: 25%;
}
.header p {
position: relative;
top: 25%;
width: 100%;
font-size: 1em;
text-align: center;
}
/*********************************************************************************************************************************************
NAVIGATION BAR STYLING
*********************************************************************************************************************************************/
nav {
height: 40px;
}
nav ul {
}
nav ul li {
background-color: #111111;
text-align: center;
list-style-type: none;
width: 25%;
float: left;
/*margin: 0 1%;
border-radius: 10px;
box-shadow: 5px 5px 5px #000;*/
}
nav ul li a {
text-decoration: none;
line-height: 40px;
display: block;
position: relative;
}
nav ul li a:hover {
background-color: #222222;
}
/*********************************************************************************************************************************************
JUMBOTRON STYLING
*********************************************************************************************************************************************/
.jumbotron {
position: relative;
background-image: url(images/jumbotron/studiopic.jpg);
background-repeat: no-repeat;
background-size: cover;
width: 100%;
max-height: 53%;
}
.jumbotext h1 {
display: inline-block;
position: absolute;
bottom: 0px;
text-align: right;
}
/*********************************************************************************************************************************************
FOOTER STYLING
*********************************************************************************************************************************************/
.footer {
height: 100px;
width: 100%;
background-color: #111111;
}
<div class="wrapper">
<div class="header">
<h1>CM Sound</h1><br/>
<p>Create with us</p>
</div>
<nav>
<ul>
<li>Home</li>
<li>Audio</li>
<li>Pricing</li>
<li>Contact</li>
</ul>
</nav>
<div class="jumbotron">
<div class="jumbotext">
</div>
</div>
<div class="footer">
</div>
</div>
nav {
height: 40px;
position: relative;
}
just add the position relative to nav