HTML &amp; CSS Button-breite anpassen?

Was für ein Script? Ich sehe hier nur CSS-Formatierungscode und keine Scripte. Google nochmal was HTML und CSS eigentlich machen. ;)

Prozentangaben sind immer dynamisch und verändern sich sobald auch das Fenster verändert wird. Somit sieht es nie gleich auf allen Bildschirmen aus. Es haben ja nicht alle 1920x1080px.

Dultus, UserMod Light

17.01.2020, 13:17

Google nochmal was HTML und CSS eigentlich machen. ;)

Du hast dich bestimmt noch nie verschrieben?

Stylesheets, wenn du so willst...

Prozentangaben sind immer dynamisch und verändern sich sobald auch das Fenster verändert wird.

Warum schreibst du dann:

"Buttons" solltest Du stets entweder durch Pixel (px) oder Punkte (pt) anpassen.

? Wahrscheinlich meinst du damit etwas anderes?

Natürlich kann er auch in % skalieren. Ob der Button 50% oder 100% einnimmt, ist schon ein Unterschied. ^^'

Nutzer937564

17.01.2020, 13:18

Klar kann er das. Aber wie gesagt: Ändert sich das Browserfenster in Breite und Höhe, ändert sich auch die Größe des Buttons, da Prozent immer relativ ist und nicht absolut wie Pixel oder Punkte.

Dultus, UserMod Light

17.01.2020, 13:21

Das ist schon klar...?

Verstehe nur deine widersprüchlichen Aussagen nicht?

Prozent immer relativ ist und nicht absolut wie Pixel oder Punkte.

"Buttons" solltest Du stets entweder durch Pixel (px) oder Punkte (pt) anpassen.

Warum sollte er dann mit Pixel anpassen, wenn er die Größe auch prozentual ändern kann? Ich verstehe gerade einfach deine Antwort nicht. ^^'

Nutzer937564

17.01.2020, 13:26

Ich hab's eigentlich schon 2x gesagt und hat Null mit Widerspruch zu tun.

px/pt = feste Größe (sieht überall gleich aus und bleibt auch so)
% = dynamische Größe (verändert sich je nach Fenstergröße und umliegender Elemente)

Wenn Du das immer noch nicht verstehst, dann kann ich da auch nix dafür. Dann hilft nur selber ausprobieren. ;)

Dultus, UserMod Light

17.01.2020, 13:28

Warum sollte er dann mit Pixel anpassen, wenn er die Größe auch prozentual ändern kann?

Immer noch die Frage, die du wohl nicht richtig verstehst. ^^'
Mir ist klar, was absolute und dynamische Größen sind. Das war nicht die Frage. Ich bin selbst Programmierer in .NET und Java.

Die Frage ist, warum du dem FS zur Absoluten rätst?

Nutzer937564

17.01.2020, 13:33

Ich wiederhole mich nicht nochmal. Die Antwort findest Du mehrfach oben.

Dultus, UserMod Light

17.01.2020, 13:36

Prozentangaben sind immer dynamisch und verändern sich sobald auch das Fenster verändert wird. Somit sieht es nie gleich auf allen Bildschirmen aus. Es haben ja nicht alle 1920x1080px.

Angeblich deine Erklärung. Aber durch totale Angaben ist es undynamisch und nur auf bestimmte Größen festgeschnitten.

Trotz dessen empfiehlst du feste Größen.

Für mich klingt das einfach schlichtweg falsch - du machst damit die Website für andere Größen unbenutzbar.

Nutzer937564

17.01.2020, 13:45

Ich glaube du solltest dich nicht mit Dingen beschäftigen, von denen du eigentlich keine Ahnung hast. Wenn du .NET und Java machst, hast du eigentlich nichts mit HTML und CSS am Hut.

Dultus, UserMod Light

17.01.2020, 13:47

Du weißt aber schon, dass du in WPF und Android genauso totale und relative Werte hast?

Genau aus dem Grund arbeite ich in WPF fast ausschließlich relativ.

Nutzer937564

17.01.2020, 13:52

Es kommt immer drauf an was für Elemente du hast und wie sie formatiert werden sollen. Da sich die Buttons in seiner Beziehung nicht verändern sollen, müssen es absolute Größen sein. Das kannst du mit mir jetzt noch bis zur Vergasung diskutieren, der Fakt bleibt trotzdem bestehen. ;)

Dultus, UserMod Light

17.01.2020, 13:55

Content in die mitte packen html, css?

Welcher Fakt? Der, dass man totale Werte normalerweise niemals nutzt? Du kannst bei seiner Website 100% relativ arbeiten. Wie bei jeglicher GUI auch.

Sonst hast du auf der Website bei deinem System auf einigen Monitoren Matsch.

Und ganz ehrlich?

Ich glaube du solltest dich nicht mit Dingen beschäftigen, von denen du eigentlich keine Ahnung hast. Wenn du .NET und Java machst, hast du eigentlich nichts mit HTML und CSS am Hut.

IT Kaufmann (gel. Industrieelektriker - G. & S.)

Du hast mit HTML und CSS auch nur das Hobby am Hut - wie ich ebenfalls auf meiner WordPress Page.

HorstSergio

17.01.2020, 15:14

Du solltest gar keinen Button verwenden. Mach einfach ein Link aus der Sache und du kannst dem Bild die prozentuale Größe mitgeben.

#Menuepic{  
  width: 5%;
}

<a href="javascript:" onclick="doSomething">
  <img id="Menuepic" src="menue.png" />
</a>

Woher ich das weiß:Berufserfahrung

Dultus, UserMod Light

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, Technik, programmieren

17.01.2020, 13:09

Habe leider nicht die Ahnung von CSS - sieht mir aber so aus, als wenn das Padding nicht stimmt aufgrund der Fehlermeldungen.

Sind Typangaben beim Padding evtl. erforderlich?

So kann denke ich der Button sich nicht orientieren und daher auch keine Anpassung erfolgen.

Woher ich das weiß:Berufserfahrung – 💻 Zertifizierter Sr. Cloud Engineer im IT-Consulting

Ähnliche Fragen

Ich arbeite an einem Discord bot Dashboard und ich möchte, dass die Kästchen vom <li></li> nicht untereinenander sind sondern neben einander bis zum bildschirm rand und dann eins runter gehen.

html:

 <ul>
  <li><a class="content"><button onclick='ping()'>Working?</button>   
  </a></li>
  <li><a class="content"><input type="text" id="invite" placeholder="server invite"></a>
  <a class="content"><button onclick="add_invite()">Join</button></a>
  <br></li>
  <li>
</ul>

Css:

html,
body{
    width: 90%;
    color: #FE72F3;


 background: #2B2B2B;
    height: 100%;
}
ul{
    list-style: none;
    width: 100%;
    height: 100%;
}
li{


    width: 320px;
    height: 220px;
    background: #494949;
    border: 2px solid #1d1c1c;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    margin-top: 20px;
}
input{
    width: 90%;
    margin: 10px;
    height: 30px;
    border-radius: 5px;


}
button{
    width: 93%;
    margin: 10px;
    height: 35px;
    border-radius: 5px;
    
}

Wie mach ich das?

HTML/CSS-Button(Bild ändern)?

Hallo, ich arbeite gerade an einen Button. Aber wie kann ich dieses Herz durch ein Bild ersetzten?

.icon{

background-color: white;

color: #00472d;

border: none;

font-size: 2rem;

padding: 0.5em;

line-height: 1;

width: 2em;

transition: border-radius 2s ease;

}

.icon:hover{

background-color:#00472d;

color: white;

border-radius: 50%;

Wie kann man eine SVG-Datei in CSS nach links zentrieren?

Hallo,

ich möchte gerne eine SVG-Datei in meiner Webseite einbinden. Ich habe diese auch schon über <object> in HTML eingefügt.

Das object hat die Klasse Welt und ist in CSS hinterlegt. Dort habe ich width und height auf 75%. Nun wird mir die SVG aber so ziemlich mittig auf der Webseite angegeben.

Wie kann ich diese nach links positionieren, damit ich rechts z.B. einen Text scheiben kann?

HTML:

<object class="Welt" data="BluePlanet.svg" type="image/svg+xml"></object>

CSS:

.Welt {
  width: 75%;
  height: 75%;
}

Danke schon einmal im Voraus. :)

Wieso ändert sich bei height und width nur die Position des Elements?

Hallo zusammen,

ich versuche mit CSS meinen Slider höher bzw. breiter zu stellen (mit width und height).

Leider ändert sich nur die Position des Sliders. Weiß jemand, wo das Problem ist bzw. wie man es beheben kann?

Es ist ein .slider bei CSS und ich benutze VS, falls diese Info relevant sein sollte.

Button mittig unter Bild Zentrieren HTML/CSS?

Hallo erstmal, ich bin komplett neu hier also bitte entschuldigt, falls ich irgendwas nicht richtig beachte. Zu meiner Frage: Ich möchte für eine Portfolio Site Vorschaubilder einer Gallery haben und darunter einen Zentrierten Button für den Link zu der jeweiligen Seite. Mein Problem ist jetzt, dass der Button sich leider nicht zentrieren lässt sondern immer links gebunden ist.

Mein HTML Code:

<section id="content">
<div>
<div id="studio"> 
<img src="img/Gallery_Preview/Studio.jpg" alt="Studio Aufnahmen">
<p><a class="button1" href="Studio.html">Studio</a></p>
</div>
</div>
</section>

Mein Css Code:

#studio {
margin: 30px ;
padding:4px;

}
#studio img {
width: 23%;
height: auto;
}
.button1 {
text-align: center;
width: 100%; 
}

P.s. ich bin Anfänger

Danke schon mal

CSS: Zwei Bilder nebeneinander zentrieren?

Hallo ich habe eine Seite gebastelt möchte zwei Bilder nebeneinder zentriert anordnen. Wie mache ich das?

Code html

<footer>
<img class = "social" src="facebook.png">
<img class = "social" src="twitter.png">
</footer>

Css

img.social {
float: middle;
display: block;
margin: auto;
width: 5%;
height: 5%;
}

CSS header nimmt nicht volle breite?

Hallo,

Also ich hab einen Header erstellt, mit folgendem HTML Code:

<header>
    <p>Jetzt auch mit KLARNA zahlen!</p>
</header>

CSS Code:

 header {
    display: flex;
    justify-content: center;
    color: white;
    align-items: center;
    background-color: rgb(102, 102, 102);
    height: 40px;
    margin: 0;
    padding: 0;
    width: 100%;
}

Aber wenn ich nun mir mal per Untersuchen, die Webseite anschaue:

Dann sieht man, dass der header ab einem gewissen zeit punkt nicht mehr die volle breite nimmt. Warum?

Abstand nach oben entfernen <CSS>?

Hallo,

ich möchte den Abstand oben entfernen. Es funktioniert einfach nicht, egal was ich mache.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
<div class="box">
    <H1>Willkommen auf meiner Webseite</H1>
</div>
    <script>
        function myFunction() {
           var element = document.body;
           element.classList.toggle("dark-mode");
        }
        </script>
        <button onclick="myFunction()">Toggle dark mode</button>
</body>
</html>

CSS:

body {
  padding: 0%;
  margin: 0%;
  background-color: white;
  color: black;
  font-size: 25px;
  width: 100%;
  height: 100%;
  
}
.dark-mode {
  background-color: black;
  color: white;
}
.box{
  justify-content: center;
  padding: 0%;
  margin: 0%;
  padding-top: 0%;
  margin-top: 0%;
  background-repeat: no-repeat;
  width: 100%;
  height: 6cm;
  background-image: url(img/web-1012467_1920\ \(1\).jpg);
}

Das wäre der Code, ich hoffe irgendwer kann mir helfen.

So sieht es aus:

Danke im voraus.

CSS: Items untereinander sortieren?

Hallo zusammen,

ich brauche etwas Hilfe mit CSS. Ich habe mir mit HTML ein Div erstellt, und ein paar Social Media Buttons reingepackt:

<div class="social-media-buttons">
<a class="btn" href="https://github.com/dominikdev-m">
<i class="fab fa-github"></i>
</a>
<a class="btn" href="https://twitter.com/DominikMiskovi7">
<i class="fab fa-twitter"></i>
</a>
<a class="btn" href="https://instagram.com/dominik_rxb">
<i class="fab fa-instagram"></i>
</a>
</div>

Dann habe ich mit CSS versucht diese Social Media Buttons untereinander zu sortieren, falls der Nutzer auf einem Gerät ist das maximal 400 Pixel breit ist:

@media only screen and (max-width: 400px) {
    .social-media-buttons {         display: inline-block;     }

Leider funktioniert der CSS Code nicht, die Buttons werden irgendwie komisch sortiert auf dem Smartphone und nicht untereinander. Könnt ihr mir sagen was ich falsch gemacht habe?

Danke im Voraus.

LG, Dominik

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?

Hilfe mit CSS Flexbox?

wie kann ich die 4 Bilder wie folgt anordnen?

ich code noch nicht so lange, doch hier der code den ich bis jetzt habe. Also bitte nicht auslachen ^^

CSS:

/* Dienstleistungen*/

.dienstleistungen{

justify-content: center;

width: 75%;

}

.mofa-zündung-service{

height: 50%;

width: auto;

}

.mofa-getriebe-revisionen{

height: 25%;

width: auto;

align-self: top;

}

.mofa-vergaser-tuning{

height: 25%;

width: auto;

align-self: top;

}

.mofa-kolben-ersatzteile{

height: 25%;

width: 50%;

}

/*!Dienstleistungen*/

HTML:

<h3>Dienstleistungen</h3>

<li><a href="#">Service</a></li>

<li><a href="#">Revisionen</a></li>

<li><a href="#">Tuning</a></li>

<li><a href="#">Ersatzteile</a></li>

</div>

so sieht es bis jetzt aus:

Ich verstehe vor allem nicht wie ich die Bilder untereinander und gleichzeitig neben einem anderen Bild anordnen kann. (kolben)

Html / Css Text auf Header bzw. Div-Container Text über Hintergrund?

CSS formatiert die Schrift so, dass immer der ganze Querbalken über dem Hintergrund nicht transparent ist. Wie mache ich das? ** Siehe Grafiken **

h1 { font-family: arial, verdana, helvetica; font-size: 40px; font-weight: 200; }

header { position: relative; height: 200px; display: block; background-color: black;

} nav { width: 500px; height: 200px; background-color: aqua; }

Abstand zwischen zwei Div-Containern verhindern HTML?

Ich habe zwei Div-Container mit display: inline-block; padding: 0; margin: 0; aber es befindet sich trotzdem ein Abstand zwischen ihnen. Woran liegt das?

hoffe auf Hilfe,

Bohne47

Joomla! / Beez3-Template: Wie kann ich die Dimensionen des .logoheader in der CSS ändern?

Hallo,

folgende Daten sind derzeit in der in der personal.css hinterlegt:

.logoheader {
  background: url(../images/personal/personal2.png) no-repeat right;
  size:
  width: 100%;
  height: auto
  bottom #0C1A3E;
  color: #FFFFFF;
  height: 288px;
  max-height: 100%;
  width: 1030px;
  max-width: 100%;
  border-bottom: solid 1px #040404;
  border-top: solid 1px #040404;
  border-left: solid 1px #040404;
  border-right; soild 1px #040404;

Ich möchte erreichen, dass der .logoheader eine fixe Höhe und Breite hat und der Inhalt an dieses angepasst wird.