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">
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>
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 5 years ago.
Improve this question
I am in HTML, and I'm making a header for my website. I have a website title, followed by some links to various pages. By default, they are right next to each other, and I want them to be apart. I've tried the simple option of just adding multiple spaces, but it puts it as just 1 space.
If they are separate links then you should put padding on the link or some margin
`Link text`
Please add your code here so that you will get more help at SO.
Is this what you are trying? See if this helps.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
}
</style>
</head>
<body>
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
</ul>
</body>
</html>
Here's the code and I test it. if you want to change the spacing between elements just change the padding of the li element
<style type="text/css">
* {
padding: 0;
margin: 0;
}
h1 {
float: left;
}
ul {
list-style: none;
padding: 0;
margin: 0;
float: left;
}
li {
display: inline;
padding-left: 10px; // this is the space between elements you can add whatever you like
}
<h1>The website title</h1>
<ul>
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
</ul>
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!
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 8 years ago.
Improve this question
I have a simple webpage set up to test a method of centering a floated div. It is supposed to center the buttons and have them all float left. In chrome, the buttons are not floated. When I inspect element it shows that the float is overridden. I have checked the whole document, and there isn't any float: none, however chrome says there is. In internet explorer the website displays fine. Is this a problem with chrome's defaults? How do I fix it? From what I have learned CSS gives precedence to more specific orders, so the float: left in the li css should override any Chrome defaults...
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Center Floated Div</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="content">
<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
</html>
CSS:
html {
margin: 0;
padding: 0;
}
body {
background-color: #32127A;
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
#nav {
float :right;
position :relative;
left :-50%;
text-align :left;
}
#nav ul {
list-style :none;
position :relative;
left :50%;
}
#nav li {
float: left
position: relative; /* ie needs position:relative here*/
}
#nav a {
text-decoration :none;
margin :10px;
background :red;
float:left;
border :2px outset blue;
color :#fff;
padding :2px 5px;
text-align :center;
white-space :nowrap;
}
#nav a:hover{
border: 2px inset blue;
color: red;
background: #f2f2f2;
}
#content {
overflow: hidden /* hide horizontal scrollbar*/
}
You are missing the ; after the float in the css. You need to close it.
DEMO (Working with the missing ;)
Your code doesn't have a semicolon after the float. If the problem still persists you should add !important after the rule.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I have a nav list. I want the lighter gray area to be clickable as a link as opposed to just the text. The source is:
http://mattcdecker.comeze.com/HELP/
<nav>
<ul>
<li>Work</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
CSS
nav{
float:right;
}
nav li{
float:left;
text-transform:uppercase;
font-size:24px;
background:#333;
margin:70px 10px 0 10px;
padding:10px;
}
nav a{
color:#666;
}
nav a:hover{
color:#fff;
}
Please post code, not a link.
You need to move the padding from the list element to the anchor, and also add display:block to the anchor.
nav li {
float: left;
text-transform: uppercase;
font-size: 24px;
background: #333;
margin: 70px 10px 0 10px;
padding: 0;
}
nav a {
color: #666;
display: block;
padding: 10px;
}
The issue you have is that your nav HTML is malformed so won't display properly.
<nav>
<!-- ^ this probably doesn't belong here -->
<ul>
<!-- ^ this certainly doesn't belong here -->