|
HTML - Centering Not Working In Ie7
http://insomnia.eternal-glory.org/2.0/index.php
I'm trying to imitate a Mac computer, Tiger. Looks great in FF/Safari, but in IE7, the dock refuses to center. I have: Code: body {
text-align:center;}
in my CSS, that's supposed to fix the margin-left/-right:auto; bug for IE. But... it's not? Help, please? Doctype is Strict, and I have margin-left/-right set to auto. Thanks in advance, Michele Similar Tutorialshow can i center the nav on this page? http://fantasyfootball.pzproductions.com/testing 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> I just noticed that the site I coded is not centered but is aligned to the left on resolutions larger than 1024x768. Is there a way to fix this? Here is the css for the main div which has all the content. #container { position:absolute; left:0px; top:0px; width:1002px; height:auto; margin:0px auto; border:0; padding:0; 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. Take a look at this image. What I want to do is make the background black (which I know how to do), but to add in the black header plus the gray box--same width. What I'm trying to do is my forum is fixed width (in the center, not expanded on browser) and I want to do the same to a new non-forum site starting from scratch. 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? 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'm attempting to center the logo / table located at the top of the page. I tried several various forms of alignment commands, all with no success. Any help is appreciated. Site: http://blog.camhabib.com I have a marquee coming in from the right as normal but want it stop in the centre of the page instead of at the far left. I cannot seem to find any reference to the code required. Thanks Lamarinapete I have a page laid out, but its not centering the main table? All the contents should be centered on the page but its shoved to the left. Take a look he www.puliz.com/default2.htm Also, there is a gap in the graphics just below the image map that I have placed there. Any ideas? Thanks in advance! Scott Hey, I was working on a template and I was learning some new things so I might have messed up some where. But, the template won't center and it has a empty space next to it which I don't know how to get rid of. Can anyone help me? http://teamafterglow.com/templates/template7.html Hello there. I'm not very fluent in HTML, but I have a working knowledge. The template from my website (http://unearthlypodcast.co.cc) was one that was in the HTML editor Pagebreeze. As I'm editing, it is the same as it is in the above link, except there is a <div> tag at the bottom of the right sidebar that adds a feed to my Twitter account. However, when I add the feed the length of the sidebar is extended, so the main content in the centre is moved down to the middle, leaving an unsightly gap at the top. I tried changing HTML Code: <table cellspacing="6" cellpadding="0" width="100%" align="center" border=0><tbody> to HTML Code: <table cellspacing="6" cellpadding="0" width="100%" align="top" border=0><tbody> but it hasn't done anything. How do I move the content up? Thanks, James 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 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 I'm currently using this for my blog template (i didn't make it) and it's currently aligned to the left. How would i make it so that it centers automatically regardless of window size/screen resolution? The right column has a position. Any help is appreciated. Code: <html><head>
<title>17. everything i'm not</title>
<style type="text/css">
#navbar-iframe {display: none;}
::-moz-selection {background-color:#e3e3e3;color:#666666;}
a:link,a:active,a:visited{color:#999999; text-decoration: none;}
a:hover{text-decoration: none; color: #91B1BD; text-decoration:none;}
body{background-color: #fdfdfd; background-image: url('http://i53.tinypic.com/1jvi34.jpg'); color: #666666; font-family: arial; font-size: 8pt;}
blockquote{font-family:arial; border-left: 5px solid #91B1BD; background-color:#f9f9f9; color: #666666; padding: 10px;}
.side{background:#ffffff; padding:10px; filter: alpha(opacity=70); moz-opacity:.70; opacity:.70;}
.h1 {
font:normal 12pt courier new;
color:#91B1BD;
text-align:left;}
.h2 {
font:normal 8pt courier new;
color:#999999;
border-bottom: 1px dashed #e3e3e3;
text-align:left;
padding:3px;}
</style><noembed>
</head></noembed>
<noembed><body>
</noembed>
<div style="left:0px; top:0px; position:absolute;">
<img src='http://i51.tinypic.com/152oqpk.jpg' width="700px" >
</div>
<div style="position:absolute; left:0px; top:350px; width:545px; background:#ffffff; padding:10px; filter: alpha(opacity=70); moz-opacity:.70; opacity:.70;">
<blogger>
<div class="h1">▶ <$BlogItemTitle$></div>
<div class="h2"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> // <$BlogItemDateTime$></div><br>
<$BlogItemBody$><br>
</blogger>
</div>
<div style="width: 250px; left:580px; top:290px; position:absolute;">
<div style="color:#91B1BD; font-family:courier new; font-size:14pt;">'cos she's everything, <br>everything im not.</div><br>
<div class="side">
<div class="h1">▶ こんにちは</div>
a warm welcome to your blog ? music players, hit counters, nuffnang ?
</div><br>
<div class="side">
<div class="h1">▶ 私について</div>
konnichiwa, watashi no namaewa deniisu desu. your sexy profile here hoho.
</div><br>
<div class="side">
<div class="h1">▶ 何か言う</div>
some space for your tagboard, max width 250px.
</div><br>
<div class="side">
<div class="h1">▶ ともだち</div>
<a href="http://" target="_blank">one</a>
<a href="http://" target="_blank">two</a>
<a href="http://" target="_blank">three</a>
<a href="http://" target="_blank">four</a>
<a href="http://" target="_blank">five</a><br>
links to your friends ? if you have any.
</div><br>
<div class="side">
<div class="h1">▶ ありがとう</div>
Layout and header image by <a href="http://blogskins.com/me/mymostloved" target="_blank">mymost</a><a href="http://heavilyybroken.blogspot.com" target="_blank">loved*</a>
with raw image from popsister scan by <a href="http://sushi-cat.net/" target="_blank">sushi-cat</a> and background from <a href="http://fivepointsapart.blogspot.com" target="_blank">fivepointsapart</a>.<br>
</div>
</div>
</body>
</html>
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 all i have been trying to center a group of four images using html. the code is: PHP Code: <img src="tennis.jpeg"align="center"width="100" height="100" title="Equipment needed for playing tennis." > <img src="snooker.jpeg"align="center" width="100" height="100" title="Snooker table within a snooker club where you play the sport "> <img src="Golf.jpeg" "align="center"width="100" height="100 title="The Famous last hole on the old corse St Andrews"> <img src="Badminton.jpeg"align="center" width="100" height="100" title="Equipment needed for playing Badminton"> some how its not quite right any ideas where im going wrong? TI AV. Gaz. |
|||||||