Positions?

Discussion in 'Web Design and Development' started by Sir SpemzR, Aug 11, 2009.

  1. Sir SpemzR macrumors 6502

    Joined:
    Jun 9, 2009
    Location:
    Inland Empire
    #1
    No this isnt about sex haha...
    Well I currently design myspaces for people and I need help
    with the position coding for the DIVs....

    If i leave the code to...
    Code:
    <div style="width: auto; height: auto; [B]position: absolute;[/B] top:745px; left:-315px; background-color: transparent;">
    </div>
    when ever i make my safari window smaller the DIV flows with the size of
    the window and removes it from the position its suppose to be in

    I want it so it will stay where i put it and even if i make the safari window
    smaller it will still stay in its designated position....

    help please...
    thank you,
    Mario
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    It may be getting effected by the parent elements that div is inside. I don't see anything wrong with the code you provided, but other code on the page could effect it.
     
  3. Sir SpemzR thread starter macrumors 6502

    Joined:
    Jun 9, 2009
    Location:
    Inland Empire
    #3
    could it be the coding for my background image that doesnt allow it to shift?
    Code:
    <style>
    body{background-image:url("IMG GOES HERE");
    background-attachment:fixed;}
    </style>
    
    and for those who dont understand my problem here are some screen shots
    first one is how its suppose to look...second is the problem
     

    Attached Files:

  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    The background isn't an issue. I'm not sure where div you're working on is located within the page. With the width being set to auto it'll adjust its size so the content fits on screen. Giving it a fixed width may help some. The content also seems to be centered, which allows it to move some. I'd likely have to look at the actual page to see what specific CSS would help. I may take a closer look later.
     
  5. Sir SpemzR thread starter macrumors 6502

    Joined:
    Jun 9, 2009
    Location:
    Inland Empire
    #5
    Feel free...the url is

    myspace.com/itsamesupamario
     
  6. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #6
    Applying it to the div directly is a bit hard. I did come up with a piece of CSS though that moves those divs to about the right spot.

    Code:
    table.blurbs table td {
     position: absolute;
     top: 120px; left: 575px;
    }
    You'll need other tweaks, but it may be a decent starter piece. I hate MySpace's setup and HTML structure. Such headaches for this kind of thing.
     
  7. Sir SpemzR thread starter macrumors 6502

    Joined:
    Jun 9, 2009
    Location:
    Inland Empire
    #7
    well they are all different DIVs for example

    one DIV is the persons name
    another is their pictures
    another its their gfs pic

    do i apply it to each one?
     
  8. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #8
    As I remember from adding CSS to MySapce, the CSS I provided would just be in a general spot, not applied to a particular div tag. The div tags you're adjusting are inside the td tag that the CSS selector I gave effects. So no, not to each one. This will apply to all currently, though you may apply additional CSS to each div to get more control on placement.
     
  9. Sir SpemzR thread starter macrumors 6502

    Joined:
    Jun 9, 2009
    Location:
    Inland Empire
    #9
    Code:
    <div style="width: auto; height: auto; position: absolute; top: -45px; left:-350px; background-color: transparent;">
    <img src="" /> 
    </div>
    
    
    <div style="width: 240; height: 300; position: absolute; top:60px; left:-315px; background-color: transparent;"><img src="">
    </div>
    
    <div style="width: auto; height: auto; position: absolute; top:90px; left: 15px; background-color: transparent;">
    <center><font color="white">First off, please maximize your<br />internet window<br />Thank You.<br /><br />18 Years Old.<br />Discovering what is out there after high school.<br /><br />Hopefully attending FIDM this fall to get my A.A. in Graphic Design.<br /><br />I <font color="red">♥</font> Design and Photography<br />(They are my passions and<br />I actually know what I'm doing)
    </div>
    
    <div style="width: auto; height: auto; position: absolute; top:415px; left: 145px; background-color: transparent;">
    
    <a href="http://www.msplinks.com/MDFodHRwOi8vd3d3LmlzZWVwaG90b2Rlc2lnbi5kZXZpYW50YXJ0LmNvbQ=="></a>
    </div>
    
    
    <div style="width: 795; height: auto; position: absolute; top:335px; left: -335px; background-color: transparent;"><a href="http://www.msplinks.com/MDFodHRwOi8vY29tbWVudC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdDb21tZW50cyZmcmllbmRJRD0zODc4NTk2NzM="></a>
    
    <a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&friendID=387859673"></a>
    
    <a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVzc2FnZSZmcmllbmRJRD0zODc4NTk2NzM="></a>
    
    <a href="http://www.msplinks.com/MDFodHRwOi8vczI1LnBob3RvYnVja2V0LmNvbS9hbGJ1bXMvYzc0L05pZ2dlckxvdmVzQ2hpY2tlbi8/YWN0aW9uPXZpZXcmY3VycmVudD1ibG9jay0zLnBuZw==" target="_blank"></a>
    </div>
    
    
    
    <div style="width: 350; height: 378; position: absolute; overflow:auto; text-align:justify; top:465px; left: 85px; background-color: transparent;"><p style="white-space:nowrap;">
    <img src="" />
    
    <img src="" />
    
    <img src="" />
    
    <img src="" />
    
    <img src="" />
    
    <img src="" />
    
    <img src="" />
    
    <img src="" />
    
    <img src="" />
    </div>
    
    
    <div style="width: auto; height: auto; position: absolute; top:415px; left: -315px; background-color: transparent;">
    <img src="" />
    </div>
    
    <div style="width: auto; height: auto; position: absolute; top:445px; left: -130px; background-color: transparent;"><font color="white">This is my girlfriend Jennifer.<br />Been together for over 2.5 years<br /> and going strong. I love her and<br /> care for her so much, and  know <br />she feels the same exact way. <br />She has completely made me a<br /> better person.<br /> I Love You Baby.<br /> JCME
    </div>
    
    <div style="width: auto; height: auto; position: absolute; top:745px; left:-315px; background-color: transparent;">
    <img src="" />
    </div>

    This is all the coding i have for the DIVs nothing else defines them
    every other coding i have is to hide things like the contact tables
    and what not
     
  10. Cerebrus' Maw macrumors 6502

    Joined:
    Mar 9, 2008
    Location:
    Brisbane, Australia
    #10
    I'm not sure if this will work. (Funnily enough, I work in the opposite fashion of try to make things flow nicely is a user makes their window smaller....)

    but

    if you surround your entire content above with:

    <div style="position:relative; width:100%; height:100%;">
    ##Your content above###
    </div>

    Again, not sure...
     
  11. Sir SpemzR thread starter macrumors 6502

    Joined:
    Jun 9, 2009
    Location:
    Inland Empire
    #11
    Didnt work out :(
    made everything about 1000px lower
    and still shifted over when i made the window smaller

     
  12. Cerebrus' Maw macrumors 6502

    Joined:
    Mar 9, 2008
    Location:
    Brisbane, Australia
    #12
    hm, try this (not sure how this will affect your other content, hopefully it will put in line breaks!!)

    <div style="width:2000px; overflow:scroll;">
    ##your content###
    </div>
     
  13. Sir SpemzR thread starter macrumors 6502

    Joined:
    Jun 9, 2009
    Location:
    Inland Empire
    #13
    nothing. :confused:

    would any of this be affecting my DIV?

    Code:
    <style>embed, object {position:absolute; top:495px; left:50%; margin-left: 0px; z-index:9; } td td td embed, td td td object { position:static; margin-left:0px; }</style>
    
    <style>
    
    body{background-image:url("");
    background-attachment:fixed;}
    
    </style>
    
    <style>
    .extendedNetwork {display:none;}
    .latestBlogEntry {display:none;}
    </style>
    
    <style>td.text table {position:relative; top: -20px;}td.text table table {position:static;}</style>
    <p>
    
    <style>.a {MySpaceGens.com - hide your comments} .friendsComments {display:none;}</style>
    
    <style>
    .contactTable {display:none;}
    </style>
    
    <style>.userProfileURL { display:none; }
    
    
     table table table td { 
      background-color:Transparent; 
     } 
    
    </style>
    
    
    <style>
    .mygen { Created using MyGen 2.5 - www.mygen.co.uk }
    
    .mygen { Background Properties }
    table, tr, td { background-color:transparent; border:none; border-width:0;}
    body {
    	background-color:transparent;
            }
    
    
    </style>
    
    
    
    
    <style>
    .mygen { Created using MyGen 2.5 - www.mygen.co.uk }
    
    
    .mygen { Miscellaneous Properties }
    tr {background:transparent;}
    body table div font a, body table div div {visbility:hidden;}
    body table table div font a, body table table div div {visibility:visible;}
    </style>
    
    
    <style>
    .profileInfo { display:none; }
    </style>
    
    
    <style>
    .userProfiledetail { display:none; }
    </style>
    
    
    <style>
    .r{}
    .orangetext15{display:none;}
    </style>
    
    <style>.friendSpace { display:none; }</style>
     
  14. Mal macrumors 603

    Mal

    Joined:
    Jan 6, 2002
    Location:
    Orlando
    #14
    First thing I see there is that you've got a bunch of < style> tags where one would work (all of that should be in one < style> tag in the head of your document), and there's a < p> tag thrown in there that shouldn't ever be in the same area of your document as a < style> tag. Try fixing that and see if it helps.

    jW
     
  15. Joined:
    Jun 30, 2009
    #15
    From those screenshots, am I the only one who thinks the image which floats around is not included in the wrapper, which should have the proprieties margin: 0 auto; width: 800px;? If it is included, it's never happened to me to give such an error. Maybe post both your HTML and CSS?
     
  16. m3kilpat macrumors regular

    Joined:
    Jul 6, 2009
    #16
    Your site does not render correctly at all in firefox. Your main content is all the way to the left and I cannot see it. It is fine in IE though. You may want to change the way you laid it out and use divs instead of tables because tables suck. If you just had a "content" div and put everything else inside it this would be very easy to accomplish.
     
  17. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #17
    This is a MySpace page. He can't really control the content too much. It only allows adding some style and some tags. Getting rid of the table layouts is impossible.
     
  18. Sir SpemzR thread starter macrumors 6502

    Joined:
    Jun 9, 2009
    Location:
    Inland Empire
    #18
    they are DIV, i dont know tables much..
    i dont get it, theres almost no way to make a myspace
    look good in all browsers since they all read it differently

    i ended up making the black transparent area its own DIV
    (pulled it from the background image psd) and now it floats
    with all the content....

    C&C anyone?
     
  19. m3kilpat macrumors regular

    Joined:
    Jul 6, 2009
    #19
    There is [was] a way to hide everything that is there and basically create anything you want over top of it. I did this a few years back but really couldn't help you achieve this now. I'm not sure if they changed how it works since then.
     
  20. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #20
    Not sure if that's the case either, but I remember there was guidelines that said you weren't allowed to remove/hide the ads on the page, so getting rid of everything wouldn't be completely allowed (if even possible). Moot point though.
     
  21. m3kilpat macrumors regular

    Joined:
    Jul 6, 2009
    #21
    I just went back to look at it. I had the main content area overlayed but the top banner was still there. It looks like crap now so I guess things have changed a little. This is pretty much a meaningless post.
     

Share This Page