Buttons auf gleiche Größe bringen
Author: Hans-Ulrich Z.
Visited 1340,
Followers 1,
Shared 0
In unseren internen Seiten soll es Seiten geben, in denen alle Protokolle zum Nachschlagen gesammelt werden. Zur Übersichtlichkeit will ich es nach Jahren sortieren und für jedes Protokoll einen Button mit Monat und Jahreszahl einsetzen (siehe Bild).
Für die Buttons habe ich in der Definition die Ränder auf 30;10 gesetzt, dass scheint aber nur der Abstand vom jeweiligen Text zu sein.
Wie kann ich die Buttons alle auf eine gleiche Größe (siehe Mai und Dezember z.B.) bringen, ich habe da keine Einstellmöglichkeiten gefunden?
Mit freundlichen Grüßen
Hans-Ulrich
Posted on the
Da gibt es auch keine. Die Länge richtet sich nach dem Text des Buttons wo es sich automatisch anpasst! Das Objekt wird auch automatisch zentriert angezeigt. Weitere Einstellungsmöglichkeiten gibt es nicht. Wenn dann muss man per individuellen Code eingreifen.
Hallo Hans-Ulrich,
wenn du die Buttons nicht mit dem Objekt "Button", sondern mit "Text" erstellst, kannst du den Außenabstand definieren.
Viele Grüße, Alessandro
Würde auch mit dem Titel-Objekt gehen! Da hast du Verlinkung und H1-H6 Titeln die du nehmen kannst.
Author
Hallo Alessandro, hallo Andreas,
danke für Eure antworten, aber ich bekomme es leider nicht.
Alessandro, kannst Du mir ein Beispiel schicken, wie Du es eingestellt hast, über die Stilfunktion ???? Beim reinen Text habe ich es garnicht geschafft.
Andreas, das gleiche habe ich auch beim Titel-Objekt, ich bekomme die Farbe nur direkt als Hintergrund eckig ohne Abstände hin, auch hier komme ich mit Stil nicht weiter...
Danke für Eure Hilfe
Author
Sorry, hatte die Bilder vergessen.
Nicht im Objekt den Hintergrund machen sondern als "STIL" im Hintergrund mit runden Ecken!
Google translate...
Hallo Hans,
Ich mache sie mit Style-CSS und HTML-Objekten.
CSS: Mit 10 Schaltflächen in verschiedenen Farben (Sie können sie bearbeiten). Platzieren Sie es in: Schritt 1 - Statistik und Code - Code - Vor dem schließenden Head-Tag. Im Stil ist eine Mindestbreite auf 200px eingestellt (Sie können sie ändern)
<style>
/* 10 estilos para botones. */
.button{
width: auto;
height: auto;
background-color: #3f7d95;
border: solid 0px #ffffff;
color: #ffffff;
padding: 10px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-family: "Open Sans", sans-serif;
font-size: 16px;
margin: 4px;
cursor: pointer;
border-radius: 9px;
transition-duration: 0.8s;
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 10px 1px rgba(0,0,0,0.3);
min-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.button1 {background-color: #3f7d95;}
.button2 {background-color: #fF2300;}
.button3 {background-color: #3f51b5;}
.button4 {background-color: #E91E63;}
.button5 {background-color: #23a2ab;}
.button6 {background-color: #9e6e9c;}
.button7 {background-color: #9e113a;}
.button8 {background-color: #06618f;}
.button9 {background-color: #1C7E5E;}
.button10 {background-color: #F19403;}
.button1:hover {background-color: #ff2300; border: solid 2px #ff2366;}
.button2:hover {background-color: #4CAF50;}
.button3:hover {background-color: #F19403;}
.button4:hover {background-color: #2CB67C;}
.button5:hover {background-color: #91ab41;}
.button6:hover {background-color: #99B62C;}
.button7:hover {background-color: #3f51b5;}
.button8:hover {background-color: #2196F3;}
.button9:hover {background-color: #E91E63;}
.button10:hover {background-color: #fF2300;}
</style>
Object-html: Ersetzt durch den vollständigen Link. Neben dem Schaltflächenstil (1, 2, 3 usw.)
<a class="button button4" href="https://www.radiomazz.com/radiomazz.html" target="_self">Enero 2022</a>
Die Schaltflächen sehen bei 200 Pixeln gleich groß aus.
Die Schaltflächen für Januar, Februar, März und April öffnen sich im gleichen Fenster target="_self"
Der Mai-Button öffnet sich in einem separaten Fenster. target="_Blank"
Hoffe, das löst Ihre Anfrage.
Author
Hallo Miguel,
danke für die Antwort, ich habe es getestet - es funktioniert.
Nur eine Rückfrage:
<a class="button button4" href="https://www.radiomazz.com/radiomazz.html" target="_self">Enero 2022</a>
Den markierten Bereich muss ich ja ersetzen, Teil 1 ist meine URL, ist "radiomazz,html" deine Hompage=index.html?
Im Bereich "Ajustes" / "Code" gibt es unten ein Bereich wo ich Seiten eintragen kann, die diesen Code nutzen. Muss ich da die entsprechenden Seiten eintragen?
Hans-Ulrich
Author
Hallo Miguel,
sorry für die Verwirrung, die "href"-Adresse ist natürlich die Adresse, die durch den Button geöffnet werden soll.
Hans-Ulrich
Hallo Hans.
Richtig, www.radiomaz.com ist meine Seite. Ich habe es als Beispiel verwendet.
Es ist richtig, die Adresse öffnet die Seite, zu der Sie weitergeleitet werden, wenn Sie auf die Schaltfläche klicken
Ihre Adresse steht vollständig. Zwischen den Anführungszeichen von href=" "
<a class="button button4" href="https://www.YourFullAddress.com/Seite.html oder .php" target="_self">Januar 2022</a>
Den CSS-Style platziere ich in Step 1 - Statistik und Codeoption, da der Style der Buttons auf allen Seiten erhalten bleibt, so kann ich das html-Objekt mit dem Button überall platzieren...
Es in jedes HTML-Objekt einzufügen wäre sehr umständlich.
CSS-Style.
Paso 1 - Estadísticas y Código - Código - Antes del cierre de la etiqueta HEAD.
Tut mir leid, meine Plattform ist auf Spanisch.
Ich hoffe, dass jemand, der Deutsch spricht, Sie besser führen kann, da der Übersetzer die Sprache verlieren kann.
Author
Hallo Miguel,
vielen Dank, ich habe jetzt alles verstanden.
Ich bin 69 Jahre alt und das ist mein erstes Projekt für unsere Seniorengemeinschaft (Non-profit organisation für alte Menschen).
Danke für die Hilfe, ich werde jetzt mehr CSS lernen.
Hans-Ulrich