Beiträge von Irgendwer

Irgendwer · 24. Januar 2022

Super hat geklappt!

Vielen dank dafür Sempervivum

//Close

Irgendwer · 24. Januar 2022

Hier

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

Irgendwer · 21. Januar 2022

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

CSS

Beiträge von Irgendwer

Button größe //Solved

Button größe //Solved

Button größe //Solved