1 Antwort

Sortiert nach:

Antwort von

Antwort

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

0

niggo123999

Fragesteller

04.04.2014, 18:27

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

0

Absenden

Google Chrome verschluckt CSS-Anweisungen?

Hallo, ich arbeite seid einiger Zeit an einer Seite. Ich habe nun das Google Chrom die CSS-Datei zwar "erkennt" aber nicht ALLES RICHTIG darstellt. Im Firefox und IE wird alles ganz normal angezeigt. Aber im Chrome nicht. Egal wie ich "Width" und "height" von einer Divbox ändere , es bleibt genau gleich.

Vllt kann mir jemand helfen. Mfg

findo1

...zur Frage

HTML Division stretched?

Guten Abend,

ich habe eine Division festgelegt mit festen Höhen -und Breitenwerten. Wenn ich die HTML Datei öffne, wird allerdings die box über die ganze Breite des Browsers gestretched. Ausgeführt wurde der Code in Chrome.

Der CSS Code sieht Folgendermaßen aus:

div{
 background-color: grey;
 widht: 100px;
 height: 100px;
 padding: 50px;
 margin: 50px;
 border: 20px solid black;
}

Zusammengefasst:

Warum wird die Division gestretched, obwohl feste Werte festgelegt wurden?

Viele

n Dank im Voraus

...zur Frage

Wieso wird die Hintergrund Farbe bei meinem html/css Code nicht angezeigt?

Mein Skript:

<html>

<head>

<title>Abnehmen mit Ketogener-Diät | Home</title>

</head>

<body>

<div id="outerBody" style="width:1000px;height:768px;backround-color:silver;margin:0 Auto;">Hallo</div>

</body>

</html>

Hintergrund bleibt weiß-.-??

...zur Frage

CSS & Html: Fließtext verschwindet unter Footerbereich, der absolut positioniert wurde?

Ja,

das mit dem Footer der ganz unten stehen soll hat geklappt, leider mit der Nebenwirkung dass aus einer Unterseite meiner Website der Fließtext der die ganze Seite ausfüllt, jetzt teilweise unter den Footer rutscht.

Scrollen kann man auch nicht nach unten. Wo liegt der Fehler? Soll ich das Margin-Bottom: 0px; wieder entfernen? Ansonsten habe ich html, body width und height auf 100% gestellt.

...zur Frage

HTML / CSS Problem Drop-Down Menü verschiebt sich beim ranzoomen nach rechts?

HiLeute, bin gerade dabei eine Homepage für einen Sportclub in meiner nähe zu erstellen, bis jetzt funktioniert alles einwandfrei nur mein Drop-Down Menü verschiebt sich beim "ranzoomen" in den rechten bereich während alles andere in der mitte ( center ) bleibt. Ich bedanke mich schon mal für jede Antwort.

Style.css Quellentext :

@charset "utf-8"; /* CSS Document */

body { background:#222; font-family:Helvetica, sans-serif;}

nav { position:absolute; top:200px;}

nav ul { margin:0; height:40px; width:auto; float:center; box-shadow:0px 0px 32px 0px #111; border-radius:10px; padding:0; border-top:1px solid #444; border-bottom:1px solid #222;} nav ul li { position:relative; padding:10px; float:left; list-style:none; color:#999; background:#333; width:120px; text-align:center; border-right:1px solid #444; transition:all 800ms;} nav ul li:hover { background:#0C6; color:#fff;} nav ul li:last-child { border-radius:0 10px 10px 0;} nav ul li:first-child { border-radius:10px 0 0 10px;}

nav ul li:hover ul { height:auto; opacity:1;} nav ul li ul { position:absolute; top:45px; left:0; transition:all 800ms; opacity:0; overflow:hidden; height:0;} nav ul li ul li:last-child { border-radius:0 0 10px 10px;} nav ul li ul li { width:170px; text-align:left;} nav ul li ul li:first-child { border-radius:10px 10px 0 0;}

...zur Frage

jQuery toggle() verschwindet und taucht direkt danach wieder auf?

Guten Tag ich habe falgendes Problem und zwar möchte ich kein Login form einblenden lassen wenn man auf den Button klick, nur habe ich das problem das wenn ich auf den Button klick das es auftaucht und dannach direkt ohne irgendwas gemacht zu haben verschwindet.

Code jQuery:

$(document).ready(function(){
      $(".loginbutton").click(function(){
          $(".loginbox").toggle();
      });
    });

Code Html:

div class="loginbox">
      Hier kannst du dich Anmelden
    </div>

Code CSS:

.loginbox{
  z-index: -1;
  margin: 75 20;
  float: right;
  height: 200px;
  width: 300px;
  background-color: #27804A;
}

bin echt am verzweifeln warum das so ist hier ein kleines beispiel wo es funktioniert. http://jsfiddle.net/ouhmr7L9/

...zur Frage

WILKOMMEN

             </body>

DANKE IM VORRAUS

...zur Frage

Wie mache ich das nebeneinander?

Hi, möchte eine Spoilerbox machen und daneben ein Bild, aber wenn ich diese Spoilerbox aufmache, verschiebt sich das Bild automatisch nach unten, wie verhindere ich das ?

HTML:

<input type="checkbox" id="spoiler7" />
	<label for="spoiler7" >Über uns!</label>
	<div class="spoiler6"></div>

CSS:

input[id^="spoiler7"]{
 display: none;
}
input[id^="spoiler7"] + label {
	height: 60px;
	position: relative;
	right: 27.5%;
	padding-top: 10px;
	font-family: Arial;
 width: 15%;
	top: 4%;
 margin: 0 auto;
 padding: 5px 20px;
 background: #5e5e5e;
 color: #fff;
 font-size: 24px;
 border-radius: 8px;
 cursor: pointer;
 transition: all .6s;
}
input[id^="spoiler7"]:checked + label {
 color: #333;
 background: #ccc;
}
input[id^="spoiler7"] ~ .spoiler6 {
 width: 27%;
	font-family: Arial;
	color: #484848;
	position: relative;
	right: 27.5%;
	top: 4%;
	text-align: center;
 height: 0;
 opacity: 0;
 margin: 10px auto 0;
 padding: 10px;
 background: #eee;
 border: 1px solid #ccc;
 border-radius: 8px;
 transition: all .6s;
}
input[id^="spoiler7"]:checked + label + .spoiler6{
 height: auto;
 opacity: 1;
 padding: 10px;
}

Jetzt das Bild was da rechts nebendran soll:

HTML:

	<div id="Picture">
		<img src="bilder/10.png" width="400px"height="400px" alt="" />
	</div>

Und CSS:

#Picture {
	margin-left: 70%;
	display: inline;
	position: relative;
}

Ich hoffe ihr könnt mir helfen!

Ich bedanke mich im Voraus!

...zur Frage

HTML-Code: massiver Fehler?

Guten Abend,

ich habe ein kleines Problem mit dem ESP8266. Mein Programm bleib, bei einem direktem Unterbruch der Internetverbindung, immer bei diesem HTML-Code stecken. Wollte nun mal fragen ob hier etwas Massives falsch ist.

Bei normaler Internetverbindung enstehen keine Probleme, nur beim Unterbruch, und dies führt dazu, dass mein ESP in der Schlaufe stecken bleibt, sodass es die Zeilen nicht mehr senden kann. (immer an diesem Punkt)

<style>
  .ball {
    display: inline-block;
    width: 100%;
    height: 100%;
    margin: ;
    top: 0%;
    left: -5%;
    border-radius: 50%;
    position: absolute;
    background: radial-gradient(circle at 100% 0%, #81e8f6, #76deef 10%, #055194 80%, #062745 100%); //blue
  }

</style>

<style>
  .ball:before {
    content: ;
    position: absolute;
    top: 1%;
    left: 0%;
    width: 90%;
    height: 90%;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 0px, #ffffff, rgba(255, 255, 255, 0) 58%);
    -webkit-filter: blur(5px);
    z-index: 2;
  }

</style>

<style>
  .stage {
    width: 200px;
    height: 200px;
    display: inline-block;
    margin: 20px;
    -webkit-perspective: 1200px;
    -moz-perspective: 1200px;
    -ms-perspective: 1200px;
    -o-perspective: 1200px;
    perspective: 1200px;
    -webkit-perspective-origin: 50% 50%;
    -moz-perspective-origin: 50% 50%;
    -ms-perspective-origin: 50% 50%;
    -o-perspective-origin: 50% 50%;
    perspective-origin: 50% 50%;
  }

</style>

<section class=stage>
 <figure class=ball><span class=shadow></span></figure>
</section>

...zur Frage

Wie kann ich es mach das der Text durchsichtig ist?

Es soll nicht

color: transparent;

sein sondern so, das der Hintergrund gezeigt wird

Quellcode:

<!DOCTYPE html>
<html lang="de">
    
<head>
    
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">    
<link type="text/css" rel="stylesheet" href="GradientTutorialStyle.css">
    
</head>
    
<body>
    <a class="transbtn" id="transbtn1">Download</a>
</body>
    
</html>

CSS:

body {
background: linear-gradient(90deg, #ff0000, #ba00ff, #0005ff);
background-size: 600% 600%;
    animation: Farbverlauf 30s ease infinite;}

@keyframes Farbverlauf { 
    0%{background-position:100% 0%}
    50%{background-position:0% 100%}
    100%{background-position:100% 0%}
}
.transbtn {
    color: white;
    border: 2px solid;
    border-radius: 10px;
    padding: 15px;
    text-transform: uppercase;
    font-family: sans-serif;
    text-decoration: none;    
    display: block;
    text-align: center;
    width: 6rem;
    margin: 0 auto;    
}
.transbtn:hover {
    background-color: white;
}

Danke im Vorraus

...zur Frage

CSS: Zwei Bilder nebeneinander zentrieren?

Hallo ich habe eine Seite gebastelt möchte zwei Bilder nebeneinder zentriert anordnen. Wie mache ich das?

Code html

<footer>
<img class = "social" src="facebook.png">
<img class = "social" src="twitter.png">
</footer>

Css

img.social {
float: middle;
display: block;
margin: auto;
width: 5%;
height: 5%;
}

...zur Frage

Wie kann ich mit HTML/ CSS DIV Tags bündig an den Rand anpassen?

Ich habe folgendes Problem mit Html/Css. Ich möchte gerne einen div tag auf einer Website ganz oben ansiedeln. Das einzige Problem was ich dabei habe ist, dass ich es nicht bündig hinbekomme. Zwar schließen die Div Tags untereinander bündig ab, aber jeweils am Rand der Website bleibt ein Spalt über. Mit Margin & Padding klappt es leider auch nicht. Ein Beispiel Quelltext habe ich hier:

<head>
<style type="text/css">
#do {
background-color:grey;
height: 50%;
margin:0px;
padding:0px;
border:none;
}
#di {
background-color:red;
height: 50%;
margin:0px;
padding:0px;
border:none;
}
</style>
</head>
<body>
<div id="do">
Hallo
</div>
<div id="di">
Hallo
</div>
</body>

PS: Das ist nur ein Beispiel, welches mein Problem verdeutlichen soll. Ich hoffe ihr könnt mir helfen.

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

Wie platziert man zwei Objekte nebeneinander, die demselben <div> entspringen?

Hallo,

wie platziert man zwei Objekte nebeneinander, die demselben <div> entspringen? Die sind aktuell untereinander.

HTML:

<div class="container">
  <img src="weihnachtsbilder-engel.jpg" class="image">
  <div class="overlay">
    <div class="text"> Lorem </div>
  </div>
</div>
<div class="container">
  <img src="Fensterdeko.jpg" class="image">
  <div class="overlay">
    <div class="text"> Lorem </div>
  </div>
</div>

CSS:

.container {
  position: relative;
  width: 40%;
}

.overlay {
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 75;
  right: 0;
  height: 100%;
  width: 50%;
  opacity: 0;
  transition: .9s ease;
  background-color: #333;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.image {
  margin-left: 75px;
  margin-top: 30px;
  display: block;
  width: 50%;
  height: auto;
  opacity: 0.75
}

.container:hover .overlay {
  opacity: 0.5;
}

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

Abstand zwischen zwei Tabellen über HTML/CSS?

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

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

Was möchtest Du wissen?

Deine Frage stellen

[HTML] Chrome zeigt Hintergrundbild nicht an, IE schon

1 Antwort

Ähnliche Fragen

Google Chrome verschluckt CSS-Anweisungen?

HTML Division stretched?

Wieso wird die Hintergrund Farbe bei meinem html/css Code nicht angezeigt?

CSS & Html: Fließtext verschwindet unter Footerbereich, der absolut positioniert wurde?

HTML / CSS Problem Drop-Down Menü verschiebt sich beim ranzoomen nach rechts?

jQuery toggle() verschwindet und taucht direkt danach wieder auf?

content {

WILKOMMEN