Since yesterday, i'm having a weird issue with my Flask projects. I'm following a tutorial and it's supposed to look like this:
enter image description here
But it looks like this:
enter image description here
I've been looking for an answer since yesterday... any advice ?
Here is the code:
I have a base.html file:
<!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">
{%block head%}{%endblock%}
<link rel="stylesheet" href="{{ url_for( 'static', filename='css/main.css')}}"
</head>
<body>
{%block body%} {%endblock%}
</body>
</html>
and a index.html that contains the table:
{%extends 'base.html'%}
{%block head%}
{%endblock%}
{%block body%}
<div class="content">
<h1>Task Master</h1>
<table>
<tr>
<th>Task</th>
<th>Added</th>
<th>Actions</th>
</tr>
<tr>
<td></td>
<td></td>
<td>
Delete
<br>
Update
</td>
</tr>
</table>
</div>
{%endblock%}
THANKS SO MUCH !
Related
I have recently begun studying html, im trying to make a small crappy website, and when I copy full path and then paste it into the browser it just gives me a blank screen. Im sorry if this is simple, but nothing I do seems to change it.
code:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title><strong>Stanislav Stanislavich</strong></title>
</head>
<table>
<tr>
<td>
<img src="Doomer3.jpeg" alt="Sad_Slav_Boi.jpeg">
</td>
<td>
<li>Just your average IT nerd in Eastern Europe</li>
</td>
</tr>
</table>
<hr>
its just not appearing, a blank screen.
You are missing a <body> tag.
Everything you want to display on the page, goes in the <body> tag. Like this:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title><strong>Stanislav Stanislavich</strong></title>
</head>
<body>
<table>
<tr>
<td>
<img src="Doomer3.jpeg" alt="Sad_Slav_Boi.jpeg">
</td>
<td>
<li>Just your average IT nerd in Eastern Europe</li>
</td>
</tr>
</table>
<hr>
</body>
I'm trying to complete an exercise. In the exercise you create four files: index.html, home.html, about.html, and contact.html. Using jQuery's .load function, you are supposed to be able to use index.html as a template and load the other files within it (still seeing the index.html nav bar). Instead what is happening is the other html files appear to completely replace index.html in the browser. I can't figure out why. I am following the exercise instructions.
Here is the code:
index.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>Multi-Page Site & Template</title>
</head>
<body>
<nav>
Home
About
Contact
</nav>
<h1>Index Page</h1>
Here is where the Index Page is.
<div id="content">
</div>
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-
u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
<script>
$(function() {
$("#content").load("home.html");
$("nav a").click(function() {
var href = $(this).attr("href");
$("#content").load(href);
return false;
});
});
</script>
</body>
</html>
home.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>Home Page</title>
</head>
<body>
<h1>Home Page</h1>
<p>
This is the home page. All content has been edited for brevity.
</p>
</body>
</html>
about.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>About Page</title>
</head>
<body>
<h1>About Page</h1>
<h2>Things to know about the About Page</h2>
<ol>
<li>It's named About Page</li>
<li>It has no styling</li>
<li>It's very short</li>
</ol>
</body>
</html>
contact.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>Contact Page</title>
</head>
<body>
<h1>Contact Page</h1>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
<tr>
<td>Billy</td>
<td>Blazer</td>
<td>41</td>
</tr>
</table>
</body>
</html>
The exercise said the return false was supposed to prevent the other pages from replacing index.html. Why does that not work, or what else is wrong with the code?
Thanks!
Please change your code to below code:
In this way type="type/html" is changed to type="text/html"
$(function() {
$("nav a").click(function() {
var href = $(this).attr("href");
$("#content").html('<object type="text/html" data="'+ href +'">
</object>');
return false;
});
});
For the past few days I have been experiencing a mysterious problem. I have defined some css, and after the first ruleset it is not being applied. So I wrote some basic css here to see if there still is a problem, and there was. Is there a simple mistake I have been making?
style.css
div {
background: linear-gradient(to top, lightblue, white);
};
th {
text-align: left;
};
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div>
<table>
<tr>
<th>Item</th>
<th>Quantity</th>
</tr>
<tr>
<td>Toothbrush</td>
<td>2</td>
</tr>
<tr>
<td>Shaving Cream</td>
<td>1</td>
</tr>
</table>
</div>
</body>
</html>
Do not use ; in your CSS after the closing }.
I have a simple html page with just one text field and a button.
However, the text field is so wide. How can I limit the maximum width (visual length not character number) to like 200px?
If possible without Javascript and if possible, the width should be kept at 100%. I played with maxlength and size but without success.
https://jsfiddle.net/Smolo/udh9s6j2/
<!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">
<title>Page Title</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="screen" />
</head>
<body>
<div class="container">
<div class='col-sm-12'><form action='' method='post'>
<table class='table table-hover table-responsive table-bordered'>
<tr>
<td>Password</td>
<td><input type='password' name='password' class='form-control' required></td>
</tr>
<tr>
<td></td>
<td><button type='submit' class='btn btn-primary'>Reset</button></td>
</tr>
</table>
</form></div></div>
</body>
</html>
Using CSS max-width should do the trick.
Explanation: CSS's max-width makes sure that the width of the target element does not exceed 200px (even with width:100% set), i.e. the actual width of the element in your case will evaluate to either 100% or 200px, whichever is smaller.
.form-control {
max-width:200px;
}
<!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">
<title>Page Title</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="screen" />
</head>
<body>
<div class="container">
<div class='col-sm-12'><form action='' method='post'>
<table class='table table-hover table-responsive table-bordered'>
<tr>
<td>Password</td>
<td><input type='password' name='password' class='form-control' required></td>
</tr>
<tr>
<td></td>
<td><button type='submit' class='btn btn-primary'>Reset</button></td>
</tr>
</table>
</form></div></div>
</body>
</html>
I tried every configuration settings like CODE STYLE > FILE AND CODE TEMPLATES or HTML FORMAT SETTINGS ,but no matter what I did I can never reform this ,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
</div>
<script src="src/app.js"></script>
</body>
</html>
what I want is as below,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
</div>
<script src="src/app.js"></script>
</body>
</html>
My code style format for HTML is:
HTML Code formatting is configured in Settings | Editor | Code Style | HTML; to get the desired result, you need to remove html and body from Do not indent children of: list in Other tab: