[RESOLVED] header? problem

[laura2006]

..

[Norsk]

I'm not totally following you. This link is NOT to your site but you want an image on the top like the one on the site? Is that correct?

I'm Don't know anything about MySite.com but I can only assume that you can upload an image in this space and that the user of this page uploaded a big one? If this is true then this is all you need to do.

However, you are saying somethinbg about "another type of link other than a background one" and so I'm not really following what you are trying to accomplish.

What do you mean by a link? When you say you already have a background, are you saying that you can choose, or upload, a custom background? And you want this other image also?

Tim

[laura2006]

..

[Norsk]

Hey, I see what this person did. She embedded some inline style into her document at the About me area. Checking the HTML be doing a R+Click and view source it appears that MySite does allow code to be embedded. I'm not sure what your skill level is at this point but I will be glad to help you.

This is her embedded code that makes the image:

<style type="text/css">
.mygen { Background Properties }
body {
background-color:FFFFFF;
background-image: url(http://i15.photobucket.com/albums/a354/nolovethroughthesebricks/Creations/photomontage.jpg);
background-attachment: none;
background-position: top;
background-repeat: no-repeat;
}

.mygen { Table Properties }
table table { border: 0px }
table table table table{border:0px}
table table table {
border-style:solid;
border-width:1px;
border-color:000000;
background-color:FFFFFF;
}


<!-- --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> -->
body {
margin-top: 900px !important;
}
-->

.mygen { Text Properties }
table, tr, td, li, p, div { font-family:verdana; color:000000; font-size:9px; text-align:justify; }
.btext { font-family:verdana; color:000000; font-size:9px; line-height:10px; letter-spacing:1px; text-align:justify; }
.blacktext10 { font-family:verdana; color:000000; font-size:9px; line-height:10px; letter-spacing:1px; text-align:justify; }
.blacktext12 {color: ffffff; font-family:verdana; font-size: 9px; line-height:10px; letter-spacing:1px; font-weight: justify; }
.lightbluetext8 { font-family:verdana; color:000000; font-size:9px; line-height:10px; letter-spacing:1px; text-align:justify; }
.orangetext15 { font-family:verdana; color:111111; font-size:9px; line-height:10px; letter-spacing:1px; text-align:justify; }
.redtext { font-family:verdana; color:000000; font-size:9px; line-height:10px; letter-spacing:1px; text-align:justify; }
.redbtext { font-family:verdana; color:000000; font-size:9px; line-height:10px; letter-spacing:1px; text-align:justify; }
.text { font-family:verdana; color:000000; font-size:9px; line-height:10px; letter-spacing:1px; text-align:justify; }
.whitetext12 { font-family:verdana; color:000000; font-size:9px; line-height:10px; letter-spacing:1px; text-align:justify; }
a:active, a:visited, a:link { font-family:verdana; color:000000; font-size:9px; line-height:10px; letter-spacing:1px; text-align:justify; }
a:hover { font-family:verdana; color:000000; font-size:9px; line-height:10px; letter-spacing:1px; background:000000; text-align:justify; }
a.navbar:active, a.navbar:visited, a.navbar:link { font-family:verdana; color:000000; font-size:9px; text-align:justify; line-height:10px; letter-spacing:1px;}
a.navbar:hover { font-family:verdana; color:000000; font-size:9px; line-height:10px; letter-spacing:1px; background:000000; text-align:justify;}
a.redlink:active, a.redlink:visited, a.redlink:link { font-family:verdana; color:000000; font-size:9px; line-height:10px; letter-spacing:1px; text-align:justify; }
a.redlink:hover { font-family:verdana; color:000000; font-size:9px; line-height:10px; letter-spacing:1px; background:000000; text-align:justify; }
.nametext { font-family:verdana; color:000000; font-size:9px; line-height:10px; letter-spacing:1px; text-align:center; text-transform:uppercase; }

.mygen { Miscellaneous Properties }
a:hover { cursor:ne-resize;}
</style>


Ok, not all of that but what she's doing is calling the image from the BODY tag and she's storing the image here: http://i15.photobucket.com/albums/a354/nolovethroughthesebricks/Creations/photomontage.jpg

I'm not sure if that server is part of MySpace or not. If not you will need a place to store the image.

Secondly she's moving the page content down with this tag:

body {
margin-top: 900px !important;
}

Again, the image is 900 pixels tall so to make room for it she's adding this margin.

So, this is a start. Depending on your skill level with CSS this is probably easy.

Let me know

Tim

[Norsk]

Ok, so if you post a graphic in a public place so that a person can link to it then I can assist you with the CSS code to do this little trick. You will need to give me the link to the image so I can link to it. The link must start with a http://www.... Also, let me know if you've read anything about adding custom styles or linking to CSS from MySpace.

Does this make sense to you so far?

Tim

[laura2006]

..

[Norsk]

Laura,

Here's how I think people do this. When they upload an image they have the option of adding a caption? Instead of adding a caption they are adding code which is then embedded into the html and then changes the page.

I found this on someone's site: "you can find the edit caption section through the Upload / Change Photos link on your homepage.." Does this make sense to you?

So, to add this picture on the top of the page you add this code in the CAPTION section:

<style>
BODY {
background: url(http://i7.photobucket.com/albums/y290/Ngadi/knob25.jpg) top no-repeat;
margin-top: 247px !important;
}
</style>


That's all you need to do to test it. See if that works and let me know.

Cool site BTW:D

Tim

[laura2006]

..

[Norsk]

Laura,

What's happeing is that you are declaring a background image more than once and so the last one that the browser reads will be the one that is displayed. What I mean is that you can only declare one - sorry:( We can do some creative things and see if it works for you.

Try removing the code that you pasted and replace it with this:

<style>

HTML {
background: url(http://i7.photobucket.com/albums/y290/Ngadi/knob25.jpg) top no-repeat;
}


BODY {
margin-top: 247px !important;
background: BLACK url('http://img154.imageshack.us/img154/5186/picture2647ol.jpg') center repeat scroll;
border-width:10px;
border-style:solid;
scrollbar-face-color: CC0066;
scrollbar-highlight-color:FFCC99 ;
scrollbar-arrow-color:FFCC99 ;
scrollbar-track-color: 6699CC;
border-top: 50px solid yellow !important;
border-bottom: 50px solid yellow !important;
border-right: 10px solid yellow;
border-left: 0px solid yellow;
}



TABLE TD {
vertical-align: top ! important;
}


span.blacktext12 {
visibility:visible !important;
background-color:transparent;
background-image:url("http://img112.imageshack.us/img112/8827/withcadre36cr.png");
background-repeat;
background-position:center center;
font-size:0px;
letter-spacing:-0.5px;
width:435px;
height:75px; display:block !important;
}

span.blacktext12 img {display:none;}



TABLE TD.text div img {visibility:hidden;}
TABLE TD.text div {
background-image:url("http://c.myspace.com/Groups/00010/19/35/10035391_m.gif");
background-repeat:no-repeat;}
TABLE TD.text table table div img {visibility:visible;}
TABLE TD.text table div, table table table td.text table div {
background-image:none;}
.MCT:active { content: "Online Now! by MCT @ http://myspace.com/contacttables"; }

table, tr, td {background:transparent; border:0px;}
table table table {background:transparent;}
table table table td {
background-color:FFCCCC;
filter:alpha(opacity=60); -moz-opacity:0.6; opacity:0.6; -khtml-opacity:0.6;
}
table table table table td {filter:none;}
table table table {
border-width:2px;
border-color:FFFFFF;
border-style:solid;
}
table table table table {border:0px;}
input {background-color:transparent !important;}
td, span, div, input, a, table td div div font,
body div table tbody tr td font {font-family:Lucida Console !important;}
td, span, div, input, table td div div font,
body div table tbody tr td font {color:663366 !important;}
.nametext, .whitetext12, .lightbluetext8, .orangetext15, .blacktext12,
.redtext, .redbtext, .blacktext10, .btext {color:990066 !important;}
a {color:663366 !important; text-decoration: none!important; font-style: italic !important; font-weight: normal !important; text-transform: lowercase !important; }
a:hover {color:990066 !important; text-decoration: underline !important; font-style: normal !important; font-weight: normal !important; text-transform: uppercase !important; }
a img {filter:alpha(opacity=60); -moz-opacity:0.6; opacity:0.6; -khtml-opacity:0.6;}
a:hover img {filter:none; -moz-opacity:1.0; opacity:1.0; -khtml-opacity:1.0;}
a img {border-color:663366; border-style:solid; border-width:2px;}
a:hover img {border-color:990066; border-style:solid; border-width:2px;}
.blacktext10 {
border-top-width:1px; border-bottom-width:0px; border-left-width:0px; border-right-width:0px;
border-color:FFFFFF; border-style:dashed; display:block; width:100%;}
table table td.text table, table table td.text table td {width:100%;}


.movieframe{www.myspace.com/contacttables}

</STYLE>

<marquee></marquee>
<marquee><img src="http://i7.photobucket.com/albums/y290/Ngadi/People/Picture006.jpg" height="150px" width="150px">
<img src="http://i7.photobucket.com/albums/y290/Ngadi/People/Picture010.jpg"height="150px" width="150px">
<img src="http://i7.photobucket.com/albums/y290/Ngadi/People/Pictureconverse-contrast.jpg"height="150px" width="150px"></marquee>




This may work! Tell me:)

[Norsk]

going home now... good luck!

[WebJoel]

<.STYLE type="text/css">
<!-- --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> -->
.BODY {
scrollbar-face-color: CC0066;
scrollbar-highlight-color:FFCC99 ;

scrollbar-3dlight-color: ;
scrollbar-darkshadow-color: ;
scrollbar-shadow-color: ;
scrollbar-arrow-color:FFCC99 ;
scrollbar-track-color: 6699CC;

}
-->

<./STYLE>
-What is all the -->-->-->--> about? Putting a "<!--" after the opening "<style>" is to hide the following *css from browsers that do not understand it, and the "-->" before the "</style> is the logical closing tag which 'protects the *css'. Therefore, when it is written as "<style><!-- -->-->-->etc.etc.etc...", you've just closed this and anything that comes after it, is really just keystrokes of kluge until you get to a 'real' *css statement. It probably works (or, causes no harm?), but browsers that do not understand *css are now forced to try because the delimiter is 'closed' at the FIRST "-->". That is my understanding.
In a "comment" tag ("<!-- comment text -->") you can use any alpha-numeric-keyboard character EXCEPT "--" and/or ">" (also not "<"), as these are reserved for opening/closing the comment argument only. They are without meaning or purpose for any other thing in this type of comment tag, so I was just curious, -why include them at all? :confused:

[laura2006]

..

[laura2006]

..

[Norsk]

Re: the <!-- --> comments tag, you really don't need them. One could make an arguement that they hide them from older browsers but it would be a week arguement as less than 1% of users use that old of a browser. I think that the MySpace.com probably auto-generates the comments for one reason or another. Probably to keep it from showing up in the HTML (on the page).

Laura, You can do what you want to do, just not the 'normal' way we would do it. The CSS code I sent you yesterday actually works but you will need to test it.

Let me know if I can help.

Tim

[laura2006]

..

[Norsk]

WOW - U Rock! That looks great. You really picked up on the CSS!

Impressed:D

Ok, if you want to change the color of the search and navigation links (the home, invite etc..) you can add this:

a.navbar:link, a.navbar:active, a.navbar:visited {
color: RED;
}
a.navbar:hover {
color: ORANGE;
}

This code will change the link colors so you can see it better. You can change the colors to whatever you want but not just any color name will work. For a list of color names you can go here: http://www.w3schools.com/html/html_colornames.asp and then make it whatever color you want. Presently it's RED and then when you mouse over the link it should turn ORANGE.

Tim

[pontanares]

How to add picture at the header of myspace profile? what will I do??