CSS – die neusten Beiträge

Verwandte Themen
random1755
16.06.2023, 00:17

HTML gradient in nav bar?

Hallo, ich versuche vergebens eine nav bar zu bauen, welche durch hovern einen gradient freigibt, nicht hinter jedem linkblock soll ein gradient sein, sondern ein 'grosser' hinter allen zsm. Mein ansatz ist bis jetzt dies: 

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>G&M Barber</title>
  </head>
  <body>
   
        <ul>
            <li><a href="barber.html">Home</a></li>
            <li><a href="barber.html">News</a></li>
            <li><a href="barber.html">Contact</a></li>
            <li><a href="barber.html">About</a></li>
            
        </ul> 
    
</body>
</html>

css: 

body {
    background-color: black;
  }
  
  ul {
  background: linear-gradient(90deg, rgba(0, 3, 36, 1) 0%, rgba(121, 9, 118, 1) 47%, rgba(56, 134, 188, 1) 100%);    border-radius: 12px;
    overflow: hidden;
    display: table;
    margin: 0 auto;
    padding: 0;
  }
  
  li {
    display: inline-block;
  }
  
  li a {
    display: block;
    color: rgb(255, 255, 255);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    background: black;
  }
  
  li a:hover {
    background: transparent;
  }

  jedoch sind die Abstände zwischen den li 'boxen' auch gefärbt, wie ändere ich das, oder wie gehe ich das schlauer an?

Vielen Dank schon mal

HTML, Webseite, CSS, HTML5, Programmiersprache, Webdesign, Webentwicklung
2 Antworten
Whataboutno08
11.06.2023, 16:43
Mit Bildern

Pinball-Game / JavaScript: Wie kann ich die Kollisionserkennung implementieren?

Hallo zusammen,

ich muss für die Uni ein kleines Single Page 2D-Spiel entwickeln. Die Backend REST-API mit Python, das Frontend mit HTML/CSS, die Logik mit JavaScript. Die Animationen sollen wir selbst entwickeln und nicht z.B. von canvas-Objekten übernehmen.

Ich versuche zurzeit ein Pinball-Spiel (Flipper-Automaten) und habe das Grundgerüst mit CSS gebaut. Nur habe ich mir die Kollisionserkennung deutlich leichter vorgestellt, als sie wahrscheinlich ist.

So sieht das Spielfeld momentan aus:

Die JavaScript-Logik sodass der Ball im Spielfeld bleibt, ist ja recht simpel:

  var ball = document.getElementById('ball');
  var playArea = document.getElementById('play-area');
  var ballRadius = 10;
  var playAreaWidth = playArea.offsetWidth; // 600
  var playAreaHeight = playArea.offsetHeight; // 820
  var ballX = playAreaWidth / 2; // Startposition des Balls in der Mitte des Spielfelds
  var ballY = playAreaHeight / 2; // X = 300, Y = 410
  var ballSpeedX = 3; // Geschwindigkeit des Balls in horizontaler Richtung
  var ballSpeedY = 3; // Geschwindigkeit des Balls in vertikaler Richtung
  
  function updateBallPosition() {
    // Aktualisiere die Position des Balls basierend auf der aktuellen Geschwindigkeit
    ballX += ballSpeedX;
    ballY += ballSpeedY;
  
    if (ballX + ballRadius > playAreaWidth || ballX - ballRadius < 0) {
      ballSpeedX *= -1; // Richtungswechsel in der horizontalen Richtung
    }
  
    if (ballY + ballRadius > playAreaHeight || ballY - ballRadius < 0) {
      ballSpeedY *= -1; // Richtungswechsel in der vertikalen Richtung
    }
  
    // Setze die neue Position des Balls
    ball.style.left = ballX + 'px';
    ball.style.top = ballY + 'px';
  }
  
  // Aktualisiere die Position des Balls alle 16 Millisekunden (ca. 60 Frames pro Sekunde)
  setInterval(updateBallPosition, 16);
}

Aber wie man es implementiert, sodass der Ball von den Hindernissen und Banden richtig abprallt, sodass ein Richtungswechsel entsteht, habe ich noch nicht wirklich verstanden. Hätte da jemand eine Idee oder Erfahrung, wie man hier an die Kollisionserkennung herangehen könnte?

LG und danke im Voraus. :)

Bild zum Beitrag
HTML, CSS, Java, JavaScript, HTML5, Informatik, Programmiersprache, Webentwicklung
1 Antwort
GPM23
26.05.2023, 20:36

Strato Web-Baukasten anpassen?

Noch einmal vorab, nicht ich habe mir den Mis... gekauft, wollte jemanden helfen, der die Seite benötigt. Wenn sich also jemand mit Tricks im Strato Baukasten auskennt und so lieb sein mag, konstruktive Ansätze mit mir zu teilen, wäre ich sehr dankbar.

Hallo,

Es geht um einfachste Abläufe, die sich im Strato Baukasten nicht verwirklichen lassen. Der Strato Service war sehr hilfreich (Ironie)! Wenn jemand selbst schon Ideen über Umwege gefunden hat, würde ich mich sehr über einen Ideenaustausch freuen.

Alle Fragen wurden beantwortet mit "Ja, das sehen Sie leider richtig, dies ist nicht vorgesehen" weitere Aussage "Aber schreiben Sie das bitte als Wunsch und Beschwerde, das hören wir seit Jahren." :-(

Zu den Problemen:

Also lange Texte kann man nicht einfach kürzen und mit beispielsweise ...weiter kürzen, dies geht nur über eine versteckte Seite im Untermenü! Ebenso auf dieser versteckten Seite mit einem ...zurück!

Soweit so Gut (Schlecht), denn die ...zurück Verlinkung, kann man intern nur auf den Hauptreiter oder Unterseite oder versteckte Seite lenken! Bin ich aber in der Mitte der "Home" Seite (habe also dort drüber schon verschiedene Themen) und möchte jetzt ein Produkt beschreiben.

Also binde ich dort den ...weiter Link ein und möchte dann zurück auf die gleiche Höhe, ist dies nicht möglich, sondern man fängt ganz oben bei "Home" wieder an, da man den Bereich nicht wählen kann, wohin es zurückgehen soll :-(

Es gibt noch nicht einmal die Möglichkeit eines simplen "Ziehharmonika Effektes!"

Mit dem “Embed-Widget” hatte ich die Hoffnung, eine Art von Code einbinden zu können, aber trotz richtiger Codes, versteht das Tool wohl nur bestimmte Codes von Fremdseiten?!

Sollte sich schon einmal jemand mit diesem furchtbaren Baukasten beschäftigt haben und Ideen oder Tricks benennen können, wäre ich sehr dankbar. Es kann ja nicht sein, dass ich, dem Service von Strato erkläre, wie man gewisse Sachen bei Ihnen “faken” kann und dies leider auch nonstop muss (Thema Mehrsprachigkeit).

Mein Kopf raucht und ist müde, also sollte es jemanden da draußen geben, der am besten einen Ordner mit allen Strato-Tricks besitzt, wie man den Strato-Baukasten nutzen kann, lasse es mich bitte wissen. 

Fragen, warum ich mir den Stress überhaupt antue?! Ich wurde leider gefragt, ob ich helfen kann, da diejenige es für ein Jahr gekauft hat (Geld weg und 14 Tage um), wurde ich um eine Lösung für das Produkt/Problem gebeten.

Ich freue mich auf hilfreiche Antworten.

Danke GPM

Homepage, HTML, Webseite, CSS, JavaScript, Strato, Webentwicklung
2 Antworten
DrakeKL
16.05.2023, 08:10

HTML Kalender ohne JavaScript oder PHP erstellen?

Hallo zusammen,

ich möchte mit HTML einen Kalender erstellen, der allerdings nicht statisch sein soll. Damit meine ich nicht unbedingt, dass jeder manuell auf der Webseite Daten eintragen kann, sondern dass man zwischen den Monaten navigieren kann. Zum Beispiel innerhalb einer Zeitspanne von August 2022 bis August 2025 oder so. Dabei soll der Kalender beim Aufrufen der Seite, wenn möglich, den aktuellen Monat zeigen und durch Klicken auf ein Symbol (oder eventuell Drücken der Links- / Rechtstaste auf der Tastatur) kann man auf den vorherigen oder nächsten Monat wechseln.

Ich möchte das - verständlicherweise - nicht durch das Erstellen von 37 verschiedenen HTML-Dokumenten erreichen, durch die man dann mit Hyperlinks zwischen diesen Seiten hin und herwechseln kann.

Das Problem ist, dass ich sowohl von JavaScript als auch von PHP absolut keine Ahnung habe und auf keinen Fall irgendwo im Internet einen fünfzig-Zeilen-Code (JavaScript, PHP oder sonst irgendeine Programmiersprache) kopieren will, den ich zu 99,9% selbst nicht verstehen würde.

Weiß einer, wie ich so etwas nur mit HTML und CSS (und eventuell, wenn es sein muss, auch mit Java) hinbekomme?

P. S. Bitte gebt mir keine Antworten vom Stil "lerne einfach JavaScript". Das ist keine hilfreiche Antwort, da ich es eben ohne JavaScript erreichen will!

Computer, Technik, HTML, IT, Webseite, Kalender, CSS, JavaScript, Informatik, interaktiv, PHP, Programmiersprache, Softwareentwicklung, Technologie, Webdesign
8 Antworten
AngriffsCrew
11.04.2023, 18:25
Mit Bildern

HTML CSS Website Footer wird im Container angezeigt, obwohl er nicht drin ist?

Hallo,

Ich "programmiere" gerade ein wenig mit HTML und CSS und baue eine Website mit einem Head, einer Main und einem Footer. Mein Problem ist, dass alle Elemente der Website nach der Main (bei mir heißt sie "Container") trotzdem noch innerhalb des Containers angezeigt werden. Somit ist bei mir der Footer im Container Main, obwohl der Container vorher schon geschlossen wurde.

-------------------------------------------------------------------------------------

HTML CODE: 

<!DOCTYPE html>
<html>
 <head>
  <title>Aufgabe 1</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" type="text/css" href="style.css" />
 </head>
 <body>
  <header>
   <header1 class="item1">
    <h2>FeWos</h2>
   </header1>
  </header>
  <div" class="container">
   <div class="b1">
    <div>
     <h1>Item 1</h1>
    </div>
    <div class="bild1">
     <img src="pingu.png" width="50%" height="50%">
    </div>
   </div>
   <div class="b1"><br>Box 2</div>
   <div class="b1"><br>Box 3</div>
   <div class="b1"><br>Box 4</div>
   <div class="b1"><br>Box 5</div>
   <div class="b1"><br>Box 6</div>
  </div>
  <footer>
   <p>Hallo</p>
  </footer>
 </body>
</html>

----------------------------------------------------------------------------------------------------

CSS CODE: 

body {
  margin: 0;
}
header {
  height: 120px;
  background-color: rgb(43, 43, 43);
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.container {
  border: 3px solid;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 90px;
  padding: 90px;
}
.b1 {
  display: flex;
  background-color: rgb(93, 161, 224);
  width: 30%;
  height: 500px;
  flex-grow: 1;
  transition: transform 0.2s ease-out;
  border-radius: 20px;
}
.b1:hover {
  transform: scale(1.05);
}
.bild1 {
  padding-left: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-right: 20px;
  width: auto;
  height: auto;
}
footer {
  background-color: rgb(43, 43, 43);
  width: 100%;
  height: 120px;
  padding: 0px;
}

----------------------------------------------------------------------------

Wie man sehen kann wird der "container" mit </div> abgeschlossen, aber der Footer ist trotzdem im Container. Hoffe mir kann jemand bei dem Problem helfen.

Auf dem Bild kann man das auch ganz gut sehen. Das anthrazit farbige soll der Footer sein und dieser liegt innerhalb des Containers, welcher zur Sichtbarkeit eine Umrandung hat.
Würde mich echt freuen, wenn mir jemand weiterhelfen kann. Hab auch Chat GBT schon gefragt, aber Chat GPT sagt, dass der Code ganz normal ist und, dass der Footer nicht im Container ist.

Bild zum Beitrag
HTML, Webseite, CSS, Webentwicklung, Footer
2 Antworten
SohnSchais
09.04.2023, 13:39

JS - Warum funktioniert der Button nicht Richtig?

Ich wollte ein simples Spiel mit JS programmieren und wollte einen Refresh des Bildschirms einfügen. An sich funktioniert das auch, jedoch reagiert der Button nicht immer. Je schneller der Refresh erfolgt, desto schlechter Funktioniert der Button. Kann mir da vielleicht jemand helfen?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="miner.css" rel="stylesheet">
    <script src="miner.js"></script>
</head>
<body>
    <div class="monitor" id="monitor">
        <h1>Mine Tycoon</h1>
        <div>Mines: <font id="minesCounter">0</font></div><br>
        <div id="buyMineButton">
            <p class="button" onclick="buyMine()">Buy mine Cost: <font id="minesPrice">1</font></p>
        </div>
    </div>
</body>
</html>

body{
    background-color: #393939;
    color: #ffffff;
}


h1{
    text-align: center;
}


.button{
    height: auto;
    width: 180px;
    border-radius: 15px;
    outline: 2px solid red;
    outline-offset: 4px;
    text-align: center;
}
.buttonGreen{
    height: auto;
    width: 180px;
    border-radius: 15px;
    outline: 2px solid green;
    outline-offset: 4px;
    text-align: center;
}

var money = 100;


var mines = 0;
var minesPrice = 1;
var miners = 0;


var coal = 0;
var copper = 0;
var iron = 0;
var cobalt = 0;
var gold = 0;
var platinum = 0;
var diamond = 0;


var reload = 10;


function buyMine(){
    mines++;
    money -= minesPrice;
    minesPrice = minesPrice*2;
}


function loop(){
    
        setInterval(function(){
            refreshScreen();
        },1000/reload)
    
}


function refreshScreen(){
    minesCounter.innerHTML = mines;
    if(money < minesPrice){
        document.getElementById("buyMineButton").innerHTML = "<p class='button'>Buy mine Cost: <font id='minesPrice'></font></p>"
    }else{
        document.getElementById("buyMineButton").innerHTML = "<p class='buttonGreen' onclick='buyMine()'>Buy mine Cost: <font id='minesPrice'></font></p>"
    }
    document.getElementById("minesPrice").innerHTML = minesPrice;
}


loop();
HTML, CSS, JavaScript
1 Antwort

Meistgelesene Beiträge zum Thema CSS
Mehr meistgelesene Fragen zu CSS