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

[Kopp]

Heyho liebes WebDev-Forum (boah ich schreib hier zum ersten Mal xD)

Ich habe irgendwie ein ziemlich fieses Problem:
Hier, um diese Seite geht es. (http://www.myspace.com/breathepandora)
Wenn ihr Firefox und ne Auflösung von 1280*1024 habt, dann werdet ihr kein Problem sehen, in allen anderen Fällen aber schon.
Das Header habe ich von der Position her als absolute definiert, damit es eben über dem ganzen Avatar Myspacequatsch liegt.
Auch wenn ich die Position in % angebe, gibt es Probleme zwischen Firefox und IE. Und auch daran, dass es bei ner anderen Auflösung quer durch die Gegend fliegt ändert das nichts.

Habt ihr irgendwie ne Idee wie ich das dennoch hinbekomme? So manche Seiten haben perfekt definierte Header, die eben unabhängig von Browser und Auflösung perfekt sitzen.

Ich hab den unstrukturierten Noob-Code mal dazugepackt, das ganz unten betrifft das Header:

<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 {
width: 818px;
height: 500px;
position : absolute;
left: 226px;
top:25%;
margin-bottom: 10px;
background-color:transparent;
}

</style>

<table border="0" cellpadding="0" cellspacing="0" class="header">
<tr style="background-color:transparent">

<td style="background-color:transparent" colspan="3">
<img src="http://npshare.de/files/02a86509/Top.jpg" border="0"> </td>
</tr>
</td>
</tr>

</table>


Wäre echt klasse, wenn mir wer unter die Arme greifen könnte ;__;"

Gruß, Jakob

[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 x_x)

[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)

<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:
http://npshare.de/files/e4a7064b/naja.jpg

Leider bin ich im Lesen von anderen Myspacecodes ziemlich mies.. aber die haben es hinbekommen:
We butter the bread with butter (http://www.myspace.com/wbtbwb)
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:


<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 (http://www.myspace.com/breathepandora)
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.

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