Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 16
  1. #1
    Junior Member neografiq's Avatar
    Join Date
    Jan 2010
    Location
    San Francisco
    Posts
    7
    Member #
    20872
    Okay so I'm customizing a myspace page with div overlays inspired by another page. (see Images attached at the bottom) The problem is my Contact Table Div Overlay can't go any higher without pushing the Header Div way up. See the drawn arrow pointing up I want to move it up. If you notice his, his Contact Div Overlay is almost touching the bottom of his div header. I can hide my face picture and details, but when I try to push the Contact Table Div Overlay up and over it so it touches the bottom of my header, it pushes the header way out of the page.

    I tried tochange the position of each div class. I tried realtive, aboilsute, static, fixed, float and tweaked and tweaked but I can't get it to work. Anyone see anything glaring in the code that I don't? Do div overlays conflict with existing tables?

    Keep in mind this is done in myspace 1.0, and the rules may differ accordingly. But I'm certain this is my own inability to find the problem in the code. I'm also trying to add more tiny div overlays to support little section graphics tabs like he has (e.g. Bio Resume, Newsletter etc).

    My layout code that makes Divs conflict in position:

    Code:
    <style>
    
    .commentlinks a { font-weight:normal; font-size:9px; }
    
    td.columnsWidening img, td.columnsWidening object { max-width:260px; }
    
    <style type=”text/css”>
    .friendsComments {
    position:absolute;
    top:0px;
    margin-top:-900px;
    margin-left:0px;
    left:50%
    }
    </style>
    
    </style><style>
    td.columnsWidening img, td.columnsWidening object { width: ..this.width > 260 ? 260 : true); }
    </style><style>
        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/static/img/CCERGGRRG.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;}
        musicJVNav td.subnavItems{width:100%;}
    </style><style>
    browseMain td {text-align:left;}
    </style><style>
    table table table table td span.lightbluetext8 {display:none;}
    div.newmembers {position:relative; top:-70px; margin-left:-130px;  background-color:transparent; border:0px;  
    
    width:300px; height:60px; }
    </style><style><span>    !!!!EDIT BIO HERE!!!!    </span></style><style><span>    !!!!END EDIT BIO HERE!!!!    
    
    </span></style><style><span>    !!!!EDIT PICTURES HERE!!!!    </span></style><style><span>    !!!!END EDIT 
    
    PICTURES HERE!!!!    </span></style><style> 
    
    .r 
    
    body {
    background-color:black; background-image: url(http://img85.imageshack.us/imgXX/4XX3/XXXXXXXX.jpg); 
    
    background-attachment: fixed; background-position:top center;}
    td, .text, div, input {color:ffffff !important;}
    a {color:bcbbbb !important;} img {border:0px;}
    table, tr, td {background:transparent; border:0px;}
    
    .contactTable {display:none;}
    .extendedNetwork {display:none;}
    .friendSpace {display:none;}
    
    body table {margin-top:500px; left:50%;} 
    body td table, body div table {margin-top: 0;}
    
    .orangetext15 {display:none;}
    
    <style>
    
    .r
    
    body, div, span, td, p, .orangetext15, .whitetext12, .lightbluetext8, strong, b, u, .redtext, .redbtext, .text, 
    
    .nametext, .blacktext10, .blacktext12 {
        font-family: Georgia;
        font-size: 11px;
        color: ffffff;
        font-weight: normal;
        font-style: normal;
        text-decoration: none;
        }
    .btext {
    font-family: Georgia;
        font-size: 11px;
        color: ff0000;
        font-weight: normal;
        font-style: normal;
        text-decoration: none;
        }
    
    .whitetext12, .orangetext15 {
        color: bcbbbb;
        font-family: Georgia;
        font-size: 11px;
        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: d7d7b9;
            font-family: Georgia;
            font-size: 10px;
        font-weight: normal;
        font-style: normal;
        text-decoration: none;
        }
    a.navbar:hover, a.man:hover, a:hover {
        color: ffffff;
            font-family: Georgia;
            font-size: 10px;
        font-weight: bold;
        font-style: normal;
        text-decoration: ;
        }
    
    
    
    .r{}
    
    .imageheader {
    width:797px; height:490px; overflow:auto;
    z-index:1; left:50%; text-align:center; position:absolute;
    margin-left: -160px; top:-860px;
    visibility:visible;}
    
    .featvideos {
    width:435px; height:400px; overflow:auto;table.latestBlogEntry tr:first-child td {background-image: url(http://www.XXXX/XXXX/blog.jpg); height:50px; width:450px; text-align:right;}
    
    table.latestBlogEntry td span.btext {display:none;}
    
    </style><style>
    divgoogleLogo_Footer{
    height:24px !important;
    }
    </style><style>a .text { font-weight: bold; font-family: Arial, Helvetica, sans-serif; }</style><style>
            body, html {visibility:visible !important; display:block !important}
        </style>
    
    
    <div class="newmembers">
    <img src="http://imgXX9.XXXX.us/iXX9/3XX3/XXXX.jpg" /><br />
    <a href="http://www.XXXXX.com/dsgdhhsdfhfjhfjjfjfjDkyNzc="><img src="http://imgXX.XXXXXX.us/imgXX/3XX6/XXX.jpg" border="0" /></a><br />
    <a href="http://www.XXXXX.com/dsgdhhsdf46jhfjjfjfjDkyNzc="><img src="http://imgXX.XXXXXX.us/imgXX/3XX6/XXX.jpg" border="0" /></a><br />
    <a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&friendID=XXXXXXX"><img src="http://imgXX3.XXXXXXX.us/imgXXX/34XX4/XXXXX.jpg" border="0" /></a><br />
    <a href="http://www.XXXXX.com/dsgdhhsdfhfjhfjjfjfjDkyNzc="><img src="http://imgXX.XXXXXX.us/imgXX/3XX6/XXX.jpg" border="0" /></a><br />
    <a href="http://www.XXXXX.com/dsgdhhsdfh347fjjfjfjDkyNzc="><img src="http://imgXX.XXXXXX.us/imgXX/3XX6/XXX.jpg" border="0" /></a><br />
    <a href="http://www.XXXXX.com/dsgdhhs356633fjjfjfjDkyNzc="><img src="http://imgXX.XXXXXX.us/imgXX/3XX6/XXX.jpg" border="0" /></a><br /><br /><br />
    <br />
    <br />
    <br />
    <br />
    
    <div class="imageheader">
    <center>
    <a href="http://www.msplinks.com/MghgkjfjkghkdfjdjkdkUuaHRtbA=="><img src="http://imgXX.XXXXXX.us/imgXX/7XX/XXXXXXXX.jpg" border="0" /></a>
    </center>
    
    </div>
    Attached Images Attached Images

  2.  

  3. #2
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    i dont do myspace but it looks like you have the auto margin issue. try zeroing the margin on the header and or div in question. i start all my css with
    * { margin: 0px; padding: 0px; }
    this makes all margins and padding cross browser, downside is you have to set all margins and padding on an as needed basis.

    while($get_it !== true){ continue; }

  4. #3
    Junior Member neografiq's Avatar
    Join Date
    Jan 2010
    Location
    San Francisco
    Posts
    7
    Member #
    20872
    I replaced the margin-left: xxx in both .imageheader and in div.newmembers with { margin: 0px; padding: 0px; } and it did nothing to change my problem.. But even if they had, I would have lost my ability to place the div overlays exactly where I wanted by removing the margin coordinates.

  5. #4
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    ok. i have no idea what a div overlay is. post the code for just the two element in question. there is just way to much code for that little 2 column layout for me to want to read.

    while($get_it !== true){ continue; }

  6. #5
    Junior Member neografiq's Avatar
    Join Date
    Jan 2010
    Location
    San Francisco
    Posts
    7
    Member #
    20872
    I posted all of the code for the page because I wasn't sure what was causing the conflict between the two div overlays.

    This is the code for Contact div I want to move up:

    Code:
    <style>
    table table table table td span.lightbluetext8 {display:none;}
    div.newmembers {position:relative; top:-70px; margin-left:-130px;  background-color:transparent; border:0px; 
    width:300px; height:60px; }
    </style>
    //
    <div class="newmembers">
    <img src="http://imgXX9.XXXX.us/iXX9/3XX3/XXXX.jpg" /><br />
    <a href="http://www.XXXXX.com/dsgdhhsdfhfjhfjjfjfjDkyNzc="><img src="http://imgXX.XXXXXX.us/imgXX/3XX6/XXX.jpg" border="0" /></a><br />
    <a href="http://www.XXXXX.com/dsgdhhsdf46jhfjjfjfjDkyNzc="><img src="http://imgXX.XXXXXX.us/imgXX/3XX6/XXX.jpg" border="0" /></a><br />
    <a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&friendID=XXXXXXX"><img src="http://imgXX3.XXXXXXX.us/imgXXX/34XX4/XXXXX.jpg" border="0" /></a><br />
    <a href="http://www.XXXXX.com/dsgdhhsdfhfjhfjjfjfjDkyNzc="><img src="http://imgXX.XXXXXX.us/imgXX/3XX6/XXX.jpg" border="0" /></a><br />
    <a href="http://www.XXXXX.com/dsgdhhsdfh347fjjfjfjDkyNzc="><img src="http://imgXX.XXXXXX.us/imgXX/3XX6/XXX.jpg" border="0" /></a><br />
    <a href="http://www.XXXXX.com/dsgdhhs356633fjjfjfjDkyNzc="><img src="http://imgXX.XXXXXX.us/imgXX/3XX6/XXX.jpg" border="0" /></a><br /><br /><br />
    <br />
    And this is the code for the Header div that keeps getting bounced out every time I try to move the Contact div up:

    Code:
    .imageheader {
    width:797px; height:490px; overflow:auto;
    z-index:1; left:50%; text-align:center; position:absolute;
    margin-left: -160px; top:-860px;
    visibility:visible;}
    //
    <div class="imageheader">
    <center>
    <a href="http://www.msplinks.com/MghgkjfjkghkdfjdjkdkUuaHRtbA=="><img src="http://imgXX.XXXXXX.us/imgXX/7XX/XXXXXXXX.jpg" border="0" /></a>
    </center>
    -

  7. #6
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    ok. im not trying to be negative just to be negative, i do not intend to offend, and someone else may feel otherwise, but that code is garbage. thats why it wont work. there is simply no reason for all the negative positioning and margins, absolutes or almost any of it. did you get this from a template? or 3rd party?

    while($get_it !== true){ continue; }

  8. #7
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    * { margin: 0px; padding: 0px; }
    #box { width: 200px; height: 500px; }
    .head { position: absolute; top: 0px; left: 0px; right: 0px; width: auto; height: 25px; }
    .col { position: relative; top: 25px; float: left; width: 100px; height: 475px; }

    <div id=box>
    <div class='head'></div>
    <div class='col'></div>
    <div class='col'></div>
    </div>
    the dimensions are whatever, you'll have to make it how you want but this is the skeleton for a basic 2 col box with header that i use. give it a try.

    http://www.studio378d.com/wdf/two_col.html

    while($get_it !== true){ continue; }

  9. #8
    Junior Member neografiq's Avatar
    Join Date
    Jan 2010
    Location
    San Francisco
    Posts
    7
    Member #
    20872
    Quote Originally Posted by Dorky
    the dimensions are whatever, you'll have to make it how you want but this is the skeleton for a basic 2 col box with header that i use. give it a try.

    http://www.studio378d.com/wdf/two_col.html
    This is done within the confines of myspace. Which means you're restricted to what works. The negative spacing is to get things to behave in myspace. Here is the original page I was influenced by: http://www.myspace.com/djspider Notice how his Contact table covers the default myspace pic area and touches the bottom of the header?

    Mine can't do that, because when I move my contact box up the entire header explodes almost out of the page: http://www.myspace.com/sfmomentum

    I had to use the negative numbers jsut to get it look semi-normal. For some reason if I used his dimensions it's not even close.

  10. #9
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    thats because of auto margin is my guess. the
    * { margin: 0px; padding: 0px; }
    should take care of that. if you have a margin, it will push out the things around it. thats the intended use of margins. just use that line and it should fix it.

    while($get_it !== true){ continue; }

  11. #10
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    ok. so i went to my myspace. and did this
    .head { position:relative; top:0px; width:200px; height:25px; background-color: #000000; color: #ffffff; }
    .col { position:relative; top:0px; float:left; width:100px; height:275px; background-color: #000000; color: #ffffff; }
    <div>
    <div class='head'>Head</div>
    <div class='col'>col 1</div>
    <div class='col'>col 2</div>
    </div>
    and it did just fine. notice the lack of negative numbers. no i wont share my myspace ady to show you. but there it is. take it or leave it. no spaces between any of the divs.

    while($get_it !== true){ continue; }


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

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

Search tags for this page

html table keep getting pushed out of my div

,

table div conflict

Click on a term to search for related topics.
All times are GMT -6. The time now is 06:17 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com