Kein Java[script] unter Myspace, wie siehts trotzdem toll aus?

[Whiz-zarD]

Was hat die Positionierung eines Hintergrundes mit Java zu tun?

Mit position:absolute kommst du nicht weit, weil bei dieser Positionierung der Bild an Ort und Stelle bleibt und nicht seine Position ändert.
Was passiert, wenn du die Positionierung weglässt?
(MySpace scheint da wohl wirklich einen ekelhaften code zu benutzen )

[Kopp]

Mit Java könnte ich immerhin die Auflösung abfragen und es danach richten >__>"
Wenn ich die Positionierung weglasse ist das ungefähr ein epic fail... Dann ist das Bild da, wo das Logo gerade ist und reißt die komplette Seite auseinander... Es ist eben nur absolute, damit es über dem anderen Quatsch liegen kann.

[Drakes]

1. Du meinst Javascript, Java != Javascript.
2. Ist der Header nicht zu hoch(500 px)?
Probiers sonst mal in etwa so: (Zentrieren über margin auto in Verbindung mit einem Block-Element und einer Breitenangabe)

HTML-Code:

<style type="text/css">

#header {
        display: block;
        width: 818px;
        margin: 0 auto; /* Zentrierung */
        height: 500px;
        position : absolute;
        top: 10px;
}

</style>

<img src="http://npshare.de/files/02a86509/Top.jpg" id="header">

[Kopp]

Ich hab den Code einfach mal so übernommen und soweit angepasst und,.. ähm:


Leider bin ich im Lesen von anderen Myspacecodes ziemlich mies.. aber die haben es hinbekommen:
We butter the bread with butter
Sonst kann ich auch noch anbieten, dass ich wem Passwort und Benutzernamen gebe (Türlich per PN ^^) damit er es selbst versuchen kann. Myspace ist halt merkwürdig ;__;"

Jakob

[Drakes]

MySpaceCode? Das ist HTML und CSS.
Ich versteh erst von der Beispielseite her, dass du wirklich so ein hohes headerbild haben willst.
Man erkennt aber auf deinem Bild nicht viel, da man es nicht ver Na gut, Probiers sonst mal mit:

HTML-Code:

<style type="text/css">

.contactTable {
width:300px !important; height:150px !important; padding:0px !important;
background-image:url("http://npshare.de/files/9d18e005/contact.jpg");
background-attachment:scroll; background-position:center center;
background-repeat:no-repeat; background-color:transparent;}
.contactTable table, table.contactTable td { padding:0px !important;
border:0px; background-color:transparent; background-image:none;}
.contactTable a img {visibility:hidden; border:0px !important;}
.contactTable a {display:block; height:28px; width:115px;}
.contactTable .text {font-size:1px !important;}
.contactTable .text, .contactTable a, .contactTable img {filter:none !important;}

body          {
        background-color:rgb(0,0,0);
        background-repeat:v-repeat; 
        background-position:center center;
        background-attachment:fixed;
        background-image:url(http://npshare.de/files/062dab5d/Hintergrund.jpg)     
        }

table, tr, td {
	background-color: transparent;
        border-width: 0;
	}
table table {
	border-width:0px;
	}
table table table {
	border-width: 2px;
	border-color: rgb(0, 0, 0);
	background-color: rgb(0,0,0);
        border-style:solid;
	}

table table table table{
	border-width:0px;       
        }

table table table td {
	background-color: rgb(0,0,0);
	filter:alpha(opacity=100);
	-moz-opacity:1;
	opacity:1;
	-khtml-opacity:1;
	}

table table table table td {
        filter:none;
	}

body, ul, div, span, td, p, .orangetext15, .whitetext12, .lightbluetext8, strong, b, u, .redtext, .redbtext, .btext, .text, .nametext, .blacktext10, .blacktext12 {
	font-family: Times New Roman;
	font-size: 14px;
	color: rgb(255, 255, 255);
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
	}
.nametext {
	padding: 5px;
	font-family: Impact;
	font-size: 30px;
	color: rgb(159, 77, 179);
	font-weight: bold;
	font-style:normal ;
	text-decoration: none;
	display: block;
	}
.whitetext12, .orangetext15 {
	font-family: Impact;
	font-size: 15px;
	color: rgb(159, 77, 179);
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
	}
a.navbar:link, a.navbar:active, a.navbar:visited, a.navbar:hover, a.man:link, a.man:active, a.man:visited, a.man:hover, a, a:link, a:active, a:visited, a:hover, a.navbar:link, a.navbar:active, a.navbar:visited, a.navbar:hover, a.text:link, a.text:active, a.text:visited, a.text:hover, a.searchlinksmall:link, a.searchlinksmall:active, a.searchlinksmall:visited, a.searchlinksmall:hover, a.redlink:link, a.redlink:active, a.redlink:visited, a.redlink:hover {
	color: rgb(255, 255, 255);
	font-weight: bold;
	font-style: normal;
	text-decoration: underline;
	}
a.navbar:hover, a.man:hover, a:hover {
	color: rgb(159, 77, 179);
	font-weight: bold;
	font-style: normal;
	text-decoration: underline;
	}
.badge {
	position: absolute;
	left: 1px;
	top: 1px;
	}

body table {
margin-top:13%;
}

body td table, body div table {
margin-top: 0;
}

#header {
        display: block;
        width: 818px;
        margin: 0 auto; /* Zentrierung */
        height: 500px;
        position : absolute;
        top: 10px;
}


</style>


<img src="http://npshare.de/files/02a86509/Top.jpg" id="header" />

Auch wenn da wahrscheinlich jetzt einiges unnötig ist.
Ach ja, deine Beispielseite hat da einfach ein Bild reingetan, nichts mit position: absolute oder so.

[Kopp]

Die haben "einfach nur ein Bild da hingetan"?
hmmm.. Warum könnte das hier nicht helfen? ^^
Ich lass die Seite einfach mal kurz so
Hab den Code exakt so eingefügt.
Da man auf dem kleinen Screenshot nicht so viel sehen konnte lasse ich die Seite einfach für ne Weile so,.. ist ja eh alles noch nicht wirklich be"worben".

Was mir gerade einfällt.. es kommt natürlich auch drauf an, wo man den ganzen HTML und CSS Quatsch reinschreibt.. in meinem Fall hab ich das in die Biographiebox gehaun, also das, was unter "Infos" steht... Leider gibt es keine wirklichen Alternativen.

[Drakes]

Sorry, hab erst jetzt realisiert, dass es schon ein Element mit der id header gibt.

HTML-Code:

<style type="text/css">

.contactTable {
width:300px !important; height:150px !important; padding:0px !important;
background-image:url("http://npshare.de/files/9d18e005/contact.jpg");
background-attachment:scroll; background-position:center center;
background-repeat:no-repeat; background-color:transparent;}
.contactTable table, table.contactTable td { padding:0px !important;
border:0px; background-color:transparent; background-image:none;}
.contactTable a img {visibility:hidden; border:0px !important;}
.contactTable a {display:block; height:28px; width:115px;}
.contactTable .text {font-size:1px !important;}
.contactTable .text, .contactTable a, .contactTable img {filter:none !important;}

body          {
        background-color:rgb(0,0,0);
        background-repeat:v-repeat; 
        background-position:center center;
        background-attachment:fixed;
        background-image:url(http://npshare.de/files/062dab5d/Hintergrund.jpg)     
        }

table, tr, td {
	background-color: transparent;
        border-width: 0;
	}
table table {
	border-width:0px;
	}
table table table {
	border-width: 2px;
	border-color: rgb(0, 0, 0);
	background-color: rgb(0,0,0);
        border-style:solid;
	}

table table table table{
	border-width:0px;       
        }

table table table td {
	background-color: rgb(0,0,0);
	filter:alpha(opacity=100);
	-moz-opacity:1;
	opacity:1;
	-khtml-opacity:1;
	}

table table table table td {
        filter:none;
	}

body, ul, div, span, td, p, .orangetext15, .whitetext12, .lightbluetext8, strong, b, u, .redtext, .redbtext, .btext, .text, .nametext, .blacktext10, .blacktext12 {
	font-family: Times New Roman;
	font-size: 14px;
	color: rgb(255, 255, 255);
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
	}
.nametext {
	padding: 5px;
	font-family: Impact;
	font-size: 30px;
	color: rgb(159, 77, 179);
	font-weight: bold;
	font-style:normal ;
	text-decoration: none;
	display: block;
	}
.whitetext12, .orangetext15 {
	font-family: Impact;
	font-size: 15px;
	color: rgb(159, 77, 179);
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
	}
a.navbar:link, a.navbar:active, a.navbar:visited, a.navbar:hover, a.man:link, a.man:active, a.man:visited, a.man:hover, a, a:link, a:active, a:visited, a:hover, a.navbar:link, a.navbar:active, a.navbar:visited, a.navbar:hover, a.text:link, a.text:active, a.text:visited, a.text:hover, a.searchlinksmall:link, a.searchlinksmall:active, a.searchlinksmall:visited, a.searchlinksmall:hover, a.redlink:link, a.redlink:active, a.redlink:visited, a.redlink:hover {
	color: rgb(255, 255, 255);
	font-weight: bold;
	font-style: normal;
	text-decoration: underline;
	}
a.navbar:hover, a.man:hover, a:hover {
	color: rgb(159, 77, 179);
	font-weight: bold;
	font-style: normal;
	text-decoration: underline;
	}
.badge {
	position: absolute;
	left: 1px;
	top: 1px;
	}

body table {
margin-top:13%;
}

body td table, body div table {
margin-top: 0;
}

.header {
        display: block;
        width: 818px;
        margin: 0 auto; /* Zentrierung */
        height: 500px;
        position : absolute;
        top: 10px;
}


</style>


<img src="http://npshare.de/files/02a86509/Top.jpg" class="header" />

[Kopp]

Wies jetzt ausseht sehr ihr wenn ihr auf die Seite geht .__."

Es wird nicht besser... hmm.
Gibt es denn keinen anderen Ansatz wie man das gebacken bekommt?

Ach ja, deine Beispielseite hat da einfach ein Bild reingetan, nichts mit position: absolute oder so.

...

Aber wenn es doch funktioniert? ^^"

[Drakes]

Ich könnte es besser versuchen, wenn du mir die Daten schicken würdest. Entweder heute Abend noch, oder morgen Abend.

[Kopp]

Drakes hat es gelöst.. Danke <3
Ihr könnt den Thread closen!