Beiträge von nori999

nori999 · 21. Oktober 2020

Eine Frage hätte ich noch, ich habe alles responsive gemacht, alles an seiner Stelle. Aber wenn ich mobile view gehe habe ich auf der rechten Seiten einen sehr kleinen abstand wo ich sozusagen seitlich ein wenig scrollen kann, was mich aber sehr stört. margin ist auf 0.

nori999 · 19. Oktober 2020

Erledigt hab alles geschafft

nori999 · 18. Oktober 2020

Ich habe diese Fehler mal ausgebessert. video und bild sind jz nebeneinander hab das mit column 50% 50% gemacht aber beim kleiner machen des Fenster verschwindet Bild unter Video .

nori999 · 18. Oktober 2020

Gut hab das Problem gelöst aber immernoch das Problem das body auf background:color black immer noch nicht reagiert lol ..

nori999 · 18. Oktober 2020

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

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.

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

ah okay ich versuch das mal xD

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

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.

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 · 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 :/.

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

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

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

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.

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.

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 ?

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.

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

Bilder - Texte überschneiden sich

Bilder - Texte überschneiden sich

Bilder - Texte überschneiden sich

Bilder - Texte überschneiden sich

Bilder - Texte überschneiden sich

Bilder - Texte überschneiden sich

Bilder - Texte überschneiden sich

Bilder - Texte überschneiden sich

Bilder - Texte überschneiden sich

Bilder - Texte überschneiden sich

Bilder - Texte überschneiden sich

Bilder - Texte überschneiden sich

Bilder - Texte überschneiden sich

Bilder - Texte überschneiden sich