I'm trying to make a webpage with a horizontally aligned navigation bar menu on the right and for some reason nothing I'm trying is seeming to work? If anyone could point out what I'm doing wrong that would be great, thanks in advance. Here is my code:
HTML:
<!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">
<title>ArtStore</title>
<link rel = "stylesheet" href="styles.css">
</head><body>
<div class="navbar">
<div class="logo">
<img src="logo.png" width="125px">
</div><nav class="topnav">
Home
Products
Login
Cart
</nav>
</div>
</body>
</html>
CSS:
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.navbar{
display:flex;
align-items:center;
padding:20px;
}
.topnav{
flex:1;
text-align: right;
}
.topnav ul{
display: inline-block;
list-style-type: none;
}
.topnav ul li{
display: inline-block;
margin-right:20;
}
a
{
text-decoration: none;
}
All it's showing is the logo on the left with the text all horizontally laid out underneath it, as well as underlined :/
This code actually works - I'd linked the wrong CSS file. Wow lol
Related
This question already has answers here:
I need an unordered list without any bullets
(16 answers)
Closed 10 months ago.
guys i need help my marker tag aint getting removed :(
*{
margin: 0;
padding: 0;
}
.navbar{
display: flex;
align-items: center;
justify-content: center;
}
.navlist{
display: flex;
margin: 0;
padding: 0;
text-decoration: none;
}
.navlist li{
text-decoration: none;
}
.navbar li a{
display: flex;
text-align: center;
justify-content: center;
flex-direction: row;
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">
<title>WebPage</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="body">
<div class="navbar">
<ul class="navlist">
<li>home</li>
<li>home</li>
<li>home</li>
<li>home</li>
<li>home</li>
</ul>
</div>
</section>
</body>
</html>
I did set it to text decoration to none but it ain't working pls help
I was trying to make a navbar but... it ain't working
And I need it to be removed but it ain't
Someone Please Tell me how do i remove those markers
dude let me post the question
You have to add list-style: none; to your ul tag
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>
I can apply "color:red" on hover, but not margin
can't figure out what I'm doing wrong
my css
.contact{
color:black;
position:relative;
}
.contact:hover{
color:red;
margin-top:20px;
}
my html
<ul>
<li>
<a class="contact">move me on hover</a>
</li>
</ul>
It is an inline element. You should set the display for it to block or inline-block to make margin work.
.contact{
display: block;
color:black;
}
.contact:hover{
color:red;
margin-top:20px;
}
You can't set top margin to an inline element. You need to make your element block or inline-block if you want to set top margin in your element.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Image</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<style>
.contact {
color: black;
position: relative;
display:block;
}
.contact:hover {
color: red;
margin-top: 20px;
}
</style>
</head>
<body>
<ul>
<li>
<div>abc</div>
<a class="contact">move me on hover</a>
</li>
</ul>
</body>
</html>
Use top instead of margin-top:
.contact:hover{
color:red;
top:-20px;
}
<!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">
<title>Document</title>
<style>
.contact{
color:black;
}
li:hover{
color:red;
margin-top: 20px;
}
.contact:hover{
color:red;
}
</style>
</head>
<body>
<ul>
<li>
<a class="contact">move me on hover</a>
</li>
</ul>
</body>
</html>
This is the code I wrote and I don't know what I did wrong, I'm trying to recreate this interface but all the content just disappears, the only thing that shows is a white rectangle on the top of the page...
This makes no sense to me and I don't know how to address it
website taken from oswd.org
<!DOCTYPE html>
<html lang="en-UK">
<head>
<title>Bookish recreated by LuckyP</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=viewport-width, initial-scale=1.0">
<meta name="author" content="Luca Santarelli">
<meta name="description" content="Come to see the first practice website by LuckyP,
commonly called Lucio, depending on the platform you watch him on">
<meta name="robots" content="index">
<meta name="keywords" content="bookish, real web development project">
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
font-family:"trebuchet ms", helvetica, sans-serif;
background-image: url(images/bg.gif);
}
#wrap{
background-color:white;
padding:15px;
margin:auto;
width: 800px;
}
.orange-text{
color:#D97900;
}
.bold{
font-weight:bold;
}
header{
position:relative;
background-image: url(images/headbg.gif);
background-repeat: repeat-x;
width:770px;
}
h1{
position:absolute;
left:40px;
bottom:15px;
}
header ul{
position:absolute;
right:30px;
bottom:15px;
}
header ul li{
color:#fff;
text-decoration:underline;
border-right:#D97900;
float:left;
padding: 10px;
}
header ul li:hover{
background-color:#D97900;
opacity: 0.7;
}
</style>
</head>
<body>
<div id="wrap">
<header>
<h1><span class="orange-text">my</span><span class="bold">website</span>name</h1>
<ul>
<li>homepage</li>
<li>recent articles</li>
<li>about us</li>
<li>contact us</li>
</ul>
</header>
</div>
</body>
</html>
This is the output:
Remove "bottom:15px;" from H1 and "header ul".
I'm mocking up a site as an assignment and my text is appearing behind my nav bar. I need it to be under the nav bar how can I fix this?
so I've tried setting the margin-bottom to 50px and setting it as important.
I've tried setting the nav bar as static.
I've tried messing with a bunch of different settings as well but I can't seem to find something to work.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="gregslist.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap" rel="stylesheet">
</head>
<header>
<nav>
<ul>
<li class="greg">Greg's List</li>
<li>Post</li>
<li>Account </li>
</ul>
</nav>
</header>
<body>
<div class="search">
<input type="text" placeholder="Search Software Jobs"> </input>
<label> Search Jobs </label> </div>
</body>
</html>
head{
font-family: 'Roboto', sans-serif;
height:100%vh;
}
nav{
top:0;
right:0;
left:0;
background-color:#dddd;
position:fixed;
padding:10px;
}
ul {
width:100%vp;
margin: 0;
padding: 0;
}
li {
list-style-type: none;
float: right;
text-align:center;
}
.greg{
float:left;
text-align:center;
font-size:25px;
}
li a {
display:block;
padding:8px;
color:purple;
font-size:20px;
text-decoration:none;
}
Because your nav is position: fixed;, it doesn't push the rest of your content down the page. Anything absolutely positioned, be it absolute,sticky, or fixed, is not a part of the DOM in the same way that a normal element is. To non-absolute positioned elements it may as well not exist. What you want to do is add a margin-top to your content like this:
head{
font-family: 'Roboto', sans-serif;
height:100%vh;
}
nav{
top:0;
right:0;
left:0;
background-color:#dddd;
position:fixed;
padding:10px;
}
ul {
width:100%vp;
margin: 0;
padding: 0;
}
li {
list-style-type: none;
float: right;
text-align:center;
}
.greg{
float:left;
text-align:center;
font-size:25px;
}
li a {
display:block;
padding:8px;
color:purple;
font-size:20px;
text-decoration:none;
}
body{
margin-top: 80px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="gregslist.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav>
<ul>
<li class="greg">Greg's List</li>
<li>Post</li>
<li>Account </li>
</ul>
</nav>
</header>
<div class="search">
<input type="text" placeholder="Search Software Jobs"> </input>
<label> Search Jobs </label> </div>
</body>
</html>