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>
Related
I have begun to create a webpage using HTML and CSS. Within this webpage's HTML code is a container (class="container").
Within this container is an unordered list (class="Header-List") which I would like to arrange horizontally. However, it is currently arranged vertically and I am struggling to change this
Any help would be much appreciated
Code is below;
Please see line 13 in HTML
Please see line 16 in CSS
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Landing Page</title>
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<div class="Header-Logo">Header Logo</div>
<div>
<ul class="Header-List">
<li>Header Link One</li>
<li>Header Link Two</li>
<li>Header Link Three</li>
</ul>
</div>
</div>
</body>
</html>
CSS
body {
margin: 0;
}
.container {
background: RGB(33, 41, 49);
display: flex;
height: 180px;
}
.Header-Logo {
color: white;
font: 16px sans serif;
font-weight: bold;
margin: 4px;
flex: 1;
}
.Header-List {
color: white;
font: 12px sans serif;
list-style-type: none;
margin: 4px;
}
I have attempted to use justify-content and align-items within the .Header-List in CSS, however this hasn't helped
Add this line of code to your css
.Header-List li{
display: inline;
}
You just have to add display: flex; in your header to make it vertical
Add this:
.Header-List li {
display: flex;
}
you have to add .Header-List class to display as flex and for more designing u have to have code list items look my snapshot
.Header-List li {
display: flex;
}
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 last year.
Improve this question
I'm trying to style the links in my navbar by changing the font color to white, but the color remains unchanged. I've tried targeting different selectors: .navbar, .ul and .li but nothing works. What am I doing wrong? I've also tried changing it to other colors besides white, without success.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-image: url("stock.jpg");
}
.navbar{
background-color: black;
}
.navbar .li {
color: white!important;
text-decoration: none;
}
.navbar .li .a{
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
<title></title>
</head>
<body>
<div class="navbar">
<ul>
<li>Home</li>
<li>Menu</li>
<li>STEEPLE BREWERY</li>
<li>Reservations</li>
<li>Locations</li>
<li>Giftcards</li>
<li>Team</li>
</ul>
</div>
</body>
</html>
1.) li and a elements are no classes, therefore you must not write a dot before them in your CSS selectors:
2.) The color has to be defined for the link, i.e. the a tag, not for the li (the color for that will be overwritten by the link color, even by the default color, if you don't define one)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-image: url("stock.jpg");
}
.navbar {
background-color: black;
}
.navbar li a {
color: white;
text-decoration: none;
}
.navbar li a:hover {
text-decoration: underline;
color: yellow;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
<title></title>
</head>
<body>
<div class="navbar">
<ul>
<li>Home</li>
<li>Menu</li>
<li>STEEPLE BREWERY</li>
<li>Reservations</li>
<li>Locations</li>
<li>Giftcards</li>
<li>Team</li>
</ul>
</div>
</body>
</html>
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 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.