Bilder - Texte überschneiden sich

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

Sempervivum · 16. Oktober 2020

Mir scheint, dir ist da ein Fehler unterlaufen: Du hast das HTML zwei Mal gepostet aber das CSS fehlt.

Und benutze besser Codetags dafür, das </> in der Werkzeugleiste oben.

nori999 · 16. Oktober 2020

Sorry mein Fehler habs verbessert

Sempervivum · 16. Oktober 2020

Dann erst Mal willkommen im Forum!

Fangen wir mit dem Kernproblem an: Die Bilder, Videos und Texte überschneiden sich. Das liegt daran, dass Du ausgiebig von position: fixed; und position: absolute; Gebrauch gemacht hast. Dazu musstest Du die Positionen mit margin-top und top so anpassen, dass es bei einem breiten Browserfenster passt. Wird das Browserfenster jetzt schmaler, brechen die Text auf mehrere Zeilen um und weil die Positionen gleich bleiben kommt es zu den Überlagerungen. Ein häufiges Problem.

Meine Empfehlung: Lass das position weg, dann werden die Elemente untereinander angeordnet, die Höhen passen sich an die Inhalte an und es gibt keine Überlagerungen.

Bei dem Menü bzw. der Navigation ist es jedoch gängige Praxis, dass es fixiert ist und auch beim Scrollen immer sichtbar. Weiterer Vorschlag: Gib diesem ein position: sticky;, wie hier beschrieben:

https://www.html-seminar.de/css-position-sticky.htm

Es gibt sicher noch mehr zu deinem Layout anzumerken aber ich lasse es erst Mal hierbei bewenden.

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;

Sempervivum · 16. Oktober 2020

In dem Fall ist die Angabe von top: 0; entscheidend. Versuche es damit und wenn es immer noch nicht funktioniert, poste dein neues CSS. Ich habe eine Testdatei angelegt und dort funktioniert es: Die .navbar ist oben.

Sempervivum · 16. Oktober 2020

Ich muss mich korrigieren: Bei sticky erscheint das Element zunächst dort, wo Du es im HTML notiert hast, d. h. unter den Videos. Erst beim Scrollen, wenn es nach oben wandert, bleibt es oben kleben. D. h. wenn Du die Nav von Anfang an oben haben willst, musst Du sie auch oben notieren.

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 ?

Sempervivum · 16. Oktober 2020

Zitat

Ich habe auch ein Logo im Bild, das überschreibt trotzdem alles.

Dann stimmt da noch etwas nicht. Poste das neue HTML und CSS.

Zitat

Muss ich mit Grid oder Flexbox zwingend arbeiten damit meine Seite sozusagen responsive ist ?

Wie ich sehe, hast Du dich schon gut informiert. Einfache Layouts kann man auch ohne das realisieren, aber wenn es etwas komplizierter wird, geht es leichter mit Grid und Flex. Sieh es nicht als Belastung sondern als Techniken, die die Sache einfacher machen.

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

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 ?

Sempervivum · 16. Oktober 2020

So, ich habe mit dem neuen Code wieder eine Testdatei gemacht und dort ist zunächst mal aus meiner Sicht alles OK. Du schriebst:

Zitat

Ich habe auch ein Logo im Bild, das überschreibt trotzdem alles.

Das passiert bei mir nicht. Sowohl im HTML als auch im CSS zeigt mein Editor mir jedoch diverse Fehler an. Es ist möglich, dass dadurch dein Browser den Text anders interpretiert als meiner (ich habe Opera).

Im CSS fehlte eine schließende Klammer:

Code

        .navbar {

            top: 0px;
            position: sticky;
            /* hier fehlte die schließende Klammer: */
        }

        /*about.html */
        #body2 {
        /* usw. */

Und im HTML passte einiges mit den schließenden Divs nicht:

Code

<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="images/dpad.png" alt="">
    <!--Logo wird auf jeder Seite eingefügt / ist mein Markenzeichen-->
    <!-- </div> gehoert hier nicht hin -->


    <!-- </div> gehoert hier nicht hin -->

    <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> <!-- dieses muss ausserhalb des Kommentars stehen -->
    </div> <!-- und dieses muss zusätzlich eingefuegt werden -->
</body>

Alles anzeigen

Ein guter Editor erleichtert einem das Leben sehr, denn er rückt den Code automatisch ein, so dass man die Struktur besser erkennt und er zeigt Fehler an. Selber benutze ich Visual Studio Code.

Sempervivum · 16. Oktober 2020

Zitat

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 ?

Ich glaube nicht, dass das eine einfacher ist als das andere. Beide sind jedoch unterschiedlich und es kann die Sache erschweren, wenn man z. B. versucht, mit Grid ein Layout umzusetzen, für das sich Grid nicht eignet und umgekehrt mit Flex.

Es ist sicher zu empfehlen, am Anfang kleine Brötchen zu backen und sich Layouts vorzunehmen, die nicht zu kompliziert sind.

Hier bei HTML-Seminar gibt es auch eine Einführung in Flex:

https://www.html-seminar.de/css-flexbox.htm

nicht jedoch für Grid, wenn ich nicht etwas übersehe.

tk1234 · 16. Oktober 2020

Zitat von nori999

Das Problem mit Grids (besonders damit)und flexbox ist, dass ich mir da Videos angeguckt habe, die aber irgendwie nicht umsetzen konnte.

keine Ahnung warum das immer als Video sein muss, als Text finde ich sowas sinnvoller …

nori999 · 17. Oktober 2020

Nun Gut ich hab das zusätzliche div eingefügt aber mein Visual Studio hat mir bei dem ersten </div>, das ausserhalb des Kommentars sein muss keinen Fehler angezeigt. Auf den optischen ersten Blick sah nichts anders aus.

Ich möchte meine responsive machen, muss ich jetzt alle Objekte in ein Grid oder eine Flexbox einfügen ? Oder nur z.B. mein Logo ?

Danke dir für die Links ich werde sie mir sofort durchlesen.

nori999 · 17. Oktober 2020

Jetzt habe ich mein Logo in ein <div> getan, mit einer id=flex und habe dann im CSS display: flex; rieingeschrieben und

flex-direction: row;. Ich denke es ist so gut oder ?

Da ich ja schon angefangen habe, tue ich die einzelnden Objekte in Flex rein. Ist das möglich oder führt das zu Komplikationen ?

Sempervivum · 17. Oktober 2020

Zitat

Nun Gut ich hab das zusätzliche div eingefügt aber mein Visual Studio hat mir bei dem ersten </div>, das ausserhalb des Kommentars sein muss keinen Fehler angezeigt.

Dann braucht es dafür wahrscheinlich eine Erweiterung. Selber habe ich HTMLHint installiert, versuche es damit.

Zitat

Auf den optischen ersten Blick sah nichts anders aus.

Die Browser sind sehr tolerant gegenüber Fehlern im HTML. MrMurphy hat das hier in Posting #5 ausführlich erklärt:

Wann werden obsolete Elemente/Atrribute/Dinge entfernt?

Sempervivum · 17. Oktober 2020

Zitat

Jetzt habe ich mein Logo in ein <div> getan, mit einer id=flex und habe dann im CSS display: flex; rieingeschrieben und

flex-direction: row;. Ich denke es ist so gut oder ?

Da ich ja schon angefangen habe, tue ich die einzelnden Objekte in Flex rein. Ist das möglich oder führt das zu Komplikationen ?

Diese Fragen kann man nur beantworten, wenn man weiß, was Du dir für eine Anordnung vorstellst und wie dein letztes HTML und CSS aussieht. Es kann auch sinnvoll sein, wenn Du dir Webspace besorgst und das Ganze online stellst, dann kann man das HTML und CSS jederzeit einsehen und auch die Bilder sind verfügbar. Für den Anfang und zum Testen ist bplaced.net ganz brauchbar.

nori999 · 17. Oktober 2020

Ich habe meine Webseite auf einem Sever hochgeladen. und die Webseite sieht eig. gut aus, auch wenn ich das Fenster kleiner mache, es überschneidet sich nichts.

Ich lad mir mal Webspace und folgendes was du aufgezählt hast runter und lese mal den Text. Danke dir.

Sempervivum · 17. Oktober 2020

Zitat

Ich habe meine Webseite auf einem Sever hochgeladen

Wenn Du einen Server hast, hast Du ja schon Webspace und alles ist gut. Dann brauchst Du in Zukunft nur noch die URL zu posten.

Zitat

die Webseite sieht eig. gut aus, auch wenn ich das Fenster kleiner mache, es überschneidet sich nichts.

Das ist ja schon ein wesentlicher Fortschritt gegenüber deiner Anfangsversion.

Bilder - Texte überschneiden sich

Jetzt mitmachen!

Teilen

Tags