Learn VBA & Macros in 1 Week!

HTML - Help With Centering Content In Div

Full Excel VBA Course - Beginner to Expert

Help With Centering Content In Div	View Content

Please help me with the following. This is not a problem in Firefox; only in IE. I am having trouble centering one DIV with a DIV to the left of the centered DIV. The DIV that is blue I would like centered according to the browser width and the red DIV I would like the same vertically as the blue DIV only left justified. In Firefox this works correctly the way I would expect. In IE the left justified div appears "pushes" the DIV ( in blue ) that I want centered further to the right; making it un-centered. thanks for any assistance.

Code:

<div width="100%">
			<div align = "left" style="width:200px;float:left;background-color:#ff0000;">
						<p style="font-size: 8pt;">This needs to be left justified........</p>
						<p style="font-size: 8pt;">This needs to be left justified........</p>
						<p style="font-size: 8pt;">This needs to be left justified........</p>
			</div>
		 <div align="center" style="background-color:#00ff00;">
				<div style="width: 500px;background-color:#0000ff;">
					<p style="font-size: 8pt;">this needs to be centered.................................................................................. </p>
					<p style="font-size: 8pt;">this needs to be centered.................................................................................. </p>
					<p style="font-size: 8pt;">this needs to be centered.................................................................................. </p>
					<p style="font-size: 8pt;">this needs to be centered </p>
				</div>
		</div>

Full Excel VBA Course - Beginner to Expert

Similar Tutorials

Content Not Centering In Ie

Content Boxes Not Centering

Having A Problem Centering Page Content

Centering Footer Content Under Main Panel

Footer Content Not Aligning To Main Content Correctly On Resize

Replace Content With Specified Content

Help With Centering

Centering A Div Within A Div...

Centering Problem

Centering A Table

Centering Not Working In Ie7

Marquee Centering

Help With Centering Template

Centering Webpage.

Centering - What Am I Doing Wrong?

Need Help Centering Image

Centering Div Layout

Centering My Page

Learn VBA & Macros for Excel in 1 Week!

Content Not Centering In Ie

Similar Tutorials

I have a page that is not being centered on the background in both IE 6&7 but looks perfect in FF. I am not sure what is wrong because the template I used is vaild

Here is the page

http://www.mesquitechristmas.com/wea...Z119&icao=KHQZ

I have been banging my head all day an maybe just need another pair of eyes.

-Thanks

Content Boxes Not Centering

Similar Tutorials

The CSS for this part is
Code:

.homebox {
	background-color: #000000;
	width:200px;
float: left ;
   	border: 1px solid #00ff00;


	border-radius: 8px;
	-moz-border-radius: 8px;
	-khtml-border-radius: 8px;
	-webkit-border-radius: 8px;

	margin: 5px;
	padding: 10px;
}


.homebox h3 {
	color: #ffffff;
	margin: 5px;
	font-size: 18px;
	font-weight: bold;
}

.homebox p {
	padding:0px;
	margin:5px;
	font-size:11px;
	font-weight:bold;
	color:#ffffff;
}

.homebox img {
	position: relative; bottom: 0;

The HTML is
HTML Code:

<div class="homebox">

<h3>Forums</h3><img src="./images/forum.png" width="32px" height="32px"/>
<p>Interact and chat with other members. Relax and sitback</p></div>
<div class="homebox">
<h3>Wiki</h3><img src="./images/wiki.png" width="32px" height="32px" />
<p>Learn about various things such as my scripts and such.</p></div>
<div class="homebox">
<h3>Blog</h3><img src="./images/blog.png" width="32px" height="32px" />
<p>Read updates about my site and my random life.</p></div>

And no matter what they either stack on top of eachother or are all the way to the left.

Having A Problem Centering Page Content

Similar Tutorials

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>

Centering Footer Content Under Main Panel

Similar Tutorials

Hello,

I'm working on a site, but have run into a problem I'm not sure how to deal with.

The contents of the footer area of the page are centered within a Div as you can see at the url: http://www.mylessinclair.com/testsite/ However, I think it might be easier on the eye if the links and content were centered underneath the main content panel.

I'm trying to avoid the use of tables in achieving this, so I'm thinking that I need two Divs side by side for the footer. One 150px wide as in the side bar above it, marked up as float left - and then just center the footer contents in the other Div ?

Am I on the right track here, or is it a bit more complicated?

Hope someone can advise.

Many thanks,

Myles

Footer Content Not Aligning To Main Content Correctly On Resize

Similar Tutorials

Hi,

Im trying to make my footer content align correctly to the main content when a window resizes. The apdivs don't seem to want to move at all even with a relative position etc. I have tried everything but just cant get it to work can someone help please?

http://pjm.co.uk.uksite4.yourwebserv...splay&PageID=5

Also some one commented before on the amount of css and JS pages. These will al be stripped out as its an Open sources system im using!

Thansk alot
Joe

Replace Content With Specified Content

Similar Tutorials

Hey guys, I used to know a lot about html, but then just completely stopped doing anything with websites for too long.

I was just wondering how I can replace a word or number with a specified word or number.

What I want to achieve:
I've got a forum with a couple thousand members and it's picking up in activity and I want to make some names stand out for being helpful. I want to replace their names with an image.

But to do so, it'd have to be a code made and added into the footer template. Because obviously I can't edit a username for html image code. So I just need the code to find all instances of a certain username and replace it with what I specified.

-------------
Man I really wish I remembered how to do this haha.

Thanks guys.

Centering Nav

Similar Tutorials

how can i center the nav on this page?

http://fantasyfootball.pzproductions.com/testing

Help With Centering

Similar Tutorials

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

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 Problem

Similar Tutorials

Centering A Table

Similar Tutorials

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

Centering Not Working In Ie7

Similar Tutorials

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

Centering Divs

Similar Tutorials

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;

Marquee Centering

Similar Tutorials

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

Help With Centering Template

Similar Tutorials

I'm currently using this template for blogger that's not made by myself and i've been trying to get it to center horizontally but it's not working. I'm hardly experienced with html so any help would be appreciated. Thanks in advance!

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<HTML><head>
<title>The City That Never Sleeps</title>

<script type="text/javascript">
function changeNavigation(id)
{document.getElementById('content').innerHTML=document.getElementById(id).innerHTML}
</script>

<style type="text/css">

body { 
background-image: url(http://i1015.photobucket.com/albums/af277/sleepingtoys/city/citybg.jpg);
background-repeat: repeat-x;
background-attachment: fixed;
background-color: #F0F0F0;
font: normal 8pt "Arial", sans-serif;
color: #808080;
line-height: 1.5;
text-align: justify;
}

#navbar-iframe{
display: none;height: 0px;
}  
#bottom { 
background: #222;
height: 20px;
width: 100%;
position: fixed;
bottom: 0;left: 0;z-index: 1;
}

#sun{ 
 padding:5px; 
 background: #222222;}

#post{
 filter: alpha (opacity=90);
 -moz-opacity: 0.50; opacity: 0.90; 
-webkit-transition-duration:1s;
 padding:1px 3px 3px 0px;}

#post:hover{ 
 filter: alpha (opacity=100);
 -moz-opacity: 1.00; opacity: 1.00;
 -webkit-transition-duration: 1s;
 padding:1px 3px 3px 0px;}

#posts {
 background: #ffffff;
 vertical-align: top;
 width: 520px;
 -moz-border-radius: 10px 0 10px 10px;
 -webkit-border-radius: 10px 0 10px 10px;
 padding: 5px 10px 10px 10px;}

#postbody img {
 padding: 6px;
 background:#fafafa;
 border: 1px solid #e1e1e1;}

#music img {
 padding: 6px;
 background:#111;
 border: 0px solid #222;}

#moon { 
 background: transparent;
 position: absolute;
 top: 20px;
 left: 315px;
 width: 60%; }

#rain {
 position: fixed; 
 width: 250px;
 bottom: 10px;
 left: 50px;} 

#rain #content {
 -webkit-border-radius: 10px 10px 0 0px;
 -moz-border-radius: 10px 10px 0 0px; 
 background: #222222;
 color: #999;
 margin: 10px 0 0;
 padding: 8px; }

::selection {
 color: #888888;
 background: #f5f5f5; }

::-moz-selection{
 background: #f5f5f5;
 color: #888888;}

.blogger-labels{
 border-top: 1px solid #f8f8f8;
 font-size: 10px;
 padding-top: 5px;
 margin: 10px auto 0 auto;
 text-align: right;}

strong, b {color:#81A8B8;}em, i {color: #B94159 ; font-weight:bold;}u {color: #A79C8E ;border-bottom: 1px solid #A79C8E;}

a { 
 font: bold 8.5pt "helvetica", sans-serif;
 color: #888;
 text-decoration: none;
 text-transform: lowercase;}

a:hover {
 -moz-transition-duration: 1s;
 -webkit-transition-duration:1s;
 color: #ffffff; }

blockquote {
 background-image:url("http://i589.photobucket.com/albums/ss333/HeartsAloud/dl/hbq.gif");
 background-repeat: no-repeat;
 background-position:top right;
 font: normal 8pt "arial", monospace;
 color: #999;
 margin: 1px 0px 1px 0px;
 border-top: 1px solid #eeeeee;
 border-bottom: 1px solid #eee;
 -webkit-transition-duration:1s;
 padding: 9px 0px 9px 0px; }

blockquote:hover { 
 -webkit-transition-duration:1s;
 color: #555; }

.date {
 font: normal 20pt "helvetica", sans-serif;
 text-transform: lowercase;
 color:#dddddd;
 letter-spacing:-3pt;}

.title {
 font: normal 18pt "helvetica", sans-serif;
 border-bottom: 1px solid #f5f5f5;
 margin-top:-10pt;
 margin-bottom:2px;
 font-style:italic;
 letter-spacing: -2pt;
 color:#f1f1f1;
 text-transform: lowercase; }

.time{
 font: bold 30pt "arial", sans-serif;
 -moz-border-radius: 0 7px 7px 0px;
 -webkit-border-radius: 0 15px 15px 0px;
 height: 50px;
 background: #f9f9f9 !important;
 padding: 1px 3px 3px 0px;
 float: left;
 position: relative;
 color:#f1f1f1;
 font-weight:bold;
 letter-spacing:-6.5pt;
 filter: alpha (opacity=70);
 -moz-opacity: 0.70;
 opacity: 0.70; 
 -webkit-transition-duration:1s; 
}

.time:hover{
 filter: alpha (opacity=90); -moz-opacity: 0.90; opacity: 0.90; 
 -webkit-transition-duration:1s;
 padding:1px 3px 3px 0px;}

.clouds{
 font: normal 18pt "helvetica", sans-serif;
 font-color:#333333;
 letter-spacing:-2pt; }

.sky{
 text-align: right;
 padding: 0 9px 0px 0px;
 font: bold 40pt "helvetica", sans-serif;
 letter-spacing:-7pt;
 text-transform: lowercase;
 line-height:50%;
 color:#222;}

.navi {
 background: #222222;
 color: #555555;
 border-bottom: 1px solid #333;
 font: normal 8pt "helvetica", sans-serif;
 letter-spacing: 3pt;
 margin: 0;
 padding: 8px 5px;
 text-align: right;
 text-transform: uppercase; 
 -webkit-transition-duration:1s; }

.navi:hover {
 -webkit-transition-duration:1s;
 background: #222;
 color: #999999;
 cursor: default;
border-right:140px solid #333; margin-right: 0px;}

a.label:link, a.label:active, a.label:visited {
text-decoration: none;  display: block; font: bold 30pt "arial", sans-serif; color: #e4e4e4; text-align: center; padding-bottom: 3px; margin:5px;
 }
a.label:hover{ 
color: #A6ACA7;  }

</style></head>

<body>

<div id="rain">

<div class="sky">
The City That Never Sleeps
</div>

<div id="content">
<div id="music">
<img src="http://i1015.photobucket.com/albums/af277/sleepingtoys/wocky/3.jpg">

Best viewed in <b>Google Chrome</b>, screen resolution 1280 x 1024.
Do not put too much content under each header or else some of the content could not be seen.

</div>
</div>

<div class="navi" style="border-top: none;" onClick="changeNavigation('about')">ABOUT</div>
<div class="navi" onClick="changeNavigation('affiliates')">AFFILIATES</div>
<div class="navi" onClick="changeNavigation('archive')">ARCHIVES</div>
<div class="navi" onClick="changeNavigation('tagboard')">TAGBOARD</div>


<div id="sun">
</div>


<div id="about" style="display: none;">
<div class="clouds">profile</div>
<div id="music">

<img src="http://i1015.photobucket.com/albums/af277/sleepingtoys/wocky/1.jpg">

It's best to keep it short and sweet. (:
</div>
</div>

<div id="affiliates" style="display: none;">
<div class="clouds">affiliates</div>
<div id="music">

<img src="http://i1015.photobucket.com/albums/af277/sleepingtoys/wocky/5.jpg">

<a href="http://struckbywanderlust.tumblr.com" target="_blank">tumblr</a>
<a href="http://heartsaloud.livejournal.com" target="_blank">livejournal</a>
<a href="http://heartsinink.livejournal.com" target="_blank">heartsinink</a>
<a href="http://twitter.com/heartsaloud" target="_blank">twitter</a>

<div class="clouds">credits</div>

This skin is made by <a href="http://blogskins.com/me/sleepingtoys" target="_blank">sleeping</a><a href="http://about.me/halfway" target="_blank">toys</a>.<br>
Resources: <a href="http://www.sxc.hu/" target="_blank">1</a>, <a href="http://weheartit.com/entry/2591643" target="_blank">2</a>, 
<a href="http://weheartit.com/entry/442753" target="_blank">3</a>, <a href="http://weheartit.com/entry/2868529" target="_blank">4</a>,
<a href="http://weheartit.com/entry/2867826" target="_blank">5</a>

</div>
</div>
<div id="archive" style="display: none;">
<div class="clouds">archives</div>
<div id="music">

<img src="http://i1015.photobucket.com/albums/af277/sleepingtoys/wocky/4.jpg">

<td width="235px" valign="top">
   <form name="form1">
   <select style="font-size:8pt;color:#999999;font-family: helvetica;background-color:#333333; border:1px solid #222222; padding: 0px; width: 235px;" onChange="location.href=this.options[this.selectedIndex].value;">
   <option value=''>Archives</option>
   <BloggerArchives>
   <option value="<$BlogArchiveURL$>"><$BlogArchiveName$></option>
   </BloggerArchives>
   </select>
   </form>
   </td>

</div>
</div>

<div id="tagboard" style="display: none;">
<div class="clouds">talk</div>
<div id="music">

<img src="http://i1015.photobucket.com/albums/af277/sleepingtoys/wocky/2.jpg">

Any usable chat widget goes in here.<br>
A pop-up <a href="http://cbox.ws">cbox</a> is recommended.
If you do not want a pop-up cbox, its width should not exceed 250px.

</div></div>
</div>


<div id="moon">
<br><br><br>
<Blogger>
<br>
<table id="post" border="0" cellpadding="0" cellspacing="0">
<tr>


<td id="posts">

<div class="date">posted : <BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader></div>
<div class="title">title : <$BlogItemTitle$></div>
<div id="postbody"><$BlogItemBody$></div>

<td valign="top" width="112">
<div class="time" align="center"><a class="label" href="#top">


 <$BlogItemDateTime$> </a>


</div></div>
</td></tr></table>

</Blogger>
<br><br>

<div id="bottom"></div>

</div>
</body></html>

Centering Webpage.

Similar Tutorials

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.

Centering - What Am I Doing Wrong?

Similar Tutorials

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?

Need Help Centering Image

Similar Tutorials

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>

Centering Div Layout

Similar Tutorials

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

Centering My Page

Similar Tutorials

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;