Bilder - Texte überschneiden sich

nori999 · 17. Oktober 2020

Danke, jetzt habe ich eine <div id=wrapper> habe ja schon 2 seiten erstellen aber auf der ersten Seite zeigt er mir den footer einfach unter der navbar auch alls ich statt id --> class genommen habe.

Sempervivum · 17. Oktober 2020

Zitat

auf der ersten Seite zeigt er mir den footer einfach unter der navbar auch alls ich statt id --> class genommen habe.

Wo möchtest Du ihn denn statt dessen angezeigt haben? Da von "footer" die Rede ist, wahrscheinlich ganz unten? Wie schon geschrieben, um dir da zu helfen, muss man das HTML und CSS sehen. Poste die fragliche URL.

nori999 · 17. Oktober 2020

Ich möchte den footer ganz unten haben aber auf meiner index.html ist unter der navbar xD

HTML

INDEX HTML - hier ist er unter der navbar

<!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 Startseite</title>

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

    </head>

    <body id="body">

            <img id="mainlogo" src="../img/gymlogo1.jpg" alt=""> <!--das logo hab ich selber gestaltet -->
            
        
        <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="container">
            <div class="col-md-5 col-sm-12">
            <div class="text-block">
            <h1>Halt dich Fit!</h1>
            <p>Training ist ein ausgezeichneter Weg Dein Immunsystem zu stärken. Behalte <br> deine Trainingsgewohnheiten bei.
            Deine Sicherheit ist gewährleistet mit unsern<br> neuen Verhaltensregeln für soziale<br> Distanzierung und Hygiene in den Clubs, wie unser Sicherheitskonzept es vorsieht.
            <br>
            <br>
            Profitiere jetzt von unserem unschlagbaren Angebot:<br>
            Jetzt anmelden und bis 01.12.2020 GRATIS trainieren!<br>
            Das Angebot ist auf die ersten 50 Anmeldungen limitiert<br>
            Mitgliedschaft ab 60 CHF.- / Monat</p>
            <br>
            <br>
            <br>
            <br>

            <h4 id="corona">WICHTIG: AUFGRUND DES CORONA VIRUS, MÖCHTEN WIR <br> ALLE MITGLIEDER DARÜBER INFORMIEREN, 
                DASS DAS BAG <br> ENTSCHIEDEN HAT, DASS AB JETZT, NUR 50 PERSONEN<br> BEI UNS GLEICHZEITIG TRAINIEREN DÜRFEN</h4>

            </div> 
            </div>
            









            <!--<div id="wrapper">
                <footer>© | Nor Gym</footer>
            </div>-->
    



            
        </div>

    </body>

    
</html>

Alles anzeigen

HTML

ABOUT HTML - hier wird er korrekt angezeigt 

<!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">
        
        



        
        
    



        
        




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




    
        <div 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>
    </div>

        </nav>

        <div id="flex">
        <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>


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


    <div>
        <p id="about-text2">Wir bei Nor Gym glauben, dass jeder die 
            Möglichkeit haben sollte, sich fit und gesund zu fühlen. <br> So haben wir es für
        jeden einfach, erschwinglich und bequem gemacht, seine persönlichen Gesundheitsziele zu erreichen.</p>
        <li class="aboutpkt">Faire Preise</li>
        <li class="aboutpkt">24/7 Offen</li>
        <li class="aboutpkt">Hohe Qualität</li>
    </div>

    <br>
    <br>

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


        


        <div id="wrapper">
            <footer>© | Nor Gym</footer>
        </div>

        






        
    </body>
</html>

Alles anzeigen

Code

CSS : 
#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;
    
}

#wrapper { 
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100%;
    text-align: center;
}



footer {
    background-color: gray;
    color: black;}
    

#flex {
    display: flex;
    flex-direction: row;}
    
    #about-text2 {
        color: white;
        text-align: start;
        margin-left: 3%;
    }

    .aboutpkt {
        text-align: start;
        margin-left: 5%;
    }

Alles anzeigen

nori999 · 17. Oktober 2020

die <br> hab ich nur für nen Versuch eingefügt auf index.html .

Sempervivum · 17. Oktober 2020

In dem index-HTML ist der footer auskommentiert und wenn ich ihn aktiviere ist er unter den anderen Inhalten.

BTW:

<body> kannst Du problemlos ohne ID sowohl in CSS als auch in Javascript ansprechen, eine ID ist hier überflüssig.
Ebenfalls überflüssig ist der Wrapper um den Footer.

Sempervivum · 17. Oktober 2020

PS: Wie ich sehe, hast Du begonnen, nicht nur die Nav sondern auch die Inhalte mit Bootstrap zu stylen. Da werfe ich erst Mal das Handtuch: Ich bin nie in Bootstrap eingestiegen und werde es auch nicht tun, weil es in der heutigen Zeit, wo es Flex und Grid gibt, für einfache Layoutzwecke überflüssig und überholt ist. Mit Flex und Grid lassen sich Layouts wesentlich einfacher und flexibler gestalten.

nori999 · 17. Oktober 2020

Ich hab es auskommentiert, da es nicht funktioniert hat.

Gut ich hab den wrapper entfernt und dem footer eine class gegeben.

Aber ich hab immernoch dasselbe Problem. Woran das liegt versteh ich jetzt nicht .

nori999 · 17. Oktober 2020

Hallo, habe eine neue Seite mit Grid gemacht aber unter dem footer habe ich noch eine kleine weisse fläche, wie werde ich die los ?

mit body {

height: 100%;

}

konnt ich es auch nicht lösen :/.

Sempervivum · 17. Oktober 2020

Möglicher Weise liegt es daran, dass body per Default ein margin hat. Versuche, das auf 0 zu setzen:

Code

body {
    margin: 0;

}

nori999 · 18. Oktober 2020

Das hab ich versucht, das Problem ist, das der Body auch nicht auf meine Hintergrund farbe reagiert hat, ausser wenn ich Html vor body hinzugefügt habe. Aber da ich mehrere Seiten habe, hat das auf meine erste Seite reagiert und mein background-image entfernt und die dann auch black gemacht.

Also irgendwas stimmt nicht, weiss aber nicht wieso. die bodys hab ich mit id's definiert da ich ja mehrere habe.

nori999 · 18. Oktober 2020

PS: ich habe mit grid gearbeitet, aber leider bei grid-template-column: / keine wirklichen werte angegeben und wusste leider nicht genau welche.

tk1234 · 18. Oktober 2020

Zitat von nori999

Also irgendwas stimmt nicht, weiss aber nicht wieso.

Wir auch nicht, dafür müsstest du schon zeigen wie dein Code jetzt aussieht … (am besten online stellen und verlinken)

nori999 · 18. Oktober 2020

HTML

<!DOCTYPE html>



<html lang="en">
<link rel="stylesheet" href="../bootstrap-4.5.3-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../css/style.css">

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

    <head>
        <title>Gym Nor Preise</title>

    </head>
    <body id="bodypreise">
        
    

    

            
        <div 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>
    </div>


<div class="grid-container-1">

    <div>
        <h1 class="headpreise">Profitiere von unschlagbaren Angeboten mit fairen Preisen</h1>
        <img class="logopreise" src="../img/norygymlogo.jpg" alt>
        

        
        
    </div>

</div>
    
    <div class="grid-container-2">

        <div id="divpreis">
            <p class="preistext">Nor Gym möchte, dass die Fitness-Family grösser wird und bietet faire Preise an.
            Die nächsten 50 Personen, die sich anmelden, dürfen bei uns bis zum 01.12.2020 kostenlos trainieren. Danach zahlst du 60.- im Monat. Gar nicht so teuer oder ?
            <br>
            <br>
            Wir bieten an:</p>
            <ol>
            <li class="lipunkt">Anmeldung ohne eine vertraagliche Bindung, so kannst du deinen Vertrag wann du möchtest beenden.</li>
            <li class="lipunkt">kostenlose Ernährungs- und Trainingspläne (für Gym-Mitglieder)</li>
            <li class="lipunkt">Ein gut ausgerüstetes Fitnessstudio</li>
            <li class="lipunkt">Rabatt für Schüler und Studenten</li>
            <li class="lipunkt">spannende Fitness-Events</li>
            <li class="lipunkt">Ist das Geld knapp?  Kein Problem wir kommen dir entgegen.</li>
            <li class="lipunkt">Rabatt auf Supplements für Mitglieder</li>
            <li class="lipunkt">Fitnesskurse</li>
            <li class="lipunkt">Sauna</li>
        </ol>
        </div>
    </div>

    <div class="grid-container-3">

        <video src="../video/kreuzalbin.mp4"></video>
        <img class="unserstudio" src="../img/29798789560_18c7aabe9d_h.jpg" alt="">
        
        <p class="meinungalbin">Unser Studio ist mit allen möglichen Equipments ausgerüstet, <br> da wir an unsere Mitglieder denken, wir haben eine<br> Sauna, welche du nach einem anstrengenden Training benutzen kannst.<br>
            Albin (Mitglied) sagt:,, Das Gym ist immer sauber und die<br> Leute sehr nett, die Atmosphäre finde ich daher sehr angenehm. <br> Ich komme immer wieder gerne!""
        </p>



        
    </div>

    <footer class="footer">© | Nor Gym</footer>


    
    

    </body>
</html>

Alles anzeigen

CSS

/*index.html lang="en"*/
html{
    height: 100%; 
}
#body {
    
    margin: 0px;
    background: url("../img/kreuzheben.jpg") no-repeat center center !important;     /* Hintergrundbild musste ich so fixieren, damit es nicht öfter erscheint auf der Seite, das war der Fall wenn ich das Fenster im kleiner gemacht habe*/
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    overflow-y: scroll;
    
    
}    


/* Navbar hat mich Zeit gekostet, da ich zuerst selber am Navbar rumgearbeitet habe bis es funktioniert hat und schliesslich darauf gekommen bin, 
dass Bootstrap auf meinem html nicht unterstützt wurde. Schlussendlich musste ich selber herausfinden woran der Fehler lag (musste eine Datei runterladen) */

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





.nav-item {
    font-style: italic;
    font-weight: 550;
    font-size: 15pt;
    font-family: ; 
}


#mainlogo {
    top: 100px;
    right: 0;
    margin-right: 0 auto;
    max-width: 100%;
    position: fixed;
    
} 


.text-block {
    color: rgb(255, 255, 255);
    position: fixed;
    right: 100px;
    bottom: 50px;
    top: 110px;
    left: 20px;
    font-family: Arial, Helvetica, sans-serif;
    
}

#corona {
    color: red;
}




    /*about.html */

html {
    height: 100%;
}

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

#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: 
    
    
}
    


.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;
    font-size: 25px;
    text-align: center;
    margin-top: 0;
}

#footer { 
    display: flex;
    flex-direction: column;
    text-align: center;
    height: 100%;
    min-height: 100%    
    }



footer {
    background-color: gray;
    color: black; 
    height: 40px;
    width: 100%;
    background-color: grey;
    text-align: center;
    bottom: 0;   
    
    }
    


    
#about-text2 {
    color: white;
    text-align: start;
    margin-left: 3%;
    font-size: 25px;
    }

    .aboutpkt {
        text-align: start;
        margin-left: 5%;
        font-size: 35px;
    }

    #about-text3 {
        color: white;
        font-family: Arial, Helvetica, sans-serif;
        margin-bottom: 4%;
        margin-left: 70px;
        font-size: 25px;
    }

    #slogan {
        font-size: 150%;
        color: red;
        margin-bottom: 5%;
        margin-left: 100px;
        font-size: 40px;
    }

    #trainer {
        margin-left: 20px;
        height: 500px;
        width: 400px;
    }

    figure {
        text-align: start; 
    }

    figcaption {
        color: white;
        font-size: large;
        text-align: left;
        margin-left: 20px;
    }

    /* Preise */


    

    .grid-container-1 {
        display: grid;
        grid-template-columns: auto;
        background-color: black;
        box-sizing:border-box;
    }



    

    .headpreise {
        color:white;
        text-align: center;
        margin-top: 3%;
    }

    #bodyprice {
        marign: 0;
        background-color: black;
        height: 100%;
        
    }

    .grid-container-2 {
        display: grid;
        grid-template-columns: %;
        background-color: black;
        text-align: center;
        
        
        
    }

    .logopreise {
    justify-content: right;
    }



.preistext {
    color: white;
    font-size: 25px;

}

.lipunkt{
    color: red;
    font-size: 25px;
}

#divpreis {
    margin-left: 200px;
}

.grid-container-3 {
    display: grid;
    background-color: black;
    grid-template-rows: 40%;
    grid-row: 1 / 2;
}

.unserstudio {
    height: 500px;
    width: 848px;
    margin-bottom: -5%;

}

.meinungalbin {
    color: white;
    font-size: 30px;
    margin-left: 50%;
    margin-top: -30%;
}

Alles anzeigen

Sempervivum · 18. Oktober 2020

Zunächst das, was sofort ins Auge sticht: In einem HTML-Dokument kann es nur einen body geben, daher macht es keinen Sinn, diesem eine ID zu geben. Beschreibe, was Du mit den beiden bodys vor hast, dann kann man dir eine bessere Lösung vorschlagen. Ich vermute, dass Du für deine verschiedenen Seiten unterschiedliches CSS für body brauchst. Dann wäre es besser, für die seitenspezifischen Definitionen ein individuelles CSS anzulegen.

nori999 · 18. Oktober 2020

ah okay ich versuch das mal xD

nori999 · 18. Oktober 2020

Naja das Problem mit dem abstand unterhalb dem footer ist gelöst damit. Nun aber mein styling reagiert jetzt nicht auf farben usw.. im neuen css.

nori999 · 18. Oktober 2020

sorry für den spam jetzt . wie verknüpfe ich eine css file speziell nur mit einem html file ??

nori999 · 18. Oktober 2020

"" naja hab das css file jz seperat gemacht. hab wieder abstand unter dem footer. also irgendwas in dem css behindert ich weiss aber nicht was.

Sempervivum · 18. Oktober 2020

Du schriebst doch, dass Du deine Seiten auf den Server hoch geladen hast. Wenn das zutrifft, wäre es am einfachsten, wenn Du die URL postest, damit man sich das live und ohne eine eigene Testdatei führen zu müssen, ansehen kann.

nori999 · 18. Oktober 2020

Es ist ein Schulserver. Der URL klappt nur in der Schule :/.

Bilder - Texte überschneiden sich

Jetzt mitmachen!

Teilen

Tags