HTML - Centering Problems.
I am trying to center some text in a table, but horizontally only. It centers vertically inside a cell in a table when i use either of these tags.
HTML Code: <h2 style="text-align:center"> <center>text</center> How do i fix this? I clarified what i want in the attatched picture. Similar TutorialsI'm making a new layout for my website, but I'm having some problems, mostly to do with the changes between Internet Explorer and Mozilla Firefox, the latter of which I use. The web page is he http://www.freewebs.com/elysiumgraph...ayouttest.html My first problem is that, although the HTML I have used allows the page be to centered in Firefox, when shown in Internet Explorer it is moved to the left of the page. Also, with the headers in both the links and content panel (which currently have the words "MAIN" and "TEST PAGE" inside them), despite having used the same amount of page breaks, same sized font and same sized images, the spacing is different. The amount of space also is varied between browsers. Can somebody tell me what I'm doing wrong or how to fix this (and why everybody in the world hasn't converted to Firefox yet... >.>)? this is my page http://web.vtc.edu/users/cjb06271/CI...nal/order.html there are several things I would like to happen. 1. the right collumn background to be where the right collumn should be(so other links in navbar) 2.The test between the roach pictures to be alligned with the top rather than bottom of pictures (so smaller windows can see) 3. When you size the window smaller than the text, a scroll bar appears, and when you scroll the background no longer exists. If I put it on auto the background will only go as far as the text does. 4. (nice but not required)The cocroachs to be alligned to the left and right of the top bar respectively, and the text in the middle. 5. (nice but not required) the right column background image is being cut in half (as does the top one if you size small enough). any way to make the images ignore the collumns? don't worry about the colors I will be changing them soon so what is the easiest and best way to center a div within a div? or a div within anything else for that matter. How do you center vertically? and How do you venter horizontally? I have a website and I used css to make my Div tags set to absolute. The only problem is that when you open it in a browser, the browser won't open big enough and wil block out some of my content (forcing me to scroll to the left or maximize the borswer to see the whole page) . How do i make the divs always appear in the center of the page always. Also how do i make it so when you change the siz of the browser my divs will change with it to remain in the center. I tried doing the margin auto trick but it still doesn't work. Here is my stle sheet code and the web page html code... any help would be appreciated. /* CSS Document */ #wrapper {margin-right: auto; margin-left: auto; margin-top: 20px; margin-bottom: 0;;} body { margin : 0px 0px 0px 0px; background-color: #E1AE5A; background-repeat: repeat; } #top { position: absolute; height: 48px; width: 900px; left: 250px; top:3px; border:0px none; z-index:1; color: #000033; } #main { position: absolute; top: 542px; left: 328px; z-index:5; width: 745px; color: #FFFFFF; height: 28px; } #flash { position: absolute; top: 130px; left: 299px; z-index:4; width: 803px; color: #FFFFFF; height: 419px; } .style1 { font-family: Eurostile; color: #FFFFFF; } .style2 { font-family: Helvetica; } #Layer1 { position:absolute; left:300px; top:121px; width:804px; height:540px; z-index:3; background-color: #000033; border: medium solid #FFFFFF; } .style3 { font-family: Eurostile; } #Layer2 { position:absolute; left:111px; top:170px; width:71px; height:124px; z-index:4; } .style4 {color: #000000} #Layer3 { position:absolute; left:482px; top:72px; width:37px; height:56px; z-index:2; } #Layer4 { position:absolute; left:652px; top:72px; width:24px; height:31px; z-index:2; } #Layer5 { position:absolute; left:822px; top:72px; width:84px; height:58px; z-index:2; } #Layer6 { position:absolute; left:992px; top:72px; width:95px; height:50px; z-index:2; } #Layer7 { position:absolute; left:331px; top:139px; width:750px; height:446px; z-index:9; } #Layer11 { position:absolute; left:319px; top:72px; width:12px; height:10px; z-index: 2; } #Layer8 { position:absolute; left:302px; top:98px; width:791px; height:48px; z-index:10; } #Layer9 { position:absolute; left:299px; top:40px; width:32px; height:20px; z-index:0; } #Layer10 { position:absolute; left:1016px; top:595px; width:24px; height:26px; z-index:10; } and the html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" land="en"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="styles.css" rel="stylesheet" type="text/css"> </head> <body> <div id="top"> <h1 align="center" class="style3 style4">on The side, Inc. </h1> <p align="center" class="style3"> </p> </div> <div class="style2 style3" id="main">on The side is a value added promotional marketing organization focused on working with companies to make them more market-facing. We take time to learn about our clients' business model, industry and previous marketing agendas before taking a next step OR leap - if necessary.</div> <div id="Layer1"></div> <div id="flash" align="center"> <object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="425" height="400"> <param name="movie" value="main.swf"> <param name="quality" value="high"> <embed src="main.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="425" height="400"></embed> </object> </div> <div id="Layer3"><a href="who.html"><img src="who.jpg" width="100" height="70" border="0"></a></div> <div id="Layer4"><a href="what.html"><img src="what.jpg" width="100" height="70" border="0"></a></div> <div id="Layer5"><a href="ideas.html"><img src="ideas.jpg" width="100" height="70" border="0"></a></div> <div id="Layer6"><a href="why.html"><img src="why.jpg" width="100" height="70" border="0"></a></div> </body> </html> how can i center the nav on this page? http://fantasyfootball.pzproductions.com/testing Hi, I'm having the same problem too. I want the red box to fill the whole page (ie 100% width & height) and the blue box to to be centered (horizontally & vertically) http://www.randam.org/TEST-NEW.html Here's my coding: 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>TEST NEW</title> <style type="text/css"> <!-- body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } --> </style></head> <body> <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="867" align="center" valign="middle" bgcolor="#FF0000"><table width="1020" height="602" border="0" cellspacing="0" cellpadding="0"> <tr> <td bgcolor="#0000FF"> </td> </tr> </table></td> </tr> </table> </body> </html> Please help me out. I've been banging my head against the wall all morning. thanks, Rich Is it possible to center links using the link tags itself: something like <a href align:center > I have a page that is not being centered on the background in both IE 6&7 but looks perfect in FF. I am not sure what is wrong because the template I used is vaild Here is the page http://www.mesquitechristmas.com/wea...Z119&icao=KHQZ I have been banging my head all day an maybe just need another pair of eyes. -Thanks Hello, I wont call myself a website designer, but I do design my own websites. My problem is my website is only centered when monitor setting is at 1024 x 768. If an outside viewer with different monitor settings views my sites it will be really off-centered. I design all my websites in photoshop then code them with macromedia. Is their a code I could include into the html to keep my webpages centered no matter what size screen is viewing? Would appreciate any comments, JJ I am having difficulty centering pages for Firefox and Chrome. Please view the source code of http://www.alicm.com. It centers fine in all versions of IE. Definitely need a little help. I am not very experienced, so any "before and after" pasting of coding would be very much appreciated. Thanks in advance. Please help me with the following. This is not a problem in Firefox; only in IE. I am having trouble centering one DIV with a DIV to the left of the centered DIV. The DIV that is blue I would like centered according to the browser width and the red DIV I would like the same vertically as the blue DIV only left justified. In Firefox this works correctly the way I would expect. In IE the left justified div appears "pushes" the DIV ( in blue ) that I want centered further to the right; making it un-centered. thanks for any assistance. Code: <div width="100%"> <div align = "left" style="width:200px;float:left;background-color:#ff0000;"> <p style="font-size: 8pt;">This needs to be left justified........</p> <p style="font-size: 8pt;">This needs to be left justified........</p> <p style="font-size: 8pt;">This needs to be left justified........</p> </div> <div align="center" style="background-color:#00ff00;"> <div style="width: 500px;background-color:#0000ff;"> <p style="font-size: 8pt;">this needs to be centered.................................................................................. </p> <p style="font-size: 8pt;">this needs to be centered.................................................................................. </p> <p style="font-size: 8pt;">this needs to be centered.................................................................................. </p> <p style="font-size: 8pt;">this needs to be centered </p> </div> </div> Right now I'm having a bit of an issue with my website. As you see here I'm using a series of div boxes but they all stay in a fixed location. I was wondering how to get the whole thing centered. Thanks. I would like to center three button images under an image. In the old day we would put our text into the image and create a two-row table, with the top row having one cell three columns wide and the bottom row having three cells. I have tried making my image with three uls with background images under them, but of course I can't force the full image to show since my content doesn't take up the full space. I am currently putting things in a table, just to make the full image show, but I feel like I'm still doing things old-school. Is there a newer, spiffier way to do this? table { width:780px; font-size:125%; padding:0; overflow:hidden; } td { width:254px; height:60px; background-repeat:no-repeat; background-position:top left; background-image:url(images/navbackground2.png); padding:0 0 0 20px; } Also my images won't justify. The space between the cells seems predetermined no matter what I futz with and there's a space to the right of the last image that I don't want. Finally, is there a way to put all three background statements into one code? (I know that's a CSS question, but I don't want to cross-post.) Elisabeth Here's the CSS code: HTML Code: <style type="text/css"> <!-- body { scrollbar-arrow-color: #425B5E; scrollbar-base-color: #98A5A6; scrollbar-face-color: #98A5A6; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color: #425B5E; scrollbar-3dlight-color: #DEE7E8; scrollbar-track-color: #DEE7E8; scrollbar-darkshadow-color: #DEE7E8; } div#content { width: 600px; margin-left: auto; margin-right: auto; text-align: left; } .header {font-family: trebuchet MS; size: 11px; color: white; font-weight: none; BORDER-RIGHT: none 1px solid; BORDER-TOP: none 1px solid; BORDER-bottom: white 1px solid; BORDER-LEFT: none 1px solid; background-color: #660000;} .head2 { font-family: verdana; font-size: 11px; color: #4A4A5B; background-color: #FFFFFF; border: #4A4A5B; border-style: solid; border-left-width: 0px; border-right-width: 0px; border-top-width: 1px; border-bottom-width: 1px; text-align:center; background-repeat: no-repeat; font-weight: bold; letter-spacing: 1px; text-transform: uppercase;} .head { font-family: verdana; font-size: 14px; color: #64657E; background-color: none; border: #75AAB0; border-style: solid; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; border-bottom-width: 0px; text-align:center; background-image: url(head.gif); background-repeat: no-repeat; font-weight: bold; height: 26px; padding-top: 4px;} b { color: #6D82A1; font-size: 11px; font-weight: bold; } A:link {color:#beb8b8;text-decoration:none; cursor: default; font-weight: bold; border-bottom: 1px #C5CADC solid;} A:visited {color:#beb8b8;text-decoration:none; cursor: default; font-weight: bold; border-bottom: 1px #C5CADC solid;} A:active {color:#beb8b8;text-decoration:none; cursor: default; font-weight: bold; border-bottom: 1px #C5CADC solid;} A:hover {color:#5b1435;text-decoration:underline; cursor:default; font-weight: bold; border-bottom: 1px #000000 solid;} body {background-color: gray; background-attachment: fixed; background-repeat: repeat-y; background-position: left; font-family: arial; color: black; margin: 0px; letter-spacing: 0px; font-weight: normal; font-size: 12px; cursor: default;} td { font-family: trebuchet ms; font-size: 11px; color: black; font-weight: normal; } --> </style> And here's the text itself; HTML Code: <html> <head> <link rel="stylesheet" media="all" type="text/css" href="simple/simple.css" /> <script src="simple/click_menu.js" type="text/javascript"></script> <link rel="stylesheet" href="style.css" type="text/css"> <title>Ironman Football Academy | Don Bosco Prep</title> </head> <body onload="clickMenu('menu')"> <center><img src="mainimage.png"> <ul id="menu"> <li class="sub"><a href="#nogo1">Home</a> <ul> </ul> </li> <li class="sub"><a href="#nogo1">Information</a> <ul> </ul> </li> <li class="sub"><a href="#nogo1">Registration</a> <ul> </ul> </li> <li class="sub"><a href="#nogo1">Don Bosco Prep</a> <ul> </ul> </li> </ul> </center> </div> <div id="content" style="position: absolute; z-index: 2; margin-left:auto; margin-right:auto; top: 303px; width: 600px; height: 0px; overflow: visible"> <div class="header"> Welcome</div> We plan to change C-5 plane in such a way that the limitations and hazards involved with them might disappear or be lessened, advancing the study of aeronautics and its applications in technology. As the group researches the flaws associated with the structural mechanics, equipment, materials, and technology, we will develop a plan to inspire a more efficient plane. <a href="http://donboscoprep.org/istf/skystar/component2/task1.php"">Task 1</a> </div> </html> Why isn't the text (with the header welcome) not centered? I am working on a website, and I have been trying to center the homepage so that it looks the same on every computer/ browser. It's sort of set up as a juvenile div layout. I've been using other layouts as an example so I don't really know how to fix what I don't want from theirs. I'd like the main image to be centered but I can't figure it out. It's positioned absolutely which might be part of the problem but I don't know what else to set it as. Also, on top of centering the image horizontally, I was wondering if there was any way that I could position it in the very center of the page. The link is http://appleseatmoregrass.webs.com/index.htm Okay, so me andd my friend are making a website, http://bitememanga.com/, and she designed a template for uor site that we can't center. I've tried putting <center> tags around the entire body, and around every div, but it won't work for some reason. I really need to center this whole page so it looks decent on any computer resolution. Thanks! The code is: <html> <title>Bite Me - The online shonen-ai manga novel/book - gay vampires, fantasy, anime and so much more.</title> <center> <body> <div class="bg" style="position: absolute; left:300px top:0px; width:800px; height:750px; overflow: hidden;"> <img src="http://i41.tinypic.com/nyfe3s.jpg"> </div> <div class="content" style="position: absolute; top:250px; width:500px; height:200px; overflow: auto;"><font color=white> Welcome to Bite Me, the online shonen ai manga about Aku the vampire, and his love, Haru.<br> At the moment, we do not have any manga posted.<br> A few things need to happen before anythings posted.<br> If you have any questions,suggestions,or comments, you can contact us at bitememanga@hotmail.com<br> And remember to keep checking back every few days to see if we have any updates! </font> </div> </body> </center> </html> Ive had this problem where when i create a page and I view it on my computer, it looks fine and centered. But when i access my site from another computer with a different sized monitor, it looks a lot different and uncentered. How do I get my page to look the same on every computer no matter the size? Thank You. I know I must have an open command somewhere on <center> or something but I don't want the whole body of this to be centered - only the title and name of the author. I've looked at it several times and can't figure it out. http://www.bestsellersworld.com/watson-swing.htm Can someone tell me how to do this? |