Beiträge von Johann1976

Johann1976 · 5. Februar 2022

Hey Leute ich habe eine relativ schöne Navigationsleiste in meinem Projekt implementiert.

Leider schaffe ich im Gegensatz zu dem Text und Images es nicht diese auch für Handys vernünftig aussehen zu lassen.

Meine Vermutung ist ich habe in der Verschachtelung irgendwelche Probleme. Ich schicke hier mal den CSS code vor und nach dem responsiven Teil rein und den Teil in der base.html wo die Navigationsleiste drin ist.

HTML:

HTML

<!DOCTYPE html>


<html>
    <head>
        <title>Motoreffizienz-Rechner</title>
        <link rel="stylesheet" href="{{url_for('static', filename='css/style_rechner.css')}}">
        <meta charset='utf-8'>
        <meta http-equiv="X-UA-Compatible" content='IE=edge'>
        <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    </head>
    <body>
        
        <nav>
            <a href='{{ url_for('ind')}}'><img src="{{ url_for('static', filename='img/blume.png') }}" alt="blume"  title='blume'></a>
            <div id='navigation'>
                
                <ul>
                <li><a  href="{{ url_for('ind')}}">Startseite</a></li>
                <li><a  href="{{ url_for('ziel')}}">Motivation</a></li>
                <li><a  href="{{ url_for('home')}}">Der Elektromotoreffizienz-Rechner</a></li>
                <li><a  href="{{ url_for('eig')}}">Eigenmessungs-Modus</a></li>
                <li><a  href="{{ url_for('imp')}}">Kontakt</a></li>
                </ul>
            </div>   
        </nav>

Alles anzeigen

Der CSS code wo die Nav leiste toll funktioniert:

Code

nav{

    height:60px;
    width:auto;
    background-color: rgb(212, 207, 207);
    position:relative;
    text-align: center;
    box-shadow: 0px 2px 4px rgba(0,0,0,0.144);
}
nav a img{
    height:100px;
    position:absolute;
    top:50%;
    transform:translate(0%,-50%);
    margin-left: 550px;
}



#navigation a {
    color:rgb(0,0, 0);
    padding: 18px ;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    
    border-color: rgb(10, 12, 10);
    border-width: 2px;
    border-style: solid;
   
}

#navigation a:hover {

    color: rgb(248, 8, 8);
    font-size:18px; 
}

nav ul li a{
    padding:14px;
    text-decoration: none;
}

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
 

ul {
    display: flex;
    justify-content: center;
    align-items: center;
}

Alles anzeigen

Und zu guter letzt der nicht laufende responsive Teil:

Code

@media only screen and (max-width: 600px){
    body{
         display:flex;
         flex-flow: row wrap;
         }
         nav, nav a,footer{
         flex:1 100%;
         }
         img{
         height:8em;
         width: 13.6em;  
         padding:8px;
         display: flex; 
         justify-content:left; 
         align-items:flex-start;
         margin-left: 1em;
         margin-top: 2em;
        
         }
         
         #logo{
        max-width:8em;
         font-size:1.5em;
         background-color:rgb(55, 194, 50);
         }
        
        
         
         nav ul {
         margin: 0;
         padding: 0;
         list-style:none;
         width:60px;
         }
        
         nav li a{
         display:block;
         } 
         
        nav a img{
         display:none;
         }
        
        #navigation a{
         color:rgb(0,0, 0);
         padding: 1em ;
         
         display:block;
         margin-left: 1em;
         display: flex;
         justify-content: left;
         align-items: flex-start;
         
        
         border-color: none;
         border-width: 0px;
         border-style: none;
         } 
         
         nav{
        
         background-color:rgb(55, 194, 50);
         position:relative;
         text-align: left;
         box-shadow: none;
        
        
        }
        
                
        
        }

Alles anzeigen

Vielleicht sieht ja jemand den Bock den ich geschossen habe

Liebe Grüße

Johann

Johann1976 · 5. Februar 2022

Hey Leute,

Ich erstelle seit knap einem Monat eine Website und mit dieser bin ich nun zufrieden, jedoch stolper ich bei der Responsiven Programmierung in css an dem positionieren der Bilder.

Ich kann diese beispielsweise nicht von links aus justieren.

Ich schick euch mal den teil von CSS wo die normale website programmiert ist und dann die relevanten stellen für den responsiven Teil. Vielleicht hat ja jemand eine Idee? ich komm da einfach nich weiter.

Code

#image {
    padding:48px;
    display: flex; 
    justify-content: center; 
    align-items: center;

Auf der standart seite sind diese in der Mitte angeordnet, das ist auch ok so.

Nun die Handyvariante :

Code

@media only screen and (max-width: 600px){
    
    img{
        height:1em;
        width:1.7em;   
        

        padding:1em;
        display: flex; 
        justify-content:left; 
        align-items:flex-start;
        margin-left: 1em;
       
    }

Alles anzeigen

Ich greife hier auf die img tags direkt zu weil alle Bilder gleich behandelt werden sollen, wenn ich in den #Image container zugreife sind die Bilder plötzlich riesig und direkt untereinander angeordnet(normal ist text zwischen). Ich bin ratlos.

Mit freundlichen Grüßen

Johann

Johann1976 · 26. Januar 2022

Vielen dank jetzt läufts

LG Johann

Johann1976 · 25. Januar 2022

Hi Leute, ich bin erst seit knap 1 Monat in dieser schönen Programmierwelt von HTML und CSS drine und bitte um gnade bei Formfehlern^^

Also ich habe eine Website (noch nicht online) wo ein Antriebssystemrechner bzw. vergleicher implementiert ist (Python).

Ich Habe bereits 4 unter Seiten in der Navigation und es klappt alles gut...bis auf dass seit heute meine Unterseite wo der Rechner ist von unten anfängt.

Ich habe lange rumprobiert und weis nicht was ich getan habe...alle anderen seiten fangen normal von oben an.

Ich schicke hier mal meinen HTML und CSS Code von dieser Seite, evtl. entdeckt ja jemand einen groben schnitzer^^

HTML

<!DOCTYPE html>
<html lang='de'>

    <head>
        <title>
            Elektromotoreffizienz-Rechner
        </title>
        <h1>
            Der Elektromotoreffizienz-Rechner
        </h1>
        <link rel="stylesheet" href="{{ url_for('static', filename='css/style_rechner.css') }}">
        <meta name='viewport' content='width=device-width, initial-scale=1'>

    </head>

    <body>
        {% extends 'base.html'%}
        {% block content %}
        
             
        <div id='main'>
            <div id='ASYVSSYNRM'>
                <p>
                    Asynchron Vs. Synchron-Reluktanzmotor
                </p>
            </div> 
        </div> 
        <br>
        



        <div class='flex-container'>
            <div class='flex-item'>
                <img src="{{ url_for('static', filename='img/motor1.png') }}" alt="Bitcoin" width='700' height='400' title='Bitcoin'>    
            </div>
            <div class='flex-item2'>
                <br><br><br><br>
                Dieser Rechner ermittelt eine energetische Gegenüberstellung zwischen Asynchronmotoren und Synchron-Reluktanzmotoren.
                Dabei werden die möglichen jährlichen Ersparnisse in Killowattstunden und in Euro ermittelt.
                Außerdem zeigt dieser Rechner die CO2 Ersparnis auf die jährlich bei einem Wechsel zu den effizienteren Synchron-Reluktanzmotoren 
                entstehen würde.        
            </div>
            </div>
        <form>

            <h2>Tragen sie die Eckdaten ihres Antriebssystems ein!</h2>    
                
                    <p>
                    <label for="Vorname">Bemessungsleistung des Asynchronmotors in KW:</label>
                    <input type="text" id="Vorname" name="Vorname" autofocus>
                    </p>

                    <p>
                    <label for="Nachname">Energiepreis €/KWh:</label>
                    <input type="text" id="Nachname" name="Nachname">
                    </p>

                    <p>
                    <label for="Anfrage">Anzahl der Asynchronmotoren:</label>
                    <input type='text'id='huuh'name="Anfrage" >
                    </p>

                    <p>
                    <label for="Anfrage">Betriebsstunden im Jahr bei 100% Last:</label>
                    <input type='text'id='huuh'name="Anfrage" >
                    </p>
                    
                    <p>
                        <label for="Anfrage">Betriebsstunden im Jahr bei 75% Last:</label>
                        <input type='text'id='huuh'name="Anfrage" >
                        </p>
                    <p>
                        <label for="Anfrage">Betriebsstunden im Jahr bei 50% Last:</label>
                        <input type='text'id='huuh'name="Anfrage" >
                    </p>
                    <p>
                        <label for="Anfrage">Betriebsstunden im Jahr bei 25% Last:</label>
                        <input type='text'id='huuh'name="Anfrage" >
                    </p>              



                    <p>
                        <button type="submit">Berechnung Starten!</button>   
                    </p>
                


        </form>            
           {% endblock %}
            
    </body>
        
</html>

Alles anzeigen

Und CSS:

Code

body{
    font-family:Georgia, 'Times New Roman', Times, serif;
    background-color:rgb(55, 194, 50);
}


#navigation a {
    color:rgb(19, 16, 73);
    padding: 8px;
    font-size: 16px;
}

#navigation a:hover {
    color: rgb(151, 68, 68);
    font-size:18px; 
}

#main{
    max-width:800px;
    margin:auto;
    font-family:Georgia, 'Times New Roman', Times, serif;
    font-size:17px;
}

#footer{
    text-align: center;
    padding:18px;
    color:rgb(214, 201, 165);
    
}

nav ul li a{
    padding:14px;
}
nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

.mitte {
    display: flex;
    justify-content: center;
    align-items: center;
}
#pic{
    display: flex; 
    justify-content: center; 
    align-items: center;
}  

button{

    font-size:20px;
    background-color: rgb(224, 69, 8);
    padding: 5px;
    transition: all ease-in-out 0.2s;
    
}
button:hover{
    transform:translateY(-10px);
    background-color: green;
}

h1{
    font-size:70px;
    background-color:darksalmon;
    text-align: center;
}
#kontakt{
    font-size:18px;
    text-align:center;

}
#top {
    text-align:center;
}

#logo {
color:rgb(170, 5, 19);
background-color:lightsalmon;

font-size: 50px;
font-weight: bold;
padding: 8px;
margin-top: 16px;
}

#logo-name {
    font-size:52px;
    font-weight:bold;
    margin:16px;
}
#image{
    padding:48px;} 

h2{
    font-size:25px;
}
#ASYVSSYNRM{
font-size:48px;
font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
justify-content: space-between;

}

.flex-container{

    display: grid;
    grid-template-columns: 700px 700px ;
    grid-template-rows: 500px ;
    column-gap:55px;
    justify-self:center;
}

.flex-item{

    padding:16px;   
    
}
.flex-item2{

    justify-self:start;   
    font-size:22px;

}

form {
    border: 1px solid black;
    width: 45%;
    background-color: rgb(241, 200, 225);
    margin: 0 auto;
    padding: 0 1em;
    justify-content: center;
}

form label {
    display: block;
    font-size: 0.8em;
    color: darkslategrey;
    padding-left: 3px;    
}

Alles anzeigen

Die Änderungen wurden im unteren drittel bei der CSS Datei gemacht.

Liebe Grüße

Johann

Johann1976 · 17. Januar 2022

Oh vielen dank, man musste tatsächlich alle Werte in einer return Zuweisung schreiben -.- son mist

Aber bin jetzt glücklicher als davor

Das Flex-Box Layout werd ich mir zeitig vornehmen, danke;)

LG

Johann1976 · 17. Januar 2022

Moin Leute, ich Programmiere seit knap einem Jahr in Python und habe erst seit 2 wochen angefangen mich in HTML und CSS einzuarbeiten.

Seit Tagen hänge ich an einem blöden Problem.

Und zwar schaffe ich die Eingabe von einem Wort auf der Website, eine Verarbeitung durch Python und die Ausgabe des Wortes auf der selben Seite.

Versuche ich jedoch ein zweites Input tag zu beschreiben, wird dieses nicht auf der Seite ausgegeben.

Ich bin noch jungfräulich in dem Thema und hoffe auf etwas Hilfe. Darauf folgend schicke ich hier mal den HTML und Python Code rein.

HTML

<!DOCTYPE html>
<html lang='de'>

<head>
    <h1>
        Der Krypto Rechner
    </h1>
    <link rel="stylesheet" href="style.css">
    <meta name='viewport' content='width=device-width, initial-scale=1'>
<style type='text/css'>
    body{
        background-color:thistle;
    }
    button{
        font-size:20px;
        background-color: rgb(41, 167, 36);
        padding: 5px;
    }
    h1{
        font-size:70px;
        background-color:darksalmon;
        text-align: center;


    }
    h4{
        color:red;
    }
    nav ul li a{
    padding:14px;
    }
    nav ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .mitte {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #pic{
    display: flex; 
    justify-content: center; 
    align-items: center;
    } 
   
</style>  

</head>

<body>
    <nav>
        <div id='navigation'>
            <ul class='mitte'>
            <li><a href="/index.html">Über Uns</a></li>
            <li><a href="/templates/rechner.html">Der Krypto Rechner</a></li>
            <li><a href="/impressum.html">Kontakt</a></li>
            </ul>
        </div>
    </nav>

    <br>
    <br>

    <div id='pic'>  
        <img src="bithandy.jpg" alt="Bitcoin" width='700' height='400' title='Bitcoin'>      
    </div>  
<form class='grid' action = '/result' method = 'POST'>

    <center>
        {% if name %}
        <h3 style='color:blue;'>  Coin: {{name}}    </h3>
        {% endif %}

        
    </center>
    <center>
        {% if kaufpreis %}
        <h3 style='color:blue;'>  Kaufpreis des Coins: {{kaufpreis}}    </h3>
        {% endif %}    

    </center>
    
<br></br>

<center align='left'>

    <label for ='Name' >Name des Coins:</label>
    <input type='text' name='name' id='name'>
   
</center>
<br>
<center align='left'>
    <label for ='Name' >Kaufpreis des Coins:</label>
    <input type='text' name='kaufpreis' id='kaufpreis'>
</center>

<br></br>
<center align='left'>
    <label for ='Name' >Anzahl der Coins:</label>
    <input type='text' name='name' id='name'>
</center>
<br></br>

<center align='left'>
    <label for ='Name' >Verkaufsprovision in %:</label>
    <input type='text' name='name' id='name'>
</center>
<br></br>

<center align='left'>
    <label for ='Name' >Maximaler Verlust:</label>
    <input type='text' name='name' id='name'>
</center>

<br></br>

<center align='left'>
    <label for ='Name' >Minimaler Gewinn:</label>
    <input type='text' name='name' id='name'>
</center>

<br></br>

<button type="submit">Berechnung Starten!</button>

</form>

</body>

</html>

Alles anzeigen

Und der kurze Python Code

Python

from flask import Flask, render_template,request

app = Flask(__name__)

@app.route('/')

@app.route('/home')

def home():
    return render_template('rechner.html')

@app.route('/result',methods=['POST','GET'])

def result():
    output = request.form.to_dict()
    name = output['name']

    kp = request.form.to_dict()
    kaufpreis = kp['kaufpreis']

   
    return render_template('rechner.html',name=name)
    return render_template('rechner.html', name=kaufpreis)

    


if __name__ == '__main__':
    app.run(debug=True, port=5001)

Alles anzeigen

Ps: Ich nehme auch gerne Tipps zu meinem HTML stil an, wie gesagt bin erst seit 2 Wochen in diesem schönen Thema drin.

LG

Beiträge von Johann1976

navigationsleiste stellt responsiv probleme dar

Responsiv werden Images nicht vernünftig angezeigt

HTML Unterseite fängt von unten an

HTML Unterseite fängt von unten an

HTML CSS & Python zur Websiteerstellung

HTML CSS & Python zur Websiteerstellung