SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Look how i got around Myspace Iframe!

    Look how i got around Myspace Iframe.I have done my entire template in all of inline css. "myspace" doesnt allow your Div Names to have id's for my <div> tags. So i have given them classes. I have done this and i havent gotten any warnings from myspace saying i have violated their terms. Im happy I have compressed my images to make my 1 page site to load faster also.


    I thought this would be intresting to the members.Sorry that i didnt give a complete screen shot it was only my header. http://www.myspace.com/bleedinghearts0 here is my Url to my Myspace.To actually see how i used Css&Html to create my site.





    Code CSS:
    <object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" height="0" width="0" data="[URL]http://www.youtube.com/v/feLPgJ0yels&hl&autoplay=1[/URL]">
      <param name="allowScriptAccess" value="never" />
      <param name="allowNetworking" value="internal" />
      <param name="movie" value="[URL]http://www.youtube.com/v/feLPgJ0yels&hl&autoplay=1[/URL]" />
    </object>
     
    <style>
    .last{
    position:absolute;
    left:50%;
    top:1460px;
    margin-left:-376px;
    width:358px;
    height:200px;
    overflow:auto;
    z-index:1;
    visibility:visible!important;
    font-family:century gothic;
    color:cccccc;
    font-size:12px;
    }
     
    .video{
    position:absolute;
    left:50%;
    top:1460px;
    margin-left:20px;
    width:358px;
    height:200px;
    overflow:hidden;
    z-index:1;
    visibility:visible!important;
    font-family:century gothic;
    color:222222;
    font-size:12px;
    }
    .list{
    position:absolute;
    left:50%;
    top:1200px;
    margin-left:20px;
    width:350px;
    height:200px;
    overflow:auto;
    z-index:1;
    visibility:visible!important;
    font-family:century gothic;
    color:222222;
    font-size:12px;
    }
    .comment{
    position:absolute;
    left:50%;
    top:1200px;
    margin-left:-380px;
    width:740px;
    height:220px;
    overflow:hidden;
    z-index:1;
    visibility:visible!important;
    font-family:century gothic;
    color:cccccc;
    font-size:12px;
    }
     
    .images{
    position:absolute;
    left:50%;
    top:950px;
    margin-left:-380px;
    width:740px;
    height:200px;
    overflow:auto;
    z-index:1;
    visibility:visible!important;
    font-family:century gothic;
    color:cccccc;
    font-size:12px;
    }
    .aboutme{
    position:absolute;
    left:50%;
    top:730px;
    margin-left:-386px;
    width:770px;
    height:154px;
    overflow:auto;
    z-index:1;
    visibility:visible!important;
    font-family:century gothic;
    color:cccccc;
    font-size:12px;
    }
     
    .titulo{
    position:absolute;
    left:50%;
    top:690px;
    margin-left:-125px;
    width:500px;
    height:330px;
    overflow:hidden;
    z-index:1;
    visibility:visible!important;
    font-family:Copperplate Gothic Light;
    color:cccccc;
    font-size:16px;
    }
    </style>
    <style>
    .photosnav{
    position:absolute;
    left:50%;
    top:610px;
    margin-left:165px;
    width:420px;
    height:330px;
    overflow:hidden;
    z-index:1;
    visibility:visible!important;
    }
    .messagenav{
    position:absolute;
    left:50%;
    top:610px;
    margin-left:-140px;
    width:420px;
    height:330px;
    overflow:hidden;
    z-index:1;
    visibility:visible!important;
    }
    .homenav{
    position:absolute;
    left:50%;
    top:610px;
    margin-left:-300px;
    width:420px;
    height:330px;
    overflow:hidden;
    z-index:1;
    visibility:visible!important;
    }
    .addnav{
    position:absolute;
    left:50%;
    top:610px;
    margin-left:10px;
    width:420px;
    height:330px;
    overflow:hidden;
    z-index:1;
    visibility:visible!important;
    }
     
    </style>
     
    <style>
    table td div div{visibility:hidden;}
    td div a.text{visibility:hidden;}
    td div a.links{visibility:hidden;}
    tr {background-color:transparent}
    .orangeText15 {display:none;}
    .nameText {display:none;}
    .friendSpace {display:none;}
    .contactTable {display: none;}
    .extendedNetwork {display:none;}
    .latestBlogEntry {display:none;}
    .userProfileURL {display:none;}
    .userProfileDetail {display:none;}
    .bottomlinks {display:none;}
    .profileinfo {display:none;}
    .friendsComments {display:none;}
    body {
    background-color:000000; 
    background-image:url();
    background-repeat:repeat;
    background-position:center center;
    background-attachment:fixed;
    .FriendsComments table table {display:none;}
    .friendsComments td {height:0px;}
    .FriendsComments td {background-color:transparent;}
    }
    a {
    color:fff!important;
    font-family:arial;
    font-size:9pt;
    font-weight:normal;
    letter-spacing:-1px;
    text-transform:none;}
    a:hover {
    color:000000!important;
    font-family:arial;
    font-size:9pt;
    font-weight:bold;
    text-transform:none;
    text-decoration:none!important;
    cursor:crosshair;}
    .title {
    color: FFFFFF;
    font: 15pt copperplate gothic light;
    font-weight: normal
    padding: 1px;
    letter-spacing: 5px;
    border-bottom:2px dotted;
    border-bottom-color:CCCCFF;
    background-color: transparent;
    background-image: url(); 
    background-repeat:no-repeat; 
    text-align:CENTER;
    text-transform:uppercase;}
     
    .banner {
    border:0px solid;
    border-color:none;
    width:auto;
    height:auto;
    overflow:auto;
    position:absolute;
    left:50%;
    top:0%;
    margin-left:-400px;
    margin-top:160px;
    text-align:center;
    visibility:visible;}
    .photo1 {
    background-color:transparent;
    border:0px solid;
    border-color:none;
    width:auto;
    height:auto;
    overflow:auto;
    position:absolute;
    z-index:0;
    left:50%;
    top:0%;
    margin-left:-400px;
    margin-top:657px;
    text-align:center;
    visibility:visible;}
    .photo2 {
    background-color:transparent;
    border:0px solid;
    border-color:none;
    width:auto;
    height:auto;
    overflow:auto;
    position:absolute;
    z-index:0;
    left:50%;
    top:0%;
    margin-left:-400px;
    margin-top:1160px;
    text-align:center;
    visibility:visible;}
     
    </style>
    <style>
    div div select, div div form {display:none !important;}
    select { visibility:hidden!important; WIDTH:0px!important;}
    table.navigationBar {display:none !important}
    .extendedNetwork {display:none;}
    td.text br {display:none;}
    .profileInfo td.text br, td.text table br {display:inline;}
    .a {hide only blogs}
    .latestBlogEntry {display:none;}
    .latestBlogEntry br {display:none;}
    .latestBlogEntry td {height:0px;}
    .latestBlogEntry .btext {display:block;}
    td.text table {border-spacing:0px;}
    .orangetext15 {display:none;}
    .friendsComments td table, .friendsComments td.text table, .friendSpace table, .blurbs, .blurbs td.text {background-color:transparent; border:0px;}
    .FriendSpace .orangetext15, .FriendsComments .orangetext15 {display:none;}
    .FriendSpace table table table {display:none;}
    .FriendSpace .btext {display:none;}
    .redlink {display:none;}
    .FriendsComments table table {display:none;}
    .friendsComments td {height:0px;}
    .FriendsComments td {background-color:transparent;}
    .FriendsComments td.text td b {visibility:hidden;}
    .FriendsComments td.text td b a,.FriendsComments td.text td td b {visibility:visible;}
    .FriendsComments td.text td b a {display:none;}
    .FriendsComments td.text td td b a {display:inline;}
    .FriendsComments td.text td a {display:none;}
    .FriendsComments td.text td b a,.FriendsComments td.text td td a {display:inline;}
    .blacktext10 {display:none}
    table div {display:none;}
    table table div, div table div {display:block;}
    .nametext {display:none;}
    .profileInfo td.text a img {display:none;}
    .profileInfo td td.text {font-size:1px; visibility:hidden;}
    .profileInfo td.text a img {visibility:visible;}
    .friendsComments .ImgOnlineNow,.profileInfo td.text div img {visibility:visible;}
    .ImgOnlineNow, .profileInfo td.text div img {display:none;}
    .profileInfo td td {visibility:hidden;}
    .profileInfo td td.text {visibility:visible;}
    .profileInfo td.text a img {visibility:visible;}
    .friendsComments .ImgOnlineNow, .profileInfo td.text div img {visibility:visible;}
    .contactTable {display:none;}
    table.UserProfileURL {display:none;}
    .UserProfileSchool {display:none;}
    .UserProfileNetwork {display:none;}
    .UserProfileCompany {display:none;}
    .interestsAndDetails {display:none;}
    .UserProfileDetail {display:none;}
    </style>
    <div class="banner">
    <img src="[URL]http://i37.tinypic.com/ipo021.png[/URL]" border="0" />
    </div>
    <div class="photo1">
    <img src="[URL]http://i36.tinypic.com/qz4yop.png[/URL]" />
    </div>
    <div class="photo2">
    <img src="[URL]http://i36.tinypic.com/97v8qt.png[/URL]" border="0" />
    </div>
     
     
     
     
    [HIGHLIGHT="HTML4Strict"]
     
    <div class="titulo">
    Welcome to BlakeAnthonyDesign
    </div>
    <div class="aboutme">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed egestas vestibulum arcu. Sed vel sem at velit consectetuer gravida. Etiam sed tortor id sapien eleifend mollis. Vivamus aliquam lacinia dui. Nunc justo lacus, imperdiet sit amet, tempor sit amet, imperdiet porttitor, ligula. Donec eget urna id dui tempor aliquam. Aliquam eget justo. Cras sodales aliquam magna. Donec pulvinar laoreet orci. Duis dui.
    Suspendisse scelerisque suscipit felis. Duis rhoncus tincidunt magna. Sed elementum, nisi id euismod auctor, turpis ligula porttitor orci, non condimentum ligula quam vel dolor. Ut urna. Morbi eu massa. Nulla a ipsum ac purus elementum lobortis. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla non felis non mauris volutpat tincidunt. Proin faucibus turpis a mauris. Morbi in dui. Quisque hendrerit rhoncus est.
    Aenean id neque. Nulla nec est non ligula imperdiet condimentum. Praesent ipsum. Aenean dapibus. Mauris tempus augue sed leo. Fusce in eros et ipsum imperdiet rutrum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis et metus sit amet ipsum feugiat dignissim. Cras in est eu neque vehicula viverra. Mauris velit. Praesent venenatis, justo vitae tincidunt sagittis, tellus purus sollicitudin orci, eget lacinia velit massa non est. Etiam sed mi. Aliquam erat volutpat. Nullam non justo a pede tincidunt convallis. Aenean egestas magna et nisi. Donec sapien ipsum, tempor sed, aliquam et, tincidunt at, nibh. Nullam sagittis. Aenean ullamcorper. 
    </div>
     
    <div class="images">
    <center>
    Align my images horizontly
    </div>
    <div class="comment">
    <form method="post" action="[URL]http://comments.myspace.com/index.cfm?fuseaction=user.ConfirmComment"><input[/URL] name="friendID" value="XXXXXX" type="hidden" /> <textarea name="f_comments" class="Skem9box">Dear Friend,</textarea><br /><input type="submit" value="Comment" class="Skem9sub" /></form><br />
    <style>
    textarea.Skem9box {width:327px; height:160px;color:333333;font-size:10pt;font-family:century gothic;background-color:white;border-color:333333; border-style:solid; border-width:1px;}
    input.Skem9sub {width:327px;color:333333;font-size:10pt;font-family:century gothic;background-color:white;border-color:333333; border-style:solid; border-width:1px;}
    </style>
    </div>
    <div class="list">
    <p class="title">Title Here</p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed egestas vestibulum arcu. Sed vel sem at velit consectetuer gravida. Etiam sed tortor id sapien eleifend mollis. Vivamus aliquam lacinia dui. Nunc justo lacus, imperdiet sit amet, tempor sit amet, imperdiet porttitor, ligula. Donec eget urna id dui tempor aliquam. Aliquam eget justo. Cras sodales aliquam magna. Donec pulvinar laoreet orci. Duis dui.
    Suspendisse scelerisque suscipit felis. Duis rhoncus tincidunt magna. Sed elementum, nisi id euismod auctor, turpis ligula porttitor orci, non condimentum ligula quam vel dolor. Ut urna. Morbi eu massa. Nulla a ipsum ac purus elementum lobortis. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla non felis non mauris volutpat tincidunt. Proin faucibus turpis a mauris. Morbi in dui. Quisque hendrerit rhoncus est.
    Aenean id neque. Nulla nec est non ligula imperdiet condimentum. Praesent ipsum. Aenean dapibus. Mauris tempus augue sed leo. Fusce in eros et ipsum imperdiet rutrum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis et metus sit amet ipsum feugiat dignissim. Cras in est eu neque vehicula viverra. Mauris velit. Praesent venenatis, justo vitae tincidunt sagittis, tellus purus sollicitudin orci, eget lacinia velit massa non est. Etiam sed mi. Aliquam erat volutpat. Nullam non justo a pede tincidunt convallis. Aenean egestas magna et nisi. Donec sapien ipsum, tempor sed, aliquam et, tincidunt at, nibh. Nullam sagittis. Aenean ullamcorper. 
    </div>
    <div class="last">
     
    <p class="title">BlakeAnthony</p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed egestas vestibulum arcu. Sed vel sem at velit consectetuer gravida. Etiam sed tortor id sapien eleifend mollis. Vivamus aliquam lacinia dui. Nunc justo lacus, imperdiet sit amet, tempor sit amet, imperdiet porttitor, ligula. Donec eget urna id dui tempor aliquam. Aliquam eget justo. Cras sodales aliquam magna. Donec pulvinar laoreet orci. Duis dui.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed egestas vestibulum arcu. Sed vel sem at velit consectetuer gravida. Etiam sed tortor id sapien eleifend mollis. Vivamus aliquam lacinia dui. Nunc justo lacus, imperdiet sit amet, tempor sit amet, imperdiet porttitor, ligula. Donec eget urna id dui tempor aliquam. Aliquam eget justo. Cras sodales aliquam magna. Donec pulvinar laoreet orci. Duis dui.
    Suspendisse scelerisque suscipit felis. Duis rhoncus tincidunt magna. Sed elementum, nisi id euismod auctor, turpis ligula porttitor orci, non condimentum ligula quam vel dolor. Ut urna. Morbi eu massa. Nulla a ipsum ac purus elementum lobortis. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla non felis non mauris volutpat tincidunt. Proin faucibus turpis a mauris. Morbi in dui. Quisque hendrerit rhoncus est.
    Aenean id neque. Nulla nec est non ligula imperdiet condimentum. Praesent ipsum. Aenean dapibus. Mauris tempus augue sed leo. Fusce in eros et ipsum imperdiet rutrum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis et metus sit amet ipsum feugiat dignissim. Cras in est eu neque vehicula viverra. Mauris velit. Praesent venenatis, justo vitae tincidunt sagittis, tellus purus sollicitudin orci, eget lacinia velit massa non est. Etiam sed mi. Aliquam erat volutpat. Nullam non justo a pede tincidunt convallis. Aenean egestas magna et nisi. Donec sapien ipsum, tempor sed, aliquam et, tincidunt at, nibh. Nullam sagittis. Aenean ullamcorper. 
    </div>
    <div class="video">
    Aenean id neque. Nulla nec est non ligula imperdiet condimentum. Praesent ipsum. Aenean dapibus. Mauris tempus augue sed leo. Fusce in eros et ipsum imperdiet rutrum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis et metus sit amet ipsum feugiat dignissim. Cras in est eu neque vehicula viverra. Mauris velit. Praesent venenatis, justo vitae tincidunt sagittis, tellus purus sollicitudin orci, eget lacinia velit massa non est. Etiam sed mi. Aliquam erat volutpat. Nullam non justo a pede tincidunt convallis. Aenean egestas magna et nisi. Donec sapien ipsum, tempor sed, aliquam et, tincidunt at, nibh. Nullam sagittis. Aenean ullamcorper. Aenean id neque. Nulla nec est non ligula imperdiet condimentum. Praesent ipsum. Aenean dapibus. Mauris tempus augue sed leo. Fusce in eros et ipsum imperdiet rutrum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis et metus sit amet ipsum feugiat dignissim. Cras in est eu neque vehicula viverra. Mauris velit. Praesent venenatis, justo vitae tincidunt sagittis, tellus purus sollicitudin orci, eget lacinia velit massa non est. Etiam sed mi. Aliquam erat volutpat. Nullam non justo a pede tincidunt convallis. Aenean egestas magna et nisi. Donec sapien ipsum, tempor sed, aliquam et, tincidunt at, nibh. Nullam sagittis. Aenean ullamcorper. 
    </div>
    <div class="homenav">
    <a href="[URL]http://www.msplinks.com/MDFodHRwOi8vaG9tZS5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2Vy">Home</a[/URL]>
    </div>
    <div class="addnav">
    <a href="[URL]http://www.msplinks.com/MDFodHRwOi8vY29sbGVjdC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1pbnZpdGUuYWRkZnJpZW5kX3ZlcmlmeSZmcmllbmRJRD1YWFhYWFhYWA==">Add</a[/URL]>
    </div>
    <div class="messagenav">
    <a href="[URL]http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVzc2FnZSZmcmllbmRJRD1YWFhYWFhYWA==">Message</a[/URL]>
    </div>
    <div class="photosnav">
    <a href="[URL]http://www.msplinks.com/MDFodHRwOi8vdmlld21vcmVwaWNzLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPXVzZXIudmlld1BpY3R1cmUmZnJpZW5kSUQ9WFhYWFhYWFg=">Photos</a[/URL]>
    </div>


    [/HIGHLIGHT]
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So Blake, what exactly DID you do to achieve this?

  3. #3
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Myspace - when you first start off creating a new Myspace Account The main account is a Ugly ugly ugly IFRAME.The framework is horrible. So what i did was that i hid the Original Template that Myspace automatically creates for you and I layed a image on top of their Framework. I hid all of their content that they have on their site I started a template from scratch.

    {display:none;}

    Myspace. There are limitations to the MySpace HTML/CSS , and without the usual tools of JavaScript, or the <object> tag, pulling content into a page not meant for it requires a different scenerio.So i had to use a Internal Style Sheet During Development of the layout.
    Instead of Linking to a seperate CSS sheet.
    <link rel="stylesheet" type="text/css" href="style.css" />

    Which myspace doesnt allow you to do
    What i did was that i used My basic <style></style> Tags.
    This makes the Css inline with my html. I know I know you must be like what?
    Why would you do this this Inline styles shouldn't be used , since they tie presentation to content.But it was the only way i could develop the site.


    I broke the layout down into pieces.I gave each section of the template a Class.

    Code HTML4Strict:
     
    <div class="images">
    <a href="#">Example</a>
    </div>
     
    <div class="comment">
     
    <a href="#">Example</a>
     
    </div>
     
    <div class="list">
     
    <a href="#">Example</a>
     </div>
     
    <div class="last">
     
    <a href="#">Example</a>
     
    </div>
     
    <div class="video">
    <a href="#">Example</a>
    </div>
     
    <div class="homenav">
     
    <a href="#">Example</a>
     
    </div>
     
    <div class="addnav">
     
    <a href="#">Example</a>
     
    </div>
     
    <div class="messagenav">
     
    <a href="#">Example</a>
    </div>
     
    <div class="photosnav">
     
    <a href="#">Example</a>
    </div>

    Code HTML4Strict:
    I used classes instead of 
    [size=3]<div id="container">[/size]
     
     
    (what i used)
     
    [size=2]<div class="container">[/size]


    After that i started to do all of my positioning of my Css elements.
    I managed to Develop the template to appear to be
    cross browser compatibility. But there Is 1 Minor Issue In Ie, the Nav bar
    is misaligning a little bit. But who cares? right LOL It's only "Myspace".

    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/



Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •