WebSite X5Help Center

 
Hans-Ulrich Z.
Hans-Ulrich Z.
User

Buttons auf gleiche Größe bringen  de

Autor: Hans-Ulrich Z.
Besucht 1338, Followers 1, Geteilt 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

Gepostet am
12 ANTWORTEN - 1 KORREKT
Andreas S.
Andreas S.
Moderator
Nutzer des Monats DE

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.

Mehr lesen
Gepostet am von Andreas S.
Alessandro W.
Alessandro W.
User

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

Mehr lesen
Gepostet am von Alessandro W.
Andreas S.
Andreas S.
Moderator
Nutzer des Monats DE

Würde auch mit dem Titel-Objekt gehen! Da hast du Verlinkung und H1-H6 Titeln die du nehmen kannst.

Mehr lesen
Gepostet am von Andreas S.
Hans-Ulrich Z.
Hans-Ulrich Z.
User
Autor

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

Mehr lesen
Gepostet am von Hans-Ulrich Z.
Hans-Ulrich Z.
Hans-Ulrich Z.
User
Autor

Sorry, hatte die Bilder vergessen.

Mehr lesen
Gepostet am von Hans-Ulrich Z.
Andreas S.
Andreas S.
Moderator
Nutzer des Monats DE

Nicht im Objekt den Hintergrund machen sondern als "STIL" im Hintergrund mit runden Ecken!

Mehr lesen
Gepostet am von Andreas S.
Miguel Galarza
Miguel Galarza
User

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.

Mehr lesen
Gepostet am von Miguel Galarza
Hans-Ulrich Z.
Hans-Ulrich Z.
User
Autor

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

Mehr lesen
Gepostet am von Hans-Ulrich Z.
Hans-Ulrich Z.
Hans-Ulrich Z.
User
Autor

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

Mehr lesen
Gepostet am von Hans-Ulrich Z.
Miguel Galarza
Miguel Galarza
User

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.

Mehr lesen
Gepostet am von Miguel Galarza
Miguel Galarza
Miguel Galarza
User

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.

Mehr lesen
Gepostet am von Miguel Galarza
Hans-Ulrich Z.
Hans-Ulrich Z.
User
Autor

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

Mehr lesen
Gepostet am von Hans-Ulrich Z.