CSS - Top Center Aligning

I am using the following code how do I change it so that it would show up in the center of the brower window?

Thanks
Tim
PHP Code:
<div style="position: absolute; left: 0px; z-index: 1; top: 0px; align: center\">
<object classid=\"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000\" 

codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0

,0\" width=\"544\" height=\"396\" id=\"cardio\" align=\"middle\">
<param name=\"allowScriptAccess\" value=\"sameDomain\" />
<param name=\"movie\" value=\"ads/cardio3.swf\" />
<param name=\"loop\" value=\"false\" />
<param name=\"quality\" value=\"high\" />
<param name=\"wmode\" value=\"transparent\" />
<param name=\"bgcolor\" value=\"#ffffff\" />
<embed src=\"ads/cardio3.swf\" loop=\"false\" quality=\"high\" wmode=\"transparent\" 

bgcolor=\"#ffffff\" width=\"544\" height=\"396\" name=\"cardio\" align=\"middle\" 

allowScriptAccess=\"sameDomain\" type=\"application/x-shockwave-flash\" 

pluginspage=\"http://www.macromedia.com/go/getflashplayer\" />
</object>
</div> 

www.devwebsites.com/index.php is my site. in order to view this problem you must register at www.devwebsites.com/register.php
Once you do go back to the home page and you will see the ul out of the login box. Any help is greatly appreciated. Tell me what I should do to fix it please.

CSS LINK

http://www.devwebsites.com/estilos.css

Hi everyone,
I am having trouble aligning my content to the edge of the table somehow it shows 20pixels down and I cann't figuere out how to bring it up. Any help will be greatly appreciate. thanks
Code:

<style>
ul { list-style-type: none; margin: 1.0em 0 0 0px; padding: 0; position:relative; overflow: visible; height: auto; text-decoration: none; color: #33FF00;}
ul li { text-decoration: none; width: 230px; color: #000; }
ul li a, ul li a:visited {height: 1.2em; width: 200px; display: block; text-decoration: none; background: blue; margin: 0.1em 0 0 0; text-indent: 10px; padding: 3px; color: #000;}
ul li a:hover { height: 1.2em; display: block; background-color:#FF0000; color: #fff000;}
ul li a.currentpage, ul li { height: 1.2em; text-decoration: none; background: #00ffff; padding: 3px; color: #fff;}
</style>
<table width="234" border="1">
  <tr>
    <td width="230" height="85">
	<ul><li><a href="">HOME</a></li>
        <li><a href="">LINK TWO</a></li>
    </ul>
	</td>
  </tr>
  <tr><td></td></tr>
</table>

Hi I have an issue aligning some links. i have it perfect in FF but it is not the same in IE.

http://www.sun-awnings-direct.co.uk/the-carino-p-29.html

It is the white breadcruumb trail in question. Can anyone advise what IE is doing differently and how I can solve it?

Thanks a lot

After browsing through w3schools and learning most of what css has to offer I for some reason can't figure out a way to align items using css.

I was just wondering if someone could help me with the correct tag.

http://206.169.23.2/index3.htm
http://206.169.23.2/style3.css

The two columns are as far apart from each other as they can be. I want them to centered, and next to each other. How can this be done?

I used float:right; and float:left for starters but I can not get the columns any closer to each other.

Any help is greatly appreciated,
- mike

I have been trying to get Son of Suckerfish dropdown menus to work in IE for me for the longest time... I just can't get it to align how I want it to when I add my own "tab" effect.

Code:

	<ul id="nav">

		<li id="main1" class="mainMenu"><a href="./index.php">Home</a></li>
		
		<li id="main2" class="mainMenu"><a href="./about.php">About Us</a></li>

		<li id="main3" class="mainMenu"><a href="./calendar.php">Calendar</a></li>

		<li id="main4" class="mainMenu"><a href="./college.php">College&nbsp;Students</a>
			<ul>
				<li><a href="./studentNews.php">News</a></li>
				<li><a href="./studentLeaders.php">Student Leaders</a></li>
				<li><a href="./sundaySupper.php">Sunday Supper</a></li>
				<li><a href="./serventEvents.php">Servant Events</a></li>
				<li><a href="./gallery2/main.php?g2_itemId=40">Fall Retreat</a></li>
			</ul>
		</li>
		
		<li id="main5" class="mainMenu"><a href="./family.php">Family&nbsp;Ministry</a>
			<ul>
				<li><a href="./family.php">Overview</a></li>
				<li><a href="./fmSchedule.php">Schedule</a></li>
				<li><a href="./fmActivities.php">Activities</a></li>
				<li><a href="./gallery2/main.php?g2_itemId=53">Photos</a></li>
				<li><a href="./fmYouCanHelp.php">You Can Help</a></li>
				<li><a href="./fmCoordination.php">Education Coordination Team</a></li>
			</ul>
		</li>
		
		<li id="main6" class="mainMenu"><a href="./serving.php">Ways&nbsp;to&nbsp;Serve</a></li>
		
		<li id="main7" class="mainMenu"><a href="./giving.php">Ways&nbsp;to&nbsp;Give</a>
			<ul>
				<li><a href="./giving.php">Financial Home</a></li>
				<li><a href="https://www.eservicepayments.com/cgi-bin/specialwebapp.vps?appid=40a27221f816144b21e9f2e0d81891b8a68820b814b79fc6caf83c6a4fcf06b22f288aa4a34f  a442a76b20a4eb1041b012267f0823e0ef99aeca1bf9c914f523">Make A Gift Online</a></li>
				<li><a href="./eft.php">Electronic Fund Transfer</a></li>
				<li><a href="./matching.php">Matching Gifts</a></li>
				<li><a href="./meijer.php">Meijer Community Rewards</a></li>
				<li><a href="./givingTools.php">Tools for Giving</a></li>
				<li><a href="./endowment.php">Endowment Fund</a></li>
			</ul>
		</li>
		
		<li id="main8" class="mainMenu"><a href="./contact.php">Contact Us</a></li>
		


	</ul>

That's the HTML

Code:

#nav {
	float: left;
	list-style: none;
	line-height: 1;
	font-size: 16px;
	padding: 0;
	margin: 0 0 0.5em 0.6em;
}

#nav ul {
	list-style: none;
	background: #006600;
	padding: 0;
	border: 1px solid #000;
}

#nav li.sfhover ul {
	left: 1em;
}

#nav a {
	display: block;
	color: white;
	text-decoration: none;
	padding: 0.25em;
	padding-right:0;
}

#nav ul a {
	display: block;
	width: 6em;
	color: white;
	text-decoration: none;
	background:none;
	border:none;
}

#nav li {
	float: left;
	padding: 0;
	width: 7em;
	height:auto;
}

#nav li ul {
	position: absolute;
	left: -999em;
	height: auto;
	width: 13.9em;
	font-weight: normal;
	border: 1px solid #000;
}

#nav li li {
	padding-right: 1em;
	width: 13em;
}

#nav li ul a {
	width: 12em;

}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
	left: auto;
}

#nav ul li:hover,  #nav li:hover, #nav ul li.sfhover, #nav li.sfhover {
	background: #009900;
}

/*  Width of the tabs */
#nav #main1 {
	width:3.4em;
}

#nav #main2 {
	width:4.6em;
}

#nav #main3 {
	width: 4.5em;
}

#nav #main4 {
	width:7.85em;
}

#nav #main5 {
	width:7em;
}

#nav #main6 {
	width:6.8em;
}

#nav #main7 {
	width:6.3em;
}

#nav #main8 {
	width:5.5em;
}

#nav li {
	margin-right: 3px;
	border: 1px solid #000;
	background: #006600;
	color: white;
	text-decoration:none;
}

#nav li ul li {
	border:none;
	background: #006600;
	color: white;
	text-decoration:none;
}

#nav li ul {
	border: 1px solid black;
}

#nav li:hover, #nav li.sfhover {
    position: static;
}

And that's the CSS


Just in case this will help, here's a link to a test page (just throw together so There is no content other than the menu)
http://www.martinlutherchapel.org/test.html

I'm trying to align an image, header, and some text that is right aligned all on the same row. I've been reading so much about inline and block elements that my head feels like it's going to explode. It would look like this:

Code:

Picture - Header                                         Text over here

I'm not sure if everything should be span inside one class or what. I'm very confused. Please help a noob.

Ok just so you know what I am trying to do here is a link to the problem page. -Problem aligning images-

Well ok what I want is for the position of the images to be displayed in absolute positions to the page and not to the image before it. Since I am really new to CSS I can't seem to find a good way to do this (without using tables UGH!). I have read about using float and div tags but not sure how to go about it. Here is a link to my other page of pics that display as I want them only because the pics are all the same size.

-Images displayed correctly-

This is the only code I have so far for displaying the images. The first img style aligns the image to the left and the 2nd to center and the 3rd to the right.

Code:

/* Set the style for image(s) displayed */
img.left
{
	margin-left: 10em;
}

img.center
{
	margin-left: 3em;

img.right
{
	margin-left: 3em;
}

Hope that makes sense,
Gerbill

Perhaps someone could help me. I have spent hours trying to figure out what I am doing wrong. I am designing a page that has centered content with several DIV's that I want to be exactly the same width. The menu DIV does not have a margin, but the main text does. I cannot get the DIV's the same width in Firefox and IE 6.0. If it works in one, it wont work in the other. The link for the page is http://www.snc-cds.com/snctest.html

The CSS is at http://www.snc-cds.com/stylesheets/sncstyletesting.css

I have tried to use/figure out the box model hack, but I'm not sure if this is what it takes to fix it.

Thank you for any help,
Steve

Hello all!
Should'nt this class center justify the table. It's left aligning all class='sql' tables and I can't figure why??
TABLE.sql { border: 0 solid #9999FF; align: center; font-color: black; text-align:left; font-weight: bold; }

I'm building a site: www.bunjareecottages.com.au

At the moment, the middle column (which is the only variable sized bit on the page) is set to a min height of 495px. This works ok on larger resolutions, but creates a scroll even when no content reaches that length on smaller resolutions. That's as expected.

What I want to have the middle section having a min height of 110px from the top of the page, and 10px from the bottom. So if the content was very little, the yellow background would still be 10px from the bottom, but if content was really long and there was a scoll, the end of the yellow was 10px from the bottom.

Currently the yellow content area is relatively positioned from top by 110px, with margins of the correct sizes on each side. Everything else is absolutely positioned.

Any ideas?

I started out working out a page thinking this *should* do what I want and lo and behold it did work in IE6

http://www.fogcat.co.uk/example/test002.html

But when looking at Firefox it goes all odd. If you remove all the internal "imagediv" div from the "imagechunk" div it nearly works but doesn't algin the "link text" like IE.

I'm told that display:inline-block is not properly supported, which is probably the root of my problems.

What I want a set of divs down the page (the "imagedivs") Each div will contain

An image - but that image will be nested inside a div - it's returned that way from a php function. Images may be of varying height so I can't use pixel values at top margins or anything like that. A link to another page The link should be positioned to the right of the image and aligned vertically with the centre of the image.

This is one of those things that's a doddle with tables, but I'm
trying to train myself to think CSS.

What obvious thing am I over looking?

Code:

+--------------------------------------+
| +----------------+                   |
| | .............. |                   |     ---  <div>
| | :            : |                   |     ...  <img>
| | :            : |   Link here       |
| | :            : |                   |
| | .............. |                   |
| +----------------+                   |
+--------------------------------------+
   
+--------------------------------------+
| +----------------+                   |
| | .............. |                   |    
| | :            : |                   |    
| | :            : |   Link here       |
| | :            : |                   |
| | .............. |                   |
| +----------------+                   |
+--------------------------------------+

ok...

im making a site with CSS...

this is my css code -

Quote:
a:link {color:white}
a:visited {color:white}
a:hover {color:black}
a:active {color:white}

body {background-color: #666666}

#head{

position: relative;
top: 7px;
left: 140px;
width: 707px;
font-family: verdana;
font-size: 12px;
color:white;
background-color: #666666;
background-image: url(wavy.jpg);

}

#content {

position: relative;
top: 7px;
left: 140px;
width: 697px;
font-family: verdana;
font-size: 12px;
text-align: justify;
color:white;
background-color: #666666;
background-image: url(image/back.jpg);
padding: 5px;

}


#foot{

position: relative;
left: 140px;
width: 707px;
font-family: verdana;
font-size: 9px;
text-align: center;
color:white;
background-color: 666666;
background-image: url(wavy.jpg);

}



and this is my code for my PHP page, which reads the css -

Quote:
<html>
<head>
<link rel="stylesheet" type="text/css" href="fula.css" />
</head>

<body>


<div id="head"><img src="image/head.jpg"></div>


<div id="content">

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

<br>

<div id="foot">Graphics & Design by "NO NAMED DESIGNS" - Copyright 2006 "KLSOON2BE"</div>

</body>
</html>


ok... now, if you look at it in firefox... everything aligns just fine but if you look at it in I.E its out of place... any help would b greatly appreciated!

to view the page this problems on -

http://www.outlawz.frihost.net/fula/test2.php

Hi guys,

I'm having some serious problems in IE with my site I'm working on here http://www.q-net.net.au/~benvangrootel/fvd/index.html

the main problem is the amount of space in between the head banner and the content underneath and also the links under the images on the right - they aren't aligned properly compared to how they look in mozilla. I have no idea how to fix this, is there any quick fix?

css is here

Code:

	/* Layout Crap */
	body {
		text-align:center;
		background-image: url(bg.jpg);
		background-repeat: repeat-x;
		
		}
	
	#frame {
		width:697px;
		margin-right:auto;
		margin-left:auto;
		margin-top:10px;
		padding:0px;
		text-align:left;
		background-image: url(left_bg.gif);
		background-repeat: repeat-y;
		}
		
	#contentleft {
		width:175px;
		padding:0px;
		float:left;
		background:#fff;

		}
	
	#contentcenter {
		width:550px;
		padding:0px;
		float:left;
		
		background-image: url(left_bg.gif);
		background-repeat: repeat-y;
		}
	
	#contentright {
		width:147px;
		padding:0px;
		float:left;

		background-image: url(right_bg.gif);
		background-repeat: repeat-y;
		}
	#contentright_container {
		margin-left: 19px;
		margin-top: 70px;
	}	
	
	#contentright_container_nodule {
		font-family: arial;
		margin-bottom: 10px;
		margin-left: 3px;
		
	}	

	#contentright_container_nodule li{
		list-style-type: square;
		color: #EDAE00;
		line-height: 12px;
		margin-left: 14px;

		}
	
		
	#contentright_container_nodule a{
		color: #2A2A2A;
		font-size: 8pt;
		padding-right: 30px;
		
		}
	#contentright_container_nodule a:hover{
		color: #EDAE00;
		font-size: 8pt;
	
		}
			
	#contentheader {
		width: 697px;
		height: 74px;
		background-image: url(head_bg.gif);
		background-repeat: no-repeat;
		}

	#contentheader img {
		top: 10px;
		left: 74px;
		position: relative;
		}
	#contentcontainercontainerlol {
		top: 100px;
		left: 12px;
		position: relative;
	
		}
	
	#contentcontainer {
		background-image: url(content_container_bg.jpg);
		background-repeat: no-repeat;
	
		}	
	#contentcontainer h1 {
		color: #EDAE00;
		font-family: arial;
		font-size: 17px;
		padding-top: 17px;
		margin-left: 15px;
		margin-bottom: -8px;

		}
	#contentcontainer p {
		color: #afafaf;
		font-family: arial;
		font-size: 13px;
		padding-left: 20px;
		padding-right: 26px;
		line-height: 20px;
		
		}
		

	#footer {
		position: relative;
		margin: 0;
		padding: 0;
		clear: both;
		background: url(footer.gif)  no-repeat top left;
		background-repeat: no-repeat;
		width: 697px;
		height: 35px;
  		text-align:center;
		font-size: 7pt;
		font-family: arial;
		color: #CFCFCF;
		}
	#footer a {
		color: #CFCFCF;
	}


		
/* Menu Crap */
#navContainer {
top: 37px;
right: 60px;
position: relative;
}


#nav {
 width: 409px;
 height: 20px;
 background: url(image.jpg);
 margin: 10px auto; padding: 0;
 position: relative;
}
#nav li {margin: 0; padding: 0; list-style: none; position: absolute; top: 0;}

#nav li, #nav a {height: 20px; display: block;}

#home {left: 0; width: 44px;}
#profile {left: 45px; width: 61px;}
#operations {left: 105px; width: 87px;}
#services {left: 192px; width: 68px;}
#customers {left: 260px; width: 85px;}
#contact {left: 345px; width: 72px;}

#home a:hover {background: transparent url(image.jpg) 0 -20px no-repeat;}
#profile a:hover {background: transparent url(image.jpg) -44px -20px no-repeat;}
#operations a:hover {background: transparent url(image.jpg) -105px -20px no-repeat;}
#services a:hover {background: transparent url(image.jpg) -192px -20px no-repeat;}
#customers a:hover {background: transparent url(image.jpg) -260px -20px no-repeat;}
#contact a:hover {background: transparent url(image.jpg) -345px -20px no-repeat;}

thanks in advance