stumped by div tag centering

1 reply [Last post]

Tue, 2009-11-03 03:54

abelgabel

Offline

newbie

Timezone: GMT-5

Joined: 2009-11-03

Posts: 1

Points: 2

I'm new to this CSS stuff. I'm trying to position a DIV TAG exactly in the center of the page. I want it to move with the actual page, ie be centered within the browser. For some reason, I cannot get the TAG properties to conform to the specifics im trying to give it. Also, on top of that, the FORM that i'm trying to embed within the TAG is not showing up whatsoever. Does anyone know what the hell I'm doing wrong? Any help would be amazing.
~ Dave

TAG in Question --- buybooklayer

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title>Big In Japan: A Ghost Story</title>
 
<link rel="stylesheet" type="text/css" media="screen, print, projection"  href="buybiginjapan10-30-09.css"></link>
<style type="text/css">
 
#buybooklayer {
	width:400px;
	height:115px;
	margin: 0 auto;
	text-align: left;
	top: 400px;
	z-index: 6;
}
 
</style>
</head>
<body>
<div  id="buybiginjapan103009">
<div id="backgroundg"></div>
<div id="buybooklayer">
 
<form action="https://checkout.google.com/api/checkout/v2/checkoutForm/Merchant/151879170197366" id="BB_BuyButtonForm" method="post" name="BB_BuyButtonForm">
    <table cellpadding="5" cellspacing="0" width="1%">
        <tr>
            <td align="right" width="1%">
                <select name="item_selection_1">
                    <option value="1">$15.00 - (USA &amp; Canada) 'Big in Japan: A Ghost Story'</option>
                    <option value="2">$20.00 - (Rest of the World) 'Big in Japan: A Ghost Story'</option>
                </select>
                <input name="item_option_name_1" type="hidden" value="(USA &amp; Canada) 'Big in Japan: A Ghost Story'"/>
                <input name="item_option_price_1" type="hidden" value="15.0"/>
                <input name="item_option_description_1" type="hidden" value="Free shipping on this outrageously entertaining book."/>
                <input name="item_option_quantity_1" type="hidden" value="1"/>
                <input name="item_option_currency_1" type="hidden" value="USD"/>
                <input name="item_option_name_2" type="hidden" value="(Rest of the World) 'Big in Japan: A Ghost Story'"/>
<input name="item_option_price_2" type="hidden" value="20.0"/>
<input name="item_option_description_2" type="hidden" value="Good literature for a steal."/>
<input name="item_option_quantity_2" type="hidden" value="1"/>
<input name="item_option_currency_2" type="hidden" value="USD"/>
</td>
<td align="left" width="1%">
<input alt="" src="https://checkout.google.com/buttons/buy.gif?merchant_id=151879170197366&amp;w=117&amp;h=48&amp;style=trans&amp;variant=text&amp;loc=en_US" type="image"/>
</td>
</tr>
</table>
</form>
 
</div>
<div id="chinmusicb"><a  href="http://www.chinmusicpress.com/"  onclick="target='_blank';"  title="chinmusic"></a></div>
<div id="aboutauthorb"><a  href="http://www.chinmusicpress.com/abouttom.html"  title="aboutauthor"></a></div>
<div id="homeb"><a  href="http://www.chinmusicpress.com/biginjapan.html"  title="HOME"></a></div>
<div id="aboutthebookb"><a  href="http://www.chinmusicpress.com/aboutbiginjapan.html"  title="aboutthebook"></a></div>
<div id="bookreviewsb"><a  href="../../../../../../http:/www.chinmusicpress.com/reviews.html"  title="bookreviews"></a></div>
<div id="tourdatesb"><a  href="http://www.chinmusicpress.com/booktour.html"  title="tourdates"></a></div>
<div id="condomb"><a  href="http://www.chinmusicpress.com"  title="condom"></a></div>
</div>
 
</body>
</html>
 
 
 
 
 
CSS FILE
#aboutthebookb a:hover  {
   background-position: -216px 0%;
}
 
#aboutauthorb a:hover  {
   background-position: -333px 0%;
}
 
#bookreviewsb a:hover  {
   background-position: -206px 0%;
}
 
#buybiginjapan103009  {
   margin: 0px auto 0px auto;
   width: 1000px;
   position: relative;
}
 
#tourdatesb a:hover  {
   background-position: -307px 0%;
}
 
#chinmusicb a:hover  {
   background-position: -178px 0%;
}
 
#condomb a:hover  {
   background-position: -319px 0%;
}
 
#buybooklayer {
	width:400px;
	height:115px;
	margin: 0 auto;
	text-align: left;
	top:400px;
	z-index: 8;
}
 
#aboutthebookb a  {
   background: url(sg_buybiginjapan10-30-09_media/aboutthebookb.gif) no-repeat 0% 0px;
   display: block;
   height: 306px;
   width: 216px;
   font-size: 306px;
   line-height: 306px;
}
 
#bookreviewsb a  {
   background: url(sg_buybiginjapan10-30-09_media/bookreviewsb.gif) no-repeat 0% 0px;
   display: block;
   height: 243px;
   width: 206px;
   font-size: 243px;
   line-height: 243px;
}
 
#aboutauthorb a  {
   background: url(sg_buybiginjapan10-30-09_media/aboutauthorb.gif) no-repeat 0% 0px;
   display: block;
   height: 400px;
   width: 333px;
   font-size: 400px;
   line-height: 400px;
}
 
#aboutthebookb  {
   visibility: visible;
   position: absolute;
   left: 77px;
   top: 366px;
   z-index: 5;
   width: 216px;
   height: 306px;
}
 
#homeb a:hover  {
   background-position: -439px 0%;
}
 
#bookreviewsb  {
   visibility: visible;
   position: absolute;
   left: 719px;
   top: 473px;
   z-index: 4;
   width: 206px;
   height: 243px;
}
 
#aboutauthorb  {
   visibility: visible;
   position: absolute;
   left: 25px;
   top: 13px;
   z-index: 6;
   width: 333px;
   height: 400px;
}
 
#chinmusicb a  {
   background: url(sg_buybiginjapan10-30-09_media/chinmusicb.gif) no-repeat 0% 0px;
   display: block;
   height: 121px;
   width: 178px;
   font-size: 121px;
   line-height: 121px;
}
 
#tourdatesb a  {
   background: url(sg_buybiginjapan10-30-09_media/tourdatesb.gif) no-repeat 0% 0px;
   display: block;
   height: 223px;
   width: 307px;
   font-size: 223px;
   line-height: 223px;
}
 
#backgroundg  {
   background: url(sg_buybiginjapan10-30-09_media/backgroundg.gif) no-repeat;
   position: absolute;
   left: 0px;
   top: 0px;
   z-index: 3;
   width: 1000px;
   height: 769px;
}
 
#tourdatesb  {
   visibility: visible;
   position: absolute;
   left: 101px;
   top: 546px;
   z-index: 6;
   width: 307px;
   height: 223px;
}
 
#chinmusicb  {
   visibility: visible;
   position: absolute;
   left: 788px;
   top: 3px;
   z-index: 4;
   width: 178px;
   height: 121px;
}
 
#condomb a  {
   background: url(sg_buybiginjapan10-30-09_media/condomb.gif) no-repeat 0% 0px;
   display: block;
   height: 167px;
   width: 319px;
   font-size: 167px;
   line-height: 167px;
}
 
#condomb  {
   visibility: visible;
   position: absolute;
   left: 270px;
   top: 602px;
   z-index: 4;
   width: 319px;
   height: 167px;
}
 
#homeb a  {
   background: url(sg_buybiginjapan10-30-09_media/homeb.gif) no-repeat 0% 0px;
   display: block;
   height: 187px;
   width: 439px;
   font-size: 187px;
   line-height: 187px;
}
 
#homeb  {
   visibility: visible;
   position: absolute;
   left: 294px;
   top: 51px;
   z-index: 7;
   width: 439px;
   height: 187px;
}
 
html, body  {
   padding: 0px;
   margin: 0px;
   background-color: #000000;
}

Tags:

Tue, 2009-11-03 04:37

Tyssen

Offline

Moderator

Timezone: GMT+10

Joined: 2004-05-01

Posts: 8140

Points: 1322

Easy Vertical Centering with

Easy Vertical Centering with CSS

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

stumped by div tag centering

Easy Vertical Centering with

New forum topics

User login

Navigation