HTML - <center> Problem
Hello,
I was just messing around and noticed that when my page is longer than the screen the scrollbar on the right pops up. When the scrollbar pops up the centering of my site is shifted over ~15 pixels to the left. Is there any way to stop my site from being pushed over and therefore off centered by the scrollbar? Thanks. Similar Tutorialshello, i've placed an image gallery to my website . i am unable to align it to the center, Not a major programmer but I needed to make a website. I am having a problem with my website where I have 5 pages, same structure, built with tables, all tables centered. In IE the tables align center on each page. But in Firefox --- 3 of the pages are different, lining up about 10 pixels left of center. Does anyone know how I can fix this problem? I have browsed around other sites as well and many of them have this problem. Any advice would be greatly appreciated. I know tables are horrible but thats all I know/can learn. I have several div tags that I want exactly where I place them regardless of a user's screen size / resolution ... if I place them right of left 200 px then they shfit depending on resolution ... samve if I place them right of left by, say 85%. I'm figuring if I place the div tage left of center or right of center then they will always position correctly because the center doesn't vary according to resolution. How do I do this? I tried document.getElementById("divid").style.center = "25"; (i was attempting 25 pixels right of center) but it doesn't work. Any suggestions? Thanks! I am administering this forum www.br-eeze.com So please enter there as the flashing banner and the weather widgets. Both are positioned on the left. Now this is the code for the banner: <td align="center" valign="top" width="90" height="55"><A target = "_blank" HREF="http://www.br-eeze.com"><IMG SRC="http://www.xxx.com/test1.gif" border=0 width=728 height=90 ></a> As you can see I tried to center it. I even typed right but still everything is aligned to the left. PLEASE, how do I center the banner and the weather widgets? Hey felllas. I really need some help here. I'm building this page, but can't get it to center. I bet it's somethign dumb I'm overlooking. could you please take a quick look at the source and LMK what I'm missing... http://bravoad.com/BravoTest2.html Thanks in advanced I am learning how to use Div's to replace Tables for layout. Needless to say, there are many properties I need to learn with CSS's. A friend wants a Floating area on the left which I have created, however I would like to have the box be centered in the main text area. Not sure if that can be done with my prototype at http://www.toddcary.com/viewpoint/div_todd_a.html Any help would be appreciated... Todd Hey im new at this html programming and im ok at it but i still need to learn more i need help centering the stuff on my page you will see what i mean if you go to my website. firefoxskins.awardspace.com. I would really like help thank you for your time. <tr> <td class="contentarea_b"></td> </tr> <h3>=WFC= WAR FORCE CLAN AMERICAS ARMY</h3> <table cellpadding="0" cellspacing="0" border="0"><tr><td><object type="application/x-shockwave-flash" data="http://video.google.com/googleplayer.swf?docId=4279961105245592436&hl=en" height="350" width="425" style="width:400px; height:326px;" id="VideoPlayback"> <param name="movie" value="http://video.google.com/googleplayer.swf?docId=4279961105245592436&hl=en" /> <param name="allownetworking" value="internal" /> <param name="allowScriptAccess" value="ALWAYS" /> <param name="enableJSURL" value="TRUE" /> <param name="enableHREF" value="TRUE" /> <param name="saveEmbedTags" value="true" /> <param name="flashvars" value="" /> </object></td></tr><tr><td> </table> </td> I have a webpage with a header, column on each side, footer and a mainContainer in the middle. I would like to set up links on the left column that, when clicked, open a new 'page' in the center (mainContainer). I am using all div tags, no tables. Could someone point me in the right direction? TIA Quick question. When using a generator to make a website, it seems that usually everything is placed into "DIV - ABSOLUTE" codes. How do I center everything up so it isn't all stuck to one side for users who have a higher resolution? I Can't center my whole nav bar in the middle of the sidebar 1 div. Here is the link for the website. http://northwindappaloosas.com/NewHome.html http://www.ivoog.com/test/help The boxes that have: Paypal, Policies, Financing, Wholesale, etc. How can these be centered in all browsers including IE6? I can't get it to work Here's the CSS: #othermain2 { width:850px; height:850px; float:left; } #middlestyle { width:850px; text-align:center; margin:auto; overflow:auto; } .middlebox { width:150px; text-align:center; float:left; font-size:24px; margin-left:50px; margin-top:50px; border:solid 5px #333; } .middlebox:hover { width:150px; text-align:center; float:left; font-size:24px; margin-left:50px; margin-top:50px; border:solid 5px #390; } FULL CSS: http://www.pics.ivoog.com/page/home.css Can anyone help me? Thanks. It is probably something so obvious that I cannot see it . The first image does not center, yet the second does. What am I missing? <body> <div style="text-align: center; width: 100%;"> <div style="width: 900px; text-align: center; vertical-align: middle;"> <img style="width: 900px; height: 84px;" alt="Header image" src="images/site_header.jpg"> </div> <div style="text-align: center; vertical-align: middle;"> <img style="width: 900px; height: 49px;" alt="Header sub-image" src="images/nav_back.jpg"> </div> </div> </body> Todd Ok, I searched the forum and cannot find a solution for my problem. If you could please help my by suggesting what to do or pointing me to a similar topic. I HAVE to use frames: helping dad with his website - he wants to keep his frames, he likes them. I have two of them - top and bottom one. The top one holds a banner and a short, horizontal menu (no scroll), the length of the bottom one wary depending on the content, so it's "scrollable". I do not know how to deal with FireFox pushing the bottom frame left after adding the scroll bar: At the same time IE keeps it nice and centered. The code for the index file is as follows: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> </head> <frameset rows="203,*" frameborder="no" border="0" framespacing="0" > <frame src="home1.htm" name="top" scrolling="No" noresize="noresize" title="top" target="middle" > <frame src="index2.htm" name="middle" title="middle" target="middle"> </frameset> <noframes> <body> Info on using frames </body> </noframes></html> To center the table I use for the bottom (called "middle") frame I use a <center> tag: Code: <body> <center> <table> <tr><td>Long long text...</td></tr> </table> </center> </body> I was reading somewhere that this is an outdated solution, but that's how I was able to deal with that. Any suggestions on how to center the bottom frame in FF? hi, i'm currently creating a website and the first page is basically one image and the links are all hotspots. i'm basically image mapping. i'm trying to center the image but i can't make it center in the absolute middle of the page, with the same space between horizontal and vertical sides. when i center it the image just centers horizontally but its near the top. i tried vspace but that makes it look different depending upon browser/computer. right now i have <div align=center> and that only centers it horizontally and not vertically. how do i center it vertically too? thanks, hope it wasn't too confusing. i want the ads on the center. not there. please anyone can help? screenshot: Hello Guys, I have made some page with nested div's. I made it's width to 80%. I want that to be completely aligned to center of the page. I tried with css and with html and with parent div. But some thing makes it not to work. Can you see the below code and please suggest me to get that to center. HTML Code: <style type="text/css"> .nm-left { text-align:left; vertical-align:text-top; } .nm-left .nm-video, .nm-right .nm-video-reverse, .nm-left .nm-avatar, .nm-left .nm-avatar-wrapper, .nm-left span.nm-button, .nm-left #user-form input#submit { float:left; } .nm-right { text-align:right; vertical-align:text-top; } .nm-right .nm-video, .nm-left .nm-video-reverse, .nm-right .nm-avatar, .nm-right .nm-avatar-wrapper, .nm-right span.nm-button, .nm-right #user-form input#submit { float:right; } .nm-wrapper { clear:both; font-size:14px; line-height:21px; margin:20px 0; padding:0px; } .nm-wrapper div { background-position:99% 10px; background-repeat:no-repeat; margin:0; padding:0; } .nm-wrapper div div { } .nm-wrapper div div div { overflow:hidden; } #ninjamonials .nm-wrapper div div div div { background:transparent; padding:20px;} #ninjamonials .nm-wrapper div div div div div { padding:0; } blockquote.nm-summary div, blockquote.nm-testimonial div, blockquote.nm-summary, blockquote.nm-testimonial, blockquote.nm-summary p, blockquote.nm-testimonial p { background:transparent; border:none; padding:0; margin:0; text-decoration:none; font-style:normal; } span.nm-button, #user-form input#submit { margin:5px; } #user-form { background-position:left bottom; background-repeat:repeat-x; clear:both; font-size:14px; line-height:21px; margin-top:20px; padding:5px; } .nm-testimonial, .nm-summary, .nm-author { padding-left:140px } .nm-summary { font-weight:bold; } .nm-author { display:block; font-size:12px; } .nm-name { font-weight:bold; padding-right:5px; } .nm-video, div.nm-video-reverse { margin:10px !important; } .nm-audio, .nm-author { padding:5px !important; } .nm-audio { display:block; } .nm-name { font-style:italic; } /* Oceanic Avatar-Specific CSS */ .nm-avatar { } .nm-avatar img { background-color:#F7F7F7; border:1px solid #DBDBDB; margin:10px; padding:5px; } /* Oceanic Module-Specific CSS */ .nm-module { overflow:hidden; margin: 5px; padding:4px!important; } .nm-module div.nm-avatar img { } .nm-module div.nm-avatar { } /* Blue Style */ .nm-right.nm-oceanic-blue.nm-module, .nm-right.nm-oceanic-blue .nm-module { background:#EFF8FF url(oceanic_blue_tl.png) no-repeat -10px -10px; border:1px solid #D5ECFF; -moz-border-radius:5px; -webkit-border-radius:5px; } .nm-left.nm-oceanic-blue.nm-module, .nm-left.nm-oceanic-blue .nm-module { background:#EFF8FF url(oceanic_blue_nq.png) no-repeat -10px -10px; border:1px solid #D5ECFF; -moz-border-radius:5px; -webkit-border-radius:5px; } .nm-right.nm-oceanic-blue .nm-wrapper { background:#EFF8FF url(oceanic_blue_tl.png) no-repeat; color:#666; } .nm-left.nm-oceanic-blue .nm-wrapper { background:#EFF8FF url(oceanic_blue_nq.png) no-repeat; color:#666; } .nm-oceanic-blue .nm-wrapper div { background:url(oceanic_blue_tr.png) no-repeat 100% 0; } .nm-oceanic-blue .nm-wrapper div div { background:url(oceanic_blue_bl.png) no-repeat 0 100%; } .nm-oceanic-blue .nm-wrapper div div div { background:url(oceanic_blue_br.png) no-repeat 100% 100%; } .nm-oceanic-blue #user-form { background-color:#EFF8FF; border:1px solid #D5ECFF; -moz-border-radius:5px; -webkit-border-radius:5px; } .nm-left.nm-oceanic-blue .nm-avatar-wrapper { margin:0 10px 10px 0; min-height:70px; min-width:90px; background: url(oceanic_blue_quote.png) no-repeat 10px 10px !important; } /* Green Style */ .nm-right.nm-oceanic-green.nm-module, .nm-right.nm-oceanic-green .nm-module { background:#EBF4D7 url(oceanic_green_tl.png) no-repeat -10px -10px; border:1px solid #9AC740; -moz-border-radius:5px; -webkit-border-radius:5px; } .nm-left.nm-oceanic-green.nm-module, .nm-left.nm-oceanic-green .nm-module { background:#EBF4D7 url(oceanic_green_nq.png) no-repeat -10px -10px; border:1px solid #9AC740; -moz-border-radius:5px; -webkit-border-radius:5px; } .nm-right.nm-oceanic-green .nm-wrapper { background:#EBF4D7 url(oceanic_green_tl.png) no-repeat; color:#666; } .nm-left.nm-oceanic-green .nm-wrapper { background:#EBF4D7 url(oceanic_green_nq.png) no-repeat; color:#666; } .nm-oceanic-green .nm-wrapper div { background:url(oceanic_green_tr.png) no-repeat 100% 0; } .nm-oceanic-green .nm-wrapper div div { background:url(oceanic_green_bl.png) no-repeat 0 100%; } .nm-oceanic-green .nm-wrapper div div div { background:url(oceanic_green_br.png) no-repeat 100% 100%; } .nm-oceanic-green #user-form { background-color:#EBF4D7; border:1px solid #9AC740; -moz-border-radius:5px; -webkit-border-radius:5px; } .nm-left.nm-oceanic-green .nm-avatar-wrapper { margin:0 10px 10px 0; min-height:70px; min-width:90px; background: url(oceanic_green_quote.png) no-repeat 10px 10px !important; } /* Grey Style */ .nm-right.nm-oceanic-grey.nm-module, .nm-right.nm-oceanic-grey .nm-module { background:#EFEFEF url(oceanic_grey_tl.png) no-repeat -10px -10px; border:1px solid #999; -moz-border-radius:5px; -webkit-border-radius:5px; } .nm-left.nm-oceanic-grey.nm-module, .nm-left.nm-oceanic-grey .nm-module { background:#EFEFEF url(oceanic_grey_nq.png) no-repeat -10px -10px; border:1px solid #999; -moz-border-radius:5px; -webkit-border-radius:5px; } .nm-right.nm-oceanic-grey .nm-wrapper { background:#EFEFEF url(oceanic_grey_tl.png) no-repeat; color:#666; } .nm-left.nm-oceanic-grey .nm-wrapper { background:#EFEFEF url(oceanic_grey_nq.png) no-repeat; color:#666; } .nm-oceanic-grey .nm-wrapper div { background:url(oceanic_grey_tr.png) no-repeat 100% 0; } .nm-oceanic-grey .nm-wrapper div div { background:url(oceanic_grey_bl.png) no-repeat 0 100%; } .nm-oceanic-grey .nm-wrapper div div div { background:url(./images/oceanic_grey_br.png) no-repeat 100% 100%; } .nm-oceanic-grey #user-form { background-color:#EFEFEF; border:1px solid #999; -moz-border-radius:5px; -webkit-border-radius:5px; } .nm-left.nm-oceanic-grey .nm-avatar-wrapper { margin:0 10px 10px 0; min-height:70px; min-width:90px; background: url(./images/oceanic_grey_quote.png) no-repeat 10px 10px !important; } /* White Style */ .nm-right.nm-oceanic-white.nm-module, .nm-right.nm-oceanic-white .nm-module { background:#FFF url(oceanic_white_tl.png) no-repeat -10px -10px; border:1px solid #E8E8E8; -moz-border-radius:5px; -webkit-border-radius:5px; } .nm-left.nm-oceanic-white.nm-module, .nm-left.nm-oceanic-white .nm-module { background:#FFF url(oceanic_white_nq.png) no-repeat -10px -10px; border:1px solid #E8E8E8; -moz-border-radius:5px; -webkit-border-radius:5px; } .nm-right.nm-oceanic-white .nm-wrapper { background:#FFF url(oceanic_white_tl.png) no-repeat; color:#666; border:1px solid #E8E8E8; -moz-border-radius:5px; -webkit-border-radius:5px; } .nm-left.nm-oceanic-white .nm-wrapper { background:#FFF url(oceanic_white_nq.png) no-repeat; color:#666; border:1px solid #E8E8E8; -moz-border-radius:5px; -webkit-border-radius:5px; } .nm-oceanic-white .nm-wrapper div { background:url(oceanic_white_tr.png) no-repeat 100% 0; } .nm-oceanic-white .nm-wrapper div div { background:url(oceanic_white_bl.png) no-repeat 0 100%; } .nm-oceanic-white .nm-wrapper div div div { background:url(oceanic_white_br.png) no-repeat 100% 100%; } .nm-oceanic-white #user-form { background-color:#FFF; border:1px solid #E8E8E8; -moz-border-radius:5px; -webkit-border-radius:5px; } .nm-left.nm-oceanic-white .nm-avatar-wrapper { margin:0 10px 10px 0; min-height:70px; min-width:90px; background: url(oceanic_white_quote.png) no-repeat 10px 10px !important; } .nm-audio1 {padding:5px !important; } .nm-summary1 {padding-left:140px } </style> <div id="ninjamonials" class="nm-oceanic-grey nm-left" style="width:80%"> <!--bof nm-wrapper --> <div class="nm-wrapper"> <div> <div> <div> <div class="nm-content"> <div class="nm-avatar-wrapper"> </div> <blockquote class="nm-testimonial"> <p>This is a testimonial test. This is a testimonial test. This is a testimonial test. This is a testimonial test. This is a testimonial test. This is a testimonial test. </p> <p>This is a testimonial test. This is a testimonial test. This is a testimonial test. This is a testimonial test. This is a testimonial test. This is a testimonial test. </p> </blockquote> <div class="nm-author"> <span class="nm-name">Name</span> (Website<span class="nm-title"></span> ~ <span class="nm-auth-url"><a href="http://www.google.com/">www.google.com</a></span> , <span class="nm-location">Mine</span> ) </div> <!--eof nm-author --> </div> <!--eof nm-content --> <!--eof wrapper --> </div> </div> </div> </div> <div class="nm-wrapper"> <div> <div> <div></div></div></div></div></div> Waiting for your solution. Thanks in advance! I created my website in photoshop and sliced it up and exported it as HTML/Images so it would be coded in CSS and with div tags. But I am unable to center my website as a whole. If I export them as a table I can center it easily (Here is my site in tables.), but no one really like tables and I would much prefer it in CSS and with div tags. Here's the site when coded with CSS. HTML Code: <html> <head> <title>Linnit</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <!-- Save for Web Styles (Linnit.psd) --> <style type="text/css"> <!-- #Table_01 { position:relative; right:50px left:0px; top:0px; width:950px; height:1250px; padding-left: 200em; } #index-01 { position:absolute; left:0px; top:0px; width:950px; height:14px; } #index-02 { position:absolute; left:0px; top:14px; width:198px; height:1236px; } #Logo { position:absolute; left:198px; top:14px; width:175px; height:87px; } #index-04 { position:absolute; left:373px; top:14px; width:392px; height:87px; } #index-05 { position:absolute; left:765px; top:14px; width:185px; height:1236px; } #index-06 { position:absolute; left:198px; top:101px; width:567px; height:6px; } #Left-Nav { position:absolute; left:198px; top:107px; width:232px; height:60px; } #index-08 { position:absolute; left:430px; top:107px; width:6px; height:60px; } #Home { position:absolute; left:436px; top:107px; width:55px; height:60px; } #About { position:absolute; left:491px; top:107px; width:47px; height:60px; } #Linnit { position:absolute; left:538px; top:107px; width:52px; height:60px; } #Contact { position:absolute; left:590px; top:107px; width:65px; height:60px; } #index-13 { position:absolute; left:655px; top:107px; width:55px; height:60px; } #Other { position:absolute; left:710px; top:107px; width:55px; height:60px; } #index-15 { position:absolute; left:198px; top:167px; width:567px; height:6px; } #Main { position:absolute; left:198px; top:173px; width:468px; height:232px; } #index-17 { position:absolute; left:666px; top:173px; width:6px; height:232px; } #Right { position:absolute; left:672px; top:173px; width:93px; height:232px; } #index-19 { position:absolute; left:198px; top:405px; width:567px; height:845px; } --> </style> <!-- End Save for Web Styles --> </head> <body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;"> <!-- Save for Web Slices (something.psd) --> <div id="Table_01"> <div id="index-01"> <img src="images/index_01.gif" width="950" height="14" alt=""> </div> <div id="index-02"> <img src="images/index_02.gif" width="198" height="1236" alt=""> </div> <div id="Logo"> <a href="index.html"> <img src="images/Logo.gif" width="175" height="87" border="0" alt="Logo"></a> </div> <div id="index-04"> <img src="images/index_04.gif" width="392" height="87" alt=""> </div> <div id="index-05"> <img src="images/index_05.gif" width="185" height="1236" alt=""> </div> <div id="index-06"> <img src="images/index_06.gif" width="567" height="6" alt=""> </div> <div id="Left-Nav"> <img src="images/Left_Nav.gif" width="232" height="60" alt=""> </div> <div id="index-08"> <img src="images/index_08.gif" width="6" height="60" alt=""> </div> <div id="Home"> <a href="index.html"> <img src="images/Home.gif" width="55" height="60" border="0" alt=""></a> </div> <div id="About"> <a href="about.html"> <img src="images/About.gif" width="47" height="60" border="0" alt=""></a> </div> <div id="Linnit"> <a href="linnit.html"> <img src="images/Linnit.gif" width="52" height="60" border="0" alt=""></a> </div> <div id="Contact"> <a href="contact.html"> <img src="images/Contact.gif" width="65" height="60" border="0" alt=""></a> </div> <div id="index-13"> <img src="images/index_13.gif" width="55" height="60" alt=""> </div> <div id="Other"> <a href="other.html"> <img src="images/Other.gif" width="55" height="60" border="0" alt=""></a> </div> <div id="index-15"> <img src="images/index_15.gif" width="567" height="6" alt=""> </div> <div id="Main"> <img src="images/Main.gif" width="468" height="232" alt=""> </div> <div id="index-17"> <img src="images/index_17.gif" width="6" height="232" alt=""> </div> <div id="Right"> <img src="images/Right.gif" width="93" height="232" alt=""> </div> <div id="index-19"> <img src="images/index_19.gif" width="567" height="845" alt=""> </div> </div> <!-- End Save for Web Slices --> </body> </html> After re-structuring the whole website, i got some problems with my pictures. As you see on theese 2 pics i can't get the pictures centered, even with the <center> tag! (images removed) before re-structuring i couldn't center the pictures neither, so it isn't because of the new structure. Please take a look on this Code and tell me if you know how to fix this problem. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Urne's Website - Community</title> <link rel="stylesheet" type="text/css" href="style/style2.css"> </head> <body> <div id="container"> <div id="header"></div> <div id="left" style="width:210px;float:left;"> <a href="index.html"><img alt="Home2 (15K)" src="img/Home2.png" height="50" width="200" border= "0px"/></a> <p><a href="Community.html"><img alt="Community (15K)" src="img/Community.png" height="50" width="200" border= "0px"/></a></p> <p><a href="Tracks.html"><img alt="Tracks (17K)" src="img/Tracks.png" height="50" width="200" border= "0px"/></a></p> <p><a href="Videos.html"><img alt="Videos (15K)" src="img/Videos.png" height="50" width="200" border= "0px"/></a></p> <p><a href="Images.html"><img alt="Images (15K)" src="img/Images.png" height="50" width="200" border= "0px"/></a></p> <p><a href="Other.html"><img alt="Other (13K)" src="img/Other.png" height="50" width="200" border= "0px"/></a><p/> <p><a href="Trackup.html"><img alt="Track Updates" src="img/trackup.png" height="50" width="200" border= "0px"/></a><p> <p><a href="Settings.html"><img alt="Settings (13K)" src="img/Settings.png" height="50" width="200" border= "0px"/></a></p> <p><a href="Search.html"><img alt="Search (14K)" src="img/Search.png" height="50" width="200" border= "0px"/></a><p> <p><a href="About.html"><img alt="About (12K)" src="img/About.png" height="50" width="200" border= "0px"/></a></p> </div> <div id="main" style="margin-left: 210px;"> <h1>Urne's Tracks</h1> <p>Here i have all the tracks i ever made for Re-Volt. Please check this one weekly/monthly, because the site will be updated at least once/month.<img alt="Smiley" src="img/Smile.gif" border= "0px"/></p> <a href="Bone+Island.html"><img alt="Bone Island" src="img/Bone+Island+hot.png" height="200" width="200" border= "0px"/></a> <a href="At+The+Farm.html"><img alt="At The Farm" src="img/At+The+Farm.png" height="200" width="200" border= "0px"/></a> <a href="Forgotten+City.html"><img alt="Forgotten City" src="img/Forgotten+City.png" height="200" width="200" border= "0px"/></a> <br> <a href="Cyberspace.html"><img alt="Cyberspace" src="img/Cyberspace.png" height="200" width="200" border= "0px"/></a> <a href="Dark+Park.html"><img alt="Dark Park" src="img/Dark+Park.png" height="200" width="200" border= "0px"/></a> <a href="Pisa+Grandprix.html"><img alt="Pisa Grandprix" src="img/Pisa+Grandprix+hot.png" height="200" width="200" border= "0px"/></a> </br> </div> </div> </body> </html> Hope this can help you! Regards Urnemanden He is my code in godaddy blog. I've tried everything. Please help <img src="http://images.quickblogcast.com/8/5/8/1/4/251413-241858/PamBlog.JPG" border="0" width="110"><br> The image is to the far left. |