• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Warum wird das css nicht übernommen ?

Antons

New member
Hallo,

hier meine Seite:

HTML:
<html>
<head>

<title>FB Profil online </title>

<script>

document.addEventListener("keydown", function(event){
	if (event.keyCode == 39){
		inc("out");
		linkErzeugen();
	}
}, false);
document.addEventListener("keydown", function(event){
	if (event.keyCode == 37){
		dec("out");
		linkErzeugen();
	}
}, false);
document.addEventListener("keydown", function(event){
	if (event.keyCode == 38){
		profil();
	}
}, false);

document.addEventListener("keydown", function(event){
	if (event.keyCode == 40){
		
	}
}, false);

function inc(out){
    field = document.getElementById(out);
    field.value++;
}
function dec(out){

    field = document.getElementById(out);
    field.value--;
}
function profil(){
	  var url1 = "https://www.facebook.com/";
	  var eingabe = document.getElementById("out").value;
	  if(eingabe !== ""){
	  var url1 = url1 + eingabe;
	  
	document.getElementById("ZielLink1").href = url1;
	document.getElementById("ZielLink1").textContent = url1;
	document.getElementById("ZielLink1").click();
	}
   }
function linkErzeugen(){
      var url = "http://graph.facebook.com/";
	  var anhaengen = "/picture?type=large";
      var eingabe = document.getElementById("out").value;
      if(eingabe !== ""){
      var url = url + eingabe + anhaengen;
		
		
 	document.getElementById("ZielLink").href = url;
	document.getElementById("ZielLink").textContent = url;
	document.getElementById("ZielBild").src = url; 
	 }
    }
		
</script>



</head>
<body>

<div class="value-change">
    <img src="" id="ZielBild"> <br><br><br><br>
	
	<div id="box"> <div id="myButton">
	
	<input type="text" " class="myButton" id="out" value="4" size="11" />
    <button type="button" " class="myButton" id="dec" onclick="dec('out');linkErzeugen();">-</button>
    <button type="button" " class="myButton" id="inc" onclick="inc('out');linkErzeugen();">+</button> 
	<button type="button" " class="myButton" id="profil" onclick="profil();">Profil</button> 
	</div>
	
    <a id="ZielLink"style="color:black;text-decoration:none;display:none"></a> <br><br>  
	<a id="ZielLink1" target="_blank;display:none"></a>
    <br><br> <!-- Erzeugtes Bild: -->
	
	
    
  
</div>
</body>
</html>

 

<style type="text/css">

BODY {
margin: 0px;
padding: 0px;
text-align: center;
}

img {
  width:50%;
  height:auto;
}

.box { 
		position: absolute;
		top: 1380px;
		margin-left:-50px; /* die halbe Breite */
        position:absolute;
        left:50%;}
		
		}     


.myButton {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background-color:transparent;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	border:12px solid #dcdcdc;
	display:inline-block;
	cursor:pointer;
	color:#777777;
	font-family:Arial;
	font-size:45px;
	font-weight:bold;
	padding:45px 45px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffffff;
}
.myButton:hover {
	background-color:transparent;
}
.myButton:active {
	position:relative;
	top:1px;
}

</style>

Warum wird das CSS .myButton nicht übernommen ?

Und wie kann ich die Button auf eine immer gleiche Feste Position 1400 Pixel von oben und zentriert bringen ?

MfG Anton
 
Kann es sein, dass du im CSS den Klassenselektor (.CLASSENNAME) mit dem ID-Selektor (#ID) verwechselst? Es gibt kein Element mit der Klasse "box"... und der darauf folgende CSS-Code wird nicht angewendet, weil du einfach eine geschweifte Klammer zu viel hast.

gleiche Feste Position 1400 Pixel von oben
Was meinst du genau mit "von oben"? Ev. suchst du "position: fixed"...

und zentriert bringen
Da gibt es verschiedene Möglichkeiten. Bei deinem HTML-Konstrukt würde das so machen:
Code:
#box { 
	position: fixed;
	bottom: 0%;
	width: 100%;
	text-align: center;
	left: 0%;
}
 
Juhu,

endlich hat mal was geklappt :)

HTML:
#footer {
    position:fixed;
    bottom:0px;
	position: fixed;
	bottom: 0%;
	width: 100%;
	text-align: center;
	left: 0%;
}

#content_container {
    padding-bottom:3em;
}
 
Zuletzt bearbeitet:
Zurück
Oben