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 }.
Related
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 !
I have an issue that I cannot link my external style.css to my index.html file. Both files are in exact same directory.
My style.css :
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
And I am trying to link it in my html as following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>test</title>
<link href="style.css" type="text/css" rel="stylesheet"/>
</head>
Full html script:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>test</title>
<link href="style.css" type="text/css" rel="stylesheet"/>
</head>
<br>
<table id="t1">
<caption>Operation table</caption>
<thead>
<tr>
<th>Operation code</th>
<th>To Do</th>
<th>Done</th>
<th>Left</th>
</tr>
</thead>
<tbody>
<tr>
<td>abc</td>
<td>1000</td>
<td>50</td>
<td>
</td>
</tr>
<tr>
<td>def</td>
<td>555</td>
<td>50</td>
<td id ="number1">
</td>
</tr>
</tbody>
</table>
<p id="demo"></p>
</html>
All the examples that I have looked up online use exact same method.
I have connected to the webserver and turned on developer mode to see if I can see anything. I have managed to spot an error:
Refused to apply style from '192.168.10.173:8080/style.css' because its MIME type ('text/html') is not supported stylesheet MIME type, and strict MIME checking is enabled
Still looking into why it could be caused
CSS files shouldn't have style tags. Simply remove them and it'll work.
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
When you want to declare styles inside of an HTML file, then you have to put the CSS between style tags.
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 have this simple table. How do I prevent the table from overflowing the boundaries of the panel ? What is the right way to handle this in bootstrap when the contained table has cell data that is too long? I looked at panel with table example here to write what I have:
Bootstrap panel with table
I believe I am using the outer most "container" div incorrectly as well as I am applying row classes to it directly.
body {
font-family: 'Oxygen', sans-serif;
background-color: #3F88BF;
}
.table-condensed {
font-size: 12px;
}
<!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">
<meta name="description" content="{{ description }}" />
<title>{{title}}</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container col-sm-10 col-sm-offset-1"> <!-- div container -->
<div class="page-header">
<h1 id="top">Some title</h1>
</div>
<div class="panel panel-default">
<div class="panel-body">
<h1 id="abc">ABC</h1>
<a class="pull-right" href="#top">top</a>
</div>
<table class="table table-bordered table-condensed table-striped">
<thead>
<tr>
<th>Head1</th>
<th>Head2</th>
<th>Head3</th>
<th>Head4</th>
<th>Head5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data1</td>
<td>Data2</td>
<td>Data3</td>
<td>Data4</td> <td>Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data555555</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
If your cell data is too long it should be solved using text-overflow: ellipsis;. It will render Render an ellipsis ("...") to represent clipped text.
So your table cell will not overflow.
You will also have to use table-layout: fixed.
If you use table-layout: fixed- Table and column widths are set by the widths of table and col elements or by the width of the first row of cells. Cells in subsequent rows do not affect column widths.
Modified Snippet
body {
font-family: 'Oxygen', sans-serif;
background-color: #3F88BF;
}
.table-condensed {
font-size: 12px;
}
.table {
table-layout:fixed;
}
.table td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<!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">
<meta name="description" content="{{ description }}" />
<title>{{title}}</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container col-sm-10 col-sm-offset-1"> <!-- div container -->
<div class="page-header">
<h1 id="top">Some title</h1>
</div>
<div class="panel panel-default">
<div class="panel-body">
<h1 id="abc">ABC</h1>
<a class="pull-right" href="#top">top</a>
</div>
<table class="table table-bordered table-condensed table-striped">
<thead>
<tr>
<th>Head1</th>
<th>Head2</th>
<th>Head3</th>
<th>Head4</th>
<th colspan="4">Head5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data1</td>
<td>Data2</td>
<td>Data3</td>
<td >Data4</td> <td colspan="4">Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data555555</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
You need to make table-layout: fixed; and in the last column use word-wrap: break-word;, because the last column contains a single word that is too long.
body { font-family: 'Oxygen', sans-serif; background-color: #3F88BF; }
.table-condensed { font-size: 12px; table-layout: fixed;}
.table-condensed td {word-wrap: break-word;}
<!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">
<meta name="description" content="{{ description }}" />
<title>{{title}}</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container col-sm-10 col-sm-offset-1"> <!-- div container -->
<div class="page-header">
<h1 id="top">Some title</h1>
</div>
<div class="panel panel-default">
<div class="panel-body">
<h1 id="abc">ABC</h1>
<a class="pull-right" href="#top">top</a>
</div>
<table class="table table-bordered table-condensed table-striped">
<thead>
<tr>
<th>Head1</th>
<th>Head2</th>
<th>Head3</th>
<th>Head4</th>
<th>Head5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data1</td>
<td>Data2</td>
<td>Data3</td>
<td>Data4</td> <td>Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data555555</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I'm new in HTML and I'm trying to use bootstrap in my project.
The problem is that I can't load bootstrap.min.css and none of the classes work. I did some searching and tried some ways but they didn't work for me
Here is my code :
<!DOCTYPE html>
%{--<!doctype html>--}%
<html>
<head>
<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="bootstrap.min.css" rel="stylesheet" media="screen">--}%
<link rel="stylesheet" href="E:\TekDays\web-app\bootstrap-3.3.7-dist\css\bootstrap.min.css" type="text/css">
<title>TekDays - The Community is the Conference!</title>
</head>
<body>
<div class="container">
<table class="table table-bordered">
<thead>
<tr>
<th>FirstName</th>
<th>FirstName</th>
</tr>
</thead>
<tr>
<td>Mammad</td>
<td>mammadii</td>
</tr>
<tr>
<td>Akbar</td>
<td>Akbarii</td>
</tr>
</table>
</div>
</body>
</html>
Using absolute path results in an error(use f12): Not allowed to load local resource: file:///E:/TekDays/web-app/bootstrap-3.3.7-dist/css/bootstrap.min.css
I read somewhere that it's only chrome's error and Edge or IE browsers don't have this problem, they don't but the results are the same, css classes are not applied.
I put the bootstrap.min.css under the same directory as my html page is and used <link href="bootstrap.min.css" rel="stylesheet" type="text/css" media="screen"> instead of what is used in the code.
but this time I got error 404: not found
This seems to be my problem with the path I've given...but I don't know what to do
Any idea what's wrong with it?
The slash used here
<link rel="stylesheet" href="E:\TekDays\web-app\bootstrap-3.3.7-dist\css\bootstrap.min.css" type="text/css">
would cause user browser to access the file from his filesystem.
Change the path
<link rel="stylesheet" href="E:/TekDays/web-app/bootstrap-3.3.7-dist/css/bootstrap.min.css" type="text/css">
UPDATED ANSWER :
Resource not found Error and what about resources plugin
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta http-equiv = "X-UA-Compatible" content = "IE = edge">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
<title>TekDays - The Community is the Conference!</title>
</head>
<body>
<div class="container">
<table class="table table-bordered">
<thead>
<tr>
<th>FirstName</th>
<th>FirstName</th>
</tr>
</thead>
<tr>
<td>Mammad</td>
<td>mammadii</td>
</tr>
<tr>
<td>Akbar</td>
<td>Akbarii</td>
</tr>
</table>
</div>
</body>
its work check your css path
<!DOCTYPE html>
<html>
<head>
<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://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="screen">
<title>TekDays - The Community is the Conference!</title>
</head>
<body>
<div class="container">
<table class="table table-bordered">
<thead>
<tr>
<th>FirstName</th>
<th>FirstName</th>
</tr>
</thead>
<tr>
<td>Mammad</td>
<td>mammadii</td>
</tr>
<tr>
<td>Akbar</td>
<td>Akbarii</td>
</tr>
</table>
</div>
</body>
href replace with src
<link href="bootstrap.min.css" rel="stylesheet" type="text/css" media="screen">
<link *src*="bootstrap.min.css" rel="stylesheet" type="text/css" media="screen">