I am using CSS for the first time. I am just making a test website I just want to test my code to see if it works when the | didn't show up inbetween the About me and My Songs
Image of what I see
There is suppose to be a | sort of line inbetween About Me and My Songs
The CSS
nav ul li {
display: inline;
border-right 2px solid #111111;
padding-right: 8px;
padding-left: 8px
The HTML
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link type="text/css" rel="stylesheet" href="css/stylesheet1.css"/>
</head>
<body>
<nav>
<ul>
<li>About Me</li>
<li>My Songs</li>
</ul>
<h1>I am a YouTuber!</h1>
<p>This is my website check out other things about me above.</p>
</nav>
</body>
</html>
There is a colon missing in your border-right declaration.
It should be border-right: 2px solid #111111;
Related
This question already has answers here:
nth-of-type vs nth-child
(7 answers)
Closed 2 years ago.
<!DOCTYPE html>
<html>
<head>
<title>technical documentation page</title>
<style>
ul:nth-child(2){
float: left;
position: fixed;
width:auto;
}
nav>ul li{
border: 1px solid gray;
padding: 25px;
}
</style>
</head>
<body>
<nav id="navbar">
<header>
<h1>SSAGUJARAT WEB-TECHNICAL EXPLANATION</h1>
</header>
<hr>
<ul>
<li>LOGIN</li>
<li>MENUBAR</li>
<li>MASIKPATRAK</li>
<li>PAGARBILL</li>
<li>SHORTCUTS</li>
</ul>
</nav>
</body>
</html>
I have navbar floated in left and positioned fixed with css but when I add hr tag bellow header, navbar and each li inside navbar taking full width with border, navbar is missing float left and also missing position fixed. why??
Of course, ul will not have CSS anymore because you are targeting ul:nth-child(2) and after adding hr it should be ul:nth-child(3)
ul:nth-child(3){
float: left;
position: fixed;
width:auto;
}
nav>ul li{
border: 1px solid gray;
padding: 25px;
}
<!DOCTYPE html>
<html>
<head>
<title>technical documentation page</title>
</head>
<body>
<nav id="navbar">
<header>
<h1>SSAGUJARAT WEB-TECHNICAL EXPLANATION</h1>
</header>
<hr>
<ul>
<li>LOGIN</li>
<li>MENUBAR</li>
<li>MASIKPATRAK</li>
<li>PAGARBILL</li>
<li>SHORTCUTS</li>
</ul>
</nav>
</body>
</html>
Suggestion:
I'm not aware of your full code but In your case, you don't have to use nth-child you can easily use ul or consider adding a class to your ul (which is better) then target it in your CSS, here is an example:
ul.nav-items {
float: left;
position: fixed;
width:auto;
}
nav>ul.nav-items li{
border: 1px solid gray;
padding: 25px;
}
<!DOCTYPE html>
<html>
<head>
<title>technical documentation page</title>
</head>
<body>
<nav id="navbar">
<header>
<h1>SSAGUJARAT WEB-TECHNICAL EXPLANATION</h1>
</header>
<hr>
<ul class="nav-items">
<li>LOGIN</li>
<li>MENUBAR</li>
<li>MASIKPATRAK</li>
<li>PAGARBILL</li>
<li>SHORTCUTS</li>
</ul>
</nav>
</body>
</html>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
As a total beginner, I am making a website based totally on html and css... I'm having a problem though - the a tags in list aren't getting padded whatever I try to do in both the codes... I've tried to think of a reason, but cannot come up with one. Please see the html and css codes for the error. thanks.
the website image looks like this.
the html & css code looks like this:
ul{
display: block;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
}
li{
float: left;
}
li a{
display: block;
color: white;
text-align: center;
padding: 16 px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/styles.css">
<title>abc's official website</title>
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>Articles</li>
<li>Books</li>
<li>Awards</li>
<li>Shortstories</li>
<li>About</li>
</ul>
</nav>
<div>
<p>Welcome to <br><span> abc's</span> <br>official website</p>
</div>
</body>
</html>
but after you look at the website image, (I have tried ctrl+s on html and css and then running it again on the live server but no effect) there is no spacing or padding in the horizontal list. Also, I looked up most of my code from https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_menu
but I keep getting the same squeezed list result. Thank you for taking your time to read this.
You simply needed padding: 16px instead of padding: 16 px.
ul {
display: block;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/styles.css">
<title>abc's official website</title>
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>Articles</li>
<li>Books</li>
<li>Awards</li>
<li>Shortstories</li>
<li>About</li>
</ul>
</nav>
<div>
<p>Welcome to <br><span> abc's</span> <br>official website</p>
</div>
</body>
</html>
I'm doing a college course in the UK and I need to create a website using HTML and CSS. The navigation bar on the website looks fine but when I hover over it, there are empty bars that highlight and appear clickable when there is no text anywhere and it is really bugging me, any suggestions on how/why they have appeared?
the issue presented visually here
I have zero clues what the issue might be since I followed a video that was uploaded years ago and the channel hasn't been active in a long while so I haven't bothered commenting, hence me coming here.
This is the CSS I have for the nav bar.
body {
margin:0;
padding:0;
background:#ccc;
}
.nav ul {
background-color:#344629;
text-align:center;
padding:0;
margin:0;
}
.nav li {
display: inline-block;
}
.nav a {
text-decoration:none;
color:white;
width:100px;
display:inline-block;
padding:10px 10px 10px 0px;
font-size:17px;
font-family:Helvetica;
}
.nav a:hover {
background:#5e9342;
transition: 0.4s;
}
This is the HTML code.
<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset="UTF-8">
<title>Welcome To Lanarkshire</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">Home</li>
<li><a href="#">Gallery</li>
<li><a href="#">Attractions</li>
<li><a href="#">Food & Drink</li>
<li><a href="#">Contact Us</li>
</ul>
</div>
</html>
I obviously want only the text boxes to be highlighted and clickable.
Closing your anchor tags will likely resolve your problem. Flavio had it right in the comments...
As in:
<ul>
<li>Home</li>
<li>Gallery</li>
<li>Attractions</li>
<li>Food & Drink</li>
<li>Contact Us</li>
</ul>
I want to add a border between the list items , I'm following a tutorial and in the video I typed the same exact code (I didn't include all the CSS code here). The problem is there is no margin or space between the first list item and second list item. There's also an extra border after the .
header li :first-child {
border-right: 1px solid #373535;
}
<!DOCTYPE <!DOCTYPE html>
<html lang= "en" >
<head>
<title> My Recipe </title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="js/html5shiv.js"></script>
<!-- yolo this is my first project -->
</head>
<body>
<header>
<div class="Left">
<ul>
<li> Popular recipes </li>
<li>Whats New </li>
</ul>
</div>
<div class="Right">
<ul>
<li> Categories </li>
<li>Meal Ideas </li>
</ul>
</div>
<div id="logo">
<img src="images/chefs-hat.png"/>
<p>My recipes</p>
</div>
</header>
</body>
</html>
The result:
Try this css
header li *:first-child {
border-right: 1px solid #373535;
padding-right: 10px;
}
DEMO
css
ul {
list-style:none; /* will remove bullets and the space before the list will be gone as no bullet*/
}
li {
border-right:1px solid #000; /* add border as you like */
display:inline-block; /* to make it inline */
padding:20px; /* will decide space between border and content as per box model*/
}
Try moving the whitespace to inside the <a> tag ie.
<li>Popular recipes </li>
If you don't want the border on the second list item, then your CSS should be targeting <ul> not <li>. This will then try to target the first child of the <ul> tag.
header ul:first-child {
border-right: 1px solid #373535;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="nav">
<ul>
<li>Rooms</li>
<li>Food</li>
<li>Events</li>
<li>Offers</li>
</ul>
</div>
<div class="jumbotron">
<h1> Welcome</h1>
<p>Enjoy your stay</p>
</div>
</body>
</html>
.nav li{
color: #5a5a5a;
font-size: 11px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
display:inline;
list-style-type:none;
}
.jumbotron{
background-image:url(http://4.bp.blogspot.com/-NPN-yWZyRIM/T4jMz_3o0SI/AAAAAAAAAAA/LGEgW7642Rs/s1600/Greenlake_Room-Greenlake-01-1061468546-O.jpg');
height:300px;
}
My ul and background image do not show up when i run the code. Please help, im a beginner.
disregard:..........................................................................................................................
You Missed a quotes in this line
background-image:url(http://4.bp.blogspot.com/-NPN-yWZyRIM/T4jMz_3o0SI/AAAAAAAAAAA/LGEgW7642Rs/s1600/Greenlake_Room-Greenlake-01-1061468546-O.jpg');
To be corrected as
background-image:url('http://4.bp.blogspot.com/-NPN-yWZyRIM/T4jMz_3o0SI/AAAAAAAAAAA/LGEgW7642Rs/s1600/Greenlake_Room-Greenlake-01-1061468546-O.jpg');
You miss single quotes at the beggining of the image url
Try this
background-image:url('http://4.bp.blogspot.com/-NPN-yWZyRIM/T4jMz_3o0SI/AAAAAAAAAAA/LGEgW7642Rs/s1600/Greenlake_Room-Greenlake-01-1061468546-O.jpg');