Button größe //Solved

Irgendwer

Hallo liebe Community,

ich habe das Problem, dass mein Button nicht die größe so ändert, wie ich das gerne hätte.

Wenn der Text zu klein ist, wird der darunterliegende Button klein gezogen, der Text dazu aber nicht.

Erst wenn in der Zeile darüber sehr viel text ist, wird der Button in voller größe Dargestellt. Hat jemand

Lösungsvorschläge?

html-seminar.de/woltlab/attachment/3285/

HTML / PHP

PHP

<div class="flex">
                <?php
                    $num_rows_ep = mysqli_num_rows($result);
                    foreach($result as $item) 
                    {
                        echo "<div>";
                        $zahl = $item['Rez_ID'];
                        echo $item['Rezeptname'];
                        echo '<form action="/rezepte/beschreibung" method="GET"><button name="rez" value="'.$zahl.'">Beschreibung</button></form>';
                        echo "Zum Artikel";
                        echo "</div>";
                        
                    }
                
                ?>
                <div>

Alles anzeigen

Falls weiterer Code benötigt wird, bitte bescheid geben.

CSS

Code

.flex {
  display:flex;
  justify-content:flex-start;
  flex-wrap:wrap;
}

.flex > DIV {
  margin:2px;
  padding:10px;
  background:#ccc;
  border:1px solid #bbb;
  font-size:20pt;
  color:#666;
}

Alles anzeigen

Falls weiterer Code benötigt wird, bitte bescheid geben.

Sempervivum

Besser das generierte HTML aus der Quelltextansicht des Browsers posten.

Dass der graue Button zu schmal ist, kann ich nicht nachvollziehen. Ist da irgendwo anders noch ein CSS, das die Breite des Buttons beeinflusst, z. B. eine Breite in Prozent?

Irgendwer

Hier

die Quelltextansicht

HTML

<html>
    <title>Lagerverwaltungssystem</title>
    <meta charset="ISO-8859-1">
    <meta name="description" content="Lokale Webseite für Lagerverwaltungssystem">
    <meta name="author" content="Florian Cassens">
    <meta name="keywords" content="">
    <link href="/style/style.css" type="text/css" rel="stylesheet">
    <link rel="shortcut icon" href="/media/icons/favicon.ico" type="image/png">
    <nav>
        <div id="navi" align="center">
            <a href="../"><farba>Start</farba></a>
            <a href="/liste"><farba>Einkaufsliste</farba></a>
            <a href="/lager"><farba>Lager&uuml;bersicht</farba></a>
            <a href="/einkauf"><farba>Einkauf hinzuf&uuml;gen</farba></a>
            <a href="/bearbeiten"><farba>Produkt bearbeiten</farba></a>
            <a href=""><span>Rezepte</span></a>
            <a href="/optionen"><farba>Optionen</farba></a>
        </div>                                     
    </nav>
    <section>                             
        <article>
            <div align="center"><img src="/media/bilder/truckt.png"/>
                <h1>Rezeptideen</h1>
                <hr color="DarkOrange">
                <form action="/inc/rezepte.php" method="POST"> 
                    <button type="submit" name="submit">Rezept hinzuf&uuml;gen</button> 
                    <button type="submit2" name="submit2">Rezept l&ouml;schen</button>     
                </form>                             
            </div>
            <hr color="DarkOrange"> 
            <br>
            <div class="flex">
                <div>Nudelauflauf<form action="/rezepte/beschreibung" method="GET"><button name="rez" value="1">Beschreibung</button></form>Zum Artikel</div><div>Apfelkuchen<form action="/rezepte/beschreibung" method="GET"><button name="rez" value="2">Beschreibung</button></form>Zum Artikel</div><div>Pfannkuchen<form action="/rezepte/beschreibung" method="GET"><button name="rez" value="3">Beschreibung</button></form>Zum Artikel</div>                <div>
                hallo ich bin ein suuuuupeeeer langer text 
                <form action="/rezepte/beschreibung" method="GET"><button name="rez" value="'.$zahl.'">Beschreibung</button></form>
                </div>
            </div>
        </article>
    </section>
 </html>

Alles anzeigen

Die CSS Datei

Code

@font-face {

font-family: p;

src: url('http://localhost/font/Roboto-Regular.ttf');

font-size: 20px;

}



nav {

border: 0;

padding-top: 20px;

padding-bottom: 20px;

background-image: url(/media/bilder/ijz2piwk.png);

box-shadow: 2px 2px 2px;

}



nav a{

color: gray;

font-weight: bold;

text-decoration: none;

margin-right: 10px;

margin-left: 10px;

}



nav a:hover {

color: #C2C2C2;

background-image: url(/media/bilder/ijz2piwk.png);

text-decoration: underline;

padding-top: 20px;

padding-bottom: 20px;

}



hr {

opacity: 60%;

color: #C2C2C2;

}

.test {



}

details summary::before {

content:"⇣ ";

color: red;

/* you can style it however you want, use background-image for example */

}

details[open] summary::before {

content:"⇡ ";

color: red }

summary {list-style: none}

summary::-webkit-details-marker {display: none; }

details > summary {

padding: 4px;

width: 200px;

background-color: #eeeeee;







cursor: pointer;

}



article {

margin-left: 5%;

margin-right: 5%;

margin-top: 3%;

margin-bottom: 3%;

}

button:hover {

opacity: 0.7;

}

button {

background-color: grey;

width: 25%;

color: DarkOrange;

font-size:15px;

padding: 15px;

margin: 10px 0px;

border: none;

cursor: pointer;

border-radius: 10px;

}

section {

margin-left: 4%;

margin-right: 4%;

background-image: url(/media/bilder/7w8kr3zz.png);

padding-top: 1%;

margin-top: 2%;

padding-bottom: 2%;

box-shadow: 2px 2px 2px;

}



* {

font-family: p, Verdana;

padding: 0;

margin: 0;

}



body {

background-image: url(/media/bilder/BG.png);

background-repeat: no-repeat;

background-attachment: fixed;

background-position: center;

}



div#navi span {

background-image: url(/media/bilder/zq3re4b2.png);

padding-top: 20px;

padding-bottom: 20px;

padding-right: 5px;

padding-left: 5px;

color: DarkOrange;

}

div#homescreen span {

color: white;

}



farba {

color: white;

}



hr {

margin-top: 5px;

margin-bottom: 5px;

background: gray;

color: gray;

}



a {

color: yellow;

text-decoration: none;

}



a:hover {

color: #FFFF00;

}



div#counter {

opacity: 1;

}

.cancelbtn

{

width: auto;

padding: 10px 18px;

margin: 10px 5px;

}

.container

{

padding: 25px;

background-color: lightblue;

border-radius: 10px;

}

.container2

{

padding: 25px;

background-color: lightblue;

border-radius: 10px;

/*display: flex;*/

float:left;

margin-right:10px;

}

input[type=text], input[type=number]

{

width: 100%;

margin: 8px 0;

padding: 12px 20px;

display: inline-block;

border: 2px solid DarkOrange;

box-sizing: border-box;

border-radius: 100px;

}



/* SLIDER */



/* The switch - the box around the slider */

.switch {

position: relative;

display: inline-block;

width: 60px;

height: 34px;

}

/* Hide default HTML checkbox */

.switch input {

opacity: 0;

width: 0;

height: 0;

}

/* The slider */

.slider {

position: absolute;

cursor: pointer;

top: 0;

left: 0;

right: 0;

bottom: 0;

background-color: #ccc;

-webkit-transition: .4s;

transition: .4s;

}

.slider:before {

position: absolute;

content: "";

height: 26px;

width: 26px;

left: 4px;

bottom: 4px;

background-color: white;

-webkit-transition: .4s;

transition: .4s;

}

input:checked + .slider {

background-color: #2196F3;

}



input:focus + .slider {

box-shadow: 0 0 1px #2196F3;

}



input:checked + .slider:before {

-webkit-transform: translateX(26px);

-ms-transform: translateX(26px);

transform: translateX(26px);

}



/* Rounded sliders */

.slider.round {

border-radius: 34px;

}



.slider.round:before {

border-radius: 50%;

}



/* SLIDER ENDE */

/*Rezeptdiv*/

.flex {

display:flex;

justify-content:flex-start;

flex-wrap:wrap;

}



.flex > DIV {

margin:2px;

padding:10px;

background:#ccc;

border:1px solid #bbb;

font-size:20pt;

color:#666;

}

/*Rezeptdiv Ende*/

Alles anzeigen

Sempervivum

Wie ich vermutet hatte: Für button wird in Zeile 137 eine Breite von 25% eingestellt. Deaktiviere ich das, sind die Buttons genau so breit wie der Text darin es erfordert.

Irgendwer

Super hat geklappt!

Vielen dank dafür Sempervivum

//Close

Jetzt mitmachen!