HTML/CSS: Wie kann ich den Text neben dem zweiten Symbol zentrieren?

Hallo,

ich brauche Hilfe. Ich möchte den Text „Announcements“ so verschieben, dass es neben dem zweiten Symbol zentriert ist (siehe erster Text „My courses“).

Dankeschön.

Es wäre nett, wenn ihr antworten würdet.

Bild zum Beitrag

1 Antwort

Vom Fragesteller als hilfreich ausgezeichnet

kaligulu

16.10.2023, 23:45

Ich würde das mit einer Flexbox machen.

Um die beiden Elemente machst du einen div-container. Dieser übergeordnete Container bekommt im css die properties display:flex und justify-content: center.

Ein kleines Beispiel dazu:

    <div class="flex_container"">

        <div class="element">
            <p>My Course</p>
        </div>

        <div class="element">
            <p>Announcement</p>
        </div>


    </div>

    <style>
        .flex_container{
            display: flex;
            justify-content: center;
        }


        .element{
                margin: 5px;
        }
    </style>

Woher ich das weiß:Studium / Ausbildung

MrOsmo

Fragesteller

17.10.2023, 16:57

Dankeschön

Ich habe folgendes Problem:

Ich möchte gerne den weißen Kasten mit dem Text drinnen rechts neben den Kasten mit der Flasche legen, aber die beiden sollen sich so halbwegs überschneiden (Wie in dem einen Beispiel Bild zu sehen)

Das sind mein akuteller HTML und CSS code:

Ich habe auch schon im Internet gesucht und dort steht überwiegend, dass ich was mit der id machen muss, da passiert aber irgendwie nicht das, was ich will... :/

...zur Frage

Website HTML und CSS Fehler?

Hallo,

ich soll als Hausaufgabe eine Website (nur HTML und CSS) programmieren (wir haben bis jetzt nur die Basics gemacht).

Ich habe nun die Grundstruktur in HTML so gemacht, wie ich es brauche und bin nun beim CSS Teil angekommen, welcher mir etwas Kopfschmerzen bereitet.

Ich habe mal Screenshots vom bisherigen Code eingefügt (Die Website soll laut Lehrer ganz einfach sein, das Impressum muss nur einen Beispieltext enthalten und den Code für den footer aus der Landingpage habe ich noch nicht an die anderen Seiten angepasst, da ich noch mit CSS am experimentieren war).

Falls der Code an sich besser weiterhilft, habe ich hier noch den Dropbox Link:
https://www.dropbox.com/scl/fi/fgwyg3w7m4hfqdnbl3f3n/Website.zip?rlkey=1ea3d4quzggbn8xgnk9x9gvk3&dl=0

Nun habe ich folgende Probleme/Dinge, die ich auf der Website haben möchte, aber nicht hinbekomme:

Ich möchte einen festen Header haben (wie der auf gutefrage), bei welchem die anderen Seiten mittig angeordnet sind
Der footer soll wie bei Amazon ganz unten sein und auch in einem farbigen Kasten, welcher sich über den ganzen Bildschirm zieht
Die Texte im Footer sollen einmal links(2023), mittig(impressum) und rechts(Namen) ausgerichtet sein (irgendwie konnte ich den Link zum Impressum nicht verschieben)
Die Seite muss nicht 100% responsible sein, sondern soll sich nur an verschiedene Browser anpassen (Laut Lehrer mit Hilfe von prozentualen Werten anstatt Pixeln)
Auf der Landingpage möchte ich das Hintergrundbild haben und der Text (welchen ich noch hinzufügen muss) soll erst nach dem Bild kommen, wenn man runter scrollt
Auf der Impressum Seite soll der Beispieltext zum Uhrheberrecht nicht von ganz links nach ganz rechts auf dem Bildschirm gehen, sondern nur bis zu etwa der Mitte und dann einen Zeilenumbruch (soll sich nicht verschieben, wenn ich es mit anderem Browser benutze)

Ich habe schon selbst versucht, die oben genannten Dinge irgendwie zu fixen, aber entweder klappt es nicht oder meine Website stellt sich einmal auf den Kopf. Da wir auch erst die Basics in CSS hatten, weiß ich leider nicht mehr, als das, was ich schon gemacht habe.

Es wäre sehr hilfreich, wenn mir einer, der sich damit auskennt, weiterhelfen könnte und mir erklären kann, wie ich die oben genannten Kriterien umsetzen kann.

Ich bedanke mich schonmal sehr bei euch.

Grüße Alex

...zur Frage

CSS Text Mittig ausrichten trotz max-width?

Hi,

also ich habe ein Text erstellt, und habe diesem gesagt "text-align: center", und eine max-width: 20%;

Aber ernimmt zwar jetzt die 20% max-width, aber zentriert den Text nicht mehr Links?

warum?

...zur Frage

HTML Tag als Text darstellen?

Hallo. Ich möchte den Tag <h1> nicht als Tag darstellen, sondern als Text. Wie geht das und macht man das in HTML selber oder in CSS?

Hintergrund: Ich versuche gerade eine Seite zu schreiben, wo HTML erklärt wird. Dort gibt es dann einen Satz bzw. Absatz, der wie folgt lautet:

"Die Sprache HTML beschreibt, wie der Browser (oder ein anderes Programm, wie z. B. ein Text-Editor) die Auszeichnungen des Textes zu „verstehen“ hat, nicht, wie er sie dann in der Darstellung umsetzt. So besagt <h1> zwar, dass eine Überschrift folgt, nicht aber, in welcher Schriftgröße oder Schriftschnitt diese darzustellen ist – hier haben sich nur gewisse übliche Standardeinstellungen eingebürgert, die aber nicht Teil der HTML-Spezifikation sind."

Das Problem ist nun, dass im zweiten Satz ab <h1> alles danach als Überschrift groß und fett geschrieben wird (und in einer neuen Zeile), weil er das alles, was danach folgt, als "Überschrift" kennzeichnet bzw. tagt. Das will ich aber nicht. Ich will, dass es als normaler Text dargestellt wird und alles danach auch. Wie genau mache ich das?

...zur Frage

HTML und CSS: Text im Button zentrieren?

Auf dem Bild ist ein Bild der Buttons, HTML und meiner CSS Datei.

Ich möchte jetzt den Text in den Buttons, also "Youtube" und "Spotify", zentriert und etwas größer ist.

...zur Frage

CSS @media Maximum Width überschreiben?

Guten Morgen,

mein Vater hat eine Website auf MyWebsite von IONOS. Er hat dort einen Buchungskalender, der unter 1025 Pixel Weite nicht angezeigt wird aufgrund folgenden CSS Codes;

@media screen and (min-device-width: 1024px) {
            .mediumScreenDisabled { display:block }
            .smallScreenDisabled { display:block }
        }
        @media screen and (max-device-width: 1024px) { .mediumScreenDisabled { display:none } }
        @media screen and (max-device-width: 568px) { .smallScreenDisabled { display:none } }
                @media screen and (min-width: 1024px) {
            .mobilepreview .mediumScreenDisabled { display:block }
            .mobilepreview .smallScreenDisabled { display:block }
        }
        @media screen and (max-width: 1024px) { .mobilepreview .mediumScreenDisabled { display:none } }
        @media screen and (max-width: 568px) { .mobilepreview .smallScreenDisabled { display:none } }

Der @media screen and (max-device-width: 1024px) { .mediumScreenDisabled { display:none } } -Teil verhindert das Anzeigen des Kalenders und möchte deshalb die maximale width ändern.

Allerdings gibt es auf MyWebsite selbst wohl keine Option dazu und der IONOS Support meint, dass sie für Drittanbieter Snippets keinen Support anbieten (dabei bin ich mir ziemlich sicher, dass das von denen kommt, da der Kalender in einem iframe eingebunden ist).

Gibt es eine Möglichkeit über CSS die Eigenschaft separat nochmal zu überschreiben, wenn ich das Snippet von oben nicht manipulieren kann?

Danke und LG

...zur Frage

HTML / CSS: Wie kann ich einen Text horizontal zentrieren?

Wie kann ich einen Text in die Mitte bringen?

So wie ich es versucht habe, funktioniert es ab einer bestimmten Größe nicht mehr! Und gibt es eine Möglichkeit sicherzustellen, dass das Bild zuvor geladen hat?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titel</title>
    <style>
      body {
        background-image: url("bild.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center center;
        overflow: hidden;
      }

      h1 {
        color: white;
        font-family: Geneva, Verdana, sans-serif;
        font-size: 200px;
        text-align: center;
        /*transition: padding-top 1s,padding-bottom 1s,font-size 1s;*/
        padding-top: 38vh;       
        padding-bottom: 70vh;
      }

      h1 {
        /*animation-name: titel;
        animation-duration: 6s;
        animation-delay: 6s;
        animation-fill-mode: forwards;*/
        animation: titel 6s 6s forwards
      }

      @keyframes titel {
        from {padding-top: 38vh; padding-bottom: 70vh;font-size: 200px;}
        to {padding-top: 0px; padding-bottom: 0px;font-size: 80px;}
      }

      p {
        color: aliceblue
      }
    </style>
    <script src="script.js"></script>
  </head>
  <body>
    <h1>TITEL</h1>
    <p>Test-Text</p>
  </body>
</html>

...zur Frage

String Format in Java? Zentrieren?

Wenn ich etwas in der Art String.format("%-20s", "text") ausgeben möchte. Gibt es da auch ein Zeichen, dass das ganze zentriert wird anstatt rechts- oder linksbündig? Vielen Dank.

...zur Frage

Wie kann man Text über JavaScript versenden?

Hi Leute, ich möchte eine kleine Homepage (HTML, CSS, JavaScript)erstellen und hätte gern eine Funktion, bei der man Text eingeben kann, der mir anschließend zugesendet wird. Bitte schreibt nicht, dass ich einfach eine E-Mail Adresse verlinken soll. Vielen Dank im Voraus. :-)

...zur Frage

HTML Hilfe?

Ich habe meine erste HTML-Datei geschrieben.

Ich habe auf der Hauptseite einen Link eingebaut, der auf eine zweite Seite dieser Webseite weiterleitet. Also man klickt auf einen Button und kommt auf eine andere, interne Seite.

<a href="/Impressum.html" target="_blank">Impressum</a>

Aber wenn ich drauf klicke, dann werde ich zwar weitergeleitet, aber dann kommt das hier.

Und ja, die Seite, auf die man weitergeleitet werden soll existiert. Ich kann auch in meiner Datei drauf klicken und komme dann dorthin.

...zur Frage

Kann jemand diesen Button in HTML CSS umwandeln?

Hallo,

schafft es jemand, mir diesen Button in HTML und CSS zu machen?

Border color ist #f5bf8c

Font color ist #363639

Gradient links ist #fdc591

Gradient recht ist #cd9969

Und dann ist da noch so ein kleiner Schatten nach außen (gold) und nach Innen ein kleiner, schwarzer Schatten

...zur Frage

Word Zentrieren

Was muss ich drücken das der Text in der Mitte ist (zentriert). Und kann ich einstellen das der Text immer auf der gleichen Breite angezeigt wird.

...zur Frage

css text zentrieren?

Ich bin relativ neu in der Webentwicklung und schaffe es nicht einen normalen Text zu zentrieren. Also wäre ich froh wenn mir das irgendjemand idiotensicher erklären kann

probiert habe ich :

display: flex;

justify-content: center;

das aber es funktioniert nicht sollte doch aber gehen oder nicht?

was mache ich nur falsch?

...zur Frage

Indesign - Wie zentriere ich mein Text?

Wenn man ein Text im Textfeld hat, kann man denn ja zentrieren. So das er horizontal sowie auch vertikal zentriert von dem Textfeld gesetzt wird. Mit dem Befehl " zentrieren" (siehe Abbildung) wird der Text jedoch nur in horizontaler Ebene zentriert, aber ich bräuchte es noch horizontal.

Leider weiß ich nicht mehr wie ich das machen kann. Kann mir da jemand vielleicht helfen?

Vielen Dank schonmal im Vorraus!

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen