|
HTML - Using Div To Center A Box
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 Similar TutorialsI 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 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 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! 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. 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 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? 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. 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? <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> How can I center this form to the middle of the page. Code: <html>
<body>
<h2 style = text-align:center>
Your Comments and Suggestions are important to us
<br/>
It is your Comments and Suggestions that will help
<br/>
Prince Umbertos become the best pizzeria in town
<br/>
Please take a minute to fill out this form.
</h2>
<FORM METHOD = Post action="mailto:code.bro@verizon.net?subject=Comment/Suggestion"
onSubmit=window.setTimeout("location.href='cater.html'",1000)
"Enctype="text/plain">
First Name:
<input type ="text" name="firstname"/>
 
Last Name:
<input type ="text" name="lastname"/>
<br/>
<br/><dd/>
Comments orSuggestions:
<br/><dd/>
<textarea name="comment" rows="10" cols="50"></textarea>
</textarea>
<input name="redirect" Type="hidden" value="index.html">
<input name="next_url" Type="hidden" value="index.html">
<br>
         
<input type = "submit" value="send">
<input type = "reset" value="clear">
</form>
</body>
</html>
http://www.freewebs.com/jaceyanimation/test.htm I can't get it to align to the middle of the page. I've had to add a load of <br>'s because the <tr align="center" valign="middle"> isn't working. Can someone please give me a better code Code: <p><center><table width="50%" bgcolor="black" cellpadding="20px"><tr><td><a href="index.html">Home</a></td><td><a href="imglist.html">Img list</a></td></tr><td><a href="about.html">About</a></td></tr></table></center></p> in ie the center works fine, but in firefox its almost 2 inches to the left of being center, why would that be? 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. I was trying to do this for sometime, but not yet successful. My site appears centered in internet explorer, but in opera and firefox, it shows it old way of shifting to the left. Is there any way to make this site appear centered in all browsers? This is the site that I am talking abt - www.siddhaphysician.com Thanks & Regards Spencer Jones 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 want the ads on the center. not there. please anyone can help? screenshot: 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. 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 all! I used to use <div align="center"> (see below) and since I've started using XHTML 1.0 Transitional, align="center" has been depreciated. I have tried using css margin: 0 auto; and margin-left: auto; margin-right: auto; and nothing is centering my table on a form. I have to use tables since its required on my project and there are more stuff inside the tables then my example below. But css for the div should work.. any thoughts, helps, would be greatly appreciated. Thanks! s-one <!?xml-stylesheet href="http://www.w3.org/StyleSheets/TR/W3C-REC.css" type="text/css"?> <!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> </head> <body> <div align="center"> <table><tr><td><img src="images/photo.png"></td></tr></table> </div> </body> </html> Does anyone know why div align="center" works in firefox only but not ie when centering a table? |
|||||||