Wie bekomme ich diese Buttons in eine Reihe?

Abend,

ich habe mich gestern noch einiges mit CSS gespielt, habe aber keine gscheite Lösung gefunden um diese Buttons in eine Reihe zu bekommen :/ Die verschieben sich immer Anhand der Textlayout was sich ja mit der Displaygröße verändert.

Hier der Source: https://git.thiemoo.at/Givou/Thiemoo.at

Bild zum Beitrag

Vielen Dank!

1 Antwort

Vom Beitragsersteller als hilfreich ausgezeichnet

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, Technik, HTML

16.03.2021, 11:23

Für die Anordnung der Elemente könntest du ein Grid verwenden.

https://developer.mozilla.org/de/docs/Web/CSS/CSS_Grid_Layout

Dies setzt eine Markupänderung voraus. Um die Links mit den jeweiligen Texten trotzdem richtig zu assoziieren, gibt es das aria-labelledby-Attribut.

Beispiel (nur auf die wichtigsten Elemente reduziert):

<p id="github-projects">Auf meiner Git-Page ...</p>
<!-- ... -->
<a aria-labelledby="github-projects"><!-- ... --></a>

Zusatz: In deinem Markup und dem CSS sind mir übrigens Fehler aufgefallen.

1) Der p-Tag ist kein void-Element. Er besitzt einen expliziten Start- und einen expliziten Endtag. Anders verhält es sich beim br-Element. Wenn du Zeilenumbrüche im Text erzeugen möchtest, nutze dieses und für Abstände zwischen Elementen am besten CSS (margin, padding).

2) Buttons dürfen nicht in a-Tags geschachtelt werden und dasselbe gilt andersherum genauso. Da ich diesen Fehler nun schon öfter gesehen habe, frage ich mich fast, ob es da schon wieder irgendein miserables Internettutorial gibt, welches so etwas als Lösung vorstellt.

Fasse deine Links so zusammen:

<a class="button" target="_blank" href="https://git.thiemoo.at/Givou">Aufrufen</a>

3) Es gibt kein CSS-Property align.

LordDoctor

Beitragsersteller

16.03.2021, 11:35

Wow danke für die Aufschlussreiche Antwort!! Hilft mir echt weiter :) LG

Ähnliche Beiträge

HTML & CSS Layout verschiebt sich durch zoomen?

Guten Tag, mein Layout verschiebt sich wenn ich rein- oder rauszoome oder in den Vollbildmodus gehe. Hat jemand eine Lösung?

Meine HTML: https://pastebin.com/uTGyAncL

Meine CSS: https://pastebin.com/jCiQ84dk

Video zum Problem:

https://www.youtube.com/watch?v=ZuzGNM1iJkg

...zum Beitrag

Button in html?

Wie erstelle ich Button in html die man nach links verschieben kann und wenn ein anderer verschoben wird, dass der andere wieder zurück in die ursprüngliche Lage geht.

Wenn möglich sollte der Code (html, css und javascript) möglichst kurz sein und für PC sowie mobile Geräte verfügbar sein.

Danke

...zum Beitrag

Ändern des Paypal Express Checkout-Buttons - aber wie?

Hallo zusammen,

ich habe auf unserem Online-Shop (Wordpress / WooCommerce) Paypal und Paypal Express integriert, jedoch bin ich mit dem Paypal Express-Button unzufrieden. Im Moment wird er so, wie bei Bild 1 gezeigt, dargestellt. Ich möchte diesen aber wie in Bild 2 haben.

Paypal bietet in seinem Logo Center soch ein Logo an. Leider lässt sich dieser im Woocommerce-Backend nicht so einfach ändern.

Hat jemand eine Lösung, den Button zu ändern, evtl. mit einem weiteren Plugin oder CSS?

Webadresse: https://kk24-sonderposten.de

Vielen Dank vorab!

Bild 1:

Bild 2:

...zum Beitrag

HTML/CSS: Schriftfarbe im Kontaktformular ändern?

Bin Anfänger. Ich betreibe eine Website mit WordPress und nutze das Plugin "Contact Form 7". Das Forumular was ich erstellt habe besitzt mehrere Container. Einer davon ist ein Drop-Down Menü. Sieh so aus:

Ihr seht: Schriftfarbe und Background Color sind beide weiß. Ich möchte, dass die Schriftfarbe schwarz wird.

<div class="column one">[select* Der-Grund include_blank "Ein Problem melden" "Frage" "Feedback" "Sonstiges"]</div>

Was muss ich nun machen? Wo kann ich das Attribut font-color korrekt hinzufügen? Ich verstehe ehrlich gesagt noch nicht, was genau [select usw jetzt ist. Ist das HTML?

Hier ist eine Hilfeseite, wo das Wort "color" aber nicht auftaucht:

https://contactform7.com/checkboxes-radio-buttons-and-menus/#select

...zum Beitrag

SVG HTML verzieht das Bild, wie bekomme ich es weg?

Servus,

ich hatte bereits gestern hier zu dem Thema gepostet und hatte mir dann, als ich auf die CSS Eigenschaft clip-path hingewiesen wurde, eine Lösung erarbeitet.

Danach wurde ich darauf aufmerksam gemacht dass clip-path eine miese Browser Unterstützung hat, deshalb habe ich es heute neu gebastelt.

Ergebnis sieht man im Bild. Hier ist der gestrige Thread:(https://www.gutefrage.net/frage/bester-weg-um-img-elemente-zu-schneiden)

Nun habe ich zwei Probleme mit meiner Aktuellen Lösung.

Die Bilder werden nun nicht mehr ausgeschnitten sondern verzogen
die Performance ist nicht gut was könnte ich Optimieren?

...zum Beitrag

JavaScript Tic Tac Toe AI Programmierung?

Guten Abend Community,

ich möchte gerne ein Tic-Tac-Toe Game mit einem AI (BOT) programmieren. Der bisher programmierte Code funktioniert nur für Player vs Player. Habe schon ein bisschen rumgespielt, aber noch keine wirkliche richtige Lösung für den AI gefunden.

In dem folgenden Link, könnt Ihr mein JavaScript Code finden. (Ich weiß, kein guter Programmierstil, jedoch geht es mir momentan in erster Linie um die Funktionalität.

Könnt mir aber gegebenfalls Verbesserungsvorschläge schreiben! :)

https://pastebin.com/e3LbFp1k

Den folgenden Code habe ich einfach mal ausprobiert, jedoch funktioniert er nicht, da ich eine Endlosfunktion geschrieben habe.

function button(btn) {
    click_count++;         
    setX(btn);
    bot();
    checkForWin();
}

function setX(btn){
    button.value = "X";
    symbol = "O";
}

function bot() {
    var random_pick = [btn0, btn1, btn2, btn3, btn4, btn5, btn6, btn7, btn8]
    bot = random_pick[Math.floor(Math.random()*random_pick.length)]
    if (bot.value != "X" || "O") {
        bot.value = "O";
        click_count++;
        symbol = "X";
        button();
    }else{
        bot();
    }
}

Vielleicht kann mir ja jemand weiterhelfen, wie ich weitermachen soll... Sitze zur Zeit etwas fest.

...zum Beitrag

Wetter Card HTML/CSS Template?

Moin! Ich suche nach einer reinen HTML/CSS Vorlage für eine Wetteranzeige.

Das ganze soll möglichst horizontal, also auf einer Linie angezeigt werden. Ca. so: https://weatherwidget.io

Diese Lösung ist aus Datenschutz Gründen nicht verwendbar, daher sollte das Template auch ohne Drittanbieter Dienste auskommen (CSS Datei über eigenen (!) Server bereitstellen geht natürlich).

Die Daten sollen am besten per Jinja Template (Python/Flask) eingesetzt werden, ginge aber auch per JS, wenns sein muss.

So krass responsiv wie das Beispiel muss es nicht sein, hauptsache das ding rastet nicht aus, wenn man das Fenster kleiner macht ;)

Ich freue mich auf Erfahrungswerte und Vorschläge!

...zum Beitrag

CSS Buttons verschieben?

Hallo, ich möchte auf meiner Website, dass die Buttons untereinander und nicht nebeneinander angezeigt werden wie hier:

habe schon einiges probiert aber nichts funktioniert richtig...

mein html Code ist das hier:

<!DOCTYPE html>
<html lang="de">
<head>
    <link href="style_bypass.css" rel="stylesheet">
    <title>Bypass</title>
</head>
<body id="links">


<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Set Lockscreen</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Einstellungen</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Test Video</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Galaxy Store</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Google Quick Search</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Youtube</button></a>



</body>

Und mein CSS Code der hier:

button {
    --border: 5px;    /* the border width */
    --slant: 0.7em;   /* control the slanted corners */
    --color: #37E8FC; /* the color */
    
    font-size: 35px;
    padding: 0.4em 1.2em;
    border: none;
    cursor: pointer;
    font-weight: bold;
    color: var(--color);
    background: 
       linear-gradient(to bottom left,var(--color)  50%,#0000 50.1%) top right,
       linear-gradient(to top   right,var(--color)  50%,#0000 50.1%) bottom left;
    background-size: calc(var(--slant) + 1.3*var(--border)) calc(var(--slant) + 1.3*var(--border));
    background-repeat: no-repeat;
    box-shadow:
      0 0 0 200px inset var(--s,#0000),
      0 0 0 var(--border) inset var(--color);
    clip-path: 
        polygon(0 0, calc(100% - var(--slant)) 0, 100% var(--slant),
                100% 100%, var(--slant) 100%,0 calc(100% - var(--slant))
               );
    transition: color var(--t,0.3s), background-size 0.3s;
  }
  button:hover,
  button:active{
    background-size: 100% 100%;
    color: #fff;
    --t: 0.2s 0.1s;
  }
  button:focus-visible {
    outline-offset: calc(-1*var(--border));
    outline: var(--border) solid #000a;
  }
  button:active {
    --s: #0005;
    transition: none;
  }
  
  
  
  body#links {
    display:grid;
    grid-auto-flow:column;
    grid-gap:px;
    place-content:center;
    margin:0;
    height:100vh;
    background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  }

Was genau muss ich in der CSS Datei bearbeiten, dass die Buttons nicht nebeneinander sondern untereinander angezeigt werden?

...zum Beitrag

CSS Grid leere Zelle?

Hi,

bin gerade etwas Ratlos wie ich das mit css grid umsetzen kann.

Aktuelle habe ich folgenden Code

<div class="grid-container">
  <div>Ich soll leer sein</div>
  <div>Ich soll leer sein</div>
  <div>Ich soll leer sein</div>
  <div class="grid-item">Ein Text</div>
  <div>Ich soll leer sein</div>
  <div>Ich soll leer sein</div>
  <div>Ich soll leer sein</div>
  <div class="grid-item">Ein Text</div>
  <input type="text" class="grid-item">
  <div class="grid-item">Ein Text</div>
  <select class="grid-item"></select>
  <div class="grid-item">Ein Text</div>
</div>

CSS 
.grid-container {
  display: grid;
  gap: .5em;
  grid-template-columns: repeat(4, 1fr);
}

https://jsfiddle.net/tb2e75L8/2/

Jetzt will ich jedoch alle Div's mit dem Inhalt "Ich soll leer sein" aus dem html entfernen ohne jedoch die nachfolgenden zu verschieben. Also sozusagen eine Leere Zelle. Ich habe schon über grid-template-areas nachgelesen, jedoch bräuchte ich da für jedes item eine eigene ID, oder sehe ich das falsch?

Für sonstige Vorschläge zum realisieren von diesem Layout (auch ohne Grid) bin ich grundsätzlich auch offen.

Vielen Dank im Voraus

whgoffline

...zum Beitrag

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.

...zum Beitrag

Wie kann ich einstellen, dass die div-Boxen auf dem Handy untereinander dargestellt werden?

Guten Tag.

Mein Problem ist Folgendes: Auf dem PC werden die Boxen ganz normal und wie gewollt dargestellt, doch auf dem Handy wird alles in die Reihe gequetscht und man kann nichts erkennen. Wie kann ich nun einstellen, dass die div-Boxen untereinander dargestellt werden?

Quellcode:

<?php
  require('templates/header.php');
?>

<div class="content">
  <div class="row">
    <div class="col-md-12">
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">Kampagnen</h3>
        </div>
        <br><br>
        <div class="row">
          <div class="col-xs-12">
            <div class="box box-container">
              <div class="row">
                <div class="col-xs-12">
                  <div class="box-first box-container">
                    <div class="row">
                      <div class="col-xs-1">
                        <div class="row">
                          <div class="col-xs">
                            <div class="box-nested" text-align="center">
                              <img src="templates/XXX.png"/>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="col-xs-3">
                        <div class="box-nested">
                          <strong> XXX </strong>
                        </div>
                      </div>
                      <div class="col-xs-3">
                        <div class="box-nested">
                          <h4>
                            <span class="badge badge-pill badge-success">XXX: 1,10€</span>
                            <span class="badge badge-pill badge-secondary">XXX: 1,00€</span>
                          </h4>
                        </div>
                      </div>
                      <div class="col-xs-4">
                        <div class="box-nested">
                          <span>
                            <h4>
                              <font color="#400040">
                                <input name="text" id="myInput" id="text" width="100%;" ?>">
                                <button class="badge badge-pill badge-danger" onclick="myFunction()">Link Kopieren</button>
                              </h4>
                            </font>
                            <script>

                              function myFunction() {
                                var copyText = document.getElementById("myInput");
                                copyText.select();
                                document.execCommand("copy");
                              }
                            </script>
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="card-body all-icons">
          <div class="row">
            <div class="wrap-table100">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<?php
  require('templates/footer.php');
?>

Das CSS, welches zugegebener Weise sehr unübersichtlich ist^^, lautet wie folgt:

https://pastebin.com/hHsGJhFE

...zum Beitrag

HTML+CSS text/navigationsleiste verschieben?

Hi, ich muss für die schule eine website erstellen habe jetzt schon ein bild eingefügt und eine navigationsleiste wie könnte ich die leiste nach unten verschieben da sie nicht direkt unterm bild sein soll https://pl.vc/1h56ha die grüne leiste würde ich gern bisschen tiefer haben.

...zum Beitrag

Wie kann ich über einen :hover mit Html5 css und javascript einen ton abspielen?

Hallo Leute, ich bastel seit kurzem an einer kleinen Homepage und möchte bei der auslösung eines hovers (sobald der zeiger auf ein bestimmtest element zeigt) ein ton abspielen lassen.. Ich suche bereits seit 2 tagen nach einer lösung, jedoch vergeblich... ich habe sehr gute erklärungen gefunden jedoch kommt bei mir eine fehler meldung sobald ich folgendes eingebe: und zwar wird das source rot unterstrichen... ich weiß jedoch nicht wieso und bei allem lösungen die ich gefunden habe finde ich fast immer die gleiche lösung... ich arbeite mit dem editor NetBeans... die seite besteht der zeit aus Html5 und css... javascript wird auch kommen sobald ich eine lösung für das problem gefunden habe...

vllt findet sich jemand der sich gut auskennt und mir evtl. ein guten beispiel für die lösung zeigen kann ....

danke schon mal :)

...zum Beitrag

Wie klicke ich auf diese Elemente mit Python und Selenium?

Hallo,

Ich versuche, auf die folgenden Elemente auf dieser Webseite (https://www.bing.com/search?q=Bing+AI&showconv=1&FORM=hpcodx) mit Python und Selenium zu klicken.

//*[@id=“tone-options”]/li[3]/button

//*[@id=“camera-container”]/button

//*[@id=“camera-container”]/cib-flyout/cib-visual-search//div[3]/button[1]

Ich habe XPATH, CSS probiert.

Fehler:

selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element: {"method":"xpath","selector":"//*[@id="tone-options"]/li[3]/button"}

(Session info: chrome=119.0.6045.200)

Stacktrace:

GetHandleVerifier [0x00007FF7D97B82B2+55298]

(No symbol) [0x00007FF7D9725E02]

(No symbol) [0x00007FF7D95E05AB]

(No symbol) [0x00007FF7D962175C]

(No symbol) [0x00007FF7D96218DC]

(No symbol) [0x00007FF7D965CBC7]

(No symbol) [0x00007FF7D96420EF]

(No symbol) [0x00007FF7D965AAA4]

(No symbol) [0x00007FF7D9641E83]

(No symbol) [0x00007FF7D961670A]

(No symbol) [0x00007FF7D9617964]

GetHandleVerifier [0x00007FF7D9B30AAB+3694587]

GetHandleVerifier [0x00007FF7D9B8728E+4048862]

GetHandleVerifier [0x00007FF7D9B7F173+4015811]

GetHandleVerifier [0x00007FF7D98547D6+695590]

(No symbol) [0x00007FF7D9730CE8]

(No symbol) [0x00007FF7D972CF34]

(No symbol) [0x00007FF7D972D062]

(No symbol) [0x00007FF7D971D3A3]

BaseThreadInitThunk [0x00007FF8125E7344+20]

RtlUserThreadStart [0x00007FF8130026B1+33]

kann mir jemand helfen? Danke.

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen