Div id's wont stay centered!, Page varies by screen resolution |
 Jan 16 2008, 08:12 AM
Post
#1
|
|
|
Member  Group: Member Posts: 13 Joined: Jan 2008 Member No: 611,436  |
Hello Guys,
I sincerely apologize if this topic has been posted before! I am having challenges creating a main div! Check it I created a page that should be aligned correctly. Its supposed to be Main div controls all the other Div id codes. All I have is the Div id. What can I do? http://www.myspace.com/iffidesigns is the site. Im a local upstart designer guys, have mercy on me! lol Here is the code CODE <body> <div id="layer1" style="position:absolute; width:200px; height:115px; z-index:1; left: 0; top: 0;"><img src="http://img120.imageshack.us/img120/4223/sappyg5.jpg" width="950" height="2140" border="0"></div> <div id="Layer2" style="position:absolute; width:200px; height:152px; z-index:2; left: 691px; top: 227px;"><table width="200" height="131" border="0" cellpadding="2" cellspacing="1"> <tr> <td height="23"><a href="http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=156431404"><img src="http://img178.imageshack.us/img178/4521/blanklf2.gif" width="198" height="25" border="0"></a></td> </tr> <tr> <td height="23"><a href="http://messaging.myspace.com/index.cfm?fuseaction=mail.message&friendID=156431404&MyToken=bcad2520-e1d5-4cf9-8ba4-13448c3ba900"><img src="http://img178.imageshack.us/img178/4521/blanklf2.gif" width="198" height="25" border="0"></a></td> </tr> <tr> <td><a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&friendID=156431404"><img src="http://img178.imageshack.us/img178/4521/blanklf2.gif" width="198" height="25" border="0"></a></td> </tr> <tr> <td><a href="http://blog.myspace.com/index.cfm?fuseaction=blog.ListAll&friendID=156431404"><img src="http://img178.imageshack.us/img178/4521/blanklf2.gif" width="198" height="25" border="0"></a></td> </tr> <tr> <td><a href="http://collect.myspace.com/index.cfm?fuseaction=block.blockUser&userID=156431404"><img src="http://img178.imageshack.us/img178/4521/blanklf2.gif" width="198" height="25" border="0"></a></td> </tr> </table> </div> <div id="Layer3" style="position:absolute; width:123px; height:95px; z-index:3; left: 116px; top: 293px;"><table width="137" height="97" border="0" cellpadding="1" cellspacing="1"> <tr> <td><a href="http://groups.myspace.com/index.cfm?fuseaction=groups.addtogroup&friendID=156431404"><img src="http://img178.imageshack.us/img178/4521/blanklf2.gif" width="140" height="19" border="0"></a></td> </tr> <tr> <td><a href="http://collect.myspace.com/index.cfm?fuseaction=user.addToFavorite&friendID=156431404&public=0"><img src="http://img178.imageshack.us/img178/4521/blanklf2.gif" width="140" height="19" border="0"></a></td> </tr> <tr> <td><a href="http://messaging.myspace.com/index.cfm?fuseaction=mail.forward&friendID=156431404&f=forwardprofile"><img src="http://img178.imageshack.us/img178/4521/blanklf2.gif" width="140" height="19" border="0"></a></td> </tr> <tr> <td><a href="http://collect.myspace.com/index.cfm?fuseaction=RateImage.UserRating&UserID=156431404"><img src="http://img178.imageshack.us/img178/4521/blanklf2.gif" width="140" height="19" border="0"></a></td> </tr> </table> </div> <div id="Layer4" class="style1" style="position:absolute; width:322px; height:346px; z-index:4; left: 64px; top: 794px; overflow: auto;"> <p align="justify"><font face="Tahoma"><font color= "white"><br> A passionate Orator and Biblical teacher who desires to be a living Epistle glorifying our lord and Saviour Jesus Christ both in word and in deed. Many say his voice is instantly recognizable. Characteristically raspy ringing with power and authority as he masterfully illustrates with excellence the word of God. Not only is his delivery exemplary, his knowledge of the historical text brings to life the message of hope and healing. NOT A SINGER THAT HAPPENS TO PREACH, BUT A PREACHER CALLED BY GOD WHO HAPPENS TO SING! Singing since the age of 4 he has shared the stage with many gospel notables and his gift is celebrated across musical genres. While he has enjoyed a decorated music ministry, receiving Stellar awards, Gospel Music Excellence awards as well as Grammy, Soul Train Music, and Dove award nominations, he has also been honored in his home town Grand Rapids, Michigan. Recognized for his Professional and Philanthropic efforts he has received the city's highest African American honor, a Giants Award, as well as the Fredrick Douglas award from the National Association of Negro and Professional Womens Club. NOT COMPLACENT, YET PRESSING TOWARD THE MARK Currently as Founder and Senior Pastor of Lighthouse Full Life Center Church, one of the fastest growing churches in Western Michigan, he is innovative in his approach to win the lost and edifying the believer. As a native of Grand Rapids, Michigan Pastor Marvin is committed to his community and enjoys taking the message to the masses. In his inaugural year, the ministry has initiated a Full Life approach with an emphasis of addressing the Spiritual, Physical, and mental needs of the body. By no means is Pastor Marvin and the Lighthouse family resting on laurels or taking credit for the well rounded and effective ministry approach. If fact, with humility, they acknowledge they have found the formula for a successful ministry in the word of God cultivated with a relationship with God. Pastor Marvin is united in covenant to First Lady Malinda Sapp, a gifted speaker, local college professor and Limited Licensed Psychologist, who also serves as Administrative Pastor. They have three wonderful children; Marvin II, Mikaila, and Madisson.</font></p> </div> </div> <div id="Layer5" class="style2" style="position:absolute; width:321px; height:349px; z-index:5; left: 65px; top: 1199px; overflow: auto;"><object enableJSURL="false" enableHREF="false" saveEmbedTags="true" allowScriptAccess="never" allownetworking="internal" type="application/x-shockwave-flash" allowScriptAccess="never" allownetworking="internal" height="270" width="99%" data="http://www.youtube.com/v/l0uAadfCzpE&rel=1&border=1"> <param name="allowScriptAccess" value="never" /> <param name="allowNetworking" value="internal" /> <param name="movie" value="http://www.youtube.com/v/l0uAadfCzpE&rel=1&border=1" /> </object><br> <object enableJSURL="false" enableHREF="false" saveEmbedTags="true" allowScriptAccess="never" allownetworking="internal" type="application/x-shockwave-flash" allowScriptAccess="never" allownetworking="internal" height="270" width="99%" data="http://www.youtube.com/v/wWHeZqV_Dlw&rel=1&border=1"> <param name="allowScriptAccess" value="never" /> <param name="allowNetworking" value="internal" /> <param name="movie" value="http://www.youtube.com/v/wWHeZqV_Dlw&rel=1&border=1" /> </object></div> <div id="Layer6" style="position:absolute; width:460px; height:347px; z-index:6; left: 425px; top: 1201px; overflow: auto;"> EMBED THE EXTRAS </div> </div> </body> <style> object {position:absolute; left:50%; top:789px; margin-left:-44px;} table table table object {position:static; margin-left:0px;} </style> <style type="text/css"> .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:AC733E; background-image:url(http://img139.imageshack.us/img139/2900/sappbgfk7.jpg); scrollbar-face-color:AC733E; scrollbar-highlight-color:AC733E; scrollbar-3dlight-color:FFFFFF; scrollbar-shadow-color:AC733E; scrollbar-darkshadow-color:FFFFFF; scrollbar-arrow-color:662222; scrollbar-track-color:955F31; } .mygen { Text Properties } table, tr, td, li, p, div { font-family:arial; color:FFFFFF; font-size:10px; } .btext { font-family:arial; color:FFFFFF; font-size:10px; } .blacktext10 { font-family:arial; color:664422; font-size:12px; font-weight:bold; } .lightbluetext8 { font-family:arial; color:662222; font-size:10px; } .orangetext15 { font-family:arial; color:662222; font-size:10px; } .redtext { font-family:arial; color:662222; font-size:10px; } .redbtext { font-family:arial; color:662222; font-size:10px; } .whitetext12 { font-family:arial; color:662222; font-size:10px; } a:active, a:visited, a:link { font-family:arial; color:FFFFFF; font-size:10px; } a:hover { font-family:arial; color:662222; font-size:10px; } a.navbar:active, a.navbar:visited, a.navbar:link { font-family:arial; color:FFFFFF; font-size:10px; } a.navbar:hover { font-family:arial; color:FF8822; font-size:10px; } a.redlink:active, a.redlink:visited, a.redlink:link { font-family:arial; color:FFFFFF; font-size:10px; } a.redlink:hover { font-family:arial; color:662222; font-size:10px; } .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;} .comt td, .comt table{width:0px!important; height:0px!important; background-color:transparent!important; border:0px!important; _padding:2px!important;} .comt, .comt td, .comt table, .comt td a img, .comt td td td a, .comt td b a, .comt td .redlink{visibility:visible;} .comt td td td b{top:0px; display:inline;} .comt .orangetext15{display:none;} .comt td b, .blacktext10 {display:block;} .comt table, .comt td b, .comt .btext, .redlink{position:relative; top:-9px;} .comt {z-index:7;} JB{add background image to timestamp} .blacktext10{background-color:111111;} JB{The Main comment div} .comt {width:652px; height:282px; overflow:auto; background-color:transparent; background-image:url(url_to_pic.gif); border:0px solid; border-color:black; position:absolute; top:1630px; left:50%; margin-left:-346px;} JB{comment timestamp width} .blacktext10 {width: 500px;} JB{resizes: images posted in comments} .comt td img {max-width:70px!important; _width:70px!important;} JB{resizes: linked images including friends profile pic} .comt td a img {max-width:70px!important; _width:70px!important;} JB{hides: friend name links} .comt td td td a{visibility:hidden!important;font-size:0px!important;} JB{unhides: friend name links in top 8 (fix for above code)} .comt td td td td a{visibility:visible!important; font-size:10px !important;} JB{add background image to timestamp} .blacktext10{background-color:DAD29C ;} </style> </td></tr></table></td></tr></table></td></tr></table> <div class="comt"><table class="frnd"><tr><td> <table class="off"><tr><td><table><tr><td> </style> <style type="text/css"> .Main { position:absolute; left:50%; top:0px; width:800px; z-index:1; margin-left:-473px; padding:0px; border:0px; background-color:transparent;} </style> I am thoroughly confused! any help please? |
|
|
|
 |
Replies
|
Jan 17 2008, 07:19 AM
Post
#2
|
|
 Addict Group: Staff Alumni Posts: 3,918 Joined: Jun 2007 Member No: 538,522 |
Okay, I've been working on this in all resolutions and think I've cracked it.
What I've done is to absolutely position your main image using left and margin-left properties and then converted the content to a relative position (as you don't want an absolute for these - 20px to the left absolute will remain 20px left on ALL resolutions) using just left and top properties. The table navigation was the trickiest, but that's relatively positioned again and should work in all resolutions. (TBH, image mapping this would be much easier on you!) I've left the comment table for you to try (just follow what I did for the other content sections) as it doesn't look too badly aligned anyway. So, that all gives us: CODE <body>
<div id="layer1" style="position:absolute; width:200px; height:115px; z-index:1; left: 50%;margin-left:-475px; top: 0;"> <img src="http://img120.imageshack.us/img120/4223/sappyg5.jpg" width="950" height="2140" border="0"></div> <div id="Layer2" style="position:relative; width:200px; height:152px; z-index:2; left: 261px; top: -160px;"> <table width="200" height="131" border="0" cellpadding="2" cellspacing="1"> <tr> <td height="23"><a href="http://www.msplinks.com/MDFodHRwOi8vY29sbGVjdC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1pbnZpdGUuYWRkZnJpZW5kX3ZlcmlmeSZmcmllbmRJRD0xNTY0MzE0MDQ="><img src="http://img178.imageshack.us/img178/4521/blanklf2.gif" width="198" height="25" border="0"></a></td> </tr> <tr> <td height="23"><a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVz 2FnZSZmcmllbmRJRD0xNTY0MzE0MDQmTXlUb2tlbj1iY2FkMjUyMC1lMWQ1LTRjZjktOGJhNC0xMzQ0O MzYmE5MDA="><img src="http://img178.imageshack.us/img178/4521/blanklf2.gif" width="198" height="25" border="0"></a></td> </tr> <tr> <td><a href="http://www.msplinks.com/MDFodHRwOi8vdmlld21vcmVwaWNzLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPXVzZXIu mlld0FsYnVtcyZmcmllbmRJRD0xNTY0MzE0MDQ="><img src="http://img178.imageshack.us/img178/4521/blanklf2.gif" width="198" height="25" border="0"></a></td> </tr> <tr> <td><a href="http://www.msplinks.com/MDFodHRwOi8vYmxvZy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1ibG9nLkxpc3RBbGwmZnJpZW5kSUQ9MTU2NDMxNDA0"><img src="http://img178.imageshack.us/img178/4521/blanklf2.gif" width="198" height="25" border="0"></a></td> </tr> <tr> <td><a href="http://www.msplinks.com/MDFodHRwOi8vY29sbGVjdC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1ibG9jay5ibG9ja1VzZXImdXNlcklEPTE1NjQzMTQwNA=="><img src="http://img178.imageshack.us/img178/4521/blanklf2.gif" width="198" height="25" border="0"></a></td> </tr> </table> </div> <div id="Layer3" style="position:relative; width:123px; height:95px; z-index:3; left: -326px; top: -235px;"><table width="137" height="97" border="0" cellpadding="1" cellspacing="1"> <tr> <td><a href="http://www.msplinks.com/MDFodHRwOi8vZ3JvdXBzLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPWdyb3Vwcy5hZGR0 2dyb3VwJmZyaWVuZElEPTE1NjQzMTQwNA=="><img src="http://img178.imageshack.us/img178/4521/blanklf2.gif" width="140" height="19" border="0"></a></td> </tr> <tr> <td><a href="http://www.msplinks.com/MDFodHRwOi8vY29sbGVjdC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLmFkZFRvRmF2b3JpdGUmZnJpZW5kSUQ9MTU2NDMxNDA0JnB1YmxpYz0w"><img src="http://img178.imageshack.us/img178/4521/blanklf2.gif" width="140" height="19" border="0"></a></td> </tr> <tr> <td><a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwuZm9y 2FyZCZmcmllbmRJRD0xNTY0MzE0MDQmZj1mb3J3YXJkcHJvZmlsZQ=="><img src="http://img178.imageshack.us/img178/4521/blanklf2.gif" width="140" height="19" border="0"></a></td> </tr> <tr> <td><a href="http://www.msplinks.com/MDFodHRwOi8vY29sbGVjdC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1SYXRlSW1hZ2UuVXNlclJhdGluZyZVc2VySUQ9MTU2NDMxNDA0"><img src="http://img178.imageshack.us/img178/4521/blanklf2.gif" width="140" height="19" border="0"></a></td> </tr> </table> </div> <div id="Layer4" class="style1" style="position:relative; width:322px; height:346px; z-index:4; left: -350px; top: 154px; overflow: auto;"> <p align="justify"> <font face="Tahoma"><font color= "white"><br> A passionate Orator and Biblical teacher who desires to be a living Epistle glorifying our lord and Saviour Jesus Christ both in word and in deed. Many say his voice is instantly recognizable. Characteristically raspy ringing with power and authority as he masterfully illustrates with excellence the word of God. Not only is his delivery exemplary, his knowledge of the historical text brings to life the message of hope and healing. NOT A SINGER THAT HAPPENS TO PREACH, BUT A PREACHER CALLED BY GOD WHO HAPPENS TO SING! Singing since the age of 4 he has shared the stage with many gospel notables and his gift is celebrated across musical genres. While he has enjoyed a decorated music ministry, receiving Stellar awards, Gospel Music Excellence awards as well as Grammy, Soul Train Music, and Dove award nominations, he has also been honored in his home town Grand Rapids, Michigan. Recognized for his Professional and Philanthropic efforts he has received the city's highest African American honor, a Giants Award, as well as the Fredrick Douglas award from the National Association of Negro and Professional Womens Club. NOT COMPLACENT, YET PRESSING TOWARD THE MARK Currently as Founder and Senior Pastor of Lighthouse Full Life Center Church, one of the fastest growing churches in Western Michigan, he is innovative in his approach to win the lost and edifying the believer. As a native of Grand Rapids, Michigan Pastor Marvin is committed to his community and enjoys taking the message to the masses. In his inaugural year, the ministry has initiated a Full Life approach with an emphasis of addressing the Spiritual, Physical, and mental needs of the body. By no means is Pastor Marvin and the Lighthouse family resting on laurels or taking credit for the well rounded and effective ministry approach. If fact, with humility, they acknowledge they have found the formula for a successful ministry in the word of God cultivated with a relationship with God. Pastor Marvin is united in covenant to First Lady Malinda Sapp, a gifted speaker, local college professor and Limited Licensed Psychologist, who also serves as Administrative Pastor. They have three wonderful children; Marvin II, Mikaila, and Madisson.</font></p> </div> </div> <div id="Layer5" class="style2" style="position:relative; width:321px; height:349px; z-index:5; left: -344px; top: 224px; overflow: auto;"><object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" height="270" width="99%" data="http://www.youtube.com/v/l0uAadfCzpE&rel=1&border=1"> <param name="allowScriptAccess" value="never" /> <param name="allowNetworking" value="internal" /> <param name="movie" value="http://www.youtube.com/v/l0uAadfCzpE&rel=1&border=1" /> </object><br> <object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" height="270" width="99%" data="http://www.youtube.com/v/wWHeZqV_Dlw&rel=1&border=1"> <param name="allowScriptAccess" value="never" /> <param name="allowNetworking" value="internal" /> <param name="movie" value="http://www.youtube.com/v/wWHeZqV_Dlw&rel=1&border=1" /> </object></div> <div id="Layer6" style="position:relative; width:460px; height:347px; z-index:6; left: 100px; top: -100px; overflow: auto;"> EMBED THE EXTRAS </div></div></body> <style>object {position:absolute; left:50%; top:789px; margin-left:-44px;}table table table object{position:static; margin-left:0px;}</style><style type="text/css">.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:AC733E; background-image:url(http://img139.imageshack.us/img139/2900/sappbgfk7.jpg); scrollbar-face-color:AC733E; scrollbar-highlight-color:AC733E; scrollbar-3dlight-color:FFFFFF; scrollbar-shadow-color:AC733E; scrollbar-darkshadow-color:FFFFFF; scrollbar-arrow-color:662222; scrollbar-track-color:955F31; }.mygen { Text Properties }table, tr, td, li, p, div { font-family:arial; color:FFFFFF; font-size:10px; } .btext { font-family:arial; color:FFFFFF; font-size:10px; } .blacktext10 { font-family:arial; color:664422; font-size:12px; font-weight:bold; } .lightbluetext8 { font-family:arial; color:662222; font-size:10px; } .orangetext15 { font-family:arial; color:662222; font-size:10px; } .redtext { font-family:arial; color:662222; font-size:10px; } .redbtext { font-family:arial; color:662222; font-size:10px; } .whitetext12 { font-family:arial; color:662222; font-size:10px; } a:active, a:visited, a:link { font-family:arial; color:FFFFFF; font-size:10px; } a:hover { font-family:arial; color:662222; font-size:10px; } a.navbar:active, a.navbar:visited, a.navbar:link { font-family:arial; color:FFFFFF; font-size:10px; } a.navbar:hover { font-family:arial; color:FF8822; font-size:10px; } a.redlink:active, a.redlink:visited, a.redlink:link { font-family:arial; color:FFFFFF; font-size:10px; } a.redlink:hover { font-family:arial; color:662222; font-size:10px; } .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;}.comt td, .comt table{width:0px!important; height:0px!important; background-color:transparent!important; border:0px!important; _padding:2px!important;} .comt, .comt td, .comt table, .comt td a img, .comt td td td a, .comt td b a, .comt td .redlink{visibility:visible;} .comt td td td b{top:0px; display:inline;} .comt .orangetext15{display:none;} .comt td b, .blacktext10 {display:block;} .comt table, .comt td b, .comt .btext, .redlink{position:relative; top:-9px;} .comt {z-index:7;}JB{add background image to timestamp}.blacktext10{background-color:111111;}JB{The Main comment div}.comt {width:652px; height:282px; overflow:auto; background-color:transparent; background-image:url(url_to_pic.gif); border:0px solid; border-color:black;position:absolute; top:1630px; left:50%; margin-left:-346px;}JB{comment timestamp width}.blacktext10 {width: 500px;}JB{resizes: images posted in comments}.comt td img {max-width:70px!important; _width:70px!important;}JB{resizes: linked images including friends profile pic}.comt td a img {max-width:70px!important; _width:70px!important;}JB{hides: friend name links}.comt td td td a{visibility:hidden!important;font-size:0px!important;}JB{unhides: friend name links in top 8 (fix for above code)}.comt td td td td a{visibility:visible!important; font-size:10px !important;}JB{add background image to timestamp}.blacktext10{background-color:DAD29C;}</style></td></tr></table></td></tr></table></td></tr></table><div class="comt"><table class="frnd"><tr><td><table class="off"><tr><td><table><tr><td></style><style type="text/css">.Main { position:absolute; left:50%; top:0px; width:800px; z-index:1; margin-left:-473px; padding:0px; border:0px; background-color:transparent;}</style> |
|
|
|
Posts in this topic
stillchadic03 Div id's wont stay centered! Jan 16 2008, 08:12 AM
lambeausouth923 That's a heck of a nice start. Bravo!... Jan 16 2008, 09:02 AM lambeausouth923 One last thing, just an FYI. Myspace gets very cra... Jan 16 2008, 09:14 AM
stillchadic03 QUOTE(lambeausouth923 @ Jan 16 2008, 09:1... Jan 16 2008, 09:18 AM stillchadic03 Thanks my friend, I tried it and it didnt budge th... Jan 16 2008, 09:16 AM lambeausouth923 Wow, that's weird. When I loaded it the first ... Jan 16 2008, 09:36 AM S-Majere You use a lot of position: absolute - try to use p... Jan 16 2008, 01:01 PM stillchadic03 Nope the relative coding didnt work either :( Jan 16 2008, 05:10 PM |
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members: