positioning help |
positioning help |
Mar 13 2010, 07:24 PM
Post
#1
|
|
|
Senior Member ![]() ![]() ![]() ![]() Group: Member Posts: 123 Joined: Nov 2008 Member No: 698,881 |
My headers are always off by 1 px either in safari or FF. I can get it right in IE and FF but it'll be off by a pixel in Safari or vice versa.
Here is my code for the top header: CODE <div id="BannerUnderTopNav" style="position:absolute; z-index:2; margin-left:-346px; _margin-left:-333px; top: 0px; background-color:COLOR; background-image:URL(http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THOSE%20VICTORIOUS/header1.jpg); background-repeat: no-repeat; background-position: bottom center; width:823px; height:2017px; overflow:no;}"> </div> I have the _margin-left: xxx for IE and the other margin attribute for FF and Safari. But as you can see here: http://www.myspace.com/frucatestpage it'll be a px off in FF but right in safari. Let me know if there's something I can add in the code to fix that. Thanks guys! |
|
|
|
![]() |
Mar 19 2010, 11:50 AM
Post
#2
|
|
|
Senior Member ![]() ![]() ![]() ![]() Group: Member Posts: 123 Joined: Nov 2008 Member No: 698,881 |
That does sounds way better!
Ok, I tried another site i had worked on with this idea. Took out the background image and added the whole graphic (sliced) in the top header section. If I can make this work, my problem will be solved. My issue now is the comments and right side content (shows, bio, promo, friends) are covered. Is there something i'm missing. Link: http://www.myspace.com/frucatestpage3 Here's the code: CODE <style> .profileWidth { padding-bottom:750px !important;} </style> <div id="BannerUnderTopNav" style="position:absolute; z-index:2; margin-left:-735px; _margin-left:-730px; top: 0px; background-color:COLOR; background-image: ; background-repeat: no-repeat; background-position: bottom center; width:826px; height:948px; overflow:no;}"> <table id="Table_01" width="1600" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="3"> <img src="http://i382.photobucket.com/albums/oo268/dygynomi/newbgandheader_01.jpg" width="1600" height="171" alt="" /></td> </tr> <tr> <td colspan="3"> <img src="http://i382.photobucket.com/albums/oo268/dygynomi/newbgandheader_02.jpg" width="1600" height="371" alt="" /></td> </tr> <tr> <td> <a href="http://www.msplinks.com/MDFodHRwOi8vd3d3LnR3aXR0ZXIuY29t"> <img src="http://i382.photobucket.com/albums/oo268/dygynomi/newbgandheader_03.jpg" width="486" height="22" border="0" alt="" /></a></td> <td rowspan="2"> <a href="http://www.msplinks.com/MDFodHRwOi8vd3d3LnlhaG9vLmNvbQ=="> <img src="http://i382.photobucket.com/albums/oo268/dygynomi/newbgandheader_04.jpg" width="109" height="23" border="0" alt="" /></a></td> <td> <img src="http://i382.photobucket.com/albums/oo268/dygynomi/newbgandheader_05.jpg" width="1005" height="22" alt="" /></td> </tr> <tr> <td> <img src="http://i382.photobucket.com/albums/oo268/dygynomi/newbgandheader_06.jpg" width="486" height="1" alt="" /></td> <td> <img src="http://i382.photobucket.com/albums/oo268/dygynomi/newbgandheader_07.jpg" width="1005" height="1" alt="" /></td> </tr> <tr> <td colspan="3"> <img src="http://i382.photobucket.com/albums/oo268/dygynomi/newbgandheader_08.jpg" width="1600" height="341" alt="" /></td> </tr> <tr> <td colspan="3"> <img src="http://i382.photobucket.com/albums/oo268/dygynomi/newbgandheader_09.jpg" width="1600" height="704" alt="" /></td> </tr> <tr> <td colspan="3"> <img src="http://i382.photobucket.com/albums/oo268/dygynomi/newbgandheader_10.jpg" width="1600" height="1129" alt="" /></td> </tr> </table> </div> <style> .tg_left {position:absolute; margin-top:-0px; margin-left:-410px; left:50%; top:1184px; width:315px; height:700px; background-color:transparent; z-index:2;} </style> <div class="tg_left"> <img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20NATALIE%20SMITH/bigline.png" /><br /><br /> <center> <div style="width:176px;text-align:center"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="176" width="176" align="middle"> <param name="allowScriptAccess" value="never" /> <param name="allowNetworking" value="internal" /> <param name="movie" value="http://twitter.com/flash/twitter_badge.swf" /> <param name="wmode" value="transparent" /> <param name="flashvars" value="color1=3368703&type=user&id=18664543" /> <param name="quality" value="high" /> <embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://twitter.com/flash/twitter_badge.swf" height="176" width="176" align="middle" wmode="transparent" flashvars="color1=3368703&type=user&id=18664543" quality="high" /> </object><br /><a style="font-size: 10px; color: ffffff; text-decoration: none" href="http://www.msplinks.com/MDFodHRwOi8vdHdpdHRlci5jb20vbmF0c21pdGhtdXNpYw==">FOLLOW NATALIE!</a></div> <br /><br /> </center> <img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20SEAN%20PATRICK%20MCGRAW/infoline.png" /><br /><br /> <table width="250px" border="0" cellspacing="3" cellpadding="3"> <tr> <td><sub>GENRE</sub></td><td><div align="right">Pop</div></td> </tr> <tr> <td><sub>URL</sub></td><td><div align="right">www.myspace.com/nataliesmithmusic</div></td> </tr> <tr> <td><sub>HOMETOWN</sub></td><td><div align="right">Boston, MA</div></td> </tr> <tr> <td><sub>CONTACT EMAIL</sub></td> <td><div align="right"><a href="mailto:naugustasmith@gmail.com">naugustasmith@gmail.com</a><br /><sub></sub></div></td> </tr> <tr> <td><sub>LAYOUT</sub></td> <td><div align="right"><a href="mailto:frucafrucaposters@gmail.com">Fruca Fruca Design</a><br /><sub></sub></div></td> </tr> </table> </div> <style>ul li a:link, ul li a:active, ul li a:visited ul li a.open:visited, ul li a:link, ul li a:active, ul li a:visited {font: bold 10px arial !important; letter-spacing: -1px !important; text-transform: uppercase; margin-top: -4px; text-align:left;}</style> <style>.whitetext12{visibility:hidden; display:none;}.lightbluetext8{visibility:hidden; display:none;}</style> <style> .friendText {display:none} .redLink {display:none} </style> <style> {THIS MAKES THE BODY TABLE TRANSPARENT} {*NOTE* - IF YOU DO NOT WANT THE BODY TABLE TRANSPARENT, SIMPLY CHANGE TRANSPARENT TO A COLOR} body{ font-size:x-small; background-color:3e5c94; background-image:; background-attachment:scroll; background-repeat: no-repeat; background-position:top center; margin-top: 0px;} {THIS EDITS THE MAIN TEXT STYLE AND COLORS}body, div, p, strong, td, .text, .blacktext10, .blacktext12, a.searchlinkSmall, a.searchlinkSmall:link, a.searchlinkSmall:visited{color:ffffff;font-size:8pt;font-weight:normal;font-style:normal;text-decoration:none;text-transform:none;font-family:arial;} {THIS CHANGES COLOR AND STYLE OF NAMETEXT AND HEADINGS}.orangetext15, text, strong, .lightbluetext8, .whitetext12, .nametext, .btext, .redtext, .redbtext{color:ffffff;font-size:8pt;font-weight:normal;font-style:normal;text-decoration:none;text-transform:none;font-family:arial;} {THIS CHANGES COLOR AND STYLE OF LINKS}a, a font, a:link, a:visited, a.navbar, a.navbar:link, a.navbar:visited, a.man, a.man:link, a.man:visited, a.man font, a.redlink, a.redlink:visited{color:e5e6a3;font-size:8pt;font-weight:bold;font-style:normal;text-decoration:none;text-transform:bold;font-family:arial;} {THIS CHANGES COLOR AND STYLE OF LINKS ON HOVER}a:hover, a:hover font, a:active, a.navbar:hover, a.navbar:active, a.man:hover, a.man:active, a.man:hover font, a.searchlinkSmall:hover, a.searchlinkSmall:active, a.redlink:hover, a.redlink:hover{color:ffffff;font-size:8pt;font-weight:bold;font-style:normal;text-decoration:none;text-transform:bold;font-family:arial;} {THIS ALSO MAKES THE BODY TABLE TRANSPARENT AND MAKES SURE ALIGNMENTS ARE FINE}{NOTHING NEEDS TO BE CHANGED HERE EXCEPT IF YOU WANT THE FONT CHANGED}p {margin: 0px 0px 1em 0px; font-family: arial !important}body>div {margin-left: 0px;}table, tr, td, table table, table table td {border-width:0px; background-color: transparent;}table table table td {background-color:transparent;margin:0px;padding: 0 0px 0px 0px}table table table table {border-width:0px;background-color:transparent;padding:0px;margin:0px; background-image: none;}table table table table td {padding:0px;margin:0px;}table table table { background-color: transparent; border: 0 solid; border-color: transparent; width: 100%; }object {position:relative; z-index:1;}body td table, body div table {margin-top: 0px;}.a {hide URL label}.a {hide top links}.a {unhide navigation bar}.navbar {visibility:visible;} </style> <img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20SEAN%20PATRICK%20MCGRAW/bioline.png" /><br /><br /> <b>Natalie Smith is quickly gaining momentum in the singer-songwriter circuit with quirky lyrics and memorable hooks. This promising young talent creates songs that make you smile. Her debut EP, “Better In The Summertime” is an organic collection of songs encompassing mainstream and underground appeal much like some of her influences Jason Mraz, The Beatles, and Sara Bareilles.<br /><br /> Natalie has been a dedicated singer since her adolescent years, writing songs and performing since she was twelve. In 2007, she crossed the states to pursue her dreams at Berklee College of Music in Boston. As Natalie prepares to release her first EP “Better In The Summertime,” she is already receiving recognition for her talent. In 2009, she was selected to perform her original song “Never Gonna Be” at Berklee’s Performer/Songwriter Fall Showcase. She also was selected to sing background vocals for Ben Folds and the Boston Pops at Symphony Hall. Graduating this spring with a degree in Songwriting, she is gearing up for a busy summer performing and promoting songs off the record. With her clever and catchy tunes and diligent work ethic, you can be sure that "Better In The Summertime" is merely a tasty preview of the music she has in store. <br /> <br /></b> <center><a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lml0dW5lcy5jb20="><img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20NATALIE%20SMITH/cdcover.png" /><br /><br /></center> <img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20SEAN%20PATRICK%20MCGRAW/friendline.png" /><br /> <span class="off">!-Start Block to Shift Comments To Center-!</span> <style> {!-Change the top px value as needed. This is distance B on the chart-!} table.friendscomments {position:relative; left:-1%;} table.friendscomments {width:800px !important;} table.friendscomments td, table.friendscomments table {width:100% !important} table.friendscomments table table td {width:auto !important;} </style> <span class="off">!-END Block to Shift Comments To Center-!</span> <style> table.friendsComments tbody tr td.text table tbody tr td span.orangetext15{ background-image: URL(http://i382.photobucket.com/albums/oo268/dygynomi/2010%20NATALIE%20SMITH/comment.png) ; background-repeat: no-repeat !important; background-color: transparent; display: block !important; height: 70px !important; color: ffffff!important; width: 800px; position: relative; overflow: hidden; font-size: 1px; text-align: right; margin-top: -1px; line-height: 300px !important; _width: 800px !important; _border-left: 1px ffffff!important; _border-right: 1px ffffff!important; _height: 70px !important; _margin-bottom: -1px !important; } </style> <style> .orangetext15{display:none} </style> <style>embed, object {position:absolute; top:562px; left:50%; margin-left: -416px; z-index:9; } td td td embed, td td td object { position:static; margin-left:0px; }</style> <style>table table table { visibility:hidden; } table table .text table { visibility:visible; }</style> <style> .navbar, .subnavItems {display: none!important;} </style> <style> .latestBlogEntry { position:absolute; top:974px; margin-left: -410px; left:50%; width: 335px; background-color: transparent; z-index: 9; } table .latestBlogEntry { width:335px!important; } </style> |
|
|
|
shynomi positioning help Mar 13 2010, 07:24 PM
Mike Where's the left: 50%; property? Also, remove ... Mar 13 2010, 07:27 PM
shynomi took out the unnecessary bracket.
tried putting i... Mar 13 2010, 08:19 PM
Mike Replace this chunk:
CODE<style>
.profileW... Mar 17 2010, 05:25 PM
shynomi Thanks for the help so far, I've switched out ... Mar 17 2010, 11:15 PM
shynomi Well I did some searching on the internet and foun... Mar 18 2010, 09:40 AM
shynomi Yea, I made the background 1599px and it now looks... Mar 18 2010, 11:13 PM
fixtatik Just my two cents...but why do this:
http://i382.... Mar 19 2010, 12:51 AM
shynomi Yea i figured that, where would I put the main gra... Mar 19 2010, 02:41 PM
shynomi Man, this sounds like a simple idea by making it o... Mar 19 2010, 05:09 PM
shynomi Yea that worked, for some reason I had taken that ... Mar 19 2010, 08:04 PM
fixtatik You shouldn't need anything transparent. Setti... Mar 20 2010, 01:55 AM
shynomi Awesome, Let me look this over a bit. Mar 20 2010, 10:25 AM
fixtatik Also, I should mention you can position children w... Mar 20 2010, 10:49 AM
shynomi Yea photobucket pro is a lot better than they used... Mar 22 2010, 09:17 AM
shynomi agreed.
you can close this :) Mar 24 2010, 09:55 AM
Mike Topic closed & moved. Mar 24 2010, 10:37 AM![]() ![]() |