Grow your CSS skills. Land your dream job.

myspace masthead

  • # September 17, 2008 at 11:12 pm

    Ok so I have been trying different things for many hours here. I found a code and played with it a bit and i can not get my masthead to appear over my background. My myspace url is http://www.myspace.com/skyfalltestsite1

    My code is this…

    <style type="text/css">

    .commentlinks a { font-weight:normal; font-size:9px; }

    td.columnsWidening img, td.columnsWidening object { max-width:260px; }

    </style><style type="text/css">
    td.columnsWidening img, td.columnsWidening object { width: expression(this.width > 260 ? 260 : true); }
    </style><style type="txt/css">
    .loc2 a small { font-size:12px; } div.srchButton div input#submit { padding:5px 0 5px 0; } div#shortcuts {margin: 4px 0px 0px 5px !important; padding: 7px 0 0 7px !important;}
    </style><style type="text/css">
    #header * { font-family:verdana,arial,sans-serif,helvetica; }
    .popup_wrapper {z-index: 1000001 !important;}
    </style><style type="text/css">
    #headerWrap #header #topnav
    {
    background: none !important;
    }
    </style><style type="text/css">
    #header TABLE DIV#srchMenuListBox_Header{display: none !important;}
    #header TABLE DIV#srchMenuListBox_Header.open{display: block !important;}
    div#searchContainer_Header{ margin-top: 5px !important;width:450px !important;}
    </style><style type="text/css">
    #srchMenuListBox_Header{white-space:nowrap !important;background-image:none !important;}
    #srchMenuListBox_Footer{white-space:nowrap !important;background-image:none !important;}
    DIV.srchfieldLayer{width:304px !important;}
    DIV#srchMenuListBox_Header{width :auto !important;}
    DIV.srchfieldLayer DIV{width:auto !important;}
    DIV.srchfieldLayer DIV DIV{width:auto !important;}
    DIV#srchMenuContainer{width:auto !important;}
    DIV.srchButton{width:auto !important;}
    div.srchButton div{width:auto !important;}
    div#srchMenuListBox_Header{display:none !important;div#srchMenuListBox_Footer{display:none !important;}
    </style><style type="text/css">
    #musicnav {width:800px; border-bottom:1px solid #000; background-color:#990033; color:#FFFFFF;}
    #musicnav a {color:#FFFFFF; font-weight:normal; font-size:90%; display:inline-block;}
    #musicJVNav {width:800px; background-image:url( http://x.myspacecdn.com/modules/musicv2 … nav_bg.gif); background-color:#e2e2e2; color:#e2e2e2; border-spacing:0px;}
    #musicJVNav td {color:#999999;}
    #musicJVNav a {color:Navy; font-weight:normal; font-size:11px;font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; display:inline-block;padding-left:5px;padding-right:5px;}
    </style><STYLE type=text/css>
    #browseMain td {text-align:left;}
    </STYLE>
    <style type="text/css">
    body {
    background-color: 000000; background-image:url(http://www.skyfallmedia.com/clients/mro … undbka.jpg);

    background-position: top center;
    background-attachment: fixed;
    margin-top: 342;
    background-repeat: no;
    background-size: auto;

    }

    table, td {
    background-color:transparent;
    }

    table table table table {
    background-image:none;
    }
    table table table table, table table table td {
    border-style:none;
    }
    body, div, p, strong, td, .text, .blacktext10, .blacktext12, a.searchlinkSmall, a.searchlinkSmall:link, a.searchlinkSmall:visited {
    color:000000;
    font-weight:normal;
    font-style:normal;
    }
    .blacktext11, .blacktext8, .3e5649text12, .lightbluetext8, .nametext, .btext, .redtext, .redbtext {
    color:000000;
    font-weight:bold;
    font-style:normal;
    }
    a, a:link, a:visited, a.navbar, a.navbar:link, a.navbar:visited, a.man, a.man:link, a.man:visited, a.redlink, a.redlink:visited {
    color:000000;
    font-weight:bold;
    font-style:normal;
    }
    a:hover, a:active, a.navbar:hover, a.navbar:active, a.man:hover, a.man:active, a.searchlinkSmall:hover, a.searchlinkSmall:active, a.redlink:hover, a.redlink:hover {
    color:000000;
    font-weight:bold;
    font-style:normal;
    }
    a.text:hover {
    color:000000
    }
    .orangetext15 {
    text-transform:uppercase;
    letter-spacing:1px;
    color: 7f0406;
    font-size: 17px;
    margin: 14px 0px 4px 0px;
    padding: 0px 0px 10px 0px;
    text-align: center;
    display: block;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-weight: bold;
    border-width: 0px 0px 1px 0px;
    border-style: dotted;
    border-color: 000000;
    width: 372px
    }
    input {
    background-color:transparent !important
    }
    table, tr, td, table table, table table td {
    border-width:0px;
    background-color: transparent;
    }
    table table table table {
    border-width:0px;
    background-color:transparent;
    padding:0px;
    margin:0px;
    background-image: none;
    }
    .nametext {
    background-image: url(http://www.skyfallmedia.com/clients/mro … ametag.jpg);
    background-position: bottom center;
    background-repeat: no-repeat;
    overflow: hidden;
    height: 40px;
    width: 270px;
    font-size: 1px;
    text-align: left;
    color: FFFFFF;
    padding: 0px 0px 3px 0px;
    display: block;
    margin: 14px 0px 8px 0px;
    border-width: 0px 0px 1px 0px;
    border-style: dotted;
    border-color: 000000F;
    }
    NOTE {This is your custom masthead}

    .masthead2 {margin-left: -400px; left: 50%; position: absolute; top: 0px; width: 800px; height: 342px;}

    .lightbluetext8 {
    font-size:10px;
    font-weight:bold;
    text-transform:uppercase;
    font-family: Georgia, "Times New Roman", Times, serif;
    color: 7f0406 !important;
    }
    .whitetext12 {
    font-size:14px;
    font-weight:bold;
    text-transform:uppercase;
    font-family: Georgia, "Times New Roman", Times, serif;
    color:7f0406 !important;
    }
    .contactTable {
    width:300px !important;
    height:150px !important;
    background-image:url(http://www.skyfallmedia.com/clients/mro … _table.jpg);
    background-repeat:no-repeat;
    background-color: transparent;
    background-attachment:scroll;
    background-position:center center;
    padding:0px !important;
    }
    .contactTable table, table.contactTable td {
    background-color:transparent;
    background-image:none;
    padding:0px !important;
    }
    .contactTable a {
    display:block;
    height:28px;
    width:115px;
    }
    .contactTable a img {
    visibility:hidden;
    border:none;
    }
    .contactTable .text {
    font-size:1px!important;
    text-align: center;
    }
    .contactTable .3e5649text12 {
    display:none;
    text-align: center;
    }
    .contactTable .whitetext12 {
    display:none;
    text-align: center;
    }
    .left_area
    {
    width: 327px;
    position: absolute;
    margin-left: -400px;
    _margin-left: -0px;
    left: 50%;
    top: 1500px;
    border-color: FFFFFF;
    background-color: ffffff;
    padding-top: 12px;
    }
    .left_content
    {
    width: 315px;
    margin-left: 6px;
    margin-top: 10px;
    }
    </style><style type="text/css">

    NOTE {Here, we basically undo a bunch of crap we had to do to get IE to play nice}

    .whitetext12{width: auto}

    .contactTable {
    width: auto !important;
    }

    .contactTable span.whitetext12 {
    left: 0;
    }

    .orangetext15 {width: auto;}

    table table table td{padding: 0;}

    table table table {
    padding: 0 14px 14px 14px;
    border-color: 3e5368;
    border: none;
    }

    table table table {max-width: 423px;}

    .nametext {
    height: 35px;
    width: auto;
    }

    table tr td table tr td table tr td div strong {
    display: inline;
    width: auto;
    }
    </style>

    <style type="text/css">

    .masthead span { background: url(http://www.skyfallmedia.com/clients/mro … ader1e.jpg) no-repeat bottom center; }

    .masthead2 a {width: 800px; height:342px; position: absolute; margin-left: -350px; left: 50%; top: 200px; background-image: url(http://www.skyfallmedia.com/clients/mro … ader1e.jpg); cursor: pointer;}

    </style>

    <style>a .text { font-weight: bold; font-family: Arial, Helvetica, sans-serif; }</style><style type="text/css">
    body, html {visibility:visible !important; display:block !important}
    </style><br><br>

    any help would be more than greatly appreciated.

    # September 18, 2008 at 3:29 am

    well i looked in the code and couldn’t find the masthead being called anywhere accept in your css. but the code for the site doesn’t have a masthead class that I could find. Now I am assuming that this is the image you want to show

    http://www.skyfallmedia.com/clients/mro … ader1e.jpg

    So it’s like the code does exist in the css to show the image but does not exist in the site to display the image. You image is defined in the class of masthead2

    Code:
    .masthead2 a {width: 800px; height:342px; position: absolute; margin-left: -350px; left: 50%; top: 200px; background-image: url(http://www.skyfallmedia.com/clients/mrozwaldmyspace/09/header1e.jpg); cursor: pointer;}

    I also see it in the class of masthead

    Code:
    .masthead span { background: url(http://www.skyfallmedia.com/clients/mrozwaldmyspace/09/header1e.jpg) no-repeat bottom center; }

    Now if you go to your myspace page and view the source code then push control+f to bring up the find box, then type in masthead, the only place masthead shows up is in your css. So if it’s not in the html, then your image won’t show. That as far as I can tell is your problem

    # September 18, 2008 at 11:04 am

    ok i get it… so excuse my ignorance but how do i fix? and yes your right im trying to show http://www.skyfallmedia.com/clients/mro … ader1e.jpg

    can you repost the whole css with the fix?

    THANK YOU!!!!

    # September 18, 2008 at 1:45 pm

    The code for your site is very strange. I am not sure I can tell you how to fix it. You need to find the body tag in your html and insert the image there and see what happens. the only way I could fix it is to change the code myself. But for that you would have to give me access to your site. if you wanna try, send me an email. khan28@msn.com

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".