I am programming a flask application. In that I have a main html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table generator</title>
<link rel="stylesheet" href="/static/lib/skeleton/normalize.css" />
<link rel="stylesheet" href="/static/lib/skeleton/skeleton.css" />
<link rel="stylesheet" href="/static/style.css" />
</head>
<body>
<div class="container">
<ul class="navigation">
<li class="navigation-item">
Home
</li>
<li class="navigation-item">
Instructions
</li>
</ul>
{% block content %}{% endblock %}
</div>
</body>
</html>
for my stylesheet I linked this css file:
.navigation {
list-style-type = none;
}
But when I am running the file the list still looks like this:
I want my list to not have the dots in front. What am I doing wrong?
This code will work, you need to apply that style to the list element itself.
.navigation li{
list-style-type: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table generator</title>
<link rel="stylesheet" href="/static/lib/skeleton/normalize.css" />
<link rel="stylesheet" href="/static/lib/skeleton/skeleton.css" />
<link rel="stylesheet" href="/static/style.css" />
</head>
<body>
<div class="container">
<ul class="navigation">
<li class="navigation-item">
Home
</li>
<li class="navigation-item">
Instructions
</li>
</ul>
</div>
</body>
</html>
Related
I want to make sub menu under the Accounts button. I want the sub menu to show when I hover over Accounts button. I tried this but it doesn't work:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Ahmed Shihab | Me </title>
<link rel="stylesheet" href="about.css" >
<link href="https://allfont.net/allfont.css?fonts=courier" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css2?family=Arvo&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
</head>
<body>
<div class="topnav">
Home
About
<a class="acc" href="acc">Accounts</a> <!-- THIS IS WHAT I WANT TO MAKE IT BUTTON -->
<a class="hide" href="face">-Facebook </a>
</div>
</body>
</html>
So I want to change Account to a button that when it is hovered over, it shows me the Facebook link, and I want to add a Twitter link downside the Facebook.
CSS:
.acc {
font-family:'Courier', arial;
color:black;
font-size:3em;
text-decoration:none;
text-align:center;
overflow:hidden;;
}
.hide {
font-family:"Courier";
color:black;
font-size:3em;
display:hidden;
position:relative; top:45px; right:234px;
overflow:hidden;
}
Is this what do you want to achieve?
.subnav{
display: none;
}
.topnav li:hover .subnav{
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Ahmed Shihab | Me </title>
<link rel="stylesheet" href="about.css" >
<link href="https://allfont.net/allfont.css?fonts=courier" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css2?family=Arvo&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
</head>
<body>
<ul class="topnav">
<li>Home</li>
<li>About
<ul class="subnav">
<li class="acc">Accounts</li> <!-- THIS IS WHAT I WANT TO MAKE IT BUTTON -->
<li class="hide">-Facebook</li>
</ul>
</li>
</div>
</body>
</html>
I would highly recommend you to learn something about CSS selectors and especially about :hover.
This is the HTML:
<!DOCTYPE html>
<head>
<title> navigation practice</title>
<link rel="stylesheets" type="text/css" href="style.css"/>
</head>
<body>
<ul>
<li> HOME</li>
<li> ABOUT
<ul>
<li><a>camp sites</a></li>
<li><a>our team</a></li>
<li><a>wildlife</a></li>
<li><a>resources</a></li>
</ul>
</li>
<li> CONTACT
<ul>
<li><a>email</a></li>
<li><a>phone</a></li>
</ul>
</li>
<li>things to do
<ul>
<li><a>shops</a></li>
<li><a>activities</a></li>
<li><a>trails</a></li>
</ul>
</li>
<li> MORE</li>
</ul>
</body>
</html>
The CSS just has:
body {
background: blue
}
both the HTML and CSS are in the same file. I’ve checked spelling on the link, syntax and any errors in the CSS. I’ve also tried opening the file in a different browser. I have this problem every time I start a new project. I’m using Notepad++.
The problem is on your stylesheet tag, you added a unnecessary "S" at the end of the word, it is supposed to be:
<link rel="stylesheet" type="text/css" href="style.css"/>
not stylesheets.
And you forgot to open the html tag after the <!doctype html> declaration, and the charset declaration. Here is how it is supposed to be:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> navigation practice</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<!--YOUR CODE HERE-->
</body>
</html>
Try validating your code here: https://www.freeformatter.com/html-validator.html. It will show what's wrong on it.
I can't for the life of me get rid of nav-pills' default blue background color. Before you ask, I have looked up similar questions, tried the proposed solutions, modified some but nothing seems to work. I'm fairly new to HTML/CSS and this is probably going to be some silly question, but what the hell. Since I'm working with a grey background navigation bar, I'd like the tabs to have a color that'd complement it.
Here's the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="Random.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<nav>
<ul class="nav nav-pills">
<li>C.O. Dev.
</li>
<li class="pull-right">Contact
</li>
<li class="pull-right">My Work
</li>
<li class="pull-right">About
</li>
<li class="pull-right active">Home
</li>
</ul>
</nav>
</body>
</html>
you must override it with your custom css. nav.less ruled the style of active nav. create your own css and use this:
.nav-pills>li.active>a{
color: #337ab7 !important;
background-color: #eee !important;
}
.nav-pills>li.active>a{
color: #337ab7 !important;
background-color: #eee !important;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="Random.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<nav>
<ul class="nav nav-pills">
<li>C.O. Dev.
</li>
<li class="pull-right">Contact
</li>
<li class="pull-right">My Work
</li>
<li class="pull-right">About
</li>
<li class="pull-right active">Home
</li>
</ul>
</nav>
</body>
</html>
hi i'm working in visual studio with bootstrap.
i'm trying to design the section at the and of code, but it doesn't work (i don't have the access to id="TikNehesTitle".
i added my HTML and CSS (in comment) code here.
thanks for responding.
my HTML code:
<!DOCTYPE html>
<html lang="he">
<head>
<title></title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="Stylesheet" type="text/css" href="StyleSheet.css" />
</head>
<body dir="rtl">
<div class="container">
<nav class="navbar navbar-inverse">
<!-- menu list-->
<ul class="nav navbar-nav">
<li>הירשם</li>
<li>התחבר</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>צור קשר</li>
<li>אודות</li>
<li>איזור מגורים</li>
<li>דף הבית</li>
</ul>
</nav>
</div>
<section>
<div class="container" id="TikNehesTitle"><h1>תיק נכס</h1></div>
</section>
</body>
</html>
CSS id is set with # prefix.
Simply set your CSS to:
body {
}
#TikNehesTitle {
height: 100px;
width: 100px;
border: 1px solid red;
}
I am getting this error when validating my html code
element head is missing a required instance of child element title
<!DOCTYPE html>
<html lang="en">
<div id="head">
<link rel="stylesheet" href="stylesheet.css">
</div>
<body>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>All Posts</li>
</ul>
</nav>
Well.. try removing
<div id="head">
<link rel="stylesheet" href="stylesheet.css">
</div>
And replace it with
<head>
<link rel="stylesheet" href="stylesheet.css">
</head>
This will surely work well. Trust me.
Your head also needs a title tag.
<title> My website </title>
The whole thing should look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My website</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
Your page content
</body>
</html>
An html tag requires a head tag, which in turn requires a title tag. You're missing these things. Instead, you're trying to use a div as a head, which is very invalid. I think you meant this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Some Page Title</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
...
it mut look like this:
<head> is a tag.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>All Posts</li>
</ul>
</nav>