I am trying to put some easy mathematical symbols on my html-page. To this end, I followed
this manual and included
<script type="text/javascript" async
scr="https://cdnjs.cloudflare.com/ajax/libsmathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
into the header. Then, I put some very easy LaTeX-Code in my html-file, namely
$$\pi$$ \(\mathbb{R}\)
Unfortunately, these mathematical symbols are not displayed. Do you have any idea why MathJax does not work properly?
Here is the whole html-Code: Maybe you find some reason why MathJax does not work.
<!DOCTYP html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<link rel="stylesheet" href="../../style1.css" type="text/css">
<style> #picture {max-width: 350px; height: auto; } </style>
<link rel="stylesheet" href="../style2.css" type="text/css">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<script type="text/javascript" async
scr="https://cdnjs.cloudflare.com/ajax/libsmathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
</head>
<body>
<?php include ("kopf.php"); ?>
<div class="bodydiv">
<h2 class="title2">Title1</h2>
<hr /><br />
<img id="picture" src="picture.jpg" alt="picture">
<p> This is just a test... $$\pi$$ \(\mathbb{R}\)</p>
<h3 class="title">Title2</h3>
<p><ul>
<li>Link 1 </li>
</ul></p>
<h3 class="title">Title3</h3>
<p><ul>
<li> Link 1</li>
<li> Link 2 </li>
<li> Link 3 </li>
<li> Link 4 </li>
</ul></p>
<h3 class="title3">Title4</h3>
<ul>
<li> Literature 1</li>
<li> Literature 1</li>
<li> Literature 1</li>
<li> Literature 1</li>
<li> Literature 1</li>
</ul>
<br />
<?php include ("footer.php"); ?>
</div>
</body>
</html>
Related
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>
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 need to set the button on the right but this way isn't working:
<ul class="breadcrumb">
<li>Home</li>
<li></li>
<li class="active">Data</li>
<li>Back</li>
</ul>
Only the last <li>, the button, has to be on the right.
You need to float li tag, not a.
I'd suggest to update to bootstrap 4, there we can use flex juice :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<style>
.breadcrumb > *:last-child.pull-right::before { display: none; }
</style>
</head>
<body>
<ul class="breadcrumb">
<li>Home</li>
<li>Level 1</li>
<li class="active">Level 2</li>
<li class="pull-right">Back</li>
</ul>
</body>
</html>
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 guys so a site I've been working on is acting up and has randomly re-positioined itself wierdly on the top bar and I have no idea why. I thought everything was fine before, however recently I saw the site and it just so happened that theres a wierd space at the top of the page between the nav bar and the window url. Can someone inspect it and help me figure out whats causing this and if there would be a quick or easy fix. The site is www.omegadesignla.com
and any help would be appreciated, thanks.
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Omega Design | LA</title>
<meta name="description" content="Web development and printing services serving the greater los angeles area">
<meta name="keywords" content="web development, printing, graphics design, los angeles, santa clarita">
<link rel="stylesheet" href="stylesheets/app.css" />
<link rel="stylesheet" href="stylesheets/foundation-icons.css" />
<link rel="stylesheet" href="css/normalize.css" />
</head>
<body>
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<span><img class="logo" src="img/logofinal.png"><span>
</li>
<li class="toggle-topbar menu-icon">
Menu
</li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li>About us</li>
<li>Contact us</li>
<li class="has-dropdown">
Services
<ul class="dropdown">
<li>Print Media</li>
<li>Web Development</li>
<!-- <li>Promotional Items</li> -->
<!-- <li class="active">Active link in dropdown</li> -->
</ul>
</li>
</ul>
</section>
</nav>
<div class="container">
<header>
There's a line " " right after the body tag. Remove it and this should reposition the navigation bar correctly.
I just realized that you can only see this if you 'inspect element' in development tools.
If you can edit the page's source, make sure that the <nav class="top-bar" data-topbar> comes right after <body>. Right now, there is a blank line (line 16).
Solve this problem try this
body{
font-size: 0;
}