Background linear gradiant

ButterKnecht · 9. August 2021

Zitat von Sempervivum

Solange man sich auf Monitore beschränkt, ist das sicher machbar. Wenn man Handys einbezieht, wird es allerdings schwierig.

Wie stelle ich das am dümmsten an?

Sempervivum · 9. August 2021

Dass sich Elemente überdecken ist eine typische Begleiterscheinung wenn Du float verwendest. Mache dich besser mit Flex vertraut, da treten solche Effekte nicht auf:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Um dir eine Vorstellung zu geben, wie man so etwas aufziehen kann, habe ich mal das HTML ein wenig umgestellt und das CSS ergänzt:

HTML

<body>
    <div id="left-wrapper">
        <nav>
            <ul>
                <li>
                    <a class="german" href="index.html">HOME</a>
                    <a class="japanese" href="index.html">ホームホーム</a>

                </li>


                <li>
                    <a class="german" href="ueber_uns.html">ÜBER UNS</a>
                    <a class="japanese" href="ueber_uns.html">私について</a>
                </li>

                <li>
                    <a class="german" href="kontakt.html">KONTAKT</a>
                    <a class="japanese" href="kontakt.html">連絡先の詳細</a>
                </li>

                <li>
                    <a class="german" href="impressum.html">IMPRESSUM</a>
                    <a class="japanese" href="impressum.html">インプリント</a>
                </li>
            </ul>
        </nav>
        <main>
            <div>Willkommen / <span style="  color: #f70cca;">こんにちは </span> </div>
            <div>Wähle deinen Automaten und habe Spaß !!! </div>
            <div id="auto-wrapper">
                <div id="ani-wrap">
                    <a href="HighScoreSite.html"><img width="348" height="628,5" src="images/bild1.jpg" alt="Game3"></a>
                    <a href="HighScoreSite.html"><img width="348" height="628,5" src="images/bild2.jpg" alt="Game3"></a>
                    <a href="HighScoreSite.html"><img width="348" height="628,5" src="images/bild3.jpg" alt="Game3"></a>
                </div>
                <div>
                    <a href="Build_2D_Racer/Index.html"> <img width="348" height="628,5" src="images/burgtor_01.jpg"
                            alt="Game2"></a>
                </div>
                <div>
                    <a href="HighScoreSite.html"><img width="348" height="628,5" src="images/burgtor_02.jpg"
                            alt="Game3"></a>
                </div>
            </div>
        </main>
    </div>
    <div class="sideTitle">
        アーケード
    </div>
</body>

Alles anzeigen

CSS

html, body {
    /* Sollen das Browserfenster vertikal mindestens ausfüllen: */
    min-height: 100%;
}

body {
    /* #left-wrapper und .sideTitle sollen nebeneinander angeordnet werden: */
    display: flex;
}

nav, ul {
    /* Element darin zentrieren: */
    text-align: center;
    justify-content: center;
}

#left-wrapper {
    /* soll den gesamten freien Raum ausfüllen */
    flex: 1;
    /* Dass die Elemente darin untereinander angeordnet werden 
    ist Standard, das es sich um Blockelemente handelt. */
}

#auto-wrapper {
    /* Die Elemente darin sollen nebeneinander angeordnet werden: */
    display: flex;
    justify-content: center;
}

Alles anzeigen

Dein CSS habe ich dabei beibehalten und dieses nur unten angehängt. Allerdings das float: right; gelöscht.

Noch zu tun: Die drei Bilder nebeneinander sind nicht responsiv, daher taucht bei schmalem Browserfenster die horizontale Scrollbar auf. Muss ich mal überlegen, wie man diese Animation am besten responsiv macht.

Du hattest davon geschrieben, dass es drei Animationen sein sollen, heißt das, dass die Bilder in der Mitte und rechts auch noch Animationen werden sollen?

ButterKnecht · 10. August 2021

Das haut leider überhaupt nicht hin. Die Automaten sind alle untereinander. Hier mal die aktuellsten Einträge da sich wieder einiges getan hat und ein Foto wie es jetzt aussieht und auch am ende am jeden Monitor ungefähr aussehen soll

Code: CSS

html {
  
 min-height: 100%;
    color: white;
     font-family: 'Quicksand';
    font-family: url("fonts/Quicksand-VariableFont_wght.ttf");
    src: url("fonts/Quicksand.ttf");
    
}

body {
    
    background: linear-gradient(180deg, rgba(42,34,34,1) 0%, rgba(65,7,91,1) 53%, rgba(120,06,99,47) 100%);
    font-family: 'Quicksand', sans-serif;
    letter-spacing: 0.2em;
  
}

.container {
    margin-top:2%;
}    
    
.webgl-content {
   
    margin-top: 3%;
   
    
   
} 
nav {
    
    display: flex;
    
    
    
}




nav ul {
    
    display: flex;
    
   
    
}

nav ul slash {
   margin:18px; 
    color:#dd00e6;
    
} 


nav ul li a {
    height: 20px;
    width:150px;
    align-items: center;
    padding: 0.6rem;
    
    
    
 
    
    
    margin:7px;
    text-decoration: none;
    color: white;

}

  li {
            display: grid;
        }
  li .german,
        li .japanese {
            text-align: center;
            grid-area: 1 / 1;
            transition: opacity 1s;
        }

li .german {
    text-align: center;
            opacity: 1;
        }

 li .japanese {
     text-align: center;
            opacity: 0;
        }
  li:hover .german {
            opacity: 0;
      
        }
  li:hover .japanese {
            opacity: 1;
     
      color: #dd00e6;
      
        }





.sideTitle {
  
    float:right;
    writing-mode: vertical-lr;
    font-weight: 700;
  font-size: 120px;
  color: #f70cca;
  text-align: center;
  text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #dd00e6, 0 0 40px #dd00e6, 0 0 50px #dd00e6, 0 0 60px #dd00e6, 0 0 70px #dd00e6;
  
 
}
.Main{
   
    
    text-align: center;
    color:aliceblue;
    margin-top:5%;
    font-size: 25px;
        display: flex;
    vertical-align: middle;
    flex-direction: column;
    align-items: center;
    line-height:200%;
}
.Main:hover{
    filter: contrast(150%);
}
.Main h1{
   font-size: 30px;
    border: 4px solid #dd00e6;
    padding: 0.8rem;
    border-radius: 10px;
     box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #dd00e6, 0 0 20px #dd00e6, 0 0 25px #dd00e6, 0 0 30px #dd00e6, 0 0 35px #dd00e6;
    clear: both;

    
}

.Highscore {
   
    grid-row-end: span 3;
    text-align: center;
     color: #fff;
    
    font-size: 70px;
    margin-top: 3%;
    display: flex;
    
    flex-direction: column;
    align-items: center;
    line-height:200%;
}

.Game{
   
    
    text-align: center;
    color:aliceblue;
    letter-spacing: 0.1em;
    font-size: 20px;
    margin-top: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    line-height:200%;
}
.impressum{
     margin-top: 4rem;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
}

.kontakt {
    font-family: 'Quicksand';
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: 4rem;
     color: white;
    background-position: center;
    
    
    
}

.kontakt h1{
  
    text-align: center;
     color: #02E1FF;
    letter-spacing: 0.2em;
    font-size: 70px;
    display: flex; 
    flex-direction: column;
    align-items: center;
    line-height:200%;
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #02E1FF, 0 0 40px #02E1FF, 0 0 50px #02E1FF, 0 0 60px #02E1FF, 0 0 70px #02E1FF;
    clear: both;
}
.webgl-content{
    box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #02E1FF, 0 0 40px #02E1FF, 0 0 50px #02E1FF, 0 0 60px #02E1FF, 0 0 70px #02E1FF;
    
}
.kontakt form {
    display: flex;
    flex-direction: column;
    align-items: center;
}


.kontakt form tag {
    display: flex;
    flex-direction: column;
    padding: 10px;
    color: white;
}
.kontakt form input {
    width: 20rem;
    height: 3rem;
}
.kontakt form button {
    font-family: 'Quicksand', sans-serif;
width: 20rem;
    padding: 15px;
}


.kontakt h2 {
    
    font-size: 20px;
    margin-bottom: 0rem;
    
}

.kontakt p {
    font-size: 20px;
    margin: 5px 0;
    margin-bottom: 5rem;
    color:white;
}

.kontakt input {
    
    background: none;
    color: white;
    border: none;
    border: 3px solid rgba(255, 255, 255, 0);
    transition: 0.5s ease-in-out;
}

.kontakt input:hover {
    border: 3px  solid #ff00ee;
   
}

.arcadeMachine{
   position: relative;
    z-index: 1;
   height:628px;
  width:348px;
  background: url("images/I_Asteroids_1.png");
    background-size: contain;
}
.arcadeMachine1{
   z-index: 5;

}


.arcadeMachine img{
    position:absolute;
  left:0;
  -transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}
.arcadeMachine:hover{
     
 /* filter: brightness(1.2) ;*/
    height:628px;
  width:348px;
  background-image: url("images/I_Asteroids_2.png");
    filter:contrast(120%);
}
table{
  width:100%;
  table-layout: fixed;
}
h2{
font-size: 30px;
  color: #fff;
  text-transform: uppercase;
  font-weight: 300;
  text-align: center;
  margin-bottom: 15px;

}
.highscoreSign:hover{
     filter: contrast(150%);
}
#ani-wrap-1 {
            
            /* Breite auf die der Einzelbilder setzen: */
            width: 348px;
            
        }
#ani-wrap-2 {
            
            /* Breite auf die der Einzelbilder setzen: */
            width: 348px;
            
        }

#ani-wrap-3 {
            
            /* Breite auf die der Einzelbilder setzen: */
            width: 348px;
            
        }
.ani-wrap{
            /* Verhindern, dass Mausaktionen auch auf die Bilder wirken: */
             display: flex;
            overflow: hidden;
        }
        .ani-wrap img {
            /* Verhindern, dass Mausaktionen auch auf die Bilder wirken: */
            pointer-events: none;
        }


.ani-wrap:hover {
         filter: contrast(150%);
        }

Alles anzeigen

HTML: HTML

<!doctype html>

<html> 

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="external.css"/>
     <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="bootstrap-5.0.2-dist/css/bootstrap.min.css"/>
    
    <title>
    Arcade
    </title>
    
</head>

    
<body>
   
   <nav>
        <ul>
            <li>
                <a  class="german" href="index.html">HOME</a>
                <a class="japanese" href="index.html">ホームホーム</a>
                
            </li>
            
            
            <li>
                <a class="german" href="about.html">ÜBER UNS</a>
                <a class="japanese"href="about.html">私について</a>
            </li>
            
            <li>
                <a class="german" href="kontakt.html">KONTAKT</a>
                <a class="japanese"href="kontakt.html">連絡先の詳細</a>
            </li>
            
             <li>
                 <a class="german" href="impressum.html">IMPRESSUM</a>
        <a class="japanese"href="impressum.html">インプリント</a>
    </li>
        </ul>
    </nav> 
       
   <div class="sideTitle">
       アーケード
       </div>
    
    
   
    <div class="row">
        
        <div class="col-2">
            <div class="Main">
         <a href="HighScoreSite.html" ><img src="images/I_Highscore.png" alt="Highscore"></a>
         </div>
            </div>
        
        <div class="col-8">
            <div class="Main">
        <div>Willkommen  </div>
       <div>Wähle deinen Automaten und habe Spaß !!!   </div></div>
        </div>
        
        
        
    </div>
    
    
    
    <div class= "container">
  <div class="row">
    
    <div class="col">
       
        <div id="ani-wrap-1" class ="ani-wrap">
        <a href="Asteroids.html" ><img width="348" height="628,5" src="images/I_Asteroids_3.png" alt="Game3"></a>
        <a href="Asteroids.html" ><img width="348" height="628,5" src="images/I_Asteroids_2.png" alt="Game3"></a>
        <a href="Asteroids.html" ><img width="348" height="628,5" src="images/I_Asteroids_1.png" alt="Game3"></a>
    </div>
        </div>


<div class="col">
            <div id="ani-wrap-2" class ="ani-wrap">
                 <a href="racer.html" ><img width="348" height="628,5" src="images/I_Racer_1.png" alt="Game3"></a>
        <a href="racer.html" ><img width="348" height="628,5" src="images/I_Racer_2.png" alt="Game3"></a>
     
        
    </div>
          
      
      </div>

  <div class="col">
       
        <div id="ani-wrap-3" class ="ani-wrap">
        <a href="Asteroids.html" ><img width="348" height="628,5" src="images/I_Asteroids_3.png" alt="Game3"></a>
        <a href="Asteroids.html" ><img width="348" height="628,5" src="images/I_Asteroids_2.png" alt="Game3"></a>
        <a href="Asteroids.html" ><img width="348" height="628,5" src="images/I_Asteroids_1.png" alt="Game3"></a>
    </div>
        </div>
        </div>
        </div>
     
            
       
<script src="scripts/Animation-wrapper.js"></script>
    
    
    </body>
    
    
    
    




</html>

Alles anzeigen

Sempervivum · 10. August 2021

Bei mir ist überhaupt nichts übereinander, siehe hier:

https://webentwicklung.ulrichb…ayout-butterknecht-4.html

Nur das Bild mit dem Heighscore ist bei mir nicht drin.

Bei sehr breitem Browserfenster, z. B. FullHD, tauchen noch Scrollbars auf, da muss ich noch dran arbeiten.

ButterKnecht · 10. August 2021

Zitat von Sempervivum

Bei mir ist überhaupt nichts übereinander, siehe hier:
https://webentwicklung.ulrichb…ayout-butterknecht-4.html
Nur das Bild mit dem Heighscore ist bei mir nicht drin.
Bei sehr breitem Browserfenster, z. B. FullHD, tauchen noch Scrollbars auf, da muss ich noch dran arbeiten.

Hmm wie hast du die Bilder eingebunden. Kannst du deinen ganze Code schicken?

basti1012 · 10. August 2021

Zitat von ButterKnecht

Hmm wie hast du die Bilder eingebunden. Kannst du deinen ganze Code schicken?

Rechtsklick mit der Maus und dann Quelltext anzeigen lassem.

Sempervivum · 10. August 2021

Das kannst Du mit der Quelltextansicht deines Browsers selber einsehen: Rechtsklick und dann "Seitenquelle anzeigen" o. ä. je nach Browser. Auch das CSS kannst Du einsehen:

https://webentwicklung.ulrichb…layout-butterknecht-3.css

ButterKnecht · 10. August 2021

Zitat von ButterKnecht

Hmm wie hast du die Bilder eingebunden. Kannst du deinen ganze Code schicken?

Ok jetzt haut es schon besser hin. Aber er zerstückelt die Bilder und der Side Title soll höher sein und die Navbar und Higscore links.

HTML: HTML

<!doctype html>

<html> 

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="external.css"/>
     <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="bootstrap-5.0.2-dist/css/bootstrap.min.css"/>
    
    <title>
    Arcade
    </title>
    
</head>

    
<body>
   <div id="left-wrapper">
   <nav>
        <ul>
            <li>
                <a  class="german" href="index.html">HOME</a>
                <a class="japanese" href="index.html">ホームホーム</a>
                
            </li>
            
            
            <li>
                <a class="german" href="about.html">ÜBER UNS</a>
                <a class="japanese"href="about.html">私について</a>
            </li>
            
            <li>
                <a class="german" href="kontakt.html">KONTAKT</a>
                <a class="japanese"href="kontakt.html">連絡先の詳細</a>
            </li>
            
             <li>
                 <a class="german" href="impressum.html">IMPRESSUM</a>
        <a class="japanese"href="impressum.html">インプリント</a>
    </li>
        </ul>
    </nav> 

            <div class="Main">
                 <div class="Main">
         <a href="HighScoreSite.html" ><img src="images/I_Highscore.png" alt="Highscore"></a>
         
        <div>Willkommen  </div>
       <div>Wähle deinen Automaten und habe Spaß !!!   </div></div>
                </div>
        
<div id="auto-wrapper">
        <div id="ani-wrap-1" class ="ani-wrap">
        <a href="Asteroids.html" ><img width="348" height="628,5" src="images/I_Asteroids_3.png" alt="Game3"></a>
        <a href="Asteroids.html" ><img width="348" height="628,5" src="images/I_Asteroids_2.png" alt="Game3"></a>
        <a href="Asteroids.html" ><img width="348" height="628,5" src="images/I_Asteroids_1.png" alt="Game3"></a>
    </div>
       


            <div id="ani-wrap-2" class ="ani-wrap">
                 <a href="racer.html" ><img width="348" height="628,5" src="images/I_Racer_1.png" alt="Game3"></a>
        <a href="racer.html" ><img width="348" height="628,5" src="images/I_Racer_2.png" alt="Game3"></a>
     
        
    </div>
          
        <div id="ani-wrap-3" class ="ani-wrap">
        <a href="Asteroids.html" ><img width="348" height="628,5" src="images/I_Asteroids_3.png" alt="Game3"></a>
        <a href="Asteroids.html" ><img width="348" height="628,5" src="images/I_Asteroids_2.png" alt="Game3"></a>
        <a href="Asteroids.html" ><img width="348" height="628,5" src="images/I_Asteroids_1.png" alt="Game3"></a>
    </div>
     </div>
       
       
       </div>     
        <div class="sideTitle">
       アーケード
       </div>
    
    <script>
        // Die drei Bilder/Animationen von der Größe her in den Container einpassen:
        function adjustSizes() {
            const
                aspectRatio = 348 / 628.5,
                // Breite des Browserfensters:
                wWindow = window.innerWidth,
                // Breite der Sidebar rechs:
                wSidebar = document.querySelector('.sideTitle').offsetWidth,
                // Breite eines Elementes in #ani-wrap
                calcWidth = (wWindow - wSidebar) / 3,
                calcHeight = calcWidth / aspectRatio;
            // CSS-Konstante für die Breite auf diesen Wert setzen:
            document.documentElement.style.setProperty('--ani-width', calcWidth + 'px');
            document.documentElement.style.setProperty('--ani-height', calcHeight + 'px');
        }
        window.addEventListener('resize', adjustSizes);
        adjustSizes();
    </script>
<script src="scripts/Animation-wrapper.js"></script>

    </body>

</html>

Alles anzeigen

ButterKnecht · 10. August 2021

und hier noch die CSS

Code

html {
  
 min-height: 100%;
    color: white;
     font-family: 'Quicksand';
    font-family: url("fonts/Quicksand-VariableFont_wght.ttf");
    
    
}

body {
    
    background: linear-gradient(180deg, rgba(42,34,34,1) 0%, rgba(65,7,91,1) 53%, rgba(120,06,99,47) 100%);
    font-family: 'Quicksand', sans-serif;
    letter-spacing: 0.2em;
    display: flex;
  
}

.container {
    margin-top:2%;
}    
    
.webgl-content {
   
    margin-top: 3%;
   
 
} 
nav {
    
    display: flex;
    
    
    
}

nav, ul {
    /* Elemente darin zentrieren: */
    text-align: center;
    justify-content: center;
}

ul {
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}


nav ul {
    
    display: flex;
    
   
    
}

nav ul slash {
   margin:18px; 
    color:#dd00e6;
    
} 


nav ul li a {
    height: 20px;
    width:150px;
    align-items: center;
    padding: 0.6rem;
    
    
    
 
    
    
    margin:7px;
    text-decoration: none;
    color: white;

}

  li {
            display: grid;
        }
  li .german,
        li .japanese {
            text-align: center;
            grid-area: 1 / 1;
            transition: opacity 1s;
        }

li .german {
    text-align: center;
            opacity: 1;
        }

 li .japanese {
     text-align: center;
            opacity: 0;
        }
  li:hover .german {
            opacity: 0;
      
        }
  li:hover .japanese {
            opacity: 1;
     
      color: #dd00e6;
      
        }





.sideTitle {
  
    flex:0 0 aitp;
    writing-mode: vertical-lr;
    font-weight: 700;
  font-size: 120px;
  color: #f70cca;
  text-align: center;
  text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #dd00e6, 0 0 40px #dd00e6, 0 0 50px #dd00e6, 0 0 60px #dd00e6, 0 0 70px #dd00e6;
  
 
}
.Main{
   
    
    text-align: center;
    color:aliceblue;
    margin-top:5%;
    font-size: 25px;
        display: flex;
    vertical-align: middle;
    flex-direction: column;
    align-items: center;
    line-height:200%;
}
.Main:hover{
    filter: contrast(150%);
}
.Main h1{
   font-size: 30px;
    border: 4px solid #dd00e6;
    padding: 0.8rem;
    border-radius: 10px;
     box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #dd00e6, 0 0 20px #dd00e6, 0 0 25px #dd00e6, 0 0 30px #dd00e6, 0 0 35px #dd00e6;
    clear: both;

    
}

.Highscore {
   
    grid-row-end: span 3;
    text-align: center;
     color: #fff;
    
    font-size: 70px;
    margin-top: 3%;
    display: flex;
    
    flex-direction: column;
    align-items: center;
    line-height:200%;
}

.Game{
   
    
    text-align: center;
    color:aliceblue;
    letter-spacing: 0.1em;
    font-size: 20px;
    margin-top: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    line-height:200%;
}
.gameBox{
    box-shadow: 0 0 2px #fff, 0 0 5px #fff, 0 0 7px #05E2FF, 0 0 10px #05E2FF, 0 0 12px #05E2FF, 0 0 15px #05E2FF, 0 0 17px #05E2FF;
}
.impressum{
     margin-top: 4rem;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
}

.kontakt {
    font-family: 'Quicksand';
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: 4rem;
     color: white;
    background-position: center;
    
    
    
}

.kontakt h1{
  
    text-align: center;
     color: #02E1FF;
    letter-spacing: 0.2em;
    font-size: 70px;
    display: flex; 
    flex-direction: column;
    align-items: center;
    line-height:200%;
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #05E2FF, 0 0 40px #05E2FF, 0 0 50px #05E2FF, 0 0 60px #05E2FF, 0 0 70px #05E2FF;
    clear: both;
}

.kontakt form {
    display: flex;
    flex-direction: column;
    align-items: center;
}


.kontakt form tag {
    display: flex;
    flex-direction: column;
    padding: 10px;
    color: white;
}
.kontakt form input {
    width: 20rem;
    height: 3rem;
}
.kontakt form button {
    font-family: 'Quicksand', sans-serif;
width: 20rem;
    padding: 15px;
}


.kontakt h2 {
    
    font-size: 20px;
    margin-bottom: 0rem;
    
}

.kontakt p {
    font-size: 20px;
    margin: 5px 0;
    margin-bottom: 5rem;
    color:white;
}

.kontakt input {
    
    background: none;
    color: white;
    border: none;
    border: 3px solid rgba(255, 255, 255, 0);
    transition: 0.5s ease-in-out;
}

.kontakt input:hover {
    border: 3px  solid #ff00ee;
   
}

.arcadeMachine{
   position: relative;
    z-index: 1;
   height:628px;
  width:348px;
  background: url("images/I_Asteroids_1.png");
    background-size: contain;
}
.arcadeMachine1{
   z-index: 5;

}


.arcadeMachine img{
    position:absolute;
  left:0;
  -transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}
.arcadeMachine:hover{
     
 /* filter: brightness(1.2) ;*/
    height:628px;
  width:348px;
  background-image: url("images/I_Asteroids_2.png");
    filter:contrast(120%);
}
table{
  width:100%;
  table-layout: fixed;
}
h2{
font-size: 30px;
  color: #fff;
  text-transform: uppercase;
  font-weight: 300;
  text-align: center;
  margin-bottom: 15px;

}
.highscoreSign:hover{
     filter: contrast(150%);
}
#ani-wrap-1 {
            
            /* Breite auf die der Einzelbilder setzen: */
            width: 348px;
            
        }
#ani-wrap-2 {
            
            /* Breite auf die der Einzelbilder setzen: */
            width: 348px;
            
        }

#ani-wrap-3 {
            
            /* Breite auf die der Einzelbilder setzen: */
            width: 348px;
            
        }
.ani-wrap{
            /* Verhindern, dass Mausaktionen auch auf die Bilder wirken: */
             display: flex;
            overflow: hidden;
        }
        .ani-wrap img {
            /* Verhindern, dass Mausaktionen auch auf die Bilder wirken: */
            pointer-events: none;
        }


.ani-wrap:hover {
         filter: contrast(150%);
        }

#left-wrapper {
    /* soll den gesamten freien Raum ausfÃ¼llen: */
    flex: 1;
    /* Dass die Elemente darin untereinander angeordnet werden 
    ist Standard, da es sich um Blockelemente handelt */
}

#auto-wrapper {
    /* Die Elemente darin sollen nebeneinander angeordnet werden: */
    display: flex;
    justify-content: center;
}

/* *** Animation responsiv machen *** */

/* Konstanten fÃ¼r HÃ¶he und Breite definieren,
damit sie leicht von Javascript gesetzt werden kÃ¶nnen: */

:root {
    --ani-width: 0px;
    --ani-height: 0px;
}

#auto-wrapper img, .ani-wrap {
    width: var(--ani-width);
    height: var(--ani-height);
}

Alles anzeigen

m.scatello · 10. August 2021

Zitat von ButterKnecht

der Side Title soll höher sein und die Navbar und Higscore links

Ja dann mach' das doch!

Echt schlimm, wie manche sich alles vorkauen lassen, aber solange es User gibt, die das auch noch servieren ....

ButterKnecht · 10. August 2021

Zitat von m.scatello

Ja dann mach' das doch!

Echt schlimm, wie manche sich alles vorkauen lassen, aber solange es User gibt, die das auch noch servieren ....

Mir ging es vor allem um die Bilder, da ich da überhaupt keinen Ansatz habe...

Sempervivum · 10. August 2021

Das kannst Du erreichen, indem Du das Highscore-Logo und die beiden Überschriften in einen zusätzlich Container packst, z. B. header:

HTML

   </nav>
        <header>
            <img src="images/highscore.jpg">
            <div>
                <div>Willkommen / <span style="  color: #f70cca;">こんにちは </span> </div>
                <div>Wähle deinen Automaten und habe Spaß !!! </div>
            </div>
        </header>
        <main>
            <div id="auto-wrapper">

CSS

header {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

Das sind aber solche Feinheiten und Dekosachen, die wir erst Mal zurück stellen sollten. Wichtiger ist es, die Automaten vollständig responsiv zu machen.

ButterKnecht · 10. August 2021

Zitat von Sempervivum

Das kannst Du erreichen, indem Du das Highscore-Logo und die beiden Überschriften in einen zusätzlich Container packst, z. B. header:

HTML

   </nav>
        <header>
            <img src="images/highscore.jpg">
            <div>
                <div>Willkommen / <span style="  color: #f70cca;">こんにちは </span> </div>
                <div>Wähle deinen Automaten und habe Spaß !!! </div>
            </div>
        </header>
        <main>
            <div id="auto-wrapper">

CSS

header {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

Das sind aber solche Feinheiten und Dekosachen, die wir erst Mal zurück stellen sollten. Wichtiger ist es, die Automaten vollständig responsiv zu machen.

ja das denke ich kriege ich auch gebacken. Nur bei den Bilder habe ich keinen Ansatz

Sempervivum · 10. August 2021

Die animierten Bilder habe ich jetzt responsiv gemacht:

https://webentwicklung.ulrichb…ayout-butterknecht-6.html

Du kannst das Browserfenster jetzt vergrößern und verkleinern ohne dass Scrollbars auftauchen und das Seitenverhältnis bleibt dabei gleich.

Die animierten Automatenbilder werden bei dir jedoch in dem Screenshot in Posting #28 rechts abgeschnitten. Dem Problem sollten wir uns als nächstes annehmen. Es wäre dabei sehr hilfreich, wenn Du deine Version online hättest. Hast Du schon Webspace?

Sempervivum · 10. August 2021

Perfekt, ich sehe es mir an ...

Sempervivum · 10. August 2021

Um das mit den Bildern zu bereinigen musst Du zunächst die feste Breite entfernen, denn die Abmessungen werden jetzt vom Script gesetzt. Und dann overflow:hidden; setzen:

Code

#ani-wrap-1 {
            
            /* Breite auf die der Einzelbilder setzen: */
            
/* width: 348px; */
        }
#ani-wrap-2 {
            
            /* Breite auf die der Einzelbilder setzen: */
            
/* width: 348px; */
        }

#ani-wrap-3 {
            
            /* Breite auf die der Einzelbilder setzen: */
            
/* width: 348px; */
        }
.ani-wrap{
            /* Verhindern, dass Mausaktionen auch auf die Bilder wirken: */
            display: flex;
            overflow: hidden;
        }

Alles anzeigen

(ab Zeile 311 in external.css)

ButterKnecht · 10. August 2021

Zitat von Sempervivum

Um das mit den Bildern zu bereinigen musst Du zunächst die feste Breite entfernen, denn die Abmessungen werden jetzt vom Script gesetzt. Und dann overflow:hidden; setzen:

Code

#ani-wrap-1 {
            
            /* Breite auf die der Einzelbilder setzen: */
            
/* width: 348px; */
        }
#ani-wrap-2 {
            
            /* Breite auf die der Einzelbilder setzen: */
            
/* width: 348px; */
        }

#ani-wrap-3 {
            
            /* Breite auf die der Einzelbilder setzen: */
            
/* width: 348px; */
        }
.ani-wrap{
            /* Verhindern, dass Mausaktionen auch auf die Bilder wirken: */
            display: flex;
            overflow: hidden;
        }

Alles anzeigen

(ab Zeile 311 in external.css)

Ich bin begeistert. Funktioniert richtig gut. Ein bisschen feinschliff noch, aber das kriege ich selber hin

ButterKnecht · 11. August 2021

Zitat von Sempervivum

Um das mit den Bildern zu bereinigen musst Du zunächst die feste Breite entfernen, denn die Abmessungen werden jetzt vom Script gesetzt. Und dann overflow:hidden; setzen:

Code

#ani-wrap-1 {
            
            /* Breite auf die der Einzelbilder setzen: */
            
/* width: 348px; */
        }
#ani-wrap-2 {
            
            /* Breite auf die der Einzelbilder setzen: */
            
/* width: 348px; */
        }

#ani-wrap-3 {
            
            /* Breite auf die der Einzelbilder setzen: */
            
/* width: 348px; */
        }
.ani-wrap{
            /* Verhindern, dass Mausaktionen auch auf die Bilder wirken: */
            display: flex;
            overflow: hidden;
        }

Alles anzeigen

(ab Zeile 311 in external.css)

Also meine Hauptseite funktioniert jetzt einwandfrei. Ich wollte das Skript jetzt für meine Spiele die in einem 800px mal 600px Container starten. Der Rest der Seite ist fast gleich. Aber es wird dann viel zu klein. Ich habe die Ratio natürlich angepasst. Hast du einen Tipp für mich?

Sempervivum · 11. August 2021

Ich habe mal meine Testseite auf 800x600 eingestellt und dann sieht sie so aus:

html-seminar.de/woltlab/attachment/3153/

Erste Maßnahme: Die Schriftgröße bei den japanischen Zeichen rechts halbieren. Aber meinst Du jetzt überhaupt noch diese Seite mit den Automaten?

ButterKnecht · 11. August 2021

Zitat von Sempervivum

Ich habe mal meine Testseite auf 800x600 eingestellt und dann sieht sie so aus:
html-seminar.de/woltlab/attachment/3153/

Erste Maßnahme: Die Schriftgröße bei den japanischen Zeichen rechts halbieren. Aber meinst Du jetzt überhaupt noch diese Seite mit den Automaten?

Ne ne. Die Seiten kommen wenn man auf die Automaten klickt.

Background linear gradiant

Jetzt mitmachen!

Teilen