Learn VBA & Macros in 1 Week!

HTML - Trouble Centering Divs

Full Excel VBA Course - Beginner to Expert

Trouble Centering Divs	View Content

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.

Full Excel VBA Course - Beginner to Expert

Centering Divs

Similar Tutorials

View Content

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">&quot;It does not do to leave a live dragon out of your calculations, if you live near him.&quot;<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">&nbsp;</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;

Problem With Divs Centering Under Ie 6

Similar Tutorials

View Content

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

Centering Divs, Floats

Similar Tutorials

View Content

Hi 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

Having Trouble With Floating Divs

Similar Tutorials

View Content

Hi, first question as a new user so here goes...

As part of a website I'm designing I'm trying to create a fairly simple layout with two DIVs, one for an image and one for text, like in the picture below:

http://www.eastwood6.co.uk/layout.gif

I'm having problems getting the second smaller DIV (the one with the text in) to stay to the right of the first smaller DIV (with the image). I have floated the first DIV to the left, but I found that the text wraps underneath the image when the text is longer than the image. I tried floating the second DIV to the left as well, and this worked fine in IE, but it causes problems in Firefox, namely that the entire second DIV is pushed below the first.

I've been messing with this all morning and just cannot solve it, any help would be greatly appreciated!

Here's the code I've been playing with:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>Test</title>

<style type="text/css">
* {
padding: 0;
margin: 0;
}

#one {
width:50%;
border: 1px solid black;
}

#two {
float: left;
border: 1px solid orange;
}

#three {
width: 400px;
}

</style>
</head>

<body>

<div id="one">
<div id="two">This is the left box</div>
<div id="three">This is the right box. Now I just want to see what happens when I type so much text that it flows off the end.
This is the right box. Now I just want to see what happens when I type so much text that it flows off the end.
This is the right box. Now I just want to see what happens when I type so much text that it flows off the end.</div>
</div>

<div style="clear: both;"><p>&nbsp;</p></div>

</body>
</html>

Thanks,

Pete

Trouble With Divs Displaying Correctly

Similar Tutorials

View Content

Hey,

I've tried to start coding a page with XHTML and CSS using divs to align everything, but I'm having all kinds of trouble getting stuff to align and then getting it to align in more than one browser.

Here is the page and CSS:

http://dzapp.com/
http://dzapp.com/DZStyle-V1.css

Any kind of advice would be greatly appreciated.

Thanks!

Centering 3 Divs, Side By Side, Inside A Div

Similar Tutorials

View Content

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.

Help With Centering

Similar Tutorials

View Content

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>

Centering A Div Within A Div...

Similar Tutorials

View Content

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?

Centering Nav

Similar Tutorials

View Content

how can i center the nav on this page?

http://fantasyfootball.pzproductions.com/testing

Centering Webpage

Similar Tutorials

View Content

Hi, I'm new to the site and I'm just here to ask a question. I've been having trouble with my webpage trying to center everything. The problem is that at home my webpage is centered (When you zoom out everything stays centered) but as for school I zoom out and everything stays to the left and I'm pretty sure I left all the code the same from computer to computer. I don't think it is the resolution because I had changed my resolution to the same as at school. This is my coding (I'm an amateur at Html and don't know CSS):

<title>Home - WebBanners</title>
</head>
<p align="center">
<div style="position:absolute;top:0px; left:0px; right:0px; bottom:0px;" align="center">
<body topmargin="0" leftmargin="0" bgcolor="#0099FF">
<img src="Banner.gif" width="1280" height="290" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="140,233,302,285" href="Home.html" />
<area shape="rect" coords="330,233,543,286" href="Samples.html" />
<area shape="rect" coords="565,240,722,287" href="Prices.html" />
<area shape="rect" coords="752,229,905,286" href="About.html" />
<area shape="rect" coords="945,235,1122,284" href="Contact.html" />
</map>
<font face="Georgia, Times New Roman, Times, serif" size="+4" color="white"><p align="center"> <u>
Welcome To WebBanners!</u></p></font>
</p>
<table align="center">
<tr>
<td><font face="Georgia, Times New Roman, Times, serif" color="black" size="7"><strong>H</strong></font> <font face="Georgia, Times New Roman, Times, serif" size="+2" color="white">ere we make special just-for-you banner.
<br />

<br>
<font face="Georgia, Times New Roman, Times, serif">Every banner is unique to the person who have ordered them.<br /> <br><font face="Georgia, Times New Roman, Times, serif">They are sold at a reasonable price and if you don't <br>like them then we offer full money back guaranteed.
<br />
<br />
We also have an interactive department where you can <br />talk to one of 'us' through the microphone so we can help you. <br />All you have to do is ask through the E-mail.
<br />
<br />
We can make tons of banners for your website such as the one above <br />or see more
<a href="Samples.html">Here</a>
<br />
<br />
We have prices for your special needs. <br />All of the banners we offer are your ideas. <br />Ask and we can do it for you!
Click <a href="Prices.html"> Here </a> for prices.
<br />
<br />
Want to learn more about us? Click <a href="About.html"> Here </a> for more information.
<br />
<br />
Going to buy one of our offers? Need help in finding something? <br />Click <a href="Contact.html"> Here </a> to contact us! For your design!
</font>
</td>
<td align="center">
<font face="Georgia, Times New Roman, Times, serif" color="Green" size="+3"><u><strong>So Why Pick Us? </font> </u> </strong>
<br />
<br />
<font face="Georgia, Times New Roman, Times, serif" color="Green" size="+2">
<li>We have 100% Money Back Guarantee <br />
<li>Satisfaction Guarantee<br />
<li>Our Prices beat the Competitors<br />
<li>24 Hour Service <br />
<li>Interactive Department <br />
<br />
<br />
<br />
<img src="Ordernow!.gif" />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

</body>
</html>

Centering This Website In Ie Etc

Similar Tutorials

View Content

hello there

can someone please give some advice / fixes for centering my website in IE and Chrome etc

I programmed it in Dreamweaver and previewed it in Safari and Firefox where it looks lovely and central, however people have told me that in IE it is centered to the left. I can't figure out how to fix it.

http://www.formconstant.co.uk

any help would be greatly appreciated

john

Centering Website In Ie

Similar Tutorials

View Content

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>

Help Centering My Footer?

Similar Tutorials

View Content

Hello all,

I'm hoping someone can help me with what should be a super simple thing, but I'm not sure if I've just been staring at this code too long or what. Basically all I am trying to do is center my footer on the page, but it seems glued to the left side. I've tried putting in <div align="center" within my HTML, and auto values for my margins in CSS, but neither seem to do the trick. Can anyone help me out? Related markup is below:

<div id="footer" align="center">
<div class="container">
<div class="leftFooter">
<ul class="footerNavMain top">
<li class="first"><a href=" ">Products</a></li>
<li> | </li>
<li><a href=" ">FAQ</a></li>
<li> | </li>
<li class="last"><a href=" ">Where To Find Us</a></li>
</ul>

<ul class="footerNavMain bottom">
<li class="first">Phone Number</li>
<li> | </li>
<li class="last"><a href=" ">Email Link</a></li>
</ul>

<div class="copyright">
<sup>©</sup>
2011 Copyright™, All Rights Reserved.
</div>

</div>

</div>
</div>

CSS

#footer {
background: url("/Assets/footer2.jpg") no-repeat scroll 0 0;
display: block;
float: left;
height: 75px;
width: 900px;
margin-left: auto;
margin-right: auto;
}

#footer .container {
height: 75px;
margin-left: auto;
margin-right: auto;
padding-right: 45px;
padding-top: 3px;
width: 900px;
}

#footer .leftFooter {
background: none repeat scroll 0 0;
color: #FFFFFF;
display: block;
float: left;
height: 100%;
margin-left: 5 px;
overflow: hidden;
position: relative;
width: 900px;
}

#footer .rightFooter {
background: none repeat scroll 0 0 #4E4E4E;
color: #FFFFFF;
display: block;
float: right;
height: 100%;
margin-left: 15 px;
position: relative;
width: 355px;
}

#footer .copyright {
display: block;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
height: 15px;
left: 0;
line-height: 13px;
position: absolute;
text-align: center;
top: 50px;
width: 900px;
z-index: 1;
font-weight: 700;
}
#footer a:link{
color: #FFFFFF;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}

#footer a:visited {
color: #FFFFFF;
text-decoration: none;
font-size: 11px;
}

#footer a:hover{
color: #000000;
text-decoration: underline;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}

#footer ul.footerNavMain {
display: block;
float: left;
margin-top: 5px;
width: 900px;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

#footer ul.footerNavMain.top {
margin-left: 185px;
width: 900px;
}

#footer ul.footerNavMain.bottom {
margin-left: 145px;
width: 900px;
color: #000000;
}

#footer .footernavMain li {
display: block;
float: left;
padding-left: 4px;
padding-right: 4px;
}

#footernav li a:link {
color: #FFFFFF;
text-decoration: none;
font-size: 11px;
}

#footernav li a:visited {
color: #FFFFFF;
text-decoration: none;
font-size: 11px;
}

#footernav li a:active {
color: #000000;
text-decoration: underline;
font-size: 11px;
}

#header nav li.last, #footerNavMain li.last {
padding right: 0;
}

#footer .footerNavMain li.first {
background: none repeat scroll 0 0 transparent;
padding-left:0;
}

Centering Div Layer

Similar Tutorials

View Content

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">&nbsp;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?

Need Help With Centering Page

Similar Tutorials

View Content

Nevermind.......

Centering Page!? Help!

Similar Tutorials

View Content

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.

Centering Links

Similar Tutorials

View Content

Is it possible to center links using the link tags itself: something like

<a href align:center >

Html Centering

Similar Tutorials

View Content

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

Centering This Page?

Similar Tutorials

View Content

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>

need Help Centering Website

Similar Tutorials

View Content

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

HTML - Trouble Centering Divs

Trouble Centering Divs

Similar Tutorials

Centering Divs

Problem With Divs Centering Under Ie 6

Centering Divs, Floats

Having Trouble With Floating Divs

Trouble With Divs Displaying Correctly

Centering 3 Divs, Side By Side, Inside A Div

Help With Centering

Centering A Div Within A Div...

Centering Nav

Centering Webpage

Centering This Website In Ie Etc

Centering Website In Ie

Help Centering My Footer?

Centering Div Layer

Need Help With Centering Page

Centering Page!? Help!

Centering Links

Html Centering

Centering This Page?

**need Help Centering Website**

need Help Centering Website