Learn VBA & Macros in 1 Week!

CSS - Problems Centering Div..

Full Excel VBA Course - Beginner to Expert

Problems Centering Div..	View Content

Hi all,

Sorry if this is an elementary problem but I just can't seem to figure it out. I have three sections to my webpage, a header, the main content, and a footer. I am trying to center the middle section but can't seem to figure out the right code.

I have two divs in the main content and created a div to go around the two specifically to center them. I have attached my css and html so maybe someone can catch my errors.

Thanks a lot,
Amy

Full Excel VBA Course - Beginner to Expert

Css Centering Problems

Similar Tutorials

View Content

I recently put my unfinished site up for feedback and it was suggested I either center or left align my content.
So I've been trying to do that but it's not working across browsers and I can't figure out what I'm doing wrong.
Any help is much appreciated.

This is the original non centred site:
http://www.br0wnsnake.com/nmd.html
This is the new glitchy centred site:
http://www.br0wnsnake.com/natmat.html
And the really messed up flash centred site:
http://www.br0wnsnake.com/nmda.html

Centering Problems With Mac

Similar Tutorials

View Content

Ive been trying to work out a centering problem for hours now and have had no success.
Any help would be awesome.
Im not sure why it will center fine on Windows (IE) but not on a Mac (safari and firefox) the site its on is www.xolith.com/danielle
and the css code is

Code:

/* begin Page */

/*  version 2.4.0.26594, file checksum is 15B12CAB. */

body, p
{
	font-family: Tahoma, Arial, Helvetica, Sans-Serif;
	font-style: normal;
	font-weight: normal;
	font-size: 11px;
	text-align: justify;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	position: absolute;
}

body
{
	
	padding: 0;
	color: #3C3B15;
	background-color: #999;
	text-align: center;


}

h1, h2, h3, h4, h5, h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited,
.art-postheader, .art-postheader a, .art-postheader a:link, .art-postheader a:visited, .art-postheader a:hover,
.art-blockheader .t, .art-vmenublockheader .t, .art-logo-text, .art-logo-text a,
h1.art-logo-name, h1.art-logo-name a, h1.art-logo-name a:link, h1.art-logo-name a:visited, h1.art-logo-name a:hover
{
	font-style: normal;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: center;
	color: #000;
}

a, 
.art-post li a
{
  text-decoration: underline;
  color: #A26D11;
}

a:link,
.art-post li a:link
{
	text-decoration: underline;
	color: #166B7E;
}

a:visited, a.visited,
.art-post li a:visited, .art-post li a.visited
{

  color: #000000;
}

a:hover, a.hover,
.art-post li a:hover, .art-post li a.hover
{
	text-decoration: none;
	color: #166B7E;
}

h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover
{
  margin: 0.67em 0;

  color: #84812E;
}

h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover
{
  margin: 0.8em 0;
  font-size: 20px;
  color: #84812E;
}

h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover
{
   margin: 1em 0;
  font-size: 16px;
  color: #9C9C4F;
}

h4, h4 a, h4 a:link, h4 a:visited, h4 a:hover
{
  margin: 1.25em 0;
  font-size: 14px;
  color: #3C3B15;
}

h5, h5 a, h5 a:link, h5 a:visited, h5 a:hover
{
  margin: 1.67em 0;
  font-size: 13px;
  color: #3C3B15;
}

h6, h6 a, h6 a:link, h6 a:visited, h6 a:hover
{
  margin: 2.33em 0;
  font-size: 13px;
  color: #3C3B15;
}

h1 a, h1 a:link, h1 a:visited, h1 a:hover,
h2 a, h2 a:link, h2 a:visited, h2 a:hover,
h3 a, h3 a:link, h3 a:visited, h3 a:hover,
h4 a, h4 a:link, h4 a:visited, h4 a:hover,
h5 a, h5 a:link, h5 a:visited, h5 a:hover,
h6 a, h6 a:link, h6 a:visited, h6 a:hover
{
    margin:0;
}

#art-main
{
	width: 100%;
	top: 0;
	cursor:default;
	margin-left: auto;
	margin-right: auto;

}


#art-page-background-gradient
{
  position: absolute;
  background-image: url('images/page_g.jpg');
  background-repeat: repeat-x;
  top: 0;
  width: 100%;
  height: 256px;

}


#art-page-background-simple-gradient
{
  position: absolute;
  background-image: url('images/page_sg.jpg');
  background-repeat: repeat-x;
  top: 0;
  width: 100%;
  height: 256px;
}

.cleared
{
  float: none;
  clear: both;
  margin: 0;
  padding: 0;
  border: none;
  font-size: 1px;
}

form
{
  padding: 0 !important;
  margin: 0 !important;
}

table.position
{
  position: relative;
  width: 100%;
  table-layout: fixed;
}
/* end Page */

/* begin Box, Sheet */
.art-sheet
{
  position: relative;
  z-index: -1;
  margin: 0 auto;
  width: 700px;
  min-width: 27px;
  min-height: 27px;
}

.art-sheet-body
{
	z-index: 0;
	position: relative;
	padding: 9px;
}

.art-sheet-tr, .art-sheet-tl, .art-sheet-br, .art-sheet-bl, .art-sheet-tc, .art-sheet-bc,.art-sheet-cr, .art-sheet-cl
{
  position: absolute;
  z-index: 0;
}

.art-sheet-tr, .art-sheet-tl, .art-sheet-br, .art-sheet-bl
{
  width: 42px;
  height: 42px;
  background-image: url('images/sheet_s.png');
}

.art-sheet-tl
{
  top: 0;
  left: 0;
  clip: rect(auto, 21px, 21px, auto);
}

.art-sheet-tr
{
  top: 0;
  right: 0;
  clip: rect(auto, auto, 21px, 21px);
}

.art-sheet-bl
{
  bottom: 0;
  left: 0;
  clip: rect(21px, 21px, auto, auto);
}

.art-sheet-br
{
  bottom: 0;
  right: 0;
  clip: rect(21px, auto, auto, 21px);
}

.art-sheet-tc, .art-sheet-bc
{
  left: 21px;
  right: 21px;
  height: 42px;
  background-image: url('images/sheet_h.png');
}

.art-sheet-tc
{
  top: 0;
  clip: rect(auto, auto, 21px, auto);
}

.art-sheet-bc
{
  bottom: 0;
  clip: rect(21px, auto, auto, auto);
}

.art-sheet-cr, .art-sheet-cl
{
  top: 21px;
  bottom: 21px;
  width: 42px;
  background-image: url('images/sheet_v.png');
}

.art-sheet-cr
{
  right: 0;
  clip: rect(auto, auto, auto, 21px);
}

.art-sheet-cl
{
  left: 0;
  clip: rect(auto, 21px, auto, auto);
}

.art-sheet-cc
{
	position: absolute;
	z-index: -1;
	top: 20px;
	left: 21px;
	right: 21px;
	bottom: 21px;
	background-color: #FFFFFF;
}

.art-sheet
{
	margin-top: 20px !important;
	cursor:auto;
	width: 800px;
	margin-left: auto;
	margin-right: auto;


}

#art-page-background-simple-gradient, #art-page-background-gradient, #art-page-background-glare
{
  min-width: 700px;
}

/* end Box, Sheet */

/* begin Menu */
/* menu structure */

.art-menu a, .art-menu a:link, .art-menu a:visited, .art-menu a:hover
{
  text-align: left;
  text-decoration: none;
  outline: none;
  letter-spacing: normal;
  word-spacing: normal;
}

.art-menu, .art-menu ul
{
	margin: 0;
	padding: 0;
	border: 0;
	list-style-type: none;
	display: block;

	background-position:center
	min-height:100px
	background-image: url(images/banner.png);
	background-repeat: no-repeat;
}

.art-menu li
{
  margin: 0;
  padding: 0;
  border: 0;
  display: block;
  float: left;
  position: relative;
  z-index: 5;
  background: none;
}

.art-menu li:hover
{
  z-index: 10000;
  white-space: normal;
}

.art-menu li li
{
  float: none;
}

.art-menu ul
{
  visibility: hidden;
  position: absolute;
  z-index: 10;
  left: 0;
  top: 0;
  background: none;
}

.art-menu li:hover>ul
{
  visibility: visible;
  top: 100%;
}

.art-menu li li:hover>ul
{
  top: 0;
  left: 100%;
}

.art-menu:after, .art-menu ul:after
{
  content: ".";
  height: 0;
  display: block;
  visibility: hidden;
  overflow: hidden;
  clear: both;
}
.art-menu, .art-menu ul
{
  min-height: 0;
}

.art-menu ul
{
  background-image: url(images/spacer.gif);
  padding: 10px 30px 30px 30px;
  margin: -10px 0 0 -30px;
}

.art-menu ul ul
{
  padding: 30px 30px 30px 10px;
  margin: -30px 0 0 -10px;
}




/* menu structure */

.art-menu
{
  padding: 0 0 0 0;
}

.art-nav
{
	height: 27px;
	z-index: 100;
	position: fixed;
	left: 40%;
  
}

.art-menu a
{
  position: relative;
  display: block;
  overflow: hidden;
  height: 21px;
  cursor: pointer;
  text-decoration: none;
}

.art-menu li
{
  margin-right: 2px;
  margin-left: 2px;
}

.art-menu ul li
{
    margin:0;
    clear: both;
}


.art-menu a .r, .art-menu a .l
{
  position: absolute;
  display: block;
  top: 0;
  z-index: -1;
  height: 63px;
  background-image: url('images/menuitem.png');
}

.art-menu a .l
{
	left: 1px;
	right: 5px;
}

.art-menu a .r
{
  width: 410px;
  right: 0;
  clip: rect(auto, auto, auto, 405px);
}

.art-menu a .t
{
  margin-right: 10px;
  margin-left: 10px;
  color: #352E18;
  padding: 0 13px;
  margin: 0 5px;
  line-height: 21px;
  text-align: center;
}

.art-menu a:hover .l, .art-menu a:hover .r
{
  top: -21px;
}

.art-menu li:hover>a .l, .art-menu li:hover>a .r
{
  top: -21px;
}

.art-menu li:hover a .l, .art-menu li:hover a .r
{
  top: -21px;
}
.art-menu a:hover .t
{
  color: #E5F5FA;
}

.art-menu li:hover a .t
{
  color: #E5F5FA;
}

.art-menu li:hover>a .t
{
  color: #E5F5FA;
}


.art-menu a.active .l, .art-menu a.active .r
{
  top: -42px;
}

.art-menu a.active .t
{
  color: #EEE8D8;
}
/* end MenuItem */

/* begin MenuSeparator */
.art-nav .art-menu-separator
{
  display: block;
  width: 1px;
  height: 21px;
  background-image: url('images/menuseparator.png');
}
/* end MenuSeparator */

/* begin MenuSubItem */
.art-menu ul a
{
  display: block;
  text-align: center;
  white-space: nowrap;
  height: 20px;
  width: 180px;
  overflow: hidden;
  line-height: 20px;
  background-image: url('images/subitem.png');
  background-position: left top;
  background-repeat: repeat-x;
  border-width: 1px;
  border-style: solid;
  border-color: #D0C195;
}

.art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span
{
  display: inline;
  float: none;
  margin: inherit;
  padding: inherit;
  background-image: none;
  text-align: inherit;
  text-decoration: inherit;
}

.art-menu ul a, .art-menu ul a:link, .art-menu ul a:visited, .art-menu ul a:hover, .art-menu ul a:active, .art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span
{
  text-align: left;
  text-indent: 12px;
  text-decoration: none;
  line-height: 20px;
  color: #5B4F29;
  margin-right: 10px;
  margin-left: 10px;
  margin:0;
  padding:0;
}

.art-menu ul li a:hover
{
  color: #000000;
  border-color: #59BDDE;
  background-position: 0 -20px;
}

.art-menu ul li:hover>a
{
  color: #000000;
  border-color: #59BDDE;
  background-position: 0 -20px;
}

.art-nav .art-menu ul li a:hover span, .art-nav .art-menu ul li a:hover span span
{
  color: #000000;
}

.art-nav .art-menu ul li:hover>a span, .art-nav .art-menu ul li:hover>a span span
{
  color: #000000;
}


/* end MenuSubItem */

/* begin Header */
div.art-header
{
	position: relative;
	z-index: 0;
	height: 100px;
	overflow: hidden;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	background-image: url(images/banner.png);
	background-position: center center;
	background-repeat: no-repeat;
}


div.art-header-jpeg
{
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 400px;
  height: 100px;
  background-image: url('images/banner.png');
  background-repeat: no-repeat;
  background-position: center center;
}

/* end Header */

/* begin Logo */
.art-logo
{
  display: block;
  position: absolute;
  left: 10px;
  top: 61px;
  width: 652px;
}

h1.art-logo-name
{
  display: block;
  text-align: left;
}

h1.art-logo-name, h1.art-logo-name a, h1.art-logo-name a:link, h1.art-logo-name a:visited, h1.art-logo-name a:hover
{
  font-size: 35px;
  text-decoration: none;
  padding: 0;
  margin: 0;
  color: #81570E !important;
}

.art-logo-text
{
  display: block;
  text-align: left;
}

.art-logo-text, .art-logo-text a
{
  font-family: Tahoma, Arial, Helvetica, Sans-Serif;
  font-weight: normal;
  font-size: 19px;
  padding: 0;
  margin: 0;
  color: #81570E !important;
}
/* end Logo */

/* begin Layout */
.art-content-layout
{
  display: table;
  padding: 0;
  border: none;
  width: 682px;
}

.art-content-layout .art-content-layout
{
  width: auto;
  margin:0;
}

div.art-content-layout div.art-layout-cell, div.art-content-layout div.art-layout-cell div.art-content-layout div.art-layout-cell
{
   display: table-cell;
}

div.art-layout-cell div.art-layout-cell
{
   display: block;
}

div.art-content-layout-row
{
  display: table-row; 
}

.art-content-layout
{
	table-layout: fixed;
	border-collapse: collapse;
	background-color: Transparent;
	border: none !important;
	padding:0 !important;
	width: 100%;
}

.art-layout-cell, .art-content-layout-row
{
  background-color: Transparent;
  vertical-align: top;
  text-align: left;
  border: none !important;
  margin:0 !important;
  padding:0 !important;
}
/* end Layout */

/* begin Button */
.art-button-wrapper .art-button
{

  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  text-align: left;
  text-decoration: none !important;
  color: #53511D !important;
  width: auto;
  outline: none;
  border: none;
  background: none;
  line-height: 33px;
  height: 33px;
  margin: 0;
  padding: 0 21px !important;
  overflow: visible;
  cursor: default;
  z-index: 0;
}

.art-button img, .art-button-wrapper img
{
  margin: 0;
  vertical-align: middle;
}

.art-button-wrapper
{
  vertical-align: middle;
  display: inline-block;
  position: relative;
  height: 33px;
  overflow: hidden;
  white-space: nowrap;
  width: auto;
  margin: 0;
  padding: 0;
  z-index: 0;
}

.firefox2 .art-button-wrapper
{
  display: block;
  float: left;
}

input, select, textarea, select
{
  vertical-align: middle;

}

.art-block select 
{
    width:96%;
}

.art-button-wrapper.hover .art-button, .art-button:hover
{
  color: #000000 !important;
  text-decoration: none !important;
}

.art-button-wrapper.active .art-button
{
  color: #F6F6EE !important;
}

.art-button-wrapper .l, .art-button-wrapper .r
{
  display: block;
  position: absolute;
  z-index: -1;
  height: 99px;
  margin: 0;
  padding: 0;
  background-image: url('images/button.png');
}

.art-button-wrapper .l
{
  left: 0;
  right: 10px;
}

.art-button-wrapper .r
{
  width: 409px;
  right: 0;
  clip: rect(auto, auto, auto, 399px);
}

.art-button-wrapper.hover .l, .art-button-wrapper.hover .r
{
  top: -33px;
}

.art-button-wrapper.active .l, .art-button-wrapper.active .r
{
  top: -66px;
}

.art-button-wrapper input
{
  float: none !important;
}
/* end Button */

/* begin Box, Block, VMenuBlock */
.art-vmenublock
{
  position: relative;
  z-index: 0;
  margin: 0 auto;
  min-width: 11px;
  min-height: 11px;
}

.art-vmenublock-body
{
  position: relative;
  z-index: 1;
  padding: 5px;
}

.art-vmenublock-tr, .art-vmenublock-tl, .art-vmenublock-br, .art-vmenublock-bl, .art-vmenublock-tc, .art-vmenublock-bc,.art-vmenublock-cr, .art-vmenublock-cl
{
  position: absolute;
  z-index: -1;
}

.art-vmenublock-tr, .art-vmenublock-tl, .art-vmenublock-br, .art-vmenublock-bl
{
  width: 18px;
  height: 18px;
  background-image: url('images/vmenublock_s.png');
}

.art-vmenublock-tl
{
  top: 0;
  left: 0;
  clip: rect(auto, 9px, 9px, auto);
}

.art-vmenublock-tr
{
  top: 0;
  right: 0;
  clip: rect(auto, auto, 9px, 9px);
}

.art-vmenublock-bl
{
  bottom: 0;
  left: 0;
  clip: rect(9px, 9px, auto, auto);
}

.art-vmenublock-br
{
  bottom: 0;
  right: 0;
  clip: rect(9px, auto, auto, 9px);
}

.art-vmenublock-tc, .art-vmenublock-bc
{
  left: 9px;
  right: 9px;
  height: 18px;
  background-image: url('images/vmenublock_h.png');
}

.art-vmenublock-tc
{
  top: 0;
  clip: rect(auto, auto, 9px, auto);
}

.art-vmenublock-bc
{
  bottom: 0;
  clip: rect(9px, auto, auto, auto);
}

.art-vmenublock-cr, .art-vmenublock-cl
{
  top: 9px;
  bottom: 9px;
  width: 18px;
  background-image: url('images/vmenublock_v.png');
}

.art-vmenublock-cr
{
  right: 0;
  clip: rect(auto, auto, auto, 9px);
}

.art-vmenublock-cl
{
  left: 0;
  clip: rect(auto, 9px, auto, auto);
}

.art-vmenublock-cc
{
  position: absolute;
  z-index: -1;
  top: 9px;
  left: 9px;
  right: 9px;
  bottom: 9px;
  background-color: #D8D8B1;
}

.art-vmenublock
{
  margin: 7px;
}

/* end Box, Block, VMenuBlock */

/* begin BlockHeader, VMenuBlockHeader */
.art-vmenublockheader
{
  position: relative;
  z-index: 0;
  height: 35px;
  margin-bottom: 7px;
}

.art-vmenublockheader .t
{
  height: 35px;
  color: #2A290F;
  margin-right: 10px;
  margin-left: 10px;
  font-family: Tahoma, Arial, Helvetica, Sans-Serif;
  font-size: 11px;
  margin:0;
  padding: 0 11px 0 37px;
  white-space: nowrap;
  line-height: 35px;	
}

.art-vmenublockheader .l, .art-vmenublockheader .r
{
  display: block;
  position: absolute;
  z-index: -1;
  height: 35px;
  background-image: url('images/vmenublockheader.png');
}

.art-vmenublockheader .l
{
  left: 0;
  right: 31px;
}

.art-vmenublockheader .r
{
  width: 682px;
  right: 0;
  clip: rect(auto, auto, auto, 651px);
}

/* end BlockHeader, VMenuBlockHeader */

/* begin Box, Box, VMenuBlockContent */
.art-vmenublockcontent
{
  position: relative;
  z-index: 0;
  margin: 0 auto;
  min-width: 1px;
  min-height: 1px;
}

.art-vmenublockcontent-body
{
  position: relative;
  z-index: 1;
  padding: 0;
}


.art-vmenublockcontent
{
  position: relative;
  z-index: 0;
  margin: 0 auto;
  min-width: 1px;
  min-height: 1px;
}

.art-vmenublockcontent-body
{
  position: relative;
  z-index: 1;
  padding: 0;
}


/* end Box, Box, VMenuBlockContent */

/* begin VMenu */
ul.art-vmenu, ul.art-vmenu li
{
  list-style: none;
  margin: 0;
  padding: 0;
  width: auto;
  line-height: 0;
}

ul.art-vmenu ul
{
  display: none;
}

ul.art-vmenu ul.active
{
  display: block;
}
/* end VMenu */

/* begin VMenuItem */
ul.art-vmenu a
{
  position: relative;
  display: block;
  overflow: hidden;
  height: 28px;
  cursor: pointer;
  text-decoration: none;
}

ul.art-vmenu li.art-vmenu-separator
{
  display: block;
  padding: 0 0 0 0;
  margin: 0;
  font-size: 1px;
}

ul.art-vmenu .art-vmenu-separator-span
{
  display: block;
  padding: 0;
  font-size: 1px;
  height: 0;
  line-height: 0;
  border: none;
}

ul.art-vmenu a .r, ul.art-vmenu a .l
{
  position: absolute;
  display: block;
  top: 0;
  z-index: -1;
  height: 84px;
  background-image: url('images/vmenuitem.png');
}

ul.art-vmenu a .l
{
  left: 0;
  right: 0;
}

ul.art-vmenu a .r
{
  width: 700px;
  right: 0;
  clip: rect(auto, auto, auto, 700px);
}

ul.art-vmenu a .t
{
  display: block;
  line-height: 28px;
  color: #6D6B26;
  padding: 0 10px 0 10px;
  font-weight: bold;
  margin-left:0;
  margin-right:0;
}

ul.art-vmenu a:hover .l, ul.art-vmenu a:hover .r
{
  top: -28px;
}

ul.art-vmenu a:hover .t
{
  color: #666633;
}

ul.art-vmenu a.active .l, ul.art-vmenu a.active .r
{
  top: -56px;
}

ul.art-vmenu a.active .t
{
  color: #6D6B26;
}
/* end VMenuItem */

/* begin VMenuSubItem */
ul.art-vmenu ul, ul.art-vmenu ul li
{
  margin: 0;
  padding: 0;
}

ul.art-vmenu ul a
{
  display: block;
  white-space: nowrap;
  height: 18px;
  overflow: visible;
  background-image: url('images/vsubitem.gif');
  background-position: 25px 0;
  background-repeat: repeat-x;
  padding-left: 45px;
}

ul.art-vmenu ul li
{
  padding: 0;
}

ul.art-vmenu ul span, ul.art-vmenu ul span span
{
  display: inline;
  float: none;
  margin: inherit;
  padding: inherit;
  background-image: none;
  text-align: inherit;
  text-decoration: inherit;
}

ul.art-vmenu ul a, ul.art-vmenu ul a:link, ul.art-vmenu ul a:visited, ul.art-vmenu ul a:hover, ul.art-vmenu ul a:active, ul.art-vmenu ul span, ul.art-vmenu ul span span
{
  line-height: 18px;
  color: #626022;
  font-size: 10px;
  margin-left: 0;
}

ul.art-vmenu ul
{
    margin:0 0 0 0;
}

ul.art-vmenu ul ul
{
  margin:0 0 0 0;
}

ul.art-vmenu ul li.art-vsubmenu-separator
{ 
  display: block;
  margin: 0;
  font-size: 1px;
  padding: 0 0 0 0;
 }

ul.art-vmenu ul .art-vsubmenu-separator-span
{
  display: block;
  padding: 0;
  font-size: 1px;
  height: 0;
  line-height: 0;
  margin: 0;
  border: none;
}

ul.art-vmenu ul li li a
{
  background-position: 50px 0;
  padding-left: 70px;
}

ul.art-vmenu ul li li li a
{
  background-position: 75px 0;
  padding-left: 95px;
}

ul.art-vmenu ul li li li li a
{
  background-position: 100px 0;
  padding-left: 120px;
}

ul.art-vmenu ul li li li li li a
{
  background-position: 125px 0;
  padding-left: 145px;
}


ul.art-vmenu ul li a.active
{
  color: #4F4E1C;
  background-position: 25px -36px;
}

ul.art-vmenu ul li li a.active
{
  background-position: 50px -36px;
}

ul.art-vmenu ul li li li a.active
{
  background-position: 75px -36px;
}

ul.art-vmenu ul li li li li a.active
{
  background-position: 100px -36px;
}

ul.art-vmenu ul li li li li li a.active
{
  background-position: 125px -36px;
}



ul.art-vmenu ul li a:hover, ul.art-vmenu ul li a:hover.active
{
  color: #4B4B26;
  background-position: 25px -18px;
}


ul.art-vmenu ul li li a:hover, ul.art-vmenu ul li li a:hover.active
{
  background-position: 50px -18px;
}

ul.art-vmenu ul li li li a:hover, ul.art-vmenu ul li li li a:hover.active
{
  background-position: 75px -18px;
}

ul.art-vmenu ul li li li li a:hover, ul.art-vmenu ul li li li li a:hover.active
{
  background-position: 100px -18px;
}

ul.art-vmenu ul li li li li li a:hover, ul.art-vmenu ul li li li li li a:hover.active
{
  background-position: 125px -18px;
}
/* end VMenuSubItem */

/* begin Box, Block */
.art-block
{
  position: relative;
  z-index: 0;
  margin: 0 auto;
  min-width: 11px;
  min-height: 11px;
}

.art-block-body
{
  position: relative;
  z-index: 1;
  padding: 5px;
}

.art-block-tr, .art-block-tl, .art-block-br, .art-block-bl, .art-block-tc, .art-block-bc,.art-block-cr, .art-block-cl
{
  position: absolute;
  z-index: -1;
}

.art-block-tr, .art-block-tl, .art-block-br, .art-block-bl
{
  width: 18px;
  height: 18px;
  background-image: url('images/block_s.png');
}

.art-block-tl
{
  top: 0;
  left: 0;
  clip: rect(auto, 9px, 9px, auto);
}

.art-block-tr
{
  top: 0;
  right: 0;
  clip: rect(auto, auto, 9px, 9px);
}

.art-block-bl
{
  bottom: 0;
  left: 0;
  clip: rect(9px, 9px, auto, auto);
}

.art-block-br
{
  bottom: 0;
  right: 0;
  clip: rect(9px, auto, auto, 9px);
}

.art-block-tc, .art-block-bc
{
  left: 9px;
  right: 9px;
  height: 18px;
  background-image: url('images/block_h.png');
}

.art-block-tc
{
  top: 0;
  clip: rect(auto, auto, 9px, auto);
}

.art-block-bc
{
  bottom: 0;
  clip: rect(9px, auto, auto, auto);
}

.art-block-cr, .art-block-cl
{
  top: 9px;
  bottom: 9px;
  width: 18px;
  background-image: url('images/block_v.png');
}

.art-block-cr
{
  right: 0;
  clip: rect(auto, auto, auto, 9px);
}

.art-block-cl
{
  left: 0;
  clip: rect(auto, 9px, auto, auto);
}

.art-block-cc
{
  position: absolute;
  z-index: -1;
  top: 9px;
  left: 9px;
  right: 9px;
  bottom: 9px;
  background-color: #D8D8B1;
}

.art-block
{
  margin: 7px;
}

/* end Box, Block */

/* begin BlockHeader */
.art-blockheader
{
  position: relative;
  z-index: 0;
  height: 35px;
  margin-bottom: 7px;
}

.art-blockheader .t
{
  height: 35px;
  color: #2A290F;
  margin-right: 10px;
  margin-left: 10px;
  font-family: Tahoma, Arial, Helvetica, Sans-Serif;
  font-size: 11px;
  margin:0;
  padding: 0 11px 0 37px;
  white-space: nowrap;
  line-height: 35px;	
}

.art-blockheader .l, .art-blockheader .r
{
  display: block;
  position: absolute;
  z-index: -1;
  height: 35px;
  background-image: url('images/blockheader.png');
}

.art-blockheader .l
{
  left: 0;
  right: 31px;
}

.art-blockheader .r
{
  width: 682px;
  right: 0;
  clip: rect(auto, auto, auto, 651px);
}

/* end BlockHeader */

/* begin Box, BlockContent */
.art-blockcontent
{
  position: relative;
  z-index: 0;
  margin: 0 auto;
  min-width: 1px;
  min-height: 1px;
}

.art-blockcontent-body
{
  position: relative;
  z-index: 1;
  padding: 7px;
}


.art-blockcontent-body, 
.art-blockcontent-body a, 
.art-blockcontent-body li a
{
  color: #26250D;

}

.art-blockcontent-body a,
.art-blockcontent-body li a
{
  color: #626232;
  text-decoration: underline;
}

.art-blockcontent-body a:link,
.art-blockcontent-body li a:link
{
  color: #626232;
  text-decoration: underline;
}

.art-blockcontent-body a:visited, .art-blockcontent-body a.visited,
.art-blockcontent-body li a:visited, .art-blockcontent-body li a.visited
{
  color: #A6A654;

}

.art-blockcontent-body a:hover, .art-blockcontent-body a.hover,
.art-blockcontent-body li a:hover, .art-blockcontent-body li a.hover
{
  color: #B47913;

  text-decoration: none;
}

.art-blockcontent-body ul
{
  list-style-type: none;
  color: #4F4E1C;
  margin: 0;
  padding: 0;
}

.art-blockcontent-body ul li
{
  text-decoration: none;
  line-height: 1.25em;
  padding: 0 0 0 13px;
  background-image: url('images/blockcontentbullets.png');
  background-repeat: no-repeat;
}


/* end Box, BlockContent */

/* begin Box, Post */
.art-post
{
	position: relative;
	z-index: 0;
	min-width: 1px;
	min-height: 1px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	background-position: center center;
}

.art-post-body
{
  position: relative;
  z-index: 1;
  padding: 15px;
  min-height:350px
}


.art-post
{
  margin: 10px;
}

a img
{
  border: 0;
}

.art-article img, img.art-article
{
  margin: 5px;
}

.art-metadata-icons img
{
  border: none;
  vertical-align: middle;
  margin: 2px;
}

.art-article table, table.art-article
{
  border-collapse: collapse;
  margin: 1px;
  width: auto;
}

.art-article table, table.art-article .art-article tr, .art-article th, .art-article td
{
  background-color: Transparent;
}

.art-article th, .art-article td
{
  padding: 2px;
  border: solid 1px #B2B266;
  vertical-align: top;
  text-align: left;
}

.art-article th
{
  text-align: center;
  vertical-align: middle;
  padding: 7px;
}

pre
{
  overflow: auto;
  padding: 0.1em;
}

/* end Box, Post */

/* begin PostHeaderIcon */
.art-post h2.art-postheader, 
.art-post h2.art-postheader a, 
.art-post h2.art-postheader a:link, 
.art-post h2.art-postheader a:visited, 
.art-post h2.art-postheader a.visited, 
.art-post h2.art-postheader a:hover, 
.art-post h2.art-postheader a.hovered
{
	padding: 0;
	font-size: 20px;
	color: #5E5C21;
	margin-top: 0.2em;
	margin-right: 0;
	margin-bottom: 0.2em;
	margin-left: 0;
	text-align: left;
}

.art-post h2.art-postheader a, 
.art-post h2.art-postheader a:link, 
.art-post h2.art-postheader a:visited, 
.art-post h2.art-postheader a.visited, 
.art-post h2.art-postheader a:hover, 
.art-post h2.art-postheader a.hovered
{
  margin: 0;
  text-decoration: none;
  color: #716F28;
}

.art-post h2.art-postheader a:visited, 
.art-post h2.art-postheader a.visited
{

  color: #666633;
}


.art-post h2.art-postheader a:hover, 
.art-post h2.art-postheader a.hovered
{


  color: #D48F16;
}

/* end PostHeaderIcon */

/* begin PostBullets */
.art-post ol, .art-post ul
{
  color: #1E1E0B;
  margin: 1em 0 1em 2em;
  padding: 0;

}

.art-post li ol, .art-post li ul
{
  margin: 0.5em 0 0.5em 2em;
  padding: 0;
}

.art-post li
{
  margin: 0.2em 0;
  padding: 0;
}

.art-post ul
{
  list-style-type: none;
}

.art-post ol
{
  list-style-position: inside;

}



.art-post li
{
  padding: 0 0 0 13px;
  line-height: 1em;
}

.art-post ol li, .art-post ul ol li
{
  background: none;
  padding-left: 0;
}

.art-post ul li, .art-post ol ul li
{
  background-image: url('images/postbullets.png');
  background-repeat: no-repeat;
  padding-left: 13px;
}


/* end PostBullets */

/* begin PostQuote */
blockquote,
blockquote p,
.art-postcontent blockquote p
{
  color: #1C1303;
  font-style: italic;
  text-align: left;
}

blockquote,
.art-postcontent blockquote
{
  margin: 10px 10px 10px 50px;
  padding: 5px 5px 5px 32px;
  background-color: #EEEDCE;
  background-image: url('images/postquote.png');
  background-position: left top;
  background-repeat: no-repeat;
}

/* end PostQuote */

/* begin Footer */
.art-footer
{
	position: relative;
	z-index: 0;
	overflow: hidden;
	width: 100%;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}

.art-footer .art-footer-inner
{
	height: 20px;
	position: relative;
	z-index: 1;
	padding: 10px;
	background-repeat: repeat;
	bottom: 0px;
}

.art-footer .art-footer-background
{
  position: absolute;
  z-index: -1;
  background-repeat: no-repeat;
  background-image: url('images/footer.png');
  width: 100%;
  height: 150px;
  bottom: 0;
  left: 0;
}

.art-rss-tag-icon
{
  position: relative;
  display: block;
  float: left;
  background-image: url('images/rssicon.png');
  background-position: center right;
  background-repeat: no-repeat;
  margin: 0 5px 0 0;
  height: 32px;
  width: 32px;
  cursor: default;
}


.art-footer .art-footer-text p
{
  margin: 0;
}


}

i cut the last little bit because its too long
THanks guys

Image Centering Problems.

Similar Tutorials

View Content

Centering Div: Problems With Win Iexplorer 5

Similar Tutorials

View Content

Hi. I wrote a css code for centering div in the web page. The css code is:

div#wrapper {
width:750px;
\width: 770px;
w\idth: 750px;
margin-left:auto;
margin-right:auto;
}

div#container {
width:650px;
margin-left:auto;
margin-right:auto;
}

Obviously the HTML code is:

<div id="wrapper">
<div id="container">Some text</div>
</div>

The problem is: this code doesn't function in Iexplorer 5, while in Iexplorer 6 is ok. In Iexplorer 5 the <div id="wrapper"> is not centered.
I found others with my same problem, but no solutions at all.
Any ideas?

Centering My Web Page In Browser Problems

Similar Tutorials

View Content

I have my site centred in the browser window, yet if you resize the window (as if emulating 800 x 600 or smaller) then the scroll bar appears on the right as it should.

But the web page has the top section cut off and is not accessible, is this my code? or is this because of the size of the web site?

The page can be viewed he

http://www.spanishguitar.co.uk

If you make your height of your browser window smaller, you will see that the top of the site gets cut off. How can I fix this?

My css for this is:
Code:

#PageDiv {
	position:absolute;
	left: 50%; 
	top: 50%;
	width: 770px;
	height: 600px;
	margin-top: -300px; /* half of the height */
	margin-left: -385px; /* half of the width */
	border: 1px solid #000;
}

Format Problems, Fine In Ff, But Problems In Ie7, Opera

Similar Tutorials

View Content

I am developing a web site, panopticinsight dot com. The header/banner looks fine in Firefox. In IE7 and Opera, the H2 subtitle is left aligned over the globe image. In IE6 content jumps outside of container.

Anyone know why there is a shift, and what I can do about it?

Style sheet code pasted below:

Code:

body {
width:800px;
font:0.83em/1.4em Tahoma, Geneva, sans-serif;
color:#CBD4E3; 
background:#000 url(images/body_bg.gif) repeat-y top center;
letter-spacing:1px;
margin:0 auto;
}

h1,h2,h3,h4,h5,h6 {
font-family:"Times New Roman", Times, serif;
font-style:italic;
font-weight:bold;
color:#e9df55;
background-color:#000;
}

h2 {
font-size:2em;
}

h3 {
font-size:1.5em;
}

h4 {
font-size:1.25em;
}





a:link {
color:#8090AC;
text-decoration:none;
}

a:visited {
color:#B17F6C;
text-decoration:none;
}

a:hover {
color:#E9DF55;
text-decoration:underline;
}

a:active {
color:#E9DF55;
text-decoration:none;
}
#container {
width:760px;
margin:0 auto;
}

#header {
height:200px;
width:760px;
margin:0;
padding:0;
}

#banner {
height:100%;
width:100%;
color:#cbd4e3;
background:#000 url(images/header_bg.jpg) no-repeat top left;
margin:0 auto;
padding:0;
}
#banner h1 {
font-size:400%;
color:#CBD4E3;
background-color:transparent;
float:left;
display:inline;
margin:0;
padding:70px 0 70px 280px;
}
#banner h2 {
	font-size: 12pt;
	color: #e9df55;
	background-color:transparent;
	text-indent: 200pt;
	vertical-align: text-bottom;
}
navigate{
	color : #105BAC;
	background-color : transparent;
	height : 20px;
	font-size: 100%;
	border-top : 1px solid #999999;
}

#navigate ul {
	list-style-type: none;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 150px;
	margin-right: 0px;
	padding: 2px 0 0 0;
}
#navigate ul li {
	display: inline;
}
td {
	font-family: Arial, Helvetica, sans-serif;
}

th {
	font-family: Arial, Helvetica, sans-serif;
}
p {
	font-size: 14px;
	color: #FFFFFF;
	left: 50px;
	right: 50px;
}



#main {
	width: 660px;
	padding-right: 50px;
	padding-left: 50px;
}
#footer {
	font-family: "Times New Roman", Times, serif;
	font-size: 9px;
	color: #666666;
	height: 100px;
	width: 760px;
	vertical-align: text-bottom;
	text-align: center;
	
}

#SplashImage {
	float: left;
}
.image-left {
	clear: none;
	margin-bottom: 10px;
	float: left;
	margin-right: 20px;
	margin-left: 10px;
}
.image-right {
	clear: none;
	margin-bottom: 10px;
	margin-left: 10px;
	float: right;
}

Centering Everything

Similar Tutorials

View Content

Hi all, this is my CSS:

Code:

body {
	font-family:arial;
	font-size:14px;
	background-color:#FFFFFF;
	margin: 0;
    padding: 0;
}

.mainbar {

	position:absolute;
	height:100%;
	width:600px;
	display:block;
	background-color:#F2F2F2;
	top:0px;
	bottom:0px;
	z-index:0;
	border-top: 0px solid #000000;
	border-right: 1px solid #000000;
	border-bottom: 0px solid #000000;
	border-left: 1px solid #000000;
}

.contact {
	position:absolute;
	display:block;
	height:40px;
	width:600px;
	background-color:#FFFFFF;
	top:80%;
	bottom:0px;
	z-index:0;
	border-top: 1px solid #000000;
	border-right: 1px solid #000000;
	border-bottom: 1px solid #000000;
	border-left: 1px solid #000000;
}

.logo { 
	position:absolute;
	display:block;
	height:200px;
	width:600px;
	background-color:#CCCCCC;
	top:10%;
	bottom:10%;
	border:1px solid #000000;
	z-index:2;
}

.logoborder {

	border-top: 0px solid #000000;
	border-right: 1px solid #000000;
	border-bottom: 0px solid #000000;
	border-left: 1px solid #000000;
	
}

Now how do I go about centering all of this? I have put many frustrated hours into this, and have tried everything that could have a possibility of working but have come out with nothing. Any help would be appreciated!

Please, I have read other forum posts and it is not clear what to do, so treat me like i'm 5 years old!!!

Thanks!

Jack.

Centering My Nav Bar

Similar Tutorials

View Content

Need Help Centering A Div With Css

Similar Tutorials

View Content

Hey everyone,

I am fairly comfortable with HTML, and even know a decent amount of PHP and Javascript. But sometimes trying to do the simplest things in CSS makes my head spin! (this is one of those times).

I've got a "scrolling" header at the top of a page (stays visible even when scrolling), and am trying to center a DIV (which contains opt-in forms) inside that header. It looks good when my browser window is maximized (at 1280x1024 resolution). But when I minimize the browser or check it in other screen resolutions, the "centering" of the opt-in forms are off.

Here is the page...

www.wordflood.com/Test/Scrolling_Header.html

And here are the CSS includes...

www.wordflood.com/Test/style.css
www.wordflood.com/Test/IE6_style.css

This was really just a quick hack from a "scrolling header" demo I found online, so I must have overlooked something.

Any ideas?

Centering

Similar Tutorials

View Content

Hi, I'm trying to design a web page and I want to center all the content (including the background), and have another background behind all of that. I can't figure out how to center everything. When I put a <div> around all the content and center it in CSS, only certain elements(some graphical buttons) get centered while all of the text stays lined up to the left. Any ideas? I'm sure I'm making a really silly mistake.

Centering A Div Within A Div

Similar Tutorials

View Content

Hello, I have tried to use the auto margin to center a div within a div, but the auto margin only seems to work on the outermost div. Is there a workaround where I can center my content inside of a nested div? Take the example code:

Code:


<html>
<head>
<style type="text/css">
body {
background-color: orange;
}
#container {
width: 700px;
margin: 0 auto;
background-color: red;
}
#nested {
width: 700px;
margin: 0 auto;
background-color: blue;
}
</style>
</head>
<body>
<div id="container">
	<div id="nested">
		Text Here
	</div>
</div>
</body>
</html>

So I want the nested div to have its content centered, so "Text Here" is in the center.

Div Not Centering In Ie

Similar Tutorials

View Content

Hi there,

I am trying to center a div within a div. The container div needs to stretch 100% width. It works in FF, but not IE.

Any ideas?
This is my code:

PHP Code:
#top_bar{
background-image: url('img/top_bar.jpg');
height: 54px;
font-family: arial;
font-size: 14px;
color: #ffffff;
width: 100%;
}

#top_bar_content{
padding: 18px 0 10px 0px;
width: 870px;
margin: 0 auto;
position: relative;
}

Why Is This Not Centering?

Similar Tutorials

View Content

Centering This Div?

Similar Tutorials

View Content

im trying to center this div but im not to sure on how to do it
Code:

<style type="text/css">
div.img
  {
  margin:2px;
  border:1px solid #0000ff;
  height:auto;
  width:auto;
  float:left;
  text-align:center;
  }
div.img img
  {
  display:inline;
  margin:3px;
  border:1px solid #ffffff;
  }
div.img a:hover img
  {
  border:1px solid #0000ff;
  }
div.desc
  {
  text-align:center;
  font-weight:normal;
  width:120px;
  margin:2px;
  }
</style>
</head>
<body>

<div class="img">
  <a target="_blank" href="klematis_big.htm">
    <img src="klematis_small.jpg" alt="Klematis" width="110" height="90" />
  </a>
  <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
  <a target="_blank" href="klematis2_big.htm">
    <img src="klematis2_small.jpg" alt="Klematis" width="110" height="90" />
  </a>
  <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
  <a target="_blank" href="klematis3_big.htm">
    <img src="klematis3_small.jpg" alt="Klematis" width="110" height="90" />
  </a>
  <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
  <a target="_blank" href="klematis4_big.htm">
    <img src="klematis4_small.jpg" alt="Klematis" width="110" height="90" />
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

Centering In Ie7

Similar Tutorials

View Content

Hey. I'm having issues with getting my page to center in IE7 using
margin: auto;
It works fine in firefox.

The page is at http://jbench.co.uk:81/. The CSS is at http://jbench.co.uk:81/css/css.php .

The section where i think the problem is:

CSS Code:
Original - CSS Code #page { width: 900px; margin: 0 auto; padding: 14px 3px; min-height: 250px; font-size: 1.2em; }

  

 #page {


  width: 900px;


  margin: 0 auto;


  padding: 14px 3px;


  min-height: 250px;


  font-size: 1.2em;


 }

Any help's appreciated.

Div Centering

Similar Tutorials

View Content

Hey guys, I'm having trouble centering div boxes on my page, wondering if anyone can help.

I have tried using {margin: 0 auto;} which works fine, but when the scrollbar appears on the page it knocks it off balance and the other content on the page becomes mis-aligned. I have also tried setting left margins to push the div to the middle, but I figured this would cause problems and wouldn't look right to people using higher than 1024x768 resolutions.

Is there any other way?

Centering

Similar Tutorials

View Content

This list is a navigation bar that displays tabs horizontally. I can't seem to figure out what properties I need to use to center it correctly.

I have 2 problems:

1. How can I get these list items centered?
2. the second level seems to have problems displaying horizontally in IE. How can I fix it?

Code:

<div id="tablenavcontainer">
  <div id="navcontainer">
    <ul>
			<li><a href="/doctors/enroll/" rel="self" class="" id="purple" name="patientenroll">Enroll Patient</a></li>
			<li><a href="/doctors/patients/" rel="self" class="" id="current" name="doctorspatients">My Patients</a></li>
			<li><a href="/doctors/lab/" rel="self" class="" id="green" name="doctorlab">Lab</a></li>
			<li><a href="/doctors/pharmacy" rel="self" class="" id="yellow" name="doctorpharmacy">Pharmacy</a></li>

			<li><a href="/doctors/tools/" rel="self" class="" id="red" name="doctortools">My Office Tools</a></li>
			<li><a href="/doctors/home/" rel="self" class="" id="graphite" name="doctorhome">Home</a></li>

    	<ul>
				<li><a href="/doctors/patients/currentchart.html" rel="self" id="currentchart" name="currentchart" >Current Chart</a></li>
				<li><a href="/doctors/patients/labhistory.html" rel="self" id="labhistory" name="labhistory" >Lab History</a></li>
				<li><a href="/doctors/patients/symptomhistory.html" rel="self" id="symptoms" name="symptoms" >Symptom History</a></li>

				<li><a href="/doctors/patients/prescriptionhistory.html" rel="self" id="prescriptions" name="prescriptions" >Prescription History</a></li>
				<li><a href="/doctors/patients/reports.html" rel="self" id="reports" name="reports" >Restore Reports</a></li>
				<li><a href="/doctors/lab/ordertesting.html" rel="self" id="ordertest" name="ordertest" >Order Testing</a></li>
				<li><a href="/doctors/pharmacy/prescribe.html" rel="self" id="orderrx" name="orderrx" >Prescribe</a></li>
				<li><a href="/logout.html" rel="self" id="" name="" >Log Out</a></li>
	    </ul> 
     </ul>

    <br style="clear: both;" />
    
  </div>
  </div>

Ul Li Div And Some Centering

Similar Tutorials

View Content

Now while I did manage to work this out with margins and paddings, I have to ask how to do it properly.

It's very basic. You have blank page. No wrappers no nothing.

Then 1 div, holds, 1 ul, with 20 li.

The div has specified width. How to center the ul inside the div?

I need the UL to NOT have specified width since I'll be adding more items to it over time.

Thanks!

Centering A Css Div

Similar Tutorials

View Content

I was wondering how I could center a CSS div so I would have one column going thorugh the middle. I tryed using "center" in the CSS but that didn't work and then I read some where else about floats and how they will make every go to either the left or right. How would I go about centering a Div like that? Thankyou for any help.

Centering A Css Div Pop Up

Similar Tutorials

View Content

Good day to you all,
I'm working on a pop up css box.
My problem is that I can't make it to be centered.

Here is my code :

PHP Code:
echo "<a onmouseover=\"this.style.cursor='pointer'\" onfocus=\"this.blur();\" onclick=\"document.getElementById('$namess').style.display = 'block' \" >\r";
echo "<span><img src=\"http://ponder.peuplies.info/V_0-1/Art/".$imgdir."".$img."\" width=\"50\" border=\"0\" title=\"".$img."\" alt=\"".$img."\" /></span></a>\r";

echo "<div id=\"$namess\" align=\"center\" style='display: none; position: absolute; margin: auto; margin-left: auto; margin-right: auto; border: solid black 1px; padding: 10px; background-color: rgb(255,255,225); text-align: justify; color:#000000; font-size: 12px; '>\r";
echo "This is a CSS Popup that can be positioned anywhere you want on the page and can contain any test and images you want.\r";
echo "<img src=\"http://test.com/Art/".$imgdir."".$img."\" width=\"50\" border=\"0\" title=\"".$img."\" alt=\"".$img."\" />";
echo "<br />\r";
echo "<div style='text-align: right;'><a onmouseover='this.style.cursor=\"pointer\" ' style='font-size: 12px;' onfocus='this.blur();' onclick=\"document.getElementById('$namess').style.display = 'none' \" ><span style=\"text-decoration: underline; color:#000000;\">Close</span></a></div>\r";
echo "</div>\r";

Can somebody help me ?