[HTML] Chrome zeigt Hintergrundbild nicht an, IE schon

Hallo Leuts!

Ich habe einen Div mit einem Mülleimer als Hintergrund Bild, alles schön und gut, aber im Chrome zeigt er mir ihn nicht an, also da ist kein Bild. Im Internet Explorer schon. Weiß einer eine Lösung??? o_O

Hier mal der CSS Coder:

.newsdeletebutton {
position: relative;
margin-top:105px;
left:310px;
position:relative;
height:25px;
width:25px;
border:none;
color:rgba(255,255,255,0);
background-image: url(images/mülleimerzu.png);
background-repeat: no-repeat;
background-color:rgba(255,255,255,0);
cursor:pointer;
}

1 Antwort

qwdfgosmd

Topnutzer im Thema HTML

04.04.2014, 18:07

möglicherweise liegt es am folgenden background-color:rgba das der IE wegen dem Alpha-Wert nicht versteht und deshalb ignoriert. Chrome allerdings kennt diese Eigenschaft und legt die Hintergrundfarbe auf das Bild.

2 Kommentare 2

niggo123999

Fragesteller

04.04.2014, 18:22

Wenn ich das Weglasse, kommt auf einmal ein Grauer Hintergrund auf dem Button. Ist das Normal? Ich glaube das ist die Farbe die ich auch für den Mülleimer verwendet habe. Ich weiß nicht. Auf jeden Fall ist da ein grauer hintergrund

niggo123999

Fragesteller

04.04.2014, 18:27

und im Inet Explorer ist dann der Mülleimer PLUS dem grauen Hintergrund

Hallo Leute.

Ich arbeite gerade an einer Webseite und ich verstehe nicht, warum meine Kolonnen nicht reagieren und 100% annehmen.

Das ist mein Code:

@media (max-width: 600px;) {
  [class="col-"] {
    width: 100%;
  }
}

Vielleicht liegt es am Container?

.container {
  height: 100vh;
  margin-left: 5vw;
  margin-right: 5vw;
  background-color: #f1f1f1;
}

Vielen Dank für jede Antwort!

...zur Frage

CSS background gif UND background color?

Halloo, Eine Frage zu CSS, wie man im Titel schon erkennen kann :)

Undzwar habe ich folgendes Programm geschrieben:

html, body {
 margin: 0;
 padding: 0;
}

.hintergrund {
 background: url(bla.gif) no-repeat center center;
 background-size: cover;
 height: 350px;
 text-align: center;
}

So, mein Wunsch wäre es unter dem Gif noch die Hintergrundfarbe zu ändern.. Weiß jmd wie das funktioniert?

...zur Frage

Word VBA, beforePrint?

EDIT: bereits kurz nach Fragestellung selbst gelöst mit cancel =true nach Print background.... Verzeihung, war in der Arbeit und konnte erst jetzt eure Antworten sehen. Trotzdem vielen Dank!

Hallo zusammen.

Ich würde gerne einen commandButton kurz vor dem Drucken verkleinern und nach dem Drucken wieder groß anzeigen. Leider wird das Dokument zweimal ausgedruckt.

es soll beim normalen drucken passieren.

der befehl für das Druck event:

Private Sub appWord_DocumentBeforePrint _
 (ByVal Doc As Document, _
 Cancel As Boolean)
CommandButton1.Height = 0.75
CommandButton1.Width = 0.75
CommandButton2.Height = 0.75 CommandButton2.Width = 0.75


ActiveDocument.PrintOut Background:=False


CommandButton1.Height = 24 CommandButton1.Width = 100 CommandButton1.PicturePosition = fmPicturePositionRightTop

CommandButton2.Height = 24
CommandButton2.Width = 461
  End Sub

Das intializieren

Private Sub Document_New()
Set appWord = Word.Application
End Sub
' Private Sub Document_Open() Set appWord = Word.Application

End Sub

...zur Frage

Wie kann man in HTML einen Wrapper erstellen?

Das ist meine Menüleiste:

* {
  padding: 0px;
  margin: 0px;
}

#menu {
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  height: 40px;
  width:100% - 36px;
  background: #2d2d2d;
  padding-top: 2px;
  padding-left: 36px;
}

#menu ul li {
  list-style: none;
  color: #bbbbbb;
  font-size: 10pt;
  font-family: Arial;
  line-height: 27px;
  padding: 0 8px;
  display: inline;
  font-weight: bold;
}

#menu ul li:hover {
  color: #fff;
}

Darunter soll der Wrapper kommen.

...zur Frage

Wie kann ich das Rutschen des DIV-Containers verhindern?

Hallo, wie auf dem Foto (schlecht, rechts unten) zu erkennen möchte ich 3 DIV-Container nebeneinander platzieren.Dazu habe ich alle drei in ein großen Container gesteckt. Jedoch "rutscht" das rechte DIV immer nach unten ohne dass ich es möchte oder weiß wieso es das tut...Ich hoffe es kann mir hier geholfen werden!

CSS:

#body {
    background-color: aqua;
    width: 100%;
    height: 100%;
}


#mitte {
    height: inherit;
    max-width: 60%;
    background-color: aliceblue;
}


#links {
    width: 15%;
    height: inherit;
    float: left;
    background-color: brown;
}


#rechts {
    width: 15%;
    height: inherit;
    float: right;
    background-color: blueviolet;
}

Da HTML hier Probleme mit den < und > hat, davon ein Bild im Anhang...

Danke im voraus, Thomas

...zur Frage

CSS Animation vor Redirect?

Hallo, ich hatte schonmal so eine ähnliche Frage gestellt aber bekomme es einfach nicht hin. Nun hab ich eine kleine Testumgebung gebaut, in der ich folgendes möchte:

Die Eingangsanimation spielt sich automatisch ab wenn die Seite geladen ist. Klicke ich auf den Go-Button in der Mitte (Später sollte das bei jedem Button passieren der eine bestimmte Klasse hat) dann soll der Klasse "intro" die Klasse "animation_out" hinzugefügt werden. Nach einer bestimmten Zeit (Am besten händisch per Ms änderbar) soll dann erst der Redirect erfolgen.

Gibt es da eine EINFACHE Lösung für Anfänger wie mich?

XXXXXXXX_____HTML_____XXXXXXXX

XXXXXXXX_____CSS_____XXXXXXXX

body{
margin: 0;
padding: 0;
}

.intro{
width: 100%;
height: 100vh;
position: fixed;
z-index: 9999;
padding: 0;
background-color: #000;
overflow: hidden;
pointer-events: none;
-webkit-animation: animation_in 1s 1; /* Safari 4.0 - 8.0 /
animation: animation_in 1s 1;
animation-fill-mode: forwards;
}

@keyframes animation_in {
0% {height: 100%;}
100% {height: 20px;}
}

.animation_out{
-webkit-animation: animation_out 1s 1; /* Safari 4.0 - 8.0 /
animation: redirectanimationout 1s 1;
}

@keyframes redirectanimationout {
0% {height: 20px;}
100% {height: 100%;}
}

.testbutton{
position: absolute;
background-color: #000;
color: #fff;
width: 50px;
padding: 5px 0;
text-align: center;
float: 0 auto;
margin-top: 50vh;
margin-left: calc(50% - 25px);
}

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

HTML: Warum werden Bilder manchmal nicht angezeigt?

Auf meiner lokalen Website, von einer Datei auf meinen PC, werden Bilder bei Neuladen der Seite manchmal nicht mehr angezeigt oder einfach an falscher Position/Größe, usw..

So sollte es aussehen:

Und so sieht es z.B. manchmal aus:

Wie es bei einigen anderen Bilder auch manchmal aussieht:

Hier ist ein Teil des HTML-Codes:

<div class = "GPU1">
  <h1 class = "GPU1Name">AMD Radeon RX 570</h1>
  <h2 class = "GPU1Price">140€-160€</h2>
  <button class = "GPU1Button" onclick="GPU1()" type="button">
    Leistung
  </button>
  <img class = "GPU1Pic" src="Website Bilder\GPU's\AMD Radeon RX 570.jpg" height="95px" width="150px">
</div>

Und hier von CSS:

.GPU1 {
  background-color: #595959;
  border: 2.5px black solid;
  margin-left: -1000px;
  margin-right: 10px;
  transform: translateY(-125%);
  height: 10%;
  width: 500px;
  height: 250px;
  display: flex;
}
                  
.GPU1Pic {
  margin-top: 130px;
  transform: translateX(-340%);
}

.GPU1Name {
  font-size: 25pt;
  color: white;
  text-shadow: 0px 5px 2px black;
  margin-bottom: 150px;
  padding: 2px;
  transform: translateX(+46%);
  align-self: center;
  white-space: nowrap;
}

.GPU1Price {
  font-size: 25pt;
  color: white;
  text-shadow: 0px 5px 2px black;
  margin-top: 200px;
  transform: translateX(-80%);
}

.GPU1Button {
  margin-top: 200px;
  margin-bottom: 20px;
  transform: translateX(-60%);
  border: 0.5px black solid;
  box-shadow: 0px 5px 2px black;
  background-color: gray;
  color: white;
  cursor: pointer;
}

...zur Frage

CSS: Element wird nicht zentriert?

Hallo,

ich bin zurzeit an einem Dropdown-Menü dran. Am Schluss sollte es so aussehen: https://dreamproduction.com/ (so wie das mobile Menü).

Jetzt habe ich noch drei Probleme:

Mein Text viel ist zentriert (center).
Die zwei Sprachbuttons sind untereinander und nicht nebeneinander.
Es gibt keine Öffnungsanimation.

Code mit Media Query:

header nav {
  margin: 0;
  float: none;
}

header nav ul {
  height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 100%;
}

header nav ul li {
  display: grid;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 5px 0;
  margin: 0;
  /*font-size: 11px;*/
  /*border-top: 1px solid #dddddd;*/
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}

header nav ul li a {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}

header nav ul li:hover {
  background-color: #eeeeee;
}

header nav ul.open {
  height: 100vh;
}

.ion-md-arrow-dropdown {
  display: none;
}

.nav-links li:hover>.sub-menu {
  all: unset;
}

.sub-menu {
  all: unset;
}

.sub-menu::before {
  all: unset;
}

.sub-menu-li {
  margin: 0;
  padding: 0;
  width: 20px;
}

.enb:hover {
  padding-top: 5px;
}

.typed-cursor {
  display: none;
}

So sieht es zurzeit aus:

Ich hoffe, jemand kann mir helfen.

Viele Grüße

HKM17

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

Wieso wird der CSS-Text nicht erkannt?

Hier meine HTML und CSS Datei:

body {
  background-image: url(images/background.jpg);
  background-size: 100%
}

.header {
  width: 100%;
  height: 80px;
  display: block;
  background-color: #101010;
}

.inner_header {
  width: 1000px;
  height: 100%;
  display: block;
  margin: 0 auto;
  background-color: red;
}

.logo_container {
  height: 100%;
  display: table;
  float: left;
}

.logo_container h1 {
  color: white;
  height: 100%;
  display:table-cell;
  vertical-align: middle;
  font-family: 'Montserrat';
  font-size: 32px;
{

.navigation {
  float: right;
  height: 100%;
}

.navigation a:last-child {
  padding-right: 0;
}

.navigation a li {
  display: table-cell;
  vertical-align: middle;
  font-size: 16px;
  color: white;
  font-family: 'Montserrat';
  height: 100%
}

Jetzt die HTML-Datei:

<html>
  <head>
    <link rel="stylesheet" type"text/css" href="style.css">
  </head>
  <body>
    <div class="header">
      <div class="inner_header">
        <div class="logo_container">
          <h1><span>FERRARI</span></h1>
        </div>
        <ul class="navigation">
          <a><li>Home</li></a>
          <a><li>About</li></a>
          <a><li>Store</li></a>
          <a><li>Cars</li></a>
        </ul>
      </div>
    </div>
  </body>                                                                                                         </html>

Mein Problem ist nun, dass:

.navigation {
  float: right;
  height: 100%;
}

nicht erkannt wird. Das heißt, im Editor verfärbt er sich nicht und der Abschnitt hat keine Auswirkung auf die Webseite. Was habe ich denn nun falsch gemacht?

...zur Frage

Html / Css Text auf Header bzw. Div-Container Text über Hintergrund?

CSS formatiert die Schrift so, dass immer der ganze Querbalken über dem Hintergrund nicht transparent ist. Wie mache ich das? ** Siehe Grafiken **

h1 { font-family: arial, verdana, helvetica; font-size: 40px; font-weight: 200; }

header { position: relative; height: 200px; display: block; background-color: black;

} nav { width: 500px; height: 200px; background-color: aqua; }

...zur Frage

Wie kann ich ein HTML Bild mittig ausrichten ohne Größenänderung?

ich habe es folgendermaßen probiert:

<style type="text/css">
<!--
img.center {
position: absolute;
left: 50%;
width: 400px;
margin-left: -200px; /* negative Hälfte von width:400px */
top: 50%;
height: 150px;
margin-top: -75px; /* negative Hälfte von height:150px */
}
-->
</style>
 
</head>
<body>
 
     <img class="img.center" src="/img/meinbild.jpg">
 
</body>
</html>

jedoch wird das bild damit leider gestaucht. das bild soll aber immer im mittelpunkt des bildes zentriert werden und seine länge-breite-proportion behalten - also keine eierköpfe bekommen. die größe des bildes soll mit der größe des fensters mitwachsen...

...zur Frage

CSS Scroll-Parallax mit background-position?

Ich habe ein reiner Parallax-Effekt mittels CSS der auch genauso funktioniert wie er soll. Hierbei handelt es sich um ein einziges DIV mit Hintergrundbild:

<div id="h123_3" class="container-fluid parallax" style="height: 40vh; background-image: url(/bilder/bild1.jpg);"><a href="#h123_3" class="imageOpener btn btn-light btn-sm">Vergrößern</a></div>

Das CSS:

.parallax {
  background-attachment: fixed;
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: inset 0px 0px 30px #444;
  position: relative;
  transition: all 0.5s ease;
}

Einzigstes Problem: Durch background attachment: fixed wird das Bild ja relativ zum Viewport, also an der oberste Bildkante, fixiert. Gibt es ein Trick/Workaround in dem ich es schaffe, dass background-position: bottom trotzdem funktioniert ohne den Parallax-Effekt (durch fixed) zu verlieren? Auch JS würde ich gerne weitgehenst verzichten.

Edit: Hab mich etwas falsch ausgedrückt. Ja background-position funktioniert. Nur das Parallax-DIV sitzt beim Laden der Seite am oberen Bildschirmrand. Dadurch wird trotzdem nur der größteil obere Bildausschnitt angezeigt.

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen