Flask - CSS lät nicht bei Template Vererbung
Verfasst: Montag 8. Februar 2021, 23:33
Moin,
ich probiere mich gerade an Flask aus. Ich habe ein HTML Dokument namens nav_bar.html in dem mein Menu gespeichert ist und über Template Vererbung will ich es mit anderen HTML Dokumenten verbinden, wie z.B. mit home.html. Das funktioniert auch erstmal ganz gut, nur ist das Dokument home.html von der Formatierung der CSS Datei style.css unberührt. Nav_bar.html verbindet sich problemlos mit CSS.
Seltsamerweise wird die Einstellung der Seitenränder für home.html übernommen, der Rest aber nicht.
Hier meine Dokumente.
Python Skript
nav_bar.html
home.html
style.css
Cache hatte ich schon mal gelöscht. Weiß einer von euch Rat. Ich bin echt am Verzweifeln
Gruß und Danke im Voraus
ich probiere mich gerade an Flask aus. Ich habe ein HTML Dokument namens nav_bar.html in dem mein Menu gespeichert ist und über Template Vererbung will ich es mit anderen HTML Dokumenten verbinden, wie z.B. mit home.html. Das funktioniert auch erstmal ganz gut, nur ist das Dokument home.html von der Formatierung der CSS Datei style.css unberührt. Nav_bar.html verbindet sich problemlos mit CSS.
Seltsamerweise wird die Einstellung der Seitenränder für home.html übernommen, der Rest aber nicht.
Hier meine Dokumente.
Python Skript
Code: Alles auswählen
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('home.html')
@app.route('/ueber_mich/')
def ueber_mich():
return render_template('lebenslauf.html')
@app.route('/impressum/')
def impressum():
return render_template('impressum.html')
if __name__=='__main__':
app.run(debug=True)nav_bar.html
Code: Alles auswählen
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta charset="ISO-8859-1">
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/style.css') }}">
<title>Schweinereien mit Daten</title>
</head>
<body>
<!--Navigationsbar-->
<div class="navbar">
<ul class="nav_liste">
<li class="nav_eintrag"><a class="nav_link" href="{{ url_for('index') }}">HOME</a></li>
<li class="nav_eintrag"><a class="nav_link">PROJEKTE</a></li>
<li class="nav_eintrag"><a class="nav_link">REPOSITORIES</a></li>
<li class="nav_eintrag"><a class="nav_link">KRAM</a></li>
<li class="nav_eintrag"><a class="nav_link" href="{{ url_for('ueber_mich') }}">ÜBER MICH</a></li>
<li class="nav_eintrag"><a class="nav_link" href="{{ url_for('impressum') }}">IMPRESSUM</a></li>
</ul>
</div>
<!--Hauptbild-->
<img src="../static/mathematics-3821034_pixaboy_cropped.jpg" alt="Main-Pic" width="100%">
<!--Container für den Content-->
{% block content %}
{% endblock %}
<!--In case of deactivated JavaScript-->
<noscript>
<p>JavaScript is necessary!<br>
Activate JavaScript in the settings of your browser.</p>
</noscript>
</body>
</html>
Code: Alles auswählen
{% extends "nav_bar.html"%}
{% block content %}
<div class="content">
<p>Hier muss noch viel mehr inhalt hin!!!</p>
</div>
{% endblock %}Code: Alles auswählen
body {
font-family: "SF Pro Text","Myriad Set Pro","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
color:#1E1E1E;
background-color:#fafafa;
margin:0px;
padding:0px;
}
h1 {
font-family: "SF Pro Text","Myriad Set Pro","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
font-size: 300px;
}
h2 {
font-family: "SF Pro Text","Myriad Set Pro","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
font-size: 25px;
}
h3 {
font-family: "SF Pro Text","Myriad Set Pro","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
font-size: 22px;
}
h4 {
font-family: "SF Pro Text","Myriad Set Pro","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
font-size: 20px;
}
p {
font-family: "SF Pro Text","Myriad Set Pro","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
font-size: 16px;
}
/*Text in case of NoScript*/
noscript {
font-size: 16px;
color: red;
}
/*Unsortierte horizontale Liste zur Navigation*/
.nav_liste {
list-style-type: none;
text-align: center;
background-color: #2cbe58;
cursor: pointer;
padding-top:15px;
padding-bottom:15px;
margin: 0px;
}
.nav_eintrag {
display: inline;
font-size: 14px;
letter-spacing: 0.2em;
padding-left:20px;
padding-right:20px;
margin:0px;
color: #30bb5a;
}
.nav_link:link {
color:#BBBBBB;
text-decoration: none;
}
.nav_link:visited {
color:#BBBBBB;
text-decoration: none;
}
.nav_link:active {
color:#BBBBBB;
text-decoration: none;
}
.nav_link:hover {
color:#BBBBBB;
text-decoration: none;
}
.nav_link:focus {
color:#BBBBBB;
text-decoration: none;
}
/*Hauptbereich*/
.content {
margin-top: 0px;
margin-left: 150px;
margin-right: 150px;
background-color: brown;
padding-top:0px;
padding-left:10px;
padding-right:10px;
}
.content h1 {
font-family: "SF Pro Text","Myriad Set Pro","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
font-size: 80px;
}
.content h2 {
font-family: "SF Pro Text","Myriad Set Pro","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
font-size: 25px;
}
.content h3 {
font-family: "SF Pro Text","Myriad Set Pro","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
font-size: 22px;
}
.content h4 {
font-family: "SF Pro Text","Myriad Set Pro","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
font-size: 20px;
}
.content p {
margin:0px;
padding:0px;
font-size:16px;
color:green;
}Gruß und Danke im Voraus
