Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I'm currently learning and practicing by coding my own website (so I'm a newbie), but I can't figure out why I have an extra link to the left of my first navigation links.
It only goes away if I delete my navigation links (HTML side) or if I taken away padding under the navigation in CSS, which I need to style.
This is an image of the page when rendered. The extra link is purple due to my mouse hovering: http://i.imgur.com/vEv32n5.png
<style>
body {
background-color: cadetblue;
font-size: 1em;
}
.siteheader {
display: inline;
}
.sitelogo {
float:left;
margin-left: 10px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.sociallinks {
display: inline;
float: right;
margin-right: 10px;
margin-top: 53px;
margin-bottom: 53px;
}
.sitenav {
display: inline;
text-align: center;
}
.sitenav a {
background: red;
text-decoration: none;
padding: 5%;
}
li a:hover {
background-color:#5d77dd;
}
</style>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Site Name Homepage</title>
</head>
<body>
<nav role="navigation">
<div class="siteheader">
<img src="../Img/TestingLogo.png" alt="Site Logo">
<ul>
<li class="sociallinks"><img src="../Img/IconGrayToneByAlfredo/facebook.jpg" alt="Facebook"></li>
<li class="sociallinks"><img src="../Img/IconGrayToneByAlfredo/twitter.jpg" alt="Twiiter"</li>
<li class="sociallinks"><img src="../Img/IconGrayToneByAlfredo/instagram.jpg" alt="Instagram"</li>
<li class="sociallinks"><img src="../Img/IconGrayToneByAlfredo/pinterest.jpg" alt="Pinterest"</li>
<li class="sociallinks"><img src="../Img/IconGrayToneByAlfredo/tumblr.jpg" alt="Tumblr"</li>
</ul>
<ul>
<li class="sitenav">Home</li>
<li class="sitenav">Work
<li class="sitenav">Blog</li>
<li class="sitenav">About</li>
<li class="sitenav">Store</li>
</ul>
</div>
</nav>
</body>
</html>
Please help me get rid of the extra link and thanks for any help!
It would be helpful if you could copy paste the code.
I did notice line 61 is missing a closing li tag, so maybe you can try that.
I've add ">" and it works, as suggested by Immortal Dude (it shows up as a comment instead of an answer so I don't know how to mark it as such).
Thanks everyone for your input!
Related
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 attempting to create a rudimentary sidebar, and this is my first attempt at it:
body {
font-family: courier;
font-size: 18px;
}
h1, h2, h3, h4 {
text-decoration: underline;
}
.content {
margin-left: 200px;
}
.side {
position: fixed;
height: 100%;
border: 5px solid black;
top: 0;
left: 0;
background: grey;
width: 180px;
padding: 10px;
#nav {
list-style-type: square;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/styles.css" />
<title>Test Page For Fixed Sidebar</title>
</head>
<body>
<div class="content">
<h1>Information</h1>
<p> To your left is a sidebar containing links </p>
<div class="side">
<ul id="nav">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
</div>
</body>
</html>
I seem to have a problem with styling the navigation sidebar, i.e. the element ul id=nav. I am trying to change the list's bullets to squares, and have even tried to remove them completely, but any changes to the corresponding stylesheet are not reflected on the page. I am able to style other elements it just seems to be this one which is causing me a problem.
Any help would be appreciated, thanks.
You can't target list items using class or id, you will have to target the li within the navigation bar. This is done by doing this
/* targeting the #nav and then looking for li tags withing it */
#nav > li
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 6 years ago.
Improve this question
I just started learning html/css and find some things confusing.
Here is my simple web-page:
<html>
<head>
<meta charset="utf-8">
<link rel = "stylesheet" type="text/css" href="styles/css/style.css" />
</head>
<body>
<ul class:"menu">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
and here's my css file:
li {
list-style-type: none;
margin-left: -35px;
}
.menu
{
width:200px;
border: 1px solid #000;
font-family: 'Times New Roman';
color: #880000;
border-radius: 10px;
box-shadow: 5px 5px #880000;
background-color: #F9E497;
font-size: 11.4pt;
line-height: 1.5;
margin-top: 5px;
margin-bottom: 5px;
}
I don't understand why my code doesn't accept .menu class.
When I change .menu to ul in my css file everything works great.
What am I missing ?
You are using : instead of =
Try:
<ul class="menu">
welcome to StackOverflow!
It's often confusing to new users, the difference between various selectors.
In addition to what others have posted, I'll post some general tips.
Use = when using attributes:
<ul class="myClass"></ul>
Use : when using styles:
<ul style="color: red;"></ul>
Also, in CSS, use :, similar to styles:
myRule {
myProperty: myValue;
}
In addition to inline styles(as I've done with ul above), you can use <style></style> tags in your html <head>:
<head>
<style>
myRule {
myProperty: myValue;
}
</style>
</head>
<ul class:"menu">
Should be
<ul class="menu">
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I have seen a navigation like this, and I absolutely love it.
How would I go about by having this navigation, I currently have a template of a horizontal navigation which I use now, however no matter how much tweaking I do, it isn't coming close this design.
I also like where the logo is placed, Can you help me tweak my code?
body {
font-family: 'Catamaran', sans-serif;
margin: 0 !important;
padding: 0 !important;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
padding-right: 50px;
background-color: #f3f3f3;
}
li {
float: right;
}
li a {
display: block;
color: #666;
padding: 60px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #f3f3f3;
color: #cc293f;
}
li a.active {
color: #cc293f;
background-color: #f3f3f3;
}
<html>
<html xmlns="http://www.w3.org/1999/xhtml">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href='https://fonts.googleapis.com/css?family=Catamaran:600' rel='stylesheet' type='text/css' />
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<title>Sharpturn Network v2</title>
<header>
</header>
<ul>
<img src="imgur.com/S17TggX">
<li><a class="active" href="#home">Upload</a>
</li>
<li>Support
</li>
<li>FAQs
</li>
<li>Home
</li>
</ul>
</body>
</html>
This involves using float. The solution would look something like this:
nav {
background: black;
height: 60px;
width: 100%;
}
#left-nav {
float: left;
color: white;
}
#right-nav {
float: right;
}
#faqs {
color: green;
}
ul {
list-style-type: none;
}
li {
display: inline;
padding-right: 20px;
line-height: 20px;
top: -10px;
text-transform: uppercase;
}
a {
color: white;
text-decoration: none;
}
<nav>
<div id='left-nav'>
<img src='http://lorempixel.com/image_output/technics-q-g-60-40-3.jpg' alt='my image' />HYIP Templates
</div>
<div id='right-nav'>
<ul>
<li><a href='uploads.html'>Upload</a>
</li>
<li><a href='support.html'>Support</a>
</li>
<li id='faqs'><a href='faqs.html'>FAQs</a>
</li>
<li><a href='contact.html'>Contact</a>
</li>
</ul>
</div>
</nav>
As you can see above, instead of using divs for navigation, we can use the HTML5 semantic nav tag. We break it down into sections, one which will be the left side and the other the right. We assign each of these divs a float property.
In order to provide a background color to the nav element, we have to specify a height and width property.
By default li elements are block elements. To display them on the same line and remove line breaks, we set the display property to inline. In order to vertically center these list elements, we will use both the line-height and top properties.
An easier solution would be to use bootstrap's navbar classes.
We can replicate the black navbar with the .navbar-inverse class. We can replicate the left nav and right nav respectively with the .nav-pull-left and .nav-pull-right classes as well.
So I've just started with HTML/CSS, and I decided to start with something simple, like a nav bar. But the thing is all the tutorials online only go up to this point (below code) and completely ignore how to put a space between each list item. I've tried adding width, but it makes an uneven space. Could someone please show me how to do this? Thanks!
Here's my code; a working model is here
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="bannercontent">
<ul id="banner">
<li id="bannerlinks"><a id= "links" href="#">What We Do </a></li>
<li id="bannerlinks"><a id= "links" href="#"> Pricing </a></li>
<li id="bannerlinks"><a id= "links" href="#"> Contact Us </a></li>
<li id="bannerlinks"><a id= "links" href="#"> Wholesale</a></li>
</ul>
</div>
</body>
</html>
CSS:
#import url(http://fonts.googleapis.com/css?family=Quicksand:300);
#bannercontent{
font-family: 'Quicksand:300';
text-align: center;
font-size: 25px;
}
#banner{
list-style-type: none;
margin: 0;
padding: 0;
}
#links{
text-decoration: none;
}
#bannerlinks
{
display: inline;
}
Use a margin value on li elements:
li { margin-right: 20px; }
This will add a space of 20px between all li elements.
DEMO
Please note: ids are supposed to be unique, classes are made for adding the same style to similar elements, so instead of <li id="bannerlinks"> it should be <li class="bannerlinks">. In your CSS you need to update #bannerlinks to .bannerlinks.
I will second the concept of class usage over id.
For the purpose of your question, I did not change that, but was able to get results using a padding on your bannerlink elements:
#bannerlinks
{
display: inline;
padding: .5em;
}
You can tweak the number to set spacing as wide as you want, for example 5em forced it to multiple lines in the JSFiddle window.