Warum funktioniert der Code zum Farbe ändern der DIV Box mit javascript nicht (siehe Beschreibung)?

4 Antworten

Bei Javascript sieht man nicht häufig in Eigenschaften Bindestriche.

backgroundColor würde ich sagen, ist besser.

Im oberen Teil des Codes setzt du die Hintergrundfarbe mit CSS. Das ist etwas anderes.

Statt
.style.backgroundColor= kannst du auch schreiben
.setAttribute("style", "background-color: ...)

document.getElementById('box'); 

Du selektierst die Box nach der Id, aber in der CSS ist .box die Klasse angegeben. Versuche es mit #box in der CSS.

An deiner Stelle würde ich den Mouseover Effekt mit der PseudoKlasse :hover versuchen. 

.box:hover{
background-color:blue;
}

<div style="background-color:#ff0000">

Content läuft über den Rahmen hinaus! Was tun?

Also, hier ist das Problem: http://thedailyfall.org/wordpress_EN/ Der Content läuft total über das eigentliche Textfeld raus! Wie kann ich das beheben? Hier ist der Code:

content {

float: right;

width: 380px;

margin-bottom: 10px;

margin-right: 265px;

background-color: transparent;}

contentbottom {

position: fixed;

width: 644px; height:61px;

background-image: url(images/content/content_02.png);

background-color: transparent; }

/* Content Text */

.content{

color: #8f8f8f;

font-size:11px;

font-family: Tahoma;

line-height:12px;

background-color: transparent;

background-image: url(images/content/content_02.png);

letter-spacing:0;

text-align: justify;

padding: 16px;

width: 612px; font-weight:normal;

max-width: 612px;
}

...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 Website für alle Bildschrimgrößen anpassen?

Guten Tag.

Ich habe ein Problem bei der HTML programmierung, für ein Projekt, dass ich für meine Schule mache.

Ich habe soweit die HTML Website fertig, jedoch muss ich diese noch an alle Bildschrimgrößen anpassen. (siehe Bilder wie es z.B. auf Smartphone Größe aussieht)

Ich kopiere euch mal den Style Bereich, für die verschiedenen DIV Bereiche, rein, ich schätze mal man muss dort Sachen verändern damit es sich anpasst.

Danke im Vorraus.

Links

{

width:15%;
height:50%;
float:left;



}

Links a

{

font-size:20px;
line-height:150%;
font-family: 'Oswald', sans-serif;
color:black;


}

Banner

{

width:15%;
height:50%;
float:right;



}

Banner a

{

font-size:20px;
line-height:150%;
font-family: 'Oswald', sans-serif;
color:white;


}

Links p

{

font-size:25px;
line-height:100%;
color:black;
font-family: 'Oswald', sans-serif;


}

center

{
font-family: 'Oswald', sans-serif;
height:25%;



}

center p

{
color:black;

font-size:22px;

}

center h1

{
color:black;
font-family: 'Oswald', sans-serif;
}

Tabelle

{

height:25%;


}

Tabelle iframe

{
align:center;   
}

Giveaway1

{
width:30%;
height:49%;
float:left;

    }

Giveaway1 a

{

font-size:20px;
line-height:150%;
font-family:Arial Black;


}

Giveaway1 p

{

font-size:22px;
line-height:150%;
font-family:Arial Black;
color:white;

}

Giveaway1 h2

{


color:white;

}

Giveaway2

{
width:30%;
height:49%;
float:right;

}

Giveaway2 a

{

font-size:20px;
line-height:150%;
font-family:Arial Black;


}

Giveaway2 p

{

font-size:22px;
line-height:150%;
font-family:Arial Black;
color:white;

}

Giveaway2 h2

{


color:white;

}

Giveaway3

{
width:40%;
height:40%;
float:left;

}

Giveaway3 p

{

font-size:22px;
line-height:150%;
font-family:Arial Black;
color:white;
font-family: 'Oswald', sans-serif;
}

...zur Frage

HTML / CSS Div-Container bzw. ganze Seite horizontal zentrieren

Hallo...

ich hab ein größeres Problem mit meiner Website. Ich bin noch am Anfang und hab direkt zu Beginn festgestellt, dass viele Websiten zenriert ausgerichtet sind. Sowas wollte ich auch machen, hab gegoogelt, gf durchgeblättert aber noch nichts Brauchbares gefunden.

Ich hab eine Seite aufgeteilt in body und dann einen Div-Container, der alles umschließt (heißt bei mir id="drumrum"). So. Dann wollte ich da weitere Div-Container einfügen, die da heißen sollen kopf, navi, inhalt und footer. Soweit OK, alle möglichen Formatierungsoptionen mit CSS klappen soweit, aber mit der horizontalen Zentrierung komm ich garnicht weiter.

Ich hab schon ausprobiert, margin auf 0px auto zu setzen, text-align:center usw. zu benutzen, aber nichts funktioniert. Damit ihr wisst, wie mein Doctype aussieht:

Hab schon irgendwo gelesen, dass man da vielleicht noch was dran ändern muss, weiß aber nicht genau, was ;)

Hier ist meine CSS-Datei, als Code eingefügt:

/*formate.css*/

drumrum {

width:1000px;
float:left;
margin:0 auto;
text-align:left;

}

kopf {

border-top-left-radius:10px;
border-top-right-radius:10px;
float:left;
width:980px;
height:150px;
border-width:1px;
margin-left:auto;
margin-right:auto;
background-image:url('img/banner.png');
font-weight:bold;
font-size:30pt;
padding-left:10px;
padding-right:10px;

}

navi {

float:left;
width:980px;
border-width:1px;
margin-left:auto;
margin-right:auto;
padding:10px;
background-color:#00CC00;
font-size:14pt;

}

inhalt {

width:980px;
float:left;
border-width:1px;
float:left;
margin-left:auto;
margin-right:auto;
padding:10px;
background-color:#CCCCCC;
font-size:14pt;

}

footer {

width:980px;
border-width:1px;
float:left;
margin-left:auto;
margin-right:auto;
padding:10px;
background-color:#FFFFFF;
text-align:center;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;

} body { background-color:#008800; text-align:center; } * { font-family:Times New Roman; } a:hover { text-color:#00DD66; font-weight:bold; } a:visited { text-color:#FF00EE; } a { text-color:#0022FF; }

Das wäre dann mein momentanes CSS für meine Seite. Wenn mal jemand drübergucken könnte und eine Idee kennt, wie ich "alles" waagerecht in die Mitte krieg, danke schonmal.

Und bitte verlinkt nicht auf eine gf-Seite, leider hat bislang von all den genannten Antworten keine Möglichkeit funktioniert. Vielleicht liegt es ja auch wirklich am Doctype.

Liebe Grüße, HugaTV

...zur Frage

CSS hilfe bei der position?

Hallo ich brauche unbedint eure Hilfe...

Ich versuche einen button genau an einer stelle zu positionieren, jedoch verschiebt sich die position immer bei einem anderen monitor.

Ich hoffe ihr versteht mein Problem und könnt mir helfen.

Hier nochmal mein Code von meinem Button...

MFG

CSS:

a.newsletter{

position: absolute;

top: 53%;

left: 70%;

transform: translate(-50%, -50%);

width: 100px;

height: 33px;

text-align: center;

line-height: 33px;

text-transform: uppercase;

color: #808080;

font-family: sans-serif;

text-decoration: none;

transition: 0.5s;

font-size: 15px;

transition: 0.5s;

overflow: hidden;

}

a.newsletter:hover{

color: #000;

}

a.newsletter:before{

content: '';

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: #0d0d0d;

z-index: -1;

transition: 0.5s;

box-sizing: border-box;

}

a.newsletter:hover:before{

top: calc(100% - 2px) ;

}

a.newsletter:after{

content: '';

position: absolute;

top: calc(-100% + 2px);

left: 100%;

width: 100%;

height: 100%;

background: #0d0d0d;

z-index: -1;

transition: 0.5s;

box-sizing: border-box;

}

a.newsletter:hover:after{

left: 0;

transition-delay: 0.5s;

}

a.newsletter:hover span{

transform: scaleY(1);

transition-delay: 1s; 

}

span.footerser{

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

border-left: 2px solid #0d0d0d;

border-right: 2px solid #0d0d0d;

box-sizing: border-box;

transform: scaleY(0);

transform-origin: top;

transition: 0.5s;

}

...zur Frage

HTML Hintergrund zu klein?

Hallo zusammen, ich habe mir jetzt eine HTML Seite gemacht, aber irgendwie klappt das mit dem hintergrund nicht ganz. Der Hintergrund ist irgendwie zu klein. Also ich habe eine Farbe, kein Bild als background angegeben. Im Bield sieht man, was ich meine. Bitte helft mir. Ich bin verzweifelt. Bei dem transparenten steht ein Text. Auch in der schwarzen Box. Mein Body Code sieht wie folgt aus.

    html {
    background-color: beige
}

body {
    font-size: 16px;
    line-height: 1.5;
    margin: 0 auto;
    max-width: 1000;
    padding: 2em 2em 4em;
    margin-bottom: auto
}

body {
    background-color: aliceblue
}

LG Michael

...zur Frage

Was möchtest Du wissen?