HTML - Center Pages Changing
If you recall back to this http://www.htmlforums.com/html-xhtml...ite-99670.html, I'm wanting to learn the same thing aswell. If you go to http://adobeflashgames.tk, press enter and you'll go inside the main.html. In there, you notice I have three frames. If you click the link on the left that says "+Action", the word "lmfao" shows up on the same frame. What I want is the lmfao to show up on the frame next to it. How would I do that? Basically, I would like whatever link I press on the left frame of the game category, to show up in the right frame. Would you guys be needing the html's I used for the individual frames? Thanks!
Similar Tutorialshttp://soundcoremusic.com/USED%20GEAR/usedgear.html I really need a webmaster to view my code and give me some options! I've done so much googling and had so many failed attempts to center this new page I'm working on but I just can't figure it out and its really holding me back Thanks! -Kurt edit: I feel like I've been placing the div container in the wrong place or something, i really need my code to be viewed and then some specific directions I am building my first big(ish) website and I have run into a little problem. The left side of the page is the same on every single page, along with the top. The only part that changes is the content of the center. There is also some things on the right that stay the same. I have the site looking and opperating fine, but when I need to make adjustments to the static parts of the site (top, left and right), I have to change every single page. Is there any way to just have one template and when you click on a link, it just changes the middle? I have tried iframes, but the left part of the screen needs to be able to scroll with the rest of the page. I want everything to scroll just like a normal webpage, but without having to change the menus on every single page. How is this possible? Thanks in advanced This will be hard for me to explain so I will add an image: http://img75.imageshack.us/my.php?image=examplexu6.gif How do I go about loading a page within a page. For example, in the pic, if you clicked Cost it would load a page within the loading area without taking off to another location. I seen it on a site before, i remember the links were something like "/?p=cost" or something like that. And the page appeared to not navigate elsewhere, the cost page was just loaded within the page i was on. hope that makes sense, if so any examples on this? is it hard to do? messy? safe with most browsers? thanks 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 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 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? 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 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. <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 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. 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? Hi, I created a simple slideshow: Code: <html> <body> <div> <iframe src="http://lh4.ggpht.com/_qkZzGyIkXmo/S6yTNbhSskI/AAAAAAAADKo/IjVMzaM42Kk/s800/image1.jpg" width="448" height="336" name="iframe_a"> </iframe> </div> <br> <div> <a href="http://lh4.ggpht.com/_qkZzGyIkXmo/S6yTNbhSskI/AAAAAAAADKo/IjVMzaM42Kk/s800/image1.jpg" target ="iframe_a"><img src="http://lh4.ggpht.com/_qkZzGyIkXmo/S6yTNbhSskI/AAAAAAAADKo/IjVMzaM42Kk/s800/image1.jpg" width="80" height="60"></a> <a href="http://lh3.ggpht.com/_qkZzGyIkXmo/S6yTTic4mTI/AAAAAAAADKs/4eJn_aJuMyk/s800/image2.jpg" target ="iframe_a"><img src="http://lh3.ggpht.com/_qkZzGyIkXmo/S6yTTic4mTI/AAAAAAAADKs/4eJn_aJuMyk/s800/image2.jpg" width="80" height="60"></a> <a href="http://lh5.ggpht.com/_qkZzGyIkXmo/S6yVdtKSofI/AAAAAAAADLQ/wSg6hOHzlFs/s800/image3.jpg" target ="iframe_a"><img src="http://lh5.ggpht.com/_qkZzGyIkXmo/S6yVdtKSofI/AAAAAAAADLQ/wSg6hOHzlFs/s800/image3.jpg" width="80" height="60"></a> </div> </body> </html> The problem is my images are of different sizes and they don't center in the iframe. How can I resolve the problem? Any suggestion is greatly appreciated! Kind regards Rain lover Hello, I have been struggling with a "dead center" align for some time now, and because I am not such a skilled html code creator, I decided to apply for some help, I'll try to be as explicit as I can be. I have a simple html page, created with Dreamweaver CS3, and I've imported a Flash object, created with Flash 8. All I want is to align this movie horizontally as well as vertically, and when the page loads I have to send the focus to the flash movie, so that the visitor won't have to click on the flash movie in order to receive the focus. I can center align the flash like this: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <!-- PICHI Media (c) 2008 All Rights Reserved --><HTML><HEAD><TITLE>Always Follow Dreams</TITLE> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css"> <!-- html,body { height:100%; width:100%; overflow:auto; } body,td,th { color: #000000; } body { background-color: #FFFFFF; background-image: url(); } a:link { color: #000000; } a:visited { color: #000000; } a:hover { color: #000000; } a:active { color: #000000; } .style4 {font-size: 9px; font-family: Verdana, Arial, Helvetica, sans-serif;} #apDiv1 { position:absolute; width:324px; height:25px; z-index:1; left: 354px; top: 303px; background-color: #000000; visibility: hidden; } --> </style> <script src="Scripts/AC_ActiveX.js" type="text/javascript"></script> <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script> <head> </head> <BODY> <CENTER> <DIV align=right></DIV> </CENTER> <TABLE height="100%" cellSpacing=0 cellPadding=0 width="100%" align=center border=0> <TBODY> <TR> <TD width="0" height="0" align=center vAlign=middle> <P align="center"> </script><script type="text/javascript"> AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','400','height','440','src','test','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','test' ); //end AC code </script><noscript> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="400" height="440" id="test" > <param name="movie" value="test.swf"> <param name="quality" value="high"> <embed movie src="test.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="400" height="440"></embed> </object> </noscript></P> </TD> </TR></TBODY></TABLE> </BODY></HTML> As you can see this source code will center align both ways horizontally and vertically. I belive this is doing the job: Code: <TABLE height="100%" cellSpacing=0 cellPadding=0 width="100%" align=center border=0> <TBODY> <TR> <TD width="0" height="0" align=center vAlign=middle> <P align="center"> Aligment sorted now let's get to the focus part. When the page loads I want to set the focus to the flash movie, and now I don't mean to remove that rectagle we all see in SP2 and IE7. No not that, that's easy to remove with some code. What I want is the actually focus in a text field in my flash movie. I can do this with the following code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script> </head> <body onLoad="window.document.test.focus();"> <center> <table width="100%" height="100%" align="center"> <tr> <td valign="middle" align="center"> <script type="text/javascript"> AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','name','test','width','400','height','440','id','test','title','test', 'src','test','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','test' ); //end AC code </script><noscript><object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" name="test" width="400" height="440" id="test" title="test"> <param name="movie" value="test.swf" /> <param name="quality" value="high" /> <embed src="test.swf" width="400" height="440" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" name="test"></embed> </object></noscript> </center> </td> </tr> </table> </body> </html> The focus part works with this i believe: <body onLoad="window.document.test.focus();"> where TEST is the ID of my flash movie. BUT, the movie is not vertically align. It still is horizontally, but not vertically. And this is my problem. If I combine the two examples, the one where the content is dead center, and the one where I set the focus to the flash movie it won't work, and I get this error: 'window.document.test' is null or not an object This page is right now on my site: http://www.danandrei.ro And if you double click on the small browser icon from the lower left corner, you know the one that shows error messajes like "DONE but with some errors". you can see what I mean. My question is: IS IT POSSIBLE TO BOTH CENTER ALIGN, HOR AND VERT, AND ALSO SET FOCUS TO THE FLASH MOVIE ? IF SO, DO YOU GUYS HAVE ANY CLUE HOW ? Thank you. 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 I have got a menu working but i don't know how to align it to the left center of the screen. at the moment it is at the top left of the screen. here is the code that i have got so far: HTML Code: <head> <meta name="GENERATOR" content="Microsoft FrontPage 5.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>Demo Menu 1</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" > <link rel="stylesheet" type="text/css" href="sddm.css" > <title>JSwitch Slide Menu</title> </head> <body> <div class="navbar" style="width: 148; height: 253;"> <!-- *********************************Start Menu****************************** --> <div class="mainDiv" > <div class="topItem" >Demo Menu 1</div> <div class="dropMenu" ><!-- --> <div class="subMenu" style="display:inline;"> <div class="subItem"><a href="#">Configuration</a></div> <div class="subItem"><a href="#">Tool Box</a></div> <div class="subItem"><a href="#">Contact Us</a></div> <div class="subItem"><a href="#">Sub Menu 4</a></div> <div class="subItem"><a href="#">Sub Menu 5</a></div> </div> </div> </div> <!-- *********************************End Menu****************************** --> <br> <!-- *********************************Start Menu****************************** --> <div class="mainDiv" > <div class="topItem" >Demo Menu 2</div> <div class="dropMenu" ><!-- --> <div class="subMenu" style="display:none;"> <div class="subItem"><a href="#">Configuration</a></div> <div class="subItem"><a href="#">Sub Menu 2</a></div> <div class="subItem"><a href="#">Sub Menu 3</a></div> <div class="subItem"><a href="#">Sub Menu 4</a></div> </div> </div> </div> <!-- *********************************End Menu****************************** --> <script type="text/javascript" src="xpmenuv21.js"></script> </div> <p> </p> </body> Hi there guys. I think for the most of you, an easy question: How do I center my whole webpage? (offcourse except for the background, because it is allready filling the whole screen.) This is my source: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>V</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="fusiox" /> <meta name="description" content="forum" /> <meta name="keywords" content="v" /> <style type="text/css"> body { background-image: url(img/1168.png); background-repeat: repeat font-size: 12px; color:#ffffff; font-family: "Comic Sans MS", cursive; font-size: 12px; font-style: normal; font-weight: normal; font-variant: normal; } #inhoud { text-align: left; vertical-align: middle; margin: 20px auto; padding: 0px 0 0 0; width: 1024px; background-color: #000000; border: 2px solid #ffffff; position: absolute; font-family: "Comic Sans MS", cursive; font-size: 10px; font-weight: bold; color: #3C3; } img { padding: 0; margin: 0; font-family: "Comic Sans MS", cursive; font-size: 10px; color: #3C3; } p { padding: 0; margin: 0; } a { color: #ffffff; display: underline; } a:hover { color: green; } body,td,th { color: #000; font-family: "Comic Sans MS", cursive; font-size: 12px; font-weight: bold; } #apDiv1 { position:absolute; width:386px; height:427px; z-index:1; left: 32px; top: 197px; font-family: "Comic Sans MS", cursive; font-size: 10px; color: #3C3; font-weight: bold; } #apDiv2 { position:absolute; width:413px; height:405px; z-index:2; left: 555px; top: 334px; font-family: "Comic Sans MS", cursive; font-size: 12px; font-weight: bold; color: #3C3; } #apDiv3 { position:absolute; width:200px; height:115px; z-index:2; left: 72px; top: 412px; } </style> </head> </head> <body> sorry, I know, i am kind of a noob in the html world. Tnx, in advance! 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? |