Beiträge von nori999

nori999 · 16. Oktober 2020

Das Problem mit Grids (besonders damit)und flexbox ist, dass ich mir da Videos angeguckt habe, die aber irgendwie nicht umsetzen konnte. Aber ich denke mit Flexbox wäre das einfacher als Grid oder ?

nori999 · 16. Oktober 2020

Code

.navbar { 
    
    top: 0px;
    position: sticky;



/*about.html */

#body2 {
    background-color: black;
    
    background: url(../img/fitfrau.jpg) no-repeat center center fixed;
    background-size: 1000px;
    background-color: black;
    overflow-x: hidden;
    
    
    
    
} 

#mygymHeader {
    margin-left: 0;
    top: -20%;
    color: white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 40pt; }

#aboutlogo {
    position: static;
    
    
}
    

#schultere {    
    
    margin-left: 73%;
    margin-top: -50%%
    
}

#aboutbild {
    margin-left: 34%;
    margin-top: 10%;}
    
    

#ringe {
    margin-right: 74%;
    position: relative;
    
    
}
    


.text-zitat {
    color:red;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    
}

.text-about {
    color: rgb(255, 255, 255);
    margin-left: 20px;
    text-transform: uppercase;
    
}

Alles anzeigen

HTML

das video im kommentar wird später eingefügt.
die <br> sind evtl unnötig aber damit konnt ich ebenfalls meinen abstand etwas perfektionieren.


<!DOCTYPE html>
<html lang="en">
    <head>
    <link rel="stylesheet" href="../bootstrap-4.5.3-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <title>Nor Gym Unser Gym</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    </head>
    

    <body id="body2">
        
        



        
        
    



        
        




        <!--<div>
        <video id="schultere" width="480" height="320" controls >
            <source src="../video/schulter.mp4" type="video/mp4">   
        </video></div>-->




    
        <nav class="navbar navbar-expand-lg navbar-light bg-light">  
            
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item active">
                <a href="../index.html" class="nav-link">Startseite <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                <a href="../common/about.html" class="nav-link">Unser Gym</a>
                </li>
                <li class="nav-item">
                <a href="../common/price.html" class="nav-link">Preise/Angebote</a>
                </li>
                <li class="nav-item">
                <a href="../common/kontakt.html" class="nav-link">Kontakt</a>
                </li>
            </ul>
            </div>
        </nav>

        <img id="aboutlogo" src="../img/norygymlogo.jpg" alt="">  <!--Logo wird auf jeder Seite eingefügt / ist mein Markenzeichen-->
        </div> 





    
        
    </div>


    
    <div class="text-zitat"> 
    <h2>"Wer aufhört, besser zu werden, hat aufgehört, gut zu sein".</h2>
    
    
<br>
<br>

<div class="text-about"><p>Nor Gym schafft eine stabile Grundlage für eine kontinuierliche Leistungssteigerung. 
Unser Team hilft<br> Dir das individuell optimale Trainingsverhalten zu ermitteln 
und motivieren Dich auf Wunsch auch <br>immer wieder Aktiv zu sein!</p>
</div>
<br>
<br>

<br>

<div>
    <video id="ringe" width="450" height="320" controls >
        <source src="../video/ringe.mp4" type="video/mp4">   
    </video></div>



<div>
        <!--<video id="schultere" width="480" height="320" controls >
            <source src="../video/schulter.mp4" type="video/mp4">   
        </video></div>-->


        
    </body>
</html>

Alles anzeigen

nori999 · 16. Oktober 2020

Ich konnte nicht gleich Antworten, weil ich auf dem nach Hause weg war.

Ich hab das Problem so gelöst, dass ich das Nav im Html als ersten Code eingetragen habe und so weiterhin die anderen.

Meine Frage ist jetzt. Ich habe auch ein Logo im Bild, das überschreibt trotzdem alles. Muss ich mit Grid oder Flexbox zwingend arbeiten damit meine Seite sozusagen responsive ist ?

nori999 · 16. Oktober 2020

Also ja aufjedenfall besser, nun hab ich das Problem, dass die NAvigation unten hängt und ich nicht mehr raufbekomme obwohl margin: 0px;

nori999 · 16. Oktober 2020

Sorry mein Fehler habs verbessert

nori999 · 16. Oktober 2020

Hallo,

habe vor kurzem angefangen mit HTML und CSS zu arbeiten. Mein Problem ist, wenn ich das Fenster kleiner mache, überschneiden sich meine Texte und Bilder. Wie könnte ich mein Problem lösen ? Bitte keine Voururteile haben erst vor einigen Tagen angefangen.

Code

CSS: 

    /*about.html */

#body2 {
    background-color: black;
    overflow-x: hidden;
    background: url(../img/fitfrau.jpg) no-repeat center center fixed;
    background-size: 600px;
    background-color: black;
    
    
    
    
} 

#mygymHeader {
    
    position: fixed;
    margin-left: 39%;
    margin-top: 6%;
    color: white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 40pt;
    display: grid;
    grid-area: mygymHeader;

    }

#aboutlogo {
    position: absolute;
    right: 0px;
    margin-right: 0 auto;
}
    

#schultere {    
    position: fixed;
    margin-left: 75%;
    margin-top: 30%
    
}

#aboutbild {
    margin-left: 34%;
    margin-top: 10%;}
    
    

#ringe {
    margin-left: 1%;
    margin-top: 30%;
    position: fixed;
}
    


.text-zitat {
    color: white;
    text-align: center center;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}

.header-about {
    color: red;
    text-transform: uppercase;
    text-align: left;
    margin-top: 150px;
    
}

.text-about {
    color: rgb(255, 255, 255);
    margin-left: 20px;
    text-transform: uppercase;
    position: fixed;
}

Alles anzeigen

HTML

HTML :
<!DOCTYPE html>
<html lang="en">
    <head>
    <link rel="stylesheet" href="../bootstrap-4.5.3-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <title>Nor Gym Unser Gym</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    </head>
    

    <body id="body2">
        
        



        
        <h1 id="mygymHeader">UNSER GYM</h1>
    



        
        <img id="aboutlogo" src="../img/norygymlogo.jpg" alt="">  <!--Logo wird auf jeder Seite eingefügt / ist mein Markenzeichen-->
        </div>




        <div>
        <video id="schultere" width="480" height="320" controls >
            <source src="../video/schulter.mp4" type="video/mp4">   
        </video></div>




        <div>
        <video id="ringe" width="450" height="320" controls>
            <source src="../video/ringe.mp4" type="video/mp4">   
        </video></div>
    
    




        <nav class="navbar navbar-expand-lg navbar-light bg-light">  
            
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item active">
                <a href="../index.html" class="nav-link">Startseite <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                <a href="../common/about.html" class="nav-link">Unser Gym</a>
                </li>
                <li class="nav-item">
                <a href="../common/price.html" class="nav-link">Preise/Angebote</a>
                </li>
                <li class="nav-item">
                <a href="../common/kontakt.html" class="nav-link">Kontakt</a>
                </li>
            </ul>
            </div>
        </nav>


    
        <div class="text-zitat"> 
        <h2>"Wer aufhört, besser zu werden, hat aufgehört, gut zu sein".</h2>
    </div>



    
    
    


<div class="text-about"><h1 class="header-about">NOR GYM</h1><p>schafft eine stabile Grundlage für eine kontinuierliche Leistungssteigerung. 
Unser Team hilft<br> Dir das individuell optimale Trainingsverhalten zu ermitteln 
und motivieren Dich auf Wunsch auch <br>immer wieder Aktiv zu sein!</p>
</div>





        
    </body>
</html>

Alles anzeigen

Beiträge von nori999

Bilder - Texte überschneiden sich

Bilder - Texte überschneiden sich

Bilder - Texte überschneiden sich

Bilder - Texte überschneiden sich

Bilder - Texte überschneiden sich

Bilder - Texte überschneiden sich