|
HTML - Centering Divs
Hi all
I have a question which im sure is very simple to answer but has been frustrating me for three days (yes i am aware i may have prooved my own ineptitude ) If any of you have a moment could you have a look at the code below. What im trying to do is center the divs no matter what the screen resolution.Im hoping, due to my huge lack of experience, that im just missing something very obvious. Below is the code ... TEMPLATE HTML Code: body {
background-color: #000000;
}
-->
</style>
<link href="Stylesheets/DT CSS.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
a:link {
color: #b46633;
}
.style1 {
font-family: "Times New Roman", Times, serif;
font-size: large;
}
-->
</style></head>
<body>
<div id="outer">
<div align="center" id="Header"></div>
<div id="links">
<p><a href="Home.html" class="style1">Home<br />
<br />
</a><br />
</p>
</div>
<div align="center" id="Main">
<p align="center">"It does not do to leave a live dragon out of your calculations, if you live near him."<br />
<em>(JRR Tolkien - The Lord of the Rings)</em></p>
<br />
<p align="center">Throughout time since mankind begun our imaginations have activly sought out what we could not see or understand. Demons have haunted our dreams and gods have soothed them. Our minds have conjured terrible creatures for our warriors to battle and places for the adventurous to explore. One of the greatest and widest spread of these creatures is the Dragon. A true testimony to the power of imagination. This website is in dedication to the mightiest of our minds creations. The infomation found here is the result of many hours research and passion and i hope you find it useful.<br />
Welcome to Dragons Touch</p>
</div>
<div id="News">Content for id "News" Goes Here</div>
</div>
<h1 align="center"> </h1>
</body>
</html>
CSS PHP Code: body { font-family: "Times New Roman", Times, serif; background-color: #000000; background-repeat: no-repeat; color: #FFFFFF; font-size: medium; width: 100%; position: relative; left: auto; right: auto; bottom: auto; margin-right: 20px; margin-left: 20px; margin-top: 20px; margin-bottom: 20px; } #outer { width: 80%; background-color:#FFFFFF; margin-top: 50px; margin-bottom: 50px; margin-left: auto; margin-right: auto; padding: 0px; border: thin solid #000000; } #Header { position: absolute; height: 150px; width: 800px; left: 121px; top: 0px; background-image: url(../Images/NewBanner.jpg); color: #F0F0F0; background-color: #000000; background-repeat: no-repeat; margin: 0px; } Links { top: 150px; position: relative; height: 350px; width: 150px; bottom: auto; } #links { top: 151px; height: 350px; width: 126px; clip: rect(auto,auto,auto,auto); position: absolute; font-family: "Times New Roman", Times, serif; padding-top: 50px; font-size: large; font-weight: normal; font-style: normal; text-transform: none; padding-left: 40px; text-align: left; list-style-position: inside; left: 41px; margin: 0px; } #Main { font-family: "Times New Roman", Times, serif; position: absolute; height: auto; width: 620px; left: 208px; top: 151px; right: 800px; margin: 0px; } #News { position: absolute; left: 829px; top: 151px; width: 162px; height: 406px; margin: 0px; Similar TutorialsHi everyone, I'm having trouble with centering multiple DIVS and making them next to one another like so: HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
<style>
div{border: 1px solid gray;}
</style>
</head>
<body>
<div style="text-align: center">
<div style="float: left;display: inline;">
dfdfd
</div>
<div style="float: left;display: inline;">
dfdfd
</div>
<p style="clear: both;">
</div>
</body>
</html>
Is it possible? Note that we don't know their width or height of any of the DIVS I've got two divs that I want to center, each within its own outer div. Here is my HTML: 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>Duyun</title>
<link rel="stylesheet" type="text/css" href="assets/styles/styles.css" />
<script type="text/javascript" src="assets/scripts/swfobject.js">
</script>
<script type="text/javascript">
swfobject.embedSWF ("assets/flash/eng_button_2.swf", "engLink", "257", "471", "9.0.0");
swfobject.embedSWF ("assets/flash/ch_button_2.swf", "chLink", "257", "471", "9.0.0");
</script>
</head>
<body>
<div id="container">
<div id="homeTop">
</div>
<div id="homeMain">
<div id="homeLeft">
<a href="english/index.html">
<div id="engLink">
<p>Alt content</p>
</div></a>
<p class="homeEnter">Enter English Site</p>
</div>
<div id="homeRight">
<a href="chinese/index.html">
<div id="chLink">
<p>Alt content</p>
</div>
</a>
<p class="homeEnter">Enter Chinese Site</p>
</div>
</div>
</div>
</body>
</html>
and the CSS: Code: @charset "UTF-8";
/* CSS Document */
body {
background-color: black;
color: #c0c3c4;
}
#container {
margin: 0 auto;
width: 950px;
}
h1 {
text-align: center;
}
/*************** Home **************/
#homeTop {
height: 100px;
background-color: red;
}
#homeMain {
margin: auto;
width: 800px;
}
#homeLeft {
float:left;
width: 400px;
background-color:blue;
}
#homeRight {
float: right;
width: 400px;
background-color: green;
}
engLink {
margin: auto;
width: 257px;
height: 471px;
}
chLink {
margin: auto;
width: 257px;
height: 471px;
}
.homeEnter {
text-align: center;
}
/**************Bio - English**************/
#bioContainer{
margin: auto;
width: 785px;
}
#bioPic {
float: left;
margin: 20px;
}
.bio {
margin: 10px;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size: 13px;
text-indent: 2em;
}
As you can see, for both the chLink and engLink divs, I have the margin: auto declaration, but currently, they both show up to the left extreme of their containing divs. Any ideas what's wrong here? Could the swfobject be causing problems? Thanks. 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'm having some trouble trying to get the following page to show the three link columns centered, side by side: http://centralmusic.com.previewmysite.com/links.php EDIT: for reference, the title LINK is properly centered, and the ARTIST column should be directly below that, as is seen on the contact page I've tried every trick you can find on google, but nothing seems to work while the float tag is involved, and if I remove the tag then the divs arn't side by side. I've found that if I make a containing DIV with a FIXED witdth, it will center THAT div within it's parent using the margin: 0 trick. however, the 3 interior divs still float to the left of that container div. so if the containing div is wider then the total width of the interior divs, they do not appeared center (however on this page I COULD make use of equal column widths, but it doesn't end up being FF friendly). Alright so I actually tried a couple more things after typing that last paragraph. On this page: http://centralmusic.com.previewmysite.com/gallery.php I find that what i described so far is true, however on the first page i referenced, putting a containing div around the 3 columns made no apparent difference. I'm going to start double checking my code and comparing the two pages for differences to see what I'm doing wrong (on both pages though, the goal is to have a number of divs centered vertically, side by side). If anyone has any comments or hints to help me out that'd be great, but I'll definatley be posting back later with an update once I get a chance to try a few more things. 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? 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> I tried every code I could find, but warning, I'm still new to HTML. This is my table code for now. I need the first row image to be centered. When i view it in a browser it is aligned to the left <table style="width: 635px; height: 900px" cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td style="width: 600px; height: 600px;" colspan="6"><img alt="" src="breakfast1.JPG" /></td> </tr> <tr style="height: 100px"> <td><img alt="" src="bthumb1.JPG" /></td> <td><img alt="" src="bthumb2.JPG" /></td> <td><img alt="" src="bthumb3.JPG" /></td> <td><img alt="" src="bthumb4.JPG" /></td> <td><img alt="" src="bthumb5.JPG" /></td> <td><img alt="" src="bthumb6.JPG" /></td> </tr> <tr style="height: 100px"> <td><img alt="" src="bthumb7.JPG" /></td> <td><img alt="" src="bthumb8.JPG" /></td> <td><img alt="" src="bthumb9.JPG" /></td> <td><img alt="" src="bthumb10.JPG" /></td> <td><img alt="" src="bthumb11.JPG" /></td> <td><img alt="" src="bthumb12.JPG" /></td> </tr> <tr style="height: 100px"> <td><img alt="" src="bthumb13.JPG" /></td> </tr> </tbody> </table> 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 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 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 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 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. Hi, Have just uploaded a new website. In Safari, Opera and Firefox the webpage floats in the middle of the browser page, as I want it to. In some versions of IE its sits to the far left. Here is the page: http://www.ironworksstudio.co.uk/ And here is the CSS: Code: *{
margin: 0;
padding: 0;
}
body{
font-family: Helvetica, Verdana, Arial, sans-serif;
font-size: 15px;
color: #000000;
background-color:#000000;
}
#container {
margin-right: auto;
margin-left: auto;
margin-top: 15px;
width: 700px;
background-color:#000000;
}
p{
padding-top: 10px;
font-size: 13px;
line-height: 18px;
}
#header {
margin-right: auto;
margin-left: auto;
margin-bottom: 0;
height: 100px;
width:700px;
background-color:#000000;
padding: 0 0 10px 0;
}
#menu ul{
margin-left:0;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
background-color:#FFFFFF;
}
#menu li{
text-align: center;
text-decoration: none;
color: #ffffff;
background-color: #000000;
list-style-type: none;
width: 84px;
height: 20px;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom; 3px;
margin-right: 2px;
margin-left: 2px;
float: left;
border: 1px solid;
}
#menu li:hover {
color: #ffffff;
background-color: #333333;
}
#menu li a {
text-decoration: none;
color: #ffffff;
}
#menu li a:hover {
color: #ffffff;
}
#footer {
font-size:12px;
font-family: Helvetica, Arial, sans-serif;
width: 700px;
margin-right: auto;
margin-left: auto;
clear: both;
background-color:#000;
color: #FFF;
}
#top_image {
margin-bottom:20px;
clear: left;
background-color:#000000;
}
#menu {
float: left;
width: 700px;
margin-bottom:10px;
background-color:#000000;
}
#two_column {
font-size:12px;
font-family: Helvetica, Arial, sans-serif;
line-height:1.4;
margin-top: 10px;
margin-bottom: 50px;
float: left;
width: 700px;
text-align: left;
background-color:#000;
}
#l_column {
font-size:12px;
font-family: Helvetica, Arial, sans-serif;
color:#FFF;
line-height:1.4;
margin-top: 10px;
margin-right: 30px;
margin-bottom: 50px;
float: left;
width: 335px;
text-align: left;
background-color:#000;
}
#l_column a{color:999999;}
#r_column {
font-size:12px;
font-family: Helvetica, Arial, sans-serif;
color:#fff;
line-height:1.4;
margin-top: 23px;
float: right;
width: 335px;
background-color:#000;
padding: 0 0 10px 0;
}
.left {
font-size:12px;
font-family: Helvetica, Arial, sans-serif;
width: 335px;
float: left;
text-align: left;
border: 2px solid #000000;
border-collapse: collapse;
background-color:#000000;
}
.right {
font-size:12px;
font-family: Helvetica, Arial, sans-serif;
width: 335px;
float: right;
text-align: left;
border: 2px solid #000000;
border-collapse: collapse;
margin-top:12px;
background-color:#000000;
}
th {
font-weight: bold;
font-size:13px;
color: #000000;
background-color:#FFFFFF;
padding: 5px;
}
td {
padding:5px;
}
tr {
color:#FFFFFF;
}
.rowstyle1 {
border-bottom:1px dotted;
}
#gallery {
background-color:#000;
width: 680px;
padding-left: 0;
}
#gallery ul { list-style: none;
margin-left: 0;
}
#gallery li {
padding-left:1.2px;
}
#gallery ul li { display: inline;
padding-right: 0;
}
#gallery ul img {
border: 0;
border-width: 0;
}
#gallery ul a:hover img {
border: 0 solid;
}
#gallery ul a:hover { color: #cccccc; }
hr {color:#333333;
border-style:normal;
padding: 0 0 0 0;
margin: 0 0 10 0;
}
h2 {color:#ffffff;}
</style>
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. 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. 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> 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 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? |
|||||||