Border color Ändern?

MoinMoin Freunde

Ich würde gerne einen Text umrahme, und benutze folgenden code.

<div style="width: 460px; background-color: #ffffff; color: green; border: 7px solid #999;">

Nun will ich aber wie der Titel schon erahnen lässt, die border color noch ändern.

da ich keine CSS Kenntnisse habe, würde ich mich riesig freuen, wenn einer eine schnelle einfache Lösung hat in diesem code die border color zu ändern.

Mit freundlichen Grüssen

5 Antworten

VeryBestAnswers

27.10.2019, 20:12

Im style-Attribut steht folgende Regel:

border: 7px solid #999

"7px" ist die Breite des Rahmens (7 Pixel)
"solid" bedeutet, dass der Rahmen durchgehend ist, und nicht gestrichelt oder gepunkted
"#999" ist die Farbe. Du kannst entweder den Farbnamen auf Englisch ("red", "orange", "green", "lime", "darkred", etc.) angeben, oder einen Hex-Wert. Ein Hex-Wert beginnt mit einem "#", gefolgt von 3 bis 8 Zeichen. Klicke auf diesen Link: https://colorpicker.me. Hier kannst du eine Farbe auswählen und den Hex-Wert kopieren.

MooKuh

27.10.2019, 20:05

Border:7px Solid #f0f;

Der letzte Wert ist der Hexadezimalwert, der die Farbe beeinflusst.

yolohaeschen

27.10.2019, 20:06

hinten wo boder steht und dann#999 das ist die Farbe. Einfach googlen nach html farbcodes und deinen gewünschten eintragen.

ChrisCat1, UserMod Light

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, Spiele und Gaming

27.10.2019, 20:06

Du hast dort doch den abschnitt für den Rand

border: 7px solid #999;

Der letzte Teil davon, also das "#999", ist die Farbe als Hexadezimalwert.

Ein roter Rand wäre also:

border: 7px solid #FF0000;

Oder ein blauer Rand:

border: 7px solid #0000FF;

ohwehohach

27.10.2019, 20:08

Die Linienstärke, Strichelung und Farbe werden durch "border: 7px solid #999;" definiert. Ändere den Wert von #999, um eine andere Farbe einzustellen. #999 ist eine Abkürzung für #999999. Dabei stehen die Zahlenpaare jeweils für Rot (00 - FF), Grün (00 - FF) und Blau (00 - FF). Reines Grün wäre also #00FF00, Gelb wäre #FFFF00, etc.

table.border1 {

width: 100%; height: 50%;

border-collapse: collapse;

text-align: center;

vertical-align: middle;

border: 2px solid #000000; }

caption {

letter-spacing: 2em;

border: 1px solid #000000;

background-color: #008080;

color: #FFFF00;

font-size: xx-large; }

th, td {

font-family: Arial;

padding: 2px;}

th {

background-color: #ccc;

border: 1px solid #000000; }

th.WT {

color: #3FFFFF; }

th.Woche {

width: 3%; }

th.Block {

width: 3%; }

th.Zeiten {

width: 4%; }

td.Woche {

font-size: 32pt;

background-color: #FFFF00;

border-bottom: 2px solid #000000;

border-right: 1px solid #000000; }

td.Block {

background-color: #ffff88;

font-size: 16pt;

border-bottom: 2px solid #000000;

border-right: 1px solid #000000; }

td.AZeit {

background-color: #ffffcc;

border-bottom: 1px dotted #000000; }

td.EZeit {

background-color: #ffffcc;

border-bottom: 2px solid #000000; }

td.Fach {

border-top: 2px solid #000000;

border-left: 2px solid #000000;

border-right: 2px solid #000000;

border-bottom: 1px dashed #000000;

background-color: #ffffe8;

color: #800000;

font-weight: bold;

width: 16%; }

td.Lehrer {

width: 10%;

border-left: 2px solid #000000;

border-bottom: 2px solid #000000;

border-right: 1px dashed #000000;

background-color: #ffffe8;

font-size: 10pt; }

td.Raum {

width: 6%;

border-bottom: 2px solid #000000;

border-right: 2px solid #000000;

background-color: #ffffe8;

font-size: 12pt; }

td.unten {

border-bottom: 5px solid #000000;

}

td.Info {

background-color: #abcdef;

}

td.Info1{

background-color: #FFFF00;

}

td.Info2{

background-color: #008080;

}

td.Info3{

background-color: #CCC;

}

td.Info4{

background-color: #00FFFF;

}

td.Info5{

background-color: #F5B3FF;

}

td.Info6{

background-color: #FF00FF;

}

td.Info7{

background-color: #808000;

}

td.Info8{

background-color: #BDEDBA;

}

td.Info9{

background-color: #FFB300;

}

td.Info10{

background-color: #00FF25;

}

td.Info11{

background-color: #FF0000;

}

td.Info12{

background-color: #B18380;

}

td.BB{

background-color: #FFFF00;

}

td.CC{

background-color: #008080;

}

td.DD{

background-color: #CCC;

}

td.EE{

background-color: #00FFFF;

}

td.FF{

background-color: #F5B3FF;

}

td.GG{

background-color: #FF00FF;

}

td.HH{

background-color: #808000;

}

td.II{

background-color: #BDEDBA;

}

td.JJ{

background-color: #FFB300;

}

td.KK{

background-color: #00FF25;

}

td.LL {

background-color: #FF0000;

}

td.MM{

background-color: #B18380;

}

table.border2{

width: 30%; height: 30%;

border-collapse: collapse;

text-align: center;

vertical-align: middle;

border: 2px solid #000000; }

Ich möchte gerne zwischen der oberen tabell und er tabell unten(2)einen Abstand haben. Könnt ihr mir bitte schreiben wie das geht.(Die Infos in der Mitte sind nicht wichtig.)

Danke!!!!

...zur Frage

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!

...zur Frage

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

...zur Frage

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.

...zur Frage

WordPress TablePress Plugin: ganze Tabelle umfärben, wie muss ich diesen Code ändern?

.tablepress-id-1 .row-1 td {
background-color: #f6e9ea;

}

Hallo, in der Doku des Wordpress Tabellen Plugins steht dieses Beispiel, um 1 bestimmte Tabellenzeile zu färben. Was muss ich aber tun, wenn die ganze Tabelle diese Farbe bekommen soll? Will den Code ja net aufblähen.

...zur Frage

Css Elemente nebeneinander und nicht untereinander?

Wie kann ich diese Elemente so positionieren, dass sie nebeneinander und nicht untereinander sind?

HTML:

  <div>
    <div v-for="recipe in recipes" :key="recipe.id">
      <div class="recipe">
        <img class="recipe-img" :src="recipe.img" alt="" />
        <div class="recipe-description">
          <h3 class="recipe-title">{{ recipe.title }}</h3>
          <h4 class="recipe-time">
            <i class="far fa-clock"></i> {{ recipe.time }} Minutes
          </h4>
          <h4 class="level">
            <i class="far fa-check-circle"></i> {{ recipe.level }} to make
          </h4>
        </div>
      </div>
    </div>
  </div>

CSS:

.recipe-img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}


.recipe {
  margin: 30px;
}


.recipe-description {
  text-align: center;
  margin-top: 10px;
  border: 1px solid #444;
  border-top: none;
  padding: 10px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  background-color: #444;
  color: white;
  width: 300px;
}


.recipe-title,
.recipe-time,
.recipe-level {
  margin: 5px;
}

...zur Frage

html/css box neben box bekommen?

Bekomme mit diesem code meine box in die andere box. will sie aber ausserhalb der box haben:

<!DOCTYPE html>
<html lang="de">
<head>
<title>Spezialitäten</title>
<meta charset="UTF-8"/>
<style type="text/css">
h1 {
font-size: 80px;
text-align: left;
color: red}
.hauptbox {
background-image: url(1783.jpg);
background-size: cover;
width: 1500px;
height: 600px;
border: solid;
}
.banner {
height: 200px;
border: solid;
margin: 25px;
width: 1450px;
}
.link {
width: 206px;
height: 300px;
border: solid;
float: right;
color: white;
A:active {color:red};
}
</style>
</head>
<body bgcolor="lightblue">
<div class="hauptbox">
<div class="banner">
<h1>Gdddd</h1>
</div>
<div class="link"
<a name="suche"><h4>Zurück zum Anfang</h4></>
</body>
</html>

...zur Frage

CSS bei Hover anderes Element verändern?

Ganz ohne JavaScript

Mit dem Code unten kann ich beim hovern auf container1 die Hintergrundfarbe von container2 ändern weil er in container1 drinnen ist

aber geht es nicht auch so das ich den Body Hintergrund auf grün oder so ändern kann ?

    #container1{
            height: 50vh;
            background-color: blue;
        }
        #container2{
            height: 25vh;
            width: 100%;
            background-color: red;
        }
        #container1:hover #container2{
            background-color: green;
        }
    <div id="container1">
            <div id="container2"></div>
    </div>

...zur Frage

Wie kann ich mit css die zwei div container untereinander mit Abstand dazwischen anzeigen lassen?

<!DOCTYPE html>
<html>
   <head>
      <title></title>
      <style>
         .haupt {
         margint top: 50px;
         }
         .b1 {
         float: left;
         width: 400px;
         padding: 20px 0;
         color: #01DF01;
         border-bottom-width: 3px;
         border-style: solid;
         width: 50;
         height: 30;
         background-color: #fff;
         }
         .b2 {
         float: both;
         width: 400px;
         padding: 20px 0;
         color: #01DF01;
         border-bottom-width: 3px;
         border-style: solid;
         width: 50;
         height: 30;
         background-color: #fff;
         }
      </style>
   </head>
   <body>
      <div class="haupt">
         <div class="b1">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr,<br>
            sed diam nonumy eirmod tempor invidunt ut labore et<br>
            dolore magna aliquyam erat, sed diam voluptua.<br>
            At vero eos et accusam et justo duo dolores et
         </div>
         <div class="b2">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr,<br>
            sed diam nonumy eirmod tempor invidunt ut labore et<br>
            dolore magna aliquyam erat, sed diam voluptua.<br>
            At vero eos et accusam et justo duo dolores et
         </div>
      </div>
   </body>
</html>

...zur Frage

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

...zur Frage

HTML Navigation Bar Text Farbe ändern?

hey leude

Ich habe meine eigene Website gemacht, jetzt hab ich ein Problem ich möchte die Navigation bar den text dort in schwarz färben... habe schon bei css im header, nav, nav li probiert

CSS

.social-icons {
  text-align: center;
  }  
.social-icons li {
  display:inline-block;
  list-style-type:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  }
.social-icons li a {
  border-bottom: none;
  }
.social-icons li img {
  width:70px;
  height:70px;
  margin-right: 20px;
}

#wrapper {
    width: 960px;
    margin: center;
    font-family: arial, sans-serif
}
    
}

body {
    background-color: #8db6cd;
    
}

header {
    padding-top: 10px;
    padding-bottom: 10px;
    height: 125px;
    text-align: center;
    text-color: black;
}

nav {
    text-align: center;
     text-color: black;
    
}

nav li {
    display: inline;
    margin-right: 40px;
    text-color: black;
}

a {
    color: #777;
    text-decoration: none;
    font-family: arial, sans-serif
}



section {
    width: 620px;
    height: 530px;
    float: left;
    background: lightgray;
    border: 1px solid #000000;
}


aside {
    width: 310px;
    height: 550px;
    float: right;
    background: darkorange;
    border: 1px solid #000000;
}

...zur Frage

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

...zur Frage

CSS Buttons verschieben?

Hallo, ich möchte auf meiner Website, dass die Buttons untereinander und nicht nebeneinander angezeigt werden wie hier:

habe schon einiges probiert aber nichts funktioniert richtig...

mein html Code ist das hier:

<!DOCTYPE html>
<html lang="de">
<head>
    <link href="style_bypass.css" rel="stylesheet">
    <title>Bypass</title>
</head>
<body id="links">


<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Set Lockscreen</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Einstellungen</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Test Video</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Galaxy Store</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Google Quick Search</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Youtube</button></a>



</body>

Und mein CSS Code der hier:

button {
    --border: 5px;    /* the border width */
    --slant: 0.7em;   /* control the slanted corners */
    --color: #37E8FC; /* the color */
    
    font-size: 35px;
    padding: 0.4em 1.2em;
    border: none;
    cursor: pointer;
    font-weight: bold;
    color: var(--color);
    background: 
       linear-gradient(to bottom left,var(--color)  50%,#0000 50.1%) top right,
       linear-gradient(to top   right,var(--color)  50%,#0000 50.1%) bottom left;
    background-size: calc(var(--slant) + 1.3*var(--border)) calc(var(--slant) + 1.3*var(--border));
    background-repeat: no-repeat;
    box-shadow:
      0 0 0 200px inset var(--s,#0000),
      0 0 0 var(--border) inset var(--color);
    clip-path: 
        polygon(0 0, calc(100% - var(--slant)) 0, 100% var(--slant),
                100% 100%, var(--slant) 100%,0 calc(100% - var(--slant))
               );
    transition: color var(--t,0.3s), background-size 0.3s;
  }
  button:hover,
  button:active{
    background-size: 100% 100%;
    color: #fff;
    --t: 0.2s 0.1s;
  }
  button:focus-visible {
    outline-offset: calc(-1*var(--border));
    outline: var(--border) solid #000a;
  }
  button:active {
    --s: #0005;
    transition: none;
  }
  
  
  
  body#links {
    display:grid;
    grid-auto-flow:column;
    grid-gap:px;
    place-content:center;
    margin:0;
    height:100vh;
    background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  }

Was genau muss ich in der CSS Datei bearbeiten, dass die Buttons nicht nebeneinander sondern untereinander angezeigt werden?

...zur Frage

WetterApp mit HTML, Css und C# über Blazor Server App?

Hallo undzwar bin ich neu in C# und möchte über die Blazor Server App eine Wetter-App programmieren, allerdings fehlt mir dazu noch der Code, da ich nicht weiß wie ich anfangen soll. Ich möchte dass mein "SearchIcon" welcher in HTML hinterlegt ist als suchbutton fungiert, damit ich die Städte suchen kann und über API möchte ich, dass mir dann die jeweiligen Temperaturen angegeben werden. Kann mir wer helfen und gegebenenfalls einen Code dafür geben.

Hier mein HTML code:

</div>

</div>

<div>

</div>

</div>

<img src="/images/image1.png" width="75" height="75" class="imageline "

<img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 5px; margin-right: -5px;"

<img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 22px; margin-right: -5px;"

<img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 5px; margin-right: -14px;"

</div>

<div>

<p style="color:black;"class="line0 title margin-left ">Monday</p>

<p style="color:black;"class="line0 title margin-left ">Tuesday</p>

<p style="color:black;"class="line0 title margin-left ">Wednesday</p>

<p style="color:black;"class="line0 title margin-left ">Thursday</p>

<p style="color: black;"class="line0 title margin-left ">Friday</p>

</div>

<div>

<p class="speed">Humidity</p>

</div>

<div>

<p class="speed">Wind Speed</p>

</div>

</body>

hier mein Css code:

.backgroundimage {

background-image: url('../images/sun_background.png');

background-attachment: fixed;

background-repeat: no-repeat;

background-size: cover;

}

.cloud-background {

background-image: url('../images/cloud.png');

/* Füge hier die gewünschten Hintergrundbilderigenschaften hinzu */

}

.card {

width: 90%;

max-width: 470px;

color: #fff;

margin: 10px auto 0;

border-radius: 20px;

}

.search{

width: 100%;

display: flex;

align-items: center;

justify-content: space-between;

}

.search input{

border: 0;

outline: 0;

background: #ebfffc;

color: #555;

padding: 10px 25px;

height: 60px;

border-radius: 30px;

flex: 1;

margin-right: 16px;

font-size: 18px;

}

.search button{

border: 0;

outline: 0;

background: #ebfffc;

border-radius: 60%;

width: 60px;

height: 60px;

cursor: pointer;

}

.weather-icon{

margin-bottom: -30px;

}

.weather h1 {

font-size: 80px;

font-weight: 500;

color: floralwhite;

}

.weather h2 {

font-size: 40px;

font-weight: 400;

margin-top: -10px;

color: floralwhite;

}

.details {

display: flex;

align-items: center;

justify-content: space-between;

padding: 0 20px;

margin-top: 50px;

}

.col {

display: flex;

align-items: center;

text-align: left;

margin-top: 150px;

}

.col img {

width: 20px;

margin-right: 20px;

margin-bottom: 70px

}

.humidity, .wind{

font-size: 28px;

margin-top: -6px;

color: floralwhite;

}

.speed{

font-weight: bold;

}

.temp {

margin-bottom: 20px;

display: flex;

justify-content: center;

}

.search button img{

width: 55%;

}

.center {

display: flex;

justify-content: center;

}

.top-left{

display: flex;

justify-content:left

}

.top-left

{

margin-left: 10px;

}

.margin-top{

margin-top: 20px;

}

.hr1 {

width: 390px;

height: 2px;

color: black;

}

.line{

margin-bottom: -100px;

margin-top: 10px;

}

.line1{

margin-top: 30px;

margin-bottom: -20px;

}

.line0{

margin-top: 70px;

margin-bottom: -90px;

font-size: 14px;

font-weight: bold;

color: black;

}

.imageline {

margin-top: 5px;

margin-bottom: -90px;

}

.imagesMain {

padding: 0;

margin-left: auto;

margin-right: auto;

margin-top: 20px;

text-align: center;

}

.imagesMain img {

height: 400px;

width: 300px;

vertical-align: middle;

}

.title {

display: inline-block;

color: lightgray;

}

.margin-left{

margin-left: 14px;

}

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen