weiße Ecken bei border-radius?

Hi,

ich habe eine Navbar von Bootstrap auf meiner Website und ein Accountsystem, bei dem das Profilbild oben rechts angezeigt wird. Aus irgendeinem Grund werden, trotz, dass ich einmal per Bootstrap Klasse rounded-circle und auch selbst:

border-radius: 50%;

weiße Ecken angezeigt. Das Bild ist eigentlich transparent. Am Bild selber kanns aber net liegen, weil ich unterschiedliche getestet habe...

Mein Code:

<img src="/img/profile-images/donut.png" alt="user-img" class="user-img-navbar rounded-circle shadow-lg">

So sieht das dann aus:

Bild zum Beitrag

Ich weiß nicht ob´s man gut erkennen kann aber direkt um das bild sind so weiße ecken. ich habe auch schon die hintergrundfarbe der navbar auf weiß geändert... man sieht die ecken aber trotzdem noch...

Jemand ne idee warum da weiße ecken sind? :D

Lezurex

27.08.2021, 19:07

Bitte lade deinen ganzen Code mal zum Beispiel auf jsfiddle.net hoch, damit man sich das genauer ansehen kann.

ArduinoGeek

Fragesteller

27.08.2021, 20:33

Sorry, geht net ... Ist viel zu viel und zu kompliziert mit den Ressourcen und so. Wenn du so nicht weißt woran es liegt, dann ist egal vielleicht finde ich noch was im Internet :)

2 Antworten

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

PC, Computer, Technik

27.08.2021, 23:37

1) Öffne das in src angegebene Bild in einem Grafikprogramm wie GIMP und stelle sicher, dass es wirklich die transparenten Flächen beinhaltet, die du erwartest.

Wenn ich ein Beispiel mit den mir bekannten Informationen und einem runden, transparenten Bild nachbaue (https://jsfiddle.net/n5r9u8a4/), kann ich das Problem nicht reproduzieren.

2) Entferne die Klassen vom img-Element und füge sie schrittweise wieder hinzu.

3) Schau dir das Element im Webinspektor an. Deaktiviere wenn nötig die Styles, die auf das img-Element und seine nächstliegenden Elterncontainer wirken. In dem Zuge solltest du auch auf die Ursache deines Problems stoßen.

P.S.: In deinem alt-Attribut sollte eine tatsächliche Bildbeschreibung stehen (z.B. Donut mit Schokoladenglasur), nicht irgendwas. Wenn es sich bei dem Bild nicht um relevanten Inhalt, sondern ein dekoratives Element handelt (wie ein Logo), dann gib das alt-Attribut ohne Wert an.

<img alt src="...">

ArduinoGeek

Fragesteller

28.08.2021, 00:06

Danke für die Antwort. Habe das gemacht was du gesagt hast und habe jetzt nach langer Zeit endlich das Problem gefunden. Ich habe das Bild innerhalb eines a tags gehabt und diesem ausversehen mit shadow-lg einen schatten gegeben, wodurch dann natürlich man die ecken sehen konnte :D. Danke auf jeden Fall für die ausführliche Antwort. Du schreibt echt gute Antworten :D

Lezurex

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

PC, Computer, Internet

27.08.2021, 20:44

Eventuell hast du auf alle img-Elemente einen bestimmten BG-Style angewendet. Das Bild sieht mir aber so aus, als wäre es nicht transparent, da ich ganz leicht einen Kreis UND ein Quadrat sehe.

Mehr kann ich nur mit diesem Bild auch nicht sagen.

ArduinoGeek

Fragesteller

28.08.2021, 00:07

doch doch das bild ist transparent, aber es lag wie ich oben bei regex9 schon gesagt habe an etwas ganz anderen :D danke für die antwort !

Hallo,

warum kann ich Eigenschaften am CSS Framework nur mit !important verändern?

Dieser Code funktioniert ohne !important nicht. Warum ist das so?

Auf !important sollte doch weitestgehend vermieden werden.

<h2>Badges</h2>
  <a class="btn badges" href="#">Kommentare <span class="badge badge-secondary">20</span></a>

.btn{ border: 2px solid #CCC !important; border-radius: 5px !important; color:#CCC !important; }

...zur Frage

Navbar verschwindet unter bildern - was kann ich dagegen tun?

Ich habe eine sticky navbar gemacht, die also immer oben angezeigt wird. Wenn man nun scrollt verschwindet die navbar aber unter die texte, bilder etc.

Wie kann man das beheben?

Habe es schon mit "z-index" versucht, das wird allerdings ignoriert.
Danke für Rückmeldungen!

...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

Warum funktioniert das Materialize-Framework nicht?

Hallo zusammen

In einigen meiner Projekte habe ich Bootstrap angewendet. Nun wollte ich aber mal was Neues ausprobieren. Auch, weil mir das Design von Bootstrap nicht so gut gefällt. Darum habe ich das Materialize-Framework entdeckt, welches mir wirklich sehr gut gefällt. Ich würds gerne anwenden. Doch immer da, wo Javascript ins Spiel kommt, funktioniert gar nichts mehr.

Als Einstieg wollte ich einfach nur eine Navbar einrichten. Dazu habe ich 1:1 alles kopiert, wies in der Dokumentation steht. Zuerst habe ich von dieser Seite das HTML-Setup übernommen und Materialize heruntergeladen.

Dann habe ich von dieser Seite die "Extended Navbar with Tabs" kopiert. So sollte sie aussehen:

Mein Quellcode sieht dann am Ende so aus:

Meine Seite sieht aber so aus:

Die Test-Div's 1-4 sollten ja nur angezeigt werden, wenn sie in der Navbar angeklickt werden. Es ist ja klar, dass sie angezeigt werden, weil sie nicht durch CSS versteckt werden. Das bedeutet wohl, dass die Dokumentation von Materialize nicht vollständig ist. Wenn ich nicht alle Infos in der Dokumentation finde, muss ich das Framework in Frage stellen und ggf. darauf verzichten.

...zur Frage

Abgerundete Ecken CSS sind abgeschnitten (Grid-Box)?

Hallo,

ich hab erst vor angefangen HTML und CSS zu lernen und bin jetzt auf folgendes Problem gestoßen:

Ich möchte eine Webseite via CSS-Grid aufteilen und die Boxen jeweils abrunden. Allerdings werden manche Ecken immer abgeschnitten und ich finde nicht den Fehler an was das liegen könnte (siehe Screenshot, ecken rot Markiert). Hier der Code den ich bis jetzt verwende:

.gridbox{
  overflow: hidden;
  width: 99%;
  height: 99%;
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: 25% 25% 25% 25%;
  grid-template-areas:
      "nav nav nav nav"
      "sidebar main main main"
      "sidebar content1 content2 content3"
      "sidebar footer footer footer";
  grid-gap: 0.4rem;
  border-radius: 1rem;
}

#nav {
  background: #a7ffeb;
  grid-area: nav;
  border-radius: 1rem;
}

#sidebar{
  background: #18ffff;
  grid-area: sidebar;
  border-radius: 1rem;
}


#main {
  background: #84ffff;
  grid-area: main;
  border-radius: 1rem;
}


#content1 {
  background: #6fffd2;
  grid-area: content1;
  border-radius: 1rem;
}


#content2 {
  background: #64ffda;
  grid-area: content2;
  border-radius: 1rem;
}


#content3 {
  background: #73ffbb;
  grid-area: content3;
  border-radius: 1rem;
}


#footer {
  background-color: #1de9b6;
  grid-area: footer;
  border-radius: 1rem;
}

Soweit ich das verstanden habe, spricht man wenn man bei border-radius: 1px 2px 2px 1px; die Ecken einzeln an und bei border-radius: 1rem; alle Ecken.

Danke für Antworten :D

...zur Frage

Wie Call-to-Action Buttons in Slider einbauen?

Hi,

ich baue seit einigen Monaten an einer Webseite mit HTML, CSS, ein wenig JavaScript (ehrlicherweise entnommen aus W3 Schools) und später auch noch etwas PHP & MySQL.

Momentan versuche ich, einen Call-to-Action Button in meinen Slider einzubinden, welcher von Banner zu Banner eine andere Verlinkung haben soll. Das funktioniert auch, allerdings werden die anderen Buttons, die nicht angezeigt werden sollen, unter den Banner gedrückt und angezeigt.

Meine Idee war es, die Banner als Hero-Image und die Buttons als Hero-Text einzupflegen. Das verursacht aber die genannten Probleme. Habt ihr Vermutungen, woran das liegen könnte oder kennt ihr einen einfacheren Weg als meinen gewählten?

Wenn es nicht anders geht, ändere ich das HTML Script auch noch einmal (Meine Website ist so wieso nicht Online.).

...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 Rounded Borders für's Bild geht in Wordpress nicht?

Moin,

ich habe ein kleines Problem und weiß mittlerweile nicht mehr weiter.

Es ist recht simpel, ich will, dass auf meiner Wordpress-Seite alle Bilder einen Border-radius von z.B. 7px haben. Allerdings kann ich in Wordpress keinen Borderradius benutzen, es wird einfach nicht angenommen oder so, die Bilder bleiben mit Ecken.

Also habe ich mal eine normale .html Seite erstellt und auf dieser funktioniert es einwandtfrei.

Hier der Code, auf der HTML seite

<img class="rounded-corner" src="https://dummyimage.com/wuxga" width="600px;"/>
<style>
.rounded-corner { 
  border-radius: 7px;
}
</style>

(Das Bild habe ich durch ein Beispielbild ersetzt)

Eben diesen Code habe ich in Wordpress dann auch mal auf die Seite eingefügt, allerdings bleiben die Bilder mit ecken. Ich habe auch über das <img> ein div gelegt mit einer class (dachte das hilft vllt), aber es ging auch nicht.

Ich benutze bei Wordpress den Editor "Elementor" also nicht den Standard Editor von Wordpress selbst. Man kann bei Elementor zwar Bilder manuell round machen an den Ecken, aber ich würde gerne einen Code haben, der dies "Sitewide" macht.

Wenn jemand eine Idee hat, gerne melden ;)

Vielen Dank!

...zur Frage

Navbar in Css und Html drehen?

Ich möchte die Navigationsleiste drehen, damit sie wie auf diesem Bild aussieht. Der Titel „SafenSound“ sollte in der oberen linken Ecke sein, die „Künstler“ sollten in der oberen rechten Ecke um 90 Grad gedreht sein, die „Info“ sollte in der unteren linken Ecke um -90 Grad gedreht sein und die „Tickets“ sollten wieder normal in der unteren rechten Ecke sein. Und ich möchte auch, dass die Navigationsleiste fixiert wird, damit die Navigationsleiste beim Scrollen immer noch da ist

Derzeit sieht mein CSS so aus:

.StartseiteNav{

position:fixed;

}

.ArtistsNav{

position:fixed;

display:block;

width: 60px;

transform: rotate(90deg);

}

.InfoNav{

position:fixed;

display:block;

width: 60px;

transform: rotate(-90deg);

}

.TicketsNav{

position:fixed;

}

...zur Frage

Mit html und css durch einen button Hintergrundfarbe ändern?

Hallo,

ich mache gerade eine Website und möchte da einen Knopf, mit dem ich die Hintergrundfarbe und die Schriftfarbe der Website ändern kann. Ich habe bereits einen Button designet, weiß aber nicht, wie ich mit ihm Befehle ausführen kann.

Vielen Dank schonmal im voraus!

Hier ist der html-text für den Button:

<main>

<button class="bonbon orange">hier drücken zum ändern der Hintergrundfarbe</buton>

</main>

und hier ist der css-text für den Button:

main{

background: white

}

.bonbon{

width.: 250px;

height: 60px;

backgorund: orange;

/* old browsers */

background: linear-gradient(to bottom, white, orange);

box-shadow: inset 0px 0px 6px #fff, inset 0px -1px 6px #fff;

border: 1px solid #5ea617;

border-radius: 1em;

marign: 1em

}

.bonbon:hover{

box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);

}

.bonbon:focus {

box-shadow: rgba(0, 0, 0, 0.7) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 20px

}

...zur Frage

HTML gradient in nav bar?

Hallo, ich versuche vergebens eine nav bar zu bauen, welche durch hovern einen gradient freigibt, nicht hinter jedem linkblock soll ein gradient sein, sondern ein 'grosser' hinter allen zsm. Mein ansatz ist bis jetzt dies:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>G&M Barber</title>
  </head>
  <body>
   
        <ul>
            <li><a href="barber.html">Home</a></li>
            <li><a href="barber.html">News</a></li>
            <li><a href="barber.html">Contact</a></li>
            <li><a href="barber.html">About</a></li>
            
        </ul> 
    
</body>
</html>

css:

body {
    background-color: black;
  }
  
  ul {
  background: linear-gradient(90deg, rgba(0, 3, 36, 1) 0%, rgba(121, 9, 118, 1) 47%, rgba(56, 134, 188, 1) 100%);    border-radius: 12px;
    overflow: hidden;
    display: table;
    margin: 0 auto;
    padding: 0;
  }
  
  li {
    display: inline-block;
  }
  
  li a {
    display: block;
    color: rgb(255, 255, 255);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    background: black;
  }
  
  li a:hover {
    background: transparent;
  }

jedoch sind die Abstände zwischen den li 'boxen' auch gefärbt, wie ändere ich das, oder wie gehe ich das schlauer an?

Vielen Dank schon mal

...zur Frage

Html/CSS/Javascript Website Bild wird nicht angezeigt?

Hi, will dass das erste Bild direkt angezeigt wird und das der Beispieltext rechts steht. Wegen Zeichen kurz gehalten. Danke!

<div class="mySlides" id="expandedImg">
<img src="bilder/schuh.jpg" style="width:35%">
</div>
<div class="mySlides">
<img src="bilder/schönschuh.jpg" style="width:35%">
</div>
<div class="mySlides">
<img src="bilder/mann.jpg" style="width:35%">
</div>
<div class="mySlides">
<img src="bilder/lederschuh.jpg" style="width:35%">
</div>
<div class="mySlides">
<img src="bilder/basketball.jpg" style="width:35%">
</div>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="row">
<div class="column">
<img class="demo cursor" src="bilder/schuh.jpg" style="width:90%" onclick="currentSlide(1)" alt=""></div>
<div class="column">
<img class="demo cursor" src="bilder/schönschuh.jpg" style="width:90%" onclick="currentSlide(2)" alt="">
</div>
<div class="column">
<img class="demo cursor" src="bilder/mann.jpg" style="width:90%" onclick="currentSlide(3)" alt="">
</div>
<div class="column">
<img class="demo cursor" src="bilder/lederschuh.jpg" style="width:90%" onclick="currentSlide(4)" alt="">
</div>
<div class="column">
<img class="demo cursor" src="bilder/basketball.jpg" style="width:90%" onclick="currentSlide(5)" alt="">
</div>
</div>
</div> 
<div class="text">
<a>Beispieltext</a>
<p>Beispieltext...</p>
</div>
* {box-sizing: border-box;}
.container {
position: relative;
margin-top: 80px;
}
.mySlides {
display: none;
margin-bottom: -45px;
margin-top: 65px;
margin-left: 10px;}
.cursor {cursor: pointer;}
.prev,
.next {
cursor: pointer;
position: absolute;
top: 300px;
width: auto;
padding: 16px;
color: rgb(0, 0, 0);
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;}
.next {
right: 0;border-radius: 3px 0 0 3px;} 
.prev:hover,
.next:hover {background-color: rgba(211, 211, 211, 0.8);}
.caption-container {text-align: center; background-color: rgb(255, 255, 255);color: white;}
.row:after {content: ""; display: table; clear: both;}
.column {float: left; width: 7%;}    
.demo {opacity: 0.6;}
.active,
.demo:hover {opacity: 1;}
.row {margin-top: 65px; margin-left: 10px;}
.text {display: flex; justify-content: flex-end; width: 40%;}
var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
showSlides(slideIndex += n);
}

function currentSlide(n) {
showSlides(slideIndex = n);}

function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;}

...zur Frage

Border-Radius in Tabellen ohne CSS?

Hi zusammen,

die Frage ist mir zwar etwas peinlich, aber ich bekomme es nicht gelöst und brauche mal eure Hilfe.

Weiß jemand wir man die Ecken einer Tabelle abgerundet bekommt, ohne dafür css zu verwenden?

Ich habe nämlich folgendes Problem:

Ich versuche, ein neues Email-Template zu bauen. Leider werden je nach E-Mailprogramm einige CSS Befehle nicht erkannt (Outlook). Da ich nicht mit Bildern arbeiten möchte, suche ich hierzu eine „reine HTML-Lösung“.

oder:

Wenn jemand, weiß wie man Outlook dazu bringen kann auf Border-Radius (css) zu reagieren, nehme ich auch gerne jeden anderen Vorschlag an ^^

Lieben Dank schon mal 😊

<table class="emailTable">
    <tr class="firstTR">
        <td>1</td>
        <td>2</td>
     </tr>
</table>

...zur Frage

CSS rollender Ball mit Bild?

Guten Tag,

ich habe in CSS einen rollenden Ball programmiert. Dieser rollt auch ist aber unsichtbar obwohl ich ein background: url gesetzt habe.

.circle {
    display: block;
    width: 100px;
    height: 100px;
    background: url("logo.png");
    border-radius: 50%;
   
    -webkit-animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
    -moz-animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
    -ms-animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
    animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
    
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    
    position: absolute;
    left: 0;
  }

Das Bild gibt es und die Rotation auch, ist aber nicht wichtig.

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen