|
HTML - Centering Problem
Similar TutorialsMy site is working correctly in bot Safari & FF but I can't seem to get it to center in IE7. In Safari and FF, the content is centered and the window can be shrunk down to 1000px without scrollbars appearing (which is what I want). In IE7 its all sliding to the right and scrollbars are appearing at 1150px or something like that (which is what I want definitely don't want). This template is a little bit problematic because the background image for the blue area extends outside the central column on the left side and I need it to disappear when the window width is shrunk. I hope that makes sense. I can't figure out an alternative solution that works in IE7, any ideas? Check out the template in question at: http://current-post.com hi, im trieing to center my i frame. it worked first, but when i added a overflow to hide the scrollbar the center didnt work anymore, any fix on that would be greatly appreciated.. current code: <div style='width:1000px; height: 2000px; overflow: hidden;'> <IFRAME SRC="http://www.gras-valkparkieten.nl/smf/" WIDTH="1042" HEIGHT="2000" FRAMEBORDER="0" align="middle"> </IFRAME> </div> html webpage: http://www.gras-valkparkieten.nl/forum.html http://www.cubedspacedesigns.com/imagegallery/ This page has a row of scrolling thumbnails along the bottom. Each thumbnail, when clicked on, changes the main image. My problem is that I can't get the main image to centre. The image itself is in a div called #image, and that is inside a container box called #imagebox. For some reason my #image div automatically takes on the width of its parent, #imagebox. What I want it to do is to take on the width of the new image and get centred inside its parent. Hey guys my site http://www.atlanta-web.com I have 3 <div>s which i centered using the css technique Code: margin: 0 auto; They work perfect in IE 7, FF2, FF3 but fail in IE6 any idea what i could do to make this correct? Thanks, Eric I believe the problem is that the fact that the pictures are using an absolute position. Not sure though. I have tried about 4 or 5 different thing to fix this to no avail. I will copy in the code for you to see. I do not have this running on a server for everyone to load but it is not much code. Any help would be greatly appreciated. Thansk, Dano HTML Code: <html>
<head>
<title>Official Site of Premier Security Group, Inc.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.centerContainer { margin: 0 auto; }
body
{
background-image:url(images/bkgd2.png)
}
#Table_01 {
position:absolute;
left:0px;
top:0px;
width:800px;
height:1200px;
}
#PSindex-01 {
position:absolute;
left:0px;
top:0px;
width:800px;
height:69px;
}
#PSindex-02 {
position:absolute;
left:0px;
top:69px;
width:20px;
height:174px;
}
#PSindex-03 {
position:absolute;
left:20px;
top:69px;
width:760px;
height:174px;
}
#PSindex-04 {
position:absolute;
left:780px;
top:69px;
width:20px;
height:174px;
}
#PSindex-05 {
position:absolute;
left:0px;
top:243px;
width:800px;
height:13px;
}
#PSindex-06 {
position:absolute;
left:0px;
top:256px;
width:20px;
height:35px;
}
#PSindex-07 {
position:absolute;
left:20px;
top:256px;
width:126px;
height:35px;
}
#PSindex-08 {
position:absolute;
left:146px;
top:256px;
width:129px;
height:35px;
}
#PSindex-09 {
position:absolute;
left:275px;
top:256px;
width:125px;
height:35px;
}
#PSindex-10 {
position:absolute;
left:400px;
top:256px;
width:1px;
height:944px;
}
#PSindex-11 {
position:absolute;
left:401px;
top:256px;
width:123px;
height:35px;
}
#PSindex-12 {
position:absolute;
left:524px;
top:256px;
width:130px;
height:35px;
}
#PSindex-13 {
position:absolute;
left:654px;
top:256px;
width:126px;
height:35px;
}
#PSindex-14 {
position:absolute;
left:780px;
top:256px;
width:20px;
height:35px;
}
#PSindex-15 {
position:absolute;
left:0px;
top:291px;
width:400px;
height:909px;
}
#PSindex-16 {
position:absolute;
left:401px;
top:291px;
width:399px;
height:909px;
}
</style>
</head>
<body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
<div class="centerContainer">
<div>
<div id="Table_01">
<div id="PSindex-01">
<img src="images/PSindex_01.png" width="800" height="69" alt="">
</div>
<div id="PSindex-02">
<img src="images/PSindex_02.png" width="20" height="174" alt="">
</div>
<div id="PSindex-03">
<img src="images/PSindex_03.png" width="760" height="174" alt="">
</div>
<div id="PSindex-04">
<img src="images/PSindex_04.png" width="20" height="174" alt="">
</div>
<div id="PSindex-05">
<img src="images/PSindex_05.png" width="800" height="13" alt="">
</div>
<div id="PSindex-06">
<img src="images/PSindex_06.png" width="20" height="35" alt="">
</div>
<div id="PSindex-07">
<img src="images/PSindex_07.png" width="126" height="35" alt="">
</div>
<div id="PSindex-08">
<img src="images/PSindex_08.png" width="129" height="35" alt="">
</div>
<div id="PSindex-09">
<img src="images/PSindex_09.png" width="125" height="35" alt="">
</div>
<div id="PSindex-10">
<img src="images/PSindex_10.png" width="1" height="944" alt="">
</div>
<div id="PSindex-11">
<img src="images/PSindex_11.png" width="123" height="35" alt="">
</div>
<div id="PSindex-12">
<img src="images/PSindex_12.png" width="130" height="35" alt="">
</div>
<div id="PSindex-13">
<img src="images/PSindex_13.png" width="126" height="35" alt="">
</div>
<div id="PSindex-14">
<img src="images/PSindex_14.png" width="20" height="35" alt="">
</div>
<div id="PSindex-15">
<img src="images/PSindex_15.png" width="400" height="909" alt="">
</div>
<div id="PSindex-16">
<img src="images/PSindex_16.png" width="399" height="909" alt="">
</div>
</div>
</div>
</div>
</body>
</html>
How do I go about centering an image in a table cell so it is centered in both IE and Firefox? Right now, when I use "center" tags, it will be centered in Firefox, but will be up against the left side in IE. Any help is appreciated! how can i center the nav on this page? http://fantasyfootball.pzproductions.com/testing 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> 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? Hi. I can't remember how to center a table to the center of the page. Here is my current code: HTML Code: <table style="width: 66%" > <tr> <td class="style4"> <a href="http://au.youtube.com/user/bombardieraddict123" style="color:white" class="style5"> Bombardieraddict123</a></td> </tr> <tr> <td style="background-color:white">More Information Will go here</td> </tr> </table> I want it to be centered in the middlof thepage. How can I do that? thanks OK, just put my new site up etc. I'm just finishing it with images etc for my friends: http://bparch.freehostia.com/ When you look at the images on the front page, is there a way of centering them? Here is the CSS for the gallery: Code: ul#gallery {
margin:0 auto;
padding:0;
list-style-type:none;
width:90%;
font-family: verdana, arial, helvetica, sans-serif;
text-align: center;
}
ul#gallery li {
float: left;
margin:5px;
text-align: center;
}
ul#gallery li p {
text-align: center;
margin:5px 0;
}
Here is the CSS for the other parts: Code:
body {
margin:0px;
padding:0px;
font-family:verdana, arial, helvetica, sans-serif;
color:#333;
background-color:#ccccff;
}
h1 {
margin:0px 0px 0px 0px;
padding:0px;
font-size:28px;
line-height:28px;
font-weight:900;
color:#666666;
text-align: center;
}
h2 {
font-size:22px;
text-align: center;
}
p {
font:11px/20px verdana, arial, helvetica, sans-serif;
margin:0px 0px 16px 0px;
padding:0px;
}
#Content>p {margin:0px;}
#Content>p+p {text-indent:30px;}
a {
color:#09c;
font-size:11px;
text-decoration:none;
font-weight:600;
font-family:verdana, arial, helvetica, sans-serif;
}
a:link {
color:#00009c;}
a:visited {
color:#00009c;}
a:hover {
color:#ccccff ;
background-color:#FFFFFF;
border-style:dashed;
border-color:black;
border-width:1px 0px
}
.headings {
color: #000000;
text-decoration: underline;
font-size: 20px;
font-weight: bold;
}
#Header {
margin:50px 0px 10px 0px;
padding:17px 14px 14px 20px;
/* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
height:33px; /* 14px + 17px + 2px = 33px */
border-style:solid;
border-color:black;
border-width:1px 0px; /* top and bottom borders: 1px; left and right borders: 0px */
line-height:11px;
background-color:#eee;
text-align: center;
/* Here is the ugly brilliant hack that protects IE5/Win from its own stupidity.
Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it.
IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style
declaration. The incorrect IE5/Win value is above, while the correct value is
below. See http://glish.com/css/hacks.asp for details. */
voice-family: "\"}\"";
voice-family:inherit;
height:14px; /* the correct height */
}
/* I've heard this called the "be nice to Opera 5" rule. Basically, it feeds correct
length values to user agents that exhibit the parsing error exploited above yet get
the CSS box model right and understand the CSS2 parent-child selector. ALWAYS include
a "be nice to Opera 5" rule every time you use the Tantek Celik hack (above). */
body>#Header {height:14px;}
#Content {
margin:0px 50px 50px 200px;
padding:10px;
background-color:#eee;
border:1px dashed #666666;
}
#Menu {
text-align: center;
position:absolute;
top:110px;
left:20px;
width:172px;
padding:10px;
background-color:#eee;
border:1px dashed #666666;
line-height:17px;
/* Again, the ugly brilliant hack. */
voice-family: "\"}\"";
voice-family:inherit;
width:150px;
}
/* Again, "be nice to Opera 5". */
body>#Menu {width:150px;}
Thanks -- Chris Hi. First off I'm new to this forum so Hello! I wanted to know how to make sure my websites 'float' in the middle of the screen, like this for example http://www.richardjohntaylor.com/billymurray i.e. whatever size the window, the image always remains centred. The website above is only a single image. How would I do it with my other sites, which are tables making up many images, eg. http://www.terrystone.biz or http://www.trconsultants.co.uk I edit using Dreamweaver. Thanks Richard 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? Hi everyone, I couldn't really find a thread with this question... If there's already one with a solution to the problem, a link to the thread would be prefered over an answer here. Basically, my problem is that a layout I made doesn't center properly in IE. I have an y-repeated background in the center of the page, and on top a table. In Firefox everything looks fine and dandy, but in IE the table is a few pixels off to the left causing an error in the alignment. http://lastsong.sadil.net/ I don't really know how to fix it - I like it coded with tables better than with divs, so recoding it into divs won't do. (I am aware it doesn't validate on 6 points for those who care, but I can live with that for now...) If anybody has a solution to this problem, I'd love to hear it. Thanks! This is a tough one, I think. I am throwing this code into my current webpage: <div style="float:right; width:176; height:471; border:1px none solid#000"> So that I can have a side column. On a 1024 or 1280 resolution it looks fine, but once the res gets higher the column goes way too far to the right. Is there anyway to "lock it" in place? Thanks! Here is the code i have for the only(and first) page of the website. HTML Code: <!DOCTYPE html> <html> <body background="piginsun.png"> <div id="container" style="width:1903px"> <div align="center"> <div id="header" style="position:relative;width:100%;margin-top:0px;margin-bottom:0px;text-align:center"> <h1 style="margin-bottom:0;"> </div> <div style="width:340px;text-align:left;align:center;"> <a href="http://www.w3schools.com"><img width="868" height="90" src="mcad.png" alt="html.html" style="border:0;margin-top:0px;"></a> <div id="menu" style="height:315px;width:120px;float:left;"> <b><a target="_top" href="html.html">Home</a></br></br> <b><a target="_top" href="html_forums.asp">Server Forums</a></br></br> <b><a target="_top" href="html_updates.asp">Server Updates</a></br></br> <b><a target="_top" href="html_videos.asp">Server Videos</a></br></br> <b><a target="_top" href="html_staff.asp">Server Staff</a></br></br><b><a target="_top" href="html_pics.asp">Server Pictures</a></br></br> <b><a target="_top" href="html_donate.asp">Donations</a></br><b></br><a target="_top" href="html_contact.asp">Contact Us</a> </div> <div id="content" style="height:940px;width:1200px;text-align:center;"> <font size=40px;font color="#7373FF">Random</font><font size=40px;font color="#CB59E8">Craft</font></br> <i>A Minecraft Server</i> </br> <div id="content" style="height:598px;width:1200px;text-align:center;"> </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br> <div id="footer" style="clear:both;text-align:center;"> Copyright ®RandomCraft Server</div> </div> </body> </html> I need some help centering the whole thing. It looks good now but is off to the side, i need it centered. If someone could show me how to do that, that would be awesome. Thanks Hello, I'm having real trouble aligning images to the 'exact' centre in different browsers. I'm using <div align="middle"> </div> around the whole code at the moment, which aligns horizontally in Chrome and Firefox, but not IE9. But even this does not vertically align as well. Afraid I don't know much about CSS or any other div tags. I built the site in Dreamweaver - this is the code straight from site: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <div align="middle"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>www.test.com</title> <style type="text/css"> <!-- body { background-color: #000; } --> </style></head> <body> <img src="comet3.jpg" width="933" height="658" border="0" align="middle" usemap="#Map" /> <map name="Map" id="Map"><area shape="circle" coords="885,123,9" href="comet2.html" /><area shape="circle" coords="916,124,9" href="comet4.html" /><area shape="rect" coords="785,71,904,103" href="contact.html" /><area shape="rect" coords="665,70,756,109" href="about.html" /> <area shape="rect" coords="371,73,462,112" href="index.html" /> <area shape="rect" coords="499,70,632,111" href="portfolio.html" /> <area shape="poly" coords="891,118" href="#" /> </map> </body> </html> </div> Really need some help with this! Thanks for any assistance Cheers J I have the following HTML: <table id="TextArea1"> <tr> <td valign=top><img src="Images/AllProducts.jpg" alt="All Products" align=center></td> </tr> The image is placed at the top left corner of the table using the: valign=top Then, I want to center the image horizontally within the table using: align=center But, this markup is ignored. I have tried all the values for "align" and: align=right is the only one that works. What do I need to do to get this to work? Thanks. 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> |
|||||||