Wieso übernimmt CSS die Änderung hier nicht?

Hi ich muss für die Uni eine Website nachbauen. Mein Problem ist, dass ich eine Tabelle mit unterschiedlichen Cellgrößen gestalten muss, CSS aber für alle die gleiche größe nimmt. (HTML-File darf ich nicht verändern)
Hier der Code:

Bild zum Beitrag

Wie es aussehen soll:

Bild zum Beitrag

Wie es bei mir aussieht:

Bild zum Beitrag

Hilfe wäre wirklich super, ich blick da nämlich nicht hinter

1 Antwort

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, Webseite, CSS

13.04.2024, 17:21

Bei einer Tabelle orientieren sich die Zellen einer Reihe immer an der Höhe der höchsten Zelle (in dieser Reihe) und skalieren dementsprechend. Du müsstest der Zelle mit der Klasse AC eine andere Darstellungsform geben.

display: block;

Die Breite dieser Zelle kann dann ebenso individuell gesetzt werden.

mamo04

Fragesteller

13.04.2024, 17:28

Vielen vielen Dank! Das hab ich jetzt verstanden. Mit display: block; ist der Text innerhalb der Zelle jedoch anders angeordnet. Wie kann ich den vertikal zentrieren?

mamo04

Fragesteller

13.04.2024, 18:09

@mamo04

Außerdem sind zwei Zellen jetzt untereinander. Hier ein Screenshot von CSS: https://snipboard.io/RvB6ca.jpg
Und ein Screenshot von der Website:
https://snipboard.io/SRbauN.jpg

regex9

13.04.2024, 18:17

@mamo04

Überschreib das komplette Layout der Tabelle, indem du ein Grid verwendest.

table { display: grid; /* ... */ }

In dem kannst du auch Inhalte von Zellen positionieren.

Gute Guides findest du auf CSS Tricks oder Media Event (Einführung, Ausrichtung).

Ähnliche Fragen

Hintergrundbild in HTML anpassen?

Hab neu mit HTML und css angefangen...

Ich möchte zum Anfang als Startprojekt sowas wie einen Lebenslauf gestalten und will eben ein bestimmtes Bild als Hintergrundbild.

background-image: url('thumb2-flag-of-bern-4k-swiss-canton-silk-flag-silk-texture.jpg');
background-repeat: no-repeat;

so steht es in meiner CSS, das passt auch nur ist es nur auf dem Viertel des Bildschirms. Was muss ich noch dazuschreiben damit es 1. nur ein Bild ist und nicht wiederholt wird und es sich an die Tabgröße anpasst?

...zur Frage

Border-Radius in Tabellen ohne CSS?

Hi zusammen,

die Frage ist mir zwar etwas peinlich, aber ich bekomme es nicht gelöst und brauche mal eure Hilfe.

Weiß jemand wir man die Ecken einer Tabelle abgerundet bekommt, ohne dafür css zu verwenden?

Ich habe nämlich folgendes Problem:

Ich versuche, ein neues Email-Template zu bauen. Leider werden je nach E-Mailprogramm einige CSS Befehle nicht erkannt (Outlook). Da ich nicht mit Bildern arbeiten möchte, suche ich hierzu eine „reine HTML-Lösung“.

oder:

Wenn jemand, weiß wie man Outlook dazu bringen kann auf Border-Radius (css) zu reagieren, nehme ich auch gerne jeden anderen Vorschlag an ^^

Lieben Dank schon mal 😊

<table class="emailTable">
    <tr class="firstTR">
        <td>1</td>
        <td>2</td>
     </tr>
</table>

...zur Frage

HTML & CSS in .exe umwandeln?

Hallo,

ich habe eine ganz einfache Webseite mit HTML und CSS gebaut. Dort gibt es Buttons, die zu unterschiedlichen Webseiten führen. So eine Art Favoriten Liste wie in Browsern.

Diese Webseite möchte ich gerne in eine .exe umwandeln. Dann kann der Anwender über ein Desktop Icon dieses "Programm" öffnen. Wenn man dann auf einen Button klickt öffnet sich ganz normal eine externe Browser Webseite. Habe das schon mit .hta probiert, aber dann werden einige CSS Befehle nicht übernommen und die Buttons funktionieren nicht. Würde auch gerne eine Installation ausführen lassen, so dass man dann danach eine .exe. Datei hat.

Kenne mich nur mit HTML und CSS aus. Alles Andere kann ich nicht.

Danke :)

...zur Frage

Was kommt nach HTML > CSS >?

1.Html

2.Css

Wie sollte man weiter machen?

...zur Frage

Html Css @media Grammatik?

Das Schlüsselwort media kann in css-Files z.B. wie folgt angegeben werden:

@media screen and (max-width: 1000px) {
 .column {
   width: 50%;
 }
}

@media screen and (max-width: 600px) {
 .column {
   width: 100%;
 }
}

Geht das evenuell auch so, bzw. konkret: wo findet man die entsprechende Grammatik definiert?

 .column {
@media screen and (max-width: 1000px) {
   width: 50%;
}
@media screen and (max-width: 600px) {
   width: 100%;
}
}

...zur Frage

Wie kann man ein festes Bild über einem div oder header in css anzeigen lassen ohne, dass es sich in diesem Container befindet?

Hallo,

ich bin aktuell dabei meine eigene kleine Website mit HTML und CSS zu gestalten und bin auf ein Problem gestoßen. Ich möchte mein Logo über einem Header oder Div anzeigen wie es unten auf dem Bild auch gezeigt ist. Ich habe versucht das Bild in den Container zu verschieben und dann versucht es mit den Display Typen flex und grid zu positionieren. Leider wird entweder das Bild an eine falsche stelle verschoben oder meine Links werden falsch positioniert (Siehe Bild 2). Hat jemand eventuell eine Lösung wie ich das mache ohne das Bild in den Container zu verschieben oder das Bild obwohl es in dem Container ist statisch zu positionieren, ohne dass es von den Positionen der Links beeinflusst wird.

...zur Frage

CSS möchte nicht laden?

Hallo,

es geht darum, dass ich ein Projekt habe in dem Java, Spring boot, ReactJS, CSS, JS und RestAPI mit inbegriffen sind. Mein Problem liegt lediglich darin, dass die html beim laden der Seite: localhost:8080/login.html den inhalt der html datei anzeigt aber die css datei garnicht übernimmt. Die Pfade zu den einzelnen Dateien stimmen ebenfalls, da sie verlinkt sind, doch das stylen über css funktioniert nicht

login.html: https://codefile.io/f/uD0jP33Wef
style.css: https://codefile.io/f/AGN6ENmt6t
script.js: https://codefile.io/f/unKOx5NUi6

Wäre echt top, wenn mir jemand dabei behilflich sein könnte.

...zur Frage

Wieso wird CSS nicht übernommen?

Ich habe gerade ein Problem, das soo frustrierend ist. Ich bin HTML & CSS Anfänger und wollte eine Webseite aus einem Tutorial Video nachbauen. Die Inhalte und Struktur im HTML habe ich hinbekommen. Nun scheitere ich aber am CSS. (Browser Chrome) Für mich sieht alles richtig aus. CSS ist eigentlich eingebunden, aber die Eigenschaften werden nicht übernommen. Ich habe schon etliche Seiten durchforstet und keine Lösung hat funktioniert. (Cache leeren brachte nichts, Bei den anderen Browsern Firefox, Explorer und Safari besteht das gleiche Problem( ich habe auch keine Schusselfehler entdeckt). Die beiden Dateien liegen auch im selben Ordner. Liegt es vielleicht an meinem Laptop oder an den Browsern? Ich bin ratlos. Ich hoffe jemand kann mir irgendwie helfen.

Ich habe screenshots von der HTML-Datei und CSS-Datei beigefügt.

...zur Frage

HTML/CSS Steam Website rebuild?

Hallo,

ich möchte gerne die aktuelle Webseite von Steam nachbauen, jedoch habe ich Schwierigkeiten mit dem Hintergrund der Seite. Obwohl die Pixel-Art am Anfang vorhanden ist, fehlt mir der untere Teil der Seite, insbesondere die Darstellung der Steine und Fische. Es wäre am besten, wenn ihr selbst auf die Seite geht, um mich besser zu verstehen.

Ich benötige das zweite Bild von der Seite, das als Hintergrund verwendet wird. Ich habe bereits versucht, es über den Source Code zu finden, war aber leider nicht erfolgreich. Ich zeige euch ein Bild, das ich bereits habe, und benötige lediglich den unteren Teil davon, den ihr auf der Steam-Seite sehen könnt. Dort werden Fische und Steine abgebildet.

Vielen Dank für eure Unterstützung!

...zur Frage

Kann man Websites ohne CSS erstellen?

Wenn ja, wie kann ich die Website stylen?

...zur Frage

CSS Eigenschaften mit Button verändern?

Hallo,

ist es irgendwie möglich durch einen Button (also wenn man drauf klickt) in HTML CSS Eigenschaften von anderen Objekten zu verändern?

...zur Frage

Search Bar mir HTML, CSS; Java?

Wie kann ich eine Search Bar mit HTML, CSS und Java Code machen? Ich möchte, dass wenn man was eingibt, eine neue Seite geöffnet wird und auf dieser dann die Suchergebnisse angezeigt werden.

...zur Frage

Warum kann ich meinen Tabellenrahmen mit CSS nicht entfernen?

Moin,

ich habe mir in HTML eine Tabelle zurechtgebastelt und mit CSS designed. Da das Projekt recht umfangreich und unübersichtlich ist, ist es schwierig, den Code hier zu zeigen. Jedenfalls funktioniert in CSS die Funktion border-collapse sowie background-color, aber bezüglich des Rahmens funktioniert ansonsten nichts. Ich kann die Farbe, den Style und die Width nicht anpassen. Ziel ist den Rahmen zu entfernen, das funktioniert aber weder mit border-width: 0px; noch mit border: 0;.

Ich habe absolut keine Vorstellung woran es liegen kann, das CSS teilweise funktioniert. Cache habe ich immer gelöscht.
Außerdem habe ich es über table als Selektor sowie über die id mit # versucht, bei beiden ist das Ergebnis gleich,

Hat jemand eine Idee, was der Fehler sein könnte?

LG und vielen Dank

Tim

...zur Frage

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. :)

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen