Button im Div responsiv machen?

Hallo,

hat jemand eine Idee, wie ich den "JETZT BESTELLEN" Button responsiv mache (von den Drei Divs ganz abgesehen)?

Die Handy Version ist zwar noch nicht fertig und die Seite ist noch ein ganzer Müll, aber jetzt schießt der grüne Bestellbutton schon über sein Div hinaus und ich habe wirklich keine Ahnung, was geändert werden muss.

Vielen Dank

Stefan

1 Antwort

MrAmazing2

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, Technik, HTML

16.08.2021, 17:22

Du hast .center eine width von 400px gegeben, folglich ist auch der Grüne Button immer 400 Pixel breit.

Ändere die Width von .center auf 100%, dann passt es.

.center{
  box-shadow: #32cd32 0px 3px 5px;
  height:40px;
  position: relative;
  width: 100%;
  margin-top: 5px;
  background-color: #32cd32;
  top:50%;
}

Wenn du willst dass der Text zentriert ist, solltest du ausserdem noch .atag

text-align: center

geben.

Woher ich das weiß:Hobby – Programmieren ist mein Hobby & Beruf

Ähnliche Fragen

Java Script Text ändern durch OnClick?

Hallo,

wie der Code https://jsfiddle.net/m0Lbpvy4/ zeigt, will ich, dass sich bei Klick auf einen Text, sich der Text ändert.

Folgendes Problem:

In dem Bild ist zu sehen, dass der Input Button nicht im Div bleibt. Das mag an width: auto liegen, wenn ich es aber entferne, ist nicht der ganze Text zu sehen.

Jemand eine Lösung für das Problem?

...zur Frage

Wie in CSS eine Sidebar erstellen, die den Content meiner Webseite verschiebt?

Hallo zusammen,

ja ich weiß, es klingt ziemlich kompliziert was ich suche, aber das ist es eigentlich gar nicht. Ich habe zwei Divs auf meiner Webseite. Div 1 ist ein Button und div 2 soll eine Sidebar werden. Wenn ich den Button drücke, dann soll Div 1 verschwinden und Div 2 auftauchen. Das klappt auch alles via JS wunderbar und ohne Probleme.

Nun würde ich jedoch gerne, dass der Content meiner Webseite (neben der Sidebar) nun zentriert wird (ist bereits der Fall), jedoch auch zentriert wird wenn die Sidebar eingeblendet wird. Also als ob man das Browser-Fenster verkleinert und dann die Sidebar anzeigt.

Ich hoffe ihr habt verstanden was ich will und könnt mir eventuell helfen.

Danke sehr!

...zur Frage

Div anzeigen, wenn Radio-Button "checked" ist - von Anfang an?

Hi,

ich habe hier eine Grupe von Radio-Buttons. Immer, wenn ein Radio-Button "checked" ist, soll ein div erscheinen. Funktioniert auch alles, aber das JS erkennt nicht, dass ja bereits per Default "red" ausgewählt ist:

https://jsfiddle.net/w1maq8wa/

Man muss in diesem Beispiel "red" noch mal anklicken, obwohl es bereits checked ist.

Kann mir jemand helfen?

Danke!

...zur Frage

Website dauerhaft mit Javascript bearbeiten?

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div>
      <input placeholder="Irgendwas eingeben" id="password">
    </div>
    <button onclick="password()"> Press Me</button>
    <script>
      
      function password() {
        let password = document.getElementById('password').value;
        let element = document.createElement('div');
        element.innerText = password;
        document.body.appendChild(element);
      }
    </script>
  </body>
</html>

Hi wenn ich nun die Website neu Lade dann bleiben die Divs nicht bestehen,

kann mir jemand sagen wie ich die Divs dauerhaft auch für andere clients sichtbar

behalten kann.?

...zur Frage

HTML FLEX: Wie bekomme ich ein Label in einem Radiobutton zentriert?

https://jsfiddle.net/dtqjp3zr/

Die Labels sind Teil der Divs und haben 50% Breite. Für das Div klappt das auch, nur der Label-Text selbst will einfach nicht in die Mitte.
Wo ist da mein Denkfehler?

...zur Frage

JavaScript: Text nach Button-Klick in Textfeld?

Ich habe so eine Seite :

<li class="items">
    <p>some text 1</p>
    <div><button class="link" value="1">Wählen</a></div>
</li>
<li class="items">
    <p>some text 2</p>
    <div><button class="link" value="2">Wählen</a></div>
</li>
<li class="items">
    <p>some text 3</p>
    <div><button class="link" value="3">Wählen</a></div>
</li>



<form action="send" method="POST">
    <input type="text" name="text" id="text" required>
    <input type="number" name="zahl" id="zahl">
    <button type="submit" name="submit">Senden</button>
</form>

oben sind mehrere Texte mit je einem Button zum Auswählen (derzeit ohne funktion). Unten ist dann ein Formular und man kann selbst die Zahl des Textes dort eintragen.

Jetzt will ich das aber für leute vereinfachen und ermöglichen, dass man einfach auf den jeweiligen Button klickt und dann die Zahl (das value des Buttons) in das textfeld "number" eingetragen wird. Wie kann ich das mit javascript machen ? außerdem sollte der cursor direkt in das textfeld "text" gehen.

...zur Frage

HTML BILD HOCHLADEN UND ANZEIGEN LASSEN?

Hi.

Ich möchte eine Seite mit HTML erstellen, welche einen UPLOAD Button enthält, der das hochgeladene Bild unendlich oft (oder 1000 mal) untereinander anzeigt.

Mein Code im Moment ist dieser.

Mein momentanes Problem: Ich hab keine Ahnung wie ich das Bild unten anzeigen lasse :/.

Danke im Vorraus

<html>
    <head>
        <title>INFINITIZER</title>
        <meta></meta>
    </head>
    <body>
    
        <div id="header">
            <hr color="red"/>
            <center>
                <h1><font color="red" face="Impact">INFINITIZER</font></h1>
            <hr color="red"/>
            </center>
        </div>
    
    
        <div id="upload">
            <center>
                
                    <form method="post" enctype="multipart/form-data">
                        <label>CHOOSE A PICTURE
                            <input name="datei" type="file" size="50" accept="video/*,image/*">&nbsp;
                        </label>&nbsp;&nbsp;
                        
                        <button>SEND</button>
                    </form>
                    
            </center>
        </div>
        
        
        <div id="pic">
            <img src="datei" alt="No picture">
        </div>
        
    </body>

</html>

...zur Frage

HTML/CSS, Footer, Divs werden untereinander und nicht nebeneinander platziert?

Guten Abend. :)

Ich beschäftige mich momentan viel mit HTML und CSS und habe eine eigene kleine Website zum Spaß gemacht.

Aus Jux und Tollerei wollte ich jetzt einen Facebook-Like und einen -Teilen-Button mit einbauen, und das in einem Footer. Die Buttons habe ich beide jeweils in ein Div gepackt und diesen per "float: left;" gesagt, das sie sich nebeneinander von links anordnen sollen. Zumindest stand in sehr vielen anderen Foren in denen ich mich umgesehen habe so ziemlich überall genau das.

Bei mir funktioniert das aus unerfindlichen Gründen leider nicht, die Buttons werden untereinander angeordnet.

Zur Seite kommt ihr hier: http://nyancatmarathon.tk/

(Am Besten auf Lautlos stellen, nervige Musik im Hintergrund, außerdem hat sich der Footer von ganz unten in die Mitte der Seite verschoben, als ich die Seite am Localhost bearbeitet habe war das noch nicht so, komisch...)

Ich hoffe jemand von euch weiß woran es liegt und kann mir helfen. :)

Vielen Dank und LG, Bluedragon1

...zur Frage

Ajax holt Daten, JQUERY erkennt ID nicht?

Hallo

Ich hoffe, dass Ihr mir auf die Sprünge helfen könnt.

Mittels Button wird per JQUERY Ajax aufgerufen. Von der Datenbank werden Bilder ausgegeben.

Nun habe ich vorher schon einige Funktion gebastelt, die mir erlauben das Bild zu bearbeiten, z.B. mittels keyUP die Positionen vom Bild zu verändern, Größe und Co.

Da es mehrere Bilder sind, wird in der PHP Datei eine For-schleife erstellt, wo die Inputs und Buttons mit classen (und Id->testzweck) versehen werden (echo-ausgabe).

Nun lassen sich weder die Buttons noch mit Inputs steuern, weder mit this bzw Klassen noch mit der Id.

Hat vielleicht jemand eine Idee woran es liegen könnte?

      $('#load_image').click( function (event) {
        event.preventDefault();
        $.ajax({
          type: 'POST',
          url: 'ajax/home.php',
          data: $(this).serialize(),
          success: function (title_image) {
            $('#title_image').html(title_image);
          }

        });
      });



<button id="load_image" type="submit" name="load_image" class="btn btn-primary start"> <span><i class="glyphicon glyphicon-picture"></i>Bilder Laden</span> </button>
        <div id="title_image" class="margin">
          <!-- DIVS vom PHP AJAX -->
        </div>

Ajax PHP datei

if (!$title->execute()) {
  echo "Fehler";
} else {
  $name = array();
  while ($data = $title->fetch()) {
    $name[] = $data['name'];
  }
$count = count($name);
  for ($i=0; $i < $count; $i++) {
    echo $name[$i];

/* DIVS */
    echo '    <input type="number" id="image_horizontal_edit1" value="" placeholder="Horizontal">';
    echo '    <input type="number" id="image_vertical_edit1" value="" placeholder="Vertical"><br><br>';
    echo '    <input type="number" id="image_zoom_edit1" value="" placeholder="Zoom"><br><br>';

...zur Frage

Wie kann ich einen kurzen Text mit HTML und JavaScript auf Knopfdruck ändern?

Hallo, ich würde gern mit HTML und JavaScript erreichen, dass ich "Text1" angezeigt bekomme und darunter ein "Weiter"-Button liegt, der dann mittels Klick "Text1" mit "Text2" austauscht, "Text2" mit "Text3" etc.

hatte mir dafür einen code mit Klickzähler herausgesucht, der auch Funktioniert. Der Plan wäre es, den Klickzähler dafür zu nutzen, um die Zahl zu erhöhen und von dieser Zahl den ausgespielten Text abhängig zu machen.

Also z.B. Zahl 1 = Text1 und Zahl 2 = text2 usw.

Allerdings verstehe ich noch nicht , wie ich den Text mit der Zahl verknüpfe und diesen dann ausspielen lassen kann.

Habt ihr da vllt eine Idee oder einen Tipp, bzw. aber auch eine bessere Lösung?

Vielen Dank im Voraus!

<div>
  <center><h3 id="counter-label">0</h3></center>
   
<center>
  <div>
    <button onclick="incrementClick()">Click Me</button>
    <button onclick="resetCounter()">Reset</button>
  </div>
</center>
   
   
   
<script>
var counterVal = 0;
function incrementClick() {
  updateDisplay(++counterVal);
}
function resetCounter() {
  counterVal = 0;
  updateDisplay(counterVal);
}
function updateDisplay(val) {
  document.getElementById("counter-label").innerHTML = val;
}

...zur Frage

Buttons in einem div in einem a-Tag ansprechen?

Ich habe das Problem das ich ein "div" habe, das in einem ist, also selber als Verlinkung dient. In diesem "div" habe ich jedoch noch drei Buttons, die dann nicht mehr ansprechbar sind, da das ganze "div" ja ein Hyperlink ist. Ich möchte also das ich wenn ich auf einen der Buttons klicke, eine separate Aktion erfolgt und wenn ich nur in das "div" klicke ohne einen Button zu betätigen eine andere Aktion erfolgt. Damit ihr es ein bisschen besser versteht hänge ich noch einen Screenshot von der Situation an, hoffe man versteht es einigermaßen.

...zur Frage

Zwei funktionen auf ein button packen?

Wie kann ich zwei funktionen auf einen Button packen? Also ich will das bei jedem click auf meinen button

1. immer plus 1 addiert wird: onclick="pluszahl()"

2. das ein Sound abgespielt wird: onclick="play()"

Leider konnte ich nur den counter machen und frage mich jetzt wie ich den sound auch aktivieren kann

HTML:

    <span class="center">Bam?</span>
    <div onclick="custom()" class="btn-container">
        <button onclick="pluszahl()"; twoclick="play()"    class="button1">
            Bam
        </button>
    </div>

    <div id="resultArea">0</div>

JavaScript:

function play() {
  var audio = new Audio('bam.mp3');
  audio.play();
}

function pluszahl() {
  document.getElementById("resultArea").innerHTML = parseInt(document.getElementById("resultArea").innerHTML)+1;
  }

...zur Frage

CSS Image wird nicht angezeigt?

CSS:
.top-banner {
  width: 100%;
  height: auto;
  background-size: contain;
  background: url("../img/start.jpg") no-repeat;
}

HTML:
 <div class="top-banner"></div>

Das Bild soll responsive angezeigt werden. Es liegt an dem height: auto;

gebe ich zum Beispiel eine feste height von 400px, wird es wieder angezeigt, ist aber natürlich nicht responsiv.

Gibt es da eine andere Möglichkeit, ein Image anzuzeigen, welches mitskaliert?

...zur Frage

CSS Button und collapsible nebeneinander bekommen?

Hey, wie bekommt man den Button und das collapsible nebeneinander ?

Hier der HTML Code:

<div class="fach" id ="${nameDesFachs}"> <button type="button" class="collapsible">${nameDesFachs}</button><div class="content hidden"></div></div>

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen