Wie kann ich die Border eines Tabpanes ansprechen?

Guten Tag,

ich wollte fragen wie ich die Border eines Tabpanes ansprechen kann. Um genauer zu sein möchte ich fragen, ob man die Brightness der Border des Tabpanes ansprechen kann.

1 Antwort

Vom Beitragsersteller als hilfreich ausgezeichnet

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

programmieren, CSS, JavaFX

06.05.2021, 02:07

JavaFX setzt den Rahmen öfter durch die einfache Schachtelung zweier Layer mit unterschiedlichen Hintergründen um.

Du kannst es einmal mit diesem Style probieren:

.my-custom-tabpane-style {
  -fx-background-color: rgba(255, 255, 0, 150);
  -fx-control-inner-background: rgba(255, 255, 0, 255);
}

Die Hintergrundfarbe wird hier demonstrativ mit rot besetzt.

Zuordnung im Code:

yourTabPane.getStyleClass().add("my-custom-tabpane-style");

Für eine Einbindung in FXML lies hier.

Ansonsten findest du die Standardstyles (so auch für tab-pane) der Skins Modena und Caspian in den CSS-Dateien dieser Ordner:

Daran kannst du dich bezüglich des Aufbaus des Elements orientieren.

Ähnliche Beiträge

[JavaFX] Border-Radius für das Fenster an sich?

Bekanntlich kann man ja fast allen Elementen einen border-radius verpassen, jedoch möchte ich dies auf das Fenster selbst - die Scene - setzen. Ist das denn möglich?

Gescheiterte Versuche:

Style im SceneBuilder auf -fx-border-radius: 20 setzen
In der .css-Datei -fx-border-radius: 20 auf die fx:id AnchorPane_Background setzen

Oder funktioniert das nur auf Elementen im Fenster selbst?

...zum Beitrag

dieser Fehler in der css: "at-rule or selector expected"?

Hallo Ich habe diesen Fehler in meinem css, jemand weiß, wie man dieses Problem zu behebt? Wie auf dem Bild zu sehen ist, steht da "at-rule or selector expected", aber nach mehreren Versuchen weiß ich nicht, wie ich das Problem lösen kann. Bitte um Hilfe.

@charset "UTF-8"; 
{
  box-sizing: border-box;
}
body {
  font-size: 14px;
  font-family: Inter;
}
.v73_77 {
  width: 595px;
  height: 842px;
  background: rgba(255,255,255,1);
  opacity: 1;
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
}
.v73_79 {
  width: 451px;
  color: rgba(0,0,0,1);
  position: absolute;
  top: 139px;
  left: 53px;
  font-family: Inter;
  font-weight: Regular;
  font-size: 12px;
  opacity: 1;
  text-align: left;
}
.v73_80 {
  width: 160px;
  height: 160px;
  background: rgba(255,243,236,0);
  opacity: 1;
  position: absolute;
  top: 228px;
  left: 28px;
  border: 1px solid rgba(255,117,51,1);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  overflow: hidden;
}
.v73_81 {
  width: 160px;
  height: 160px;
  background: rgba(255,243,236,0);
  opacity: 1;
  position: absolute;
  top: 228px;
  left: 213px;
  border: 1px solid rgba(255,117,51,1);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  overflow: hidden;
}

...zum Beitrag

CSS Lichterkette als Border?

Hallo, für ein Schulprojekt muss ich eine Adventkalenderwebsite programmieren und designen. Jedenfalls habe ich ein kleines Fenster (Div), dass ich gerne mit einer Lichterkette umranden würde (gerne animiert). Ich habe bereits mit border-image herumprobiert, jedoch hat es nicht wirklich gut geklappt. Habt ihr eine Lösung?

...zum Beitrag

Weissen Rand auf html Webseite entfernen?

Ich bin gerade dabei eine Webseite zu programmieren.

Wenn ich den body bei css anspreche und dann baclground image: url (bild); dann erscheint um die navleiste einen Rand was ich nicht möchte

Füge ich aber das bild im body teil ein und setze padding, border, margin auf 0 und height und width auf 100% dann habe ich auf der weissen Seite einen Rand.

Wie kann ich diesen Rand loswerden?

...zum Beitrag

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%;

...zum Beitrag

Wie geht das mit CSS?

Ich kann deswegen nicht einfach ein größeres Div mit Border rundherum machen, weil ich will, dass dieser Border aktiv wird wenn man z.B. drüber hovert oder auf einen Knopf klickt. Es gibt viele Knöpfe. Und der Knopf auf den man sich gerade konzentriert, der soll halt einen Border bekommen -> aber mit viel Abstand. Margin und Padding habe ich beides ausprobiert, bewirkt nicht was ich wollte.

...zum Beitrag

HTML Tabelle border-style für einzelne Zelle?

Guten Abend,

ich stecke gerade fest und schaffe es nicht, so eine Tabelle in HTML zu machen:

Die verbundenen borders mache ich mit border-collapse, aber dann sind die borders der einzelnen Zelle ja weg und die gestrichelte border der linken und rechten Zelle sind unsichtbar. Ohne border-collapse habe ich aber zwei Ränder, was ich nicht möchte. Und ohne border an der Tabelle, sondern nur für die Zellen, sind die Zellen nicht mehr verbunden und es entstehen Lücken zwischen ihnen.

Vielleicht weiß ja jemand von euch, wie das zu machen ist.

Liebe Grüße!

...zum Beitrag

CSS: Wie kann ich bei Hover die Hintergrund- und Schriftfarbe ändern lassen?

Hallo zusammen,

ich würde gerne in diesen Code eine Hover-Funktion einbauen. Da ich Neuling bin, hoffe ich, dass ihr mir die Unbeholfenheit verzeiht.

Bei Hover sollte sich die Hintergrundfarbe und wenn möglich die Schriftfarbe ändern:

*#dm *.dmBody div.u_1159973834 {
  background-color: rgba(255, 255, 255, 0.35) !important;
  border-style: solid !important;
  border-width: 2px !important;
  border-color: rgba(255, 255, 255, 1) !important;
}

Besten Dank für eure Zeit!

...zum Beitrag

Bild in div?

Hi ich möchte ein bild in mein div hinzufügen und es soll oben genau in das div passen ohne rand aber irgendwie bleibt dort immer ein weißer rand.

Hier ein stück meines Html code:

                <section class="boxes">
                    <div class="buybox">
                        <img src="blume/sonnenblume.jpg">
                    </div>
                    <div class="buybox"></div>
                    <div class="buybox"></div>
                    <div class="buybox"></div>
                </section>

Hier ein Stück von CSS:

div {
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
}
.boxes{
    display: flex;
    flex direction: row;
}
.buybox{
    width: 400px;
    height: 420px;
    background: white;
    margin: 25px;
    box-shadow: 0 0 30px rgba(0, 0, 0, .2);
    border-radius: 20px;
    position: relative;
    
}
.buybox img{
    border-radius: 20px;
    height: auto ;
    width: 100% ;
    box-sizing: border-box;
    margin: 0;
}
.buybox:hover{
    transition: .2s;
    background: #E6E6E6;
}

...zum Beitrag

Wie kann ich den Inhalt einer Border färben HTML&CSS?

Wie kann ich den Inhalt einer Border in eine bestimmte Farbe ändern (in CSS oder HTML)?

...zum Beitrag

Grid Layout funktioniert nicht?

<div id="story">
		<p id="grid1">1</p>
		<p id="grid2">2</p>
		<p id="grid3">3</p>
		<p id="grid4">4</p>
		<p id="grid5">5</p>
		<p id="grid6">6</p>
	</div>

#grid1{
	grid-area: "eins";
	border: 1px solid black;
}
#grid2{
	grid-area: "zwei";
	border: 1px solid black;
}
#grid3{
	grid-area: "drei";
	border: 1px solid black;
}
#grid4{
	grid-area: "vier";
	border: 1px solid black;
}
#grid5{
	grid-area: "fünf";
	border: 1px solid black;
}
#grid6{
	grid-area: "sechs";
	border: 1px solid black;
}


#story{
	padding: 15px;
	color:  white;
	background-color: rgb(0, 0, 255);
	display: grid;
	grid-template-columns: 200px 200px 200px;
	grid-template-rows: 200px 200px 200px;
	gap: 16px;
	grid-template-areas:
	"eins" "eins" "zwei"
	"drei" "vier" "zwei"
	"fünf" "vier" "sechs";
}

Es wird bei mir Quasi nur 1 2 3 nächste Zeile 4 5 6 angezeigt. Bild in der Ergänzung meiner letzten Frage. Ich will aber dass es so aussieht wie in grid template areas nur halt dass nicht zum Beispiel 1 1 dasteht sondern nur ein großes Feld mit der Zahl 1 drinnen.

...zum Beitrag

HTML projekt wie findet ihr die vorarbeit?

html:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<Header>
</Header>
<div class="input">
<main>
<form action="" method="post">
<h2>Anmeldung</h2>
<input type="email" name="Email" placeholder="Email hier eingeben" required="@" id=""> <br>
<input type="text" name="Benutzer" placeholder="Benutzer hier eingeben" required="A-z" > <br>
<input type="password" name="passwort" placeholder="password hier eingeben " id=""> <br>
<input type="submit" value="Anmelden">
<input type="reset" value="reset">
</form>
</div>
<hr>
<a href="#">Impressum</a>
<a href="#">kontakt</a>
<a href="#">Über uns</a>
</main>
<footer>
</footer>
</body>
</html>

css

body {
font-family: Arial, Helvetica, sans-serif;
color: white;
}
body{
background-color: black;
}
.input {
display: flex;
margin: 700px;
margin-top: 300px;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: 1px 1px 3px 3px white;
border-radius: 30px;
height: 300px;
width: 300px;
}
a{
font-family: Arial, Helvetica, sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
a:hover{
color: green;
text-decoration-line: none;
}
input{
padding: 5px;
border-radius: 10px;
}
input[type="submit"] {
font-size: 1.0em; padding: 1px 6px;
font-family: Roboto, sans-serif;
font-weight: 100;
color: teal;
border: 1px solid silver;
background-image: linear-gradient(to top, gainsboro 0%, white 90%);
border-radius: 20px;
}
input[type="reset"] {
font-size: 1.0em; padding: 1px 6px;
font-family: Roboto, sans-serif;
font-weight: 100;
color: teal;
border: 1px solid silver;
background-image: linear-gradient(to top, gainsboro 0%, white 90%);
border-radius: 20px;
}

...zum Beitrag

Wieso funktioniert dieser CSS-Ladebalken nicht?

Folgendes Problem: Ich hab hier eine Seite, die normalerweise einen Ladebalken generieren sollte. In der Style.css ist es wie folgt definiert:

.loader {

position: relative;

}

.loader::before {

content: "";

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

border-radius: 100%;

border-top: 5px solid red;

border-left: 3px solid brown;

border-bottom: 1px solid purple;

border-right: transparent;

animation: spinner 0.8s linear infinite;

}

@keyframes spinner {

0% {

transform: rotate(0deg);

}

100% {

transform: rotate(360deg);

}

In der Page selbst hab ich dann: <div class="loader">Ladebalken</div>

Die Loaderclass oben ist nur ein Beispiel. Ich hab es auch schon mit anderen Einstellungen probiert.

Nach allem was ich so finde und bisher verstanden habe müsste auf der Webseite eigentlich an der entsprechenden Position ein animierter Ladebalken angezeigt werden, wird es aber nicht, sondern egal was ich in der style.css definiere es erscheint das Wort "Ladebalken" auf weißem Grund. Die Style.css ist korrekt verlinkt, alle anderen Elemente wie z.b Buttons werden korrekt angezeigt.

Wo liegt das Problem bzw. woran könnte das liegen?

...zum Beitrag

Wie kann ich den Abstand zwischen HTML-Tags entfernen?

HI, ich programmiere gerade einen Taschenrechner in HTML/CSS/JavaScript und möchte den Abstand zwischen den Elementen entfernen. Margin, Padding und Border sind bereits auf 0 gestellt. Der Abstand ist auch nur horizontal zwischen den Elementen. Vielen Dank im Voraus :-)

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen