SuperPaperSam Posted July 29, 2009 Share Posted July 29, 2009 Hello im new I started running into problems when I wanted my z-indexed table to be centered on the page (both horizontally and vertically) I want the table to be centered no matter what size the window and if the window gets resized I want the z-indexed page to stay centered.So basically my question is can I do this with CSS or do I have to use Javascript? And What would the code be? (sorry if this should be in the JavaScript section)Any help would be great! Link to comment Share on other sites More sharing options...
Ingolme Posted July 29, 2009 Share Posted July 29, 2009 The question isn't the Z-index, it's whether you've used the top, right, bottom or left positioning properties.If you haven't used them, and the position property is set to relative, then you can just use margin: autoIf you have position: absolute then you have to do the following: give the box a fixed width and height, and then position it from top and left by 50%, then give it a negative top and left margin equal to half the width and height. Like this: #box {position: absolute;width: 760px;height: 500px;top: 50%;left: 50%;margin-top: -250px;margin-left: -380px;} Link to comment Share on other sites More sharing options...
SuperPaperSam Posted July 29, 2009 Author Share Posted July 29, 2009 I'm actually using position: fixed; But it worked anyway.Now I'm running into a new problem This is my code so far... <html> <head> <table id="captionRow" style="display: none"><th>Contact Stuff</th></table> <!-- Place this in Javascript --> <script type="text/javascript"> function displayRow(){ var row = document.getElementById("captionRow"); if (row.style.display == '') row.style.display = 'none'; else row.style.display = ''; } </script> <!-- Place this in CSS --> <style type="text/css"> table{ z-index: 1; position: fixed; width: 700px; height: 400px; top: 50%; left: 50%; margin-top: -200px; margin-left: -380px; background: url('images/contactbg.gif') no-repeat; } </style> </head> <body> <p onclick="displayRow()">--Contact Click this---</p> <p>Note: thats not going to be the final contact background!!! Random giberush! --- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam placerat purus eu tellus molestie imperdiet. Vestibulum varius est eget dolor vehicula sed adipiscing nisi interdum. Fusce sagittis ante quis tortor volutpat convallis interdum massa tempor. Aliquam aliquet eros sed risus commodo interdum. Duis volutpat placerat magna, vel ullamcorper quam posuere eu. Suspendisse metus felis, condimentum sit amet pellentesque quis, fermentum in felis. Praesent mauris elit, placerat nec cursus id, imperdiet nec dolor. Pellentesque a tempor purus. Aenean faucibus sollicitudin odio nec dictum. Suspendisse potenti. Sed aliquam, diam ac ultrices viverra, nisl est venenatis turpis, a blandit orci dolor id ante. Phasellus a felis id velit elementum hendrerit id non leo. Sed a nisl lorem. Quisque lacinia enim mi. Cras velit ante, porta eget malesuada id, mattis consequat ligula. Praesent turpis quam, sodales nec mattis ac, hendrerit at enim. Donec dapibus urna id dolor sodales mollis.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam placerat purus eu tellus molestie imperdiet. Vestibulum varius est eget dolor vehicula sed adipiscing nisi interdum. Fusce sagittis ante quis tortor volutpat convallis interdum massa tempor. Aliquam aliquet eros sed risus commodo interdum. Duis volutpat placerat magna, vel ullamcorper quam posuere eu. Suspendisse metus felis, condimentum sit amet pellentesque quis, fermentum in felis. Praesent mauris elit, placerat nec cursus id, imperdiet nec dolor. Pellentesque a tempor purus. Aenean faucibus sollicitudin odio nec dictum. Suspendisse potenti. Sed aliquam, diam ac ultrices viverra, nisl est venenatis turpis, a blandit orci dolor id ante. Phasellus a felis id velit elementum hendrerit id non leo. Sed a nisl lorem. Quisque lacinia enim mi. Cras velit ante, porta eget malesuada id, mattis consequat ligula. Praesent turpis quam, sodales nec mattis ac, hendrerit at enim. Donec dapibus urna id dolor sodales mollis.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam placerat purus eu tellus molestie imperdiet. Vestibulum varius est eget dolor vehicula sed adipiscing nisi interdum. Fusce sagittis ante quis tortor volutpat convallis interdum massa tempor. Aliquam aliquet eros sed risus commodo interdum. Duis volutpat placerat magna, vel ullamcorper quam posuere eu. Suspendisse metus felis, condimentum sit amet pellentesque quis, fermentum in felis. Praesent mauris elit, placerat nec cursus id, imperdiet nec dolor. Pellentesque a tempor purus. Aenean faucibus sollicitudin odio nec dictum. Suspendisse potenti. Sed aliquam, diam ac ultrices viverra, nisl est venenatis turpis, a blandit orci dolor id ante. Phasellus a felis id velit elementum hendrerit id non leo. Sed a nisl lorem. Quisque lacinia enim mi. Cras velit ante, porta eget malesuada id, mattis consequat ligula. Praesent turpis quam, sodales nec mattis ac, hendrerit at enim. Donec dapibus urna id dolor sodales mollis.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam placerat purus eu tellus molestie imperdiet. Vestibulum varius est eget dolor vehicula sed adipiscing nisi interdum. Fusce sagittis ante quis tortor volutpat convallis interdum massa tempor. Aliquam aliquet eros sed risus commodo interdum. Duis volutpat placerat magna, vel ullamcorper quam posuere eu. Suspendisse metus felis, condimentum sit amet pellentesque quis, fermentum in felis. Praesent mauris elit, placerat nec cursus id, imperdiet nec dolor. Pellentesque a tempor purus. Aenean faucibus sollicitudin odio nec dictum. Suspendisse potenti. Sed aliquam, diam ac ultrices viverra, nisl est venenatis turpis, a blandit orci dolor id ante. Phasellus a felis id velit elementum hendrerit id non leo. Sed a nisl lorem. Quisque lacinia enim mi. Cras velit ante, porta eget malesuada id, mattis consequat ligula. Praesent turpis quam, sodales nec mattis ac, hendrerit at enim. Donec dapibus urna id dolor sodales mollis.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam placerat purus eu tellus molestie imperdiet. Vestibulum varius est eget dolor vehicula sed adipiscing nisi interdum. Fusce sagittis ante quis tortor volutpat convallis interdum massa tempor. Aliquam aliquet eros sed risus commodo interdum. Duis volutpat placerat magna, vel ullamcorper quam posuere eu. Suspendisse metus felis, condimentum sit amet pellentesque quis, fermentum in felis. Praesent mauris elit, placerat nec cursus id, imperdiet nec dolor. Pellentesque a tempor purus. Aenean faucibus sollicitudin odio nec dictum. Suspendisse potenti. Sed aliquam, diam ac ultrices viverra, nisl est venenatis turpis, a blandit orci dolor id ante. Phasellus a felis id velit elementum hendrerit id non leo. Sed a nisl lorem. Quisque lacinia enim mi. Cras velit ante, porta eget malesuada id, mattis consequat ligula. Praesent turpis quam, sodales nec mattis ac, hendrerit at enim. Donec dapibus urna id dolor sodales mollis.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam placerat purus eu tellus molestie imperdiet. Vestibulum varius est eget dolor vehicula sed adipiscing nisi interdum. Fusce sagittis ante quis tortor volutpat convallis interdum massa tempor. Aliquam aliquet eros sed risus commodo interdum. Duis volutpat placerat magna, vel ullamcorper quam posuere eu. Suspendisse metus felis, condimentum sit amet pellentesque quis, fermentum in felis. Praesent mauris elit, placerat nec cursus id, imperdiet nec dolor. Pellentesque a tempor purus. Aenean faucibus sollicitudin odio nec dictum. Suspendisse potenti. Sed aliquam, diam ac ultrices viverra, nisl est venenatis turpis, a blandit orci dolor id ante. Phasellus a felis id velit elementum hendrerit id non leo. Sed a nisl lorem. Quisque lacinia enim mi. Cras velit ante, porta eget malesuada id, mattis consequat ligula. Praesent turpis quam, sodales nec mattis ac, hendrerit at enim. Donec dapibus urna id dolor sodales mollis.</p> <p>Quisque egestas, lorem sed interdum laoreet, tortor augue iaculis est, sit amet vulputate mi orci eget risus. Nulla ut dui id augue tincidunt tristique. Donec luctus laoreet varius. Morbi ac mattis odio. Suspendisse arcu risus, tempus nec molestie in, molestie ac massa. Duis sed vestibulum eros. Pellentesque eleifend ante eget sapien egestas vehicula. Morbi nibh velit, tristique vel pellentesque vitae, iaculis nec orci. Pellentesque in augue non dolor consectetur volutpat. In ornare ligula elit, eu sodales dui. Vestibulum urna enim, rutrum ultricies pharetra sit amet, dignissim in erat. Vivamus hendrerit venenatis scelerisque. Aenean eget nunc ante. Etiam rutrum nibh in metus euismod porta. Aliquam pulvinar, elit ut rutrum volutpat, turpis tortor porta lacus, vel laoreet dolor leo non augue. Cras et diam elit, eu feugiat erat. Vestibulum in velit et elit semper viverra quis ut purus. ###### sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam aliquam scelerisque dolor, varius scelerisque dui malesuada at.</p> </body> </html> So it works fine but if you scroll there is a massive lag directly to the right of the window (the text gets laggy and there is a delay)I'm pretty sure this is because I used margin-top: -200px;margin-left: -380px; So I need a way to fix this.Thanks for your help! Link to comment Share on other sites More sharing options...
dsonesuk Posted July 29, 2009 Share Posted July 29, 2009 the table should within the body not the head.might be better to amend display == '' to display == 'block' instead. Link to comment Share on other sites More sharing options...
Ingolme Posted July 30, 2009 Share Posted July 30, 2009 the table should within the body not the head.might be better to amend display == '' to display == 'block' instead.No, it's better to give it an empty string so that it uses the default value. Tables, table rows and table cells display differently than blocks do. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.