Learn VBA & Macros in 1 Week!

CSS - Image Centering Problems.

Full Excel VBA Course - Beginner to Expert

Image Centering Problems.	View Content

Full Excel VBA Course - Beginner to Expert

Problems Centering Div..

Similar Tutorials

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

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

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;
}

Centering Image In A Div

Similar Tutorials

View Content

So I have 2 different background patterns that extend to infinity behind my logo.
Problem is, I could not center my logo in front of these two patters.
Code:

so it should display it like;

Layer 1: Left Pattern Right Pattern
Layer 2:              Logo

But instead, its displayed as;

Layer 1: Left Pattern Right Pattern
Layer 2: Logo

I spent over an hour searching this on the internet.
Any help appreciated, thanks!
Code:

.subcontent {
	min-height:50px;
	width:100%;
	background:#00CC66;
}
.leftcontent {
	min-height:50px;
	width:50%;
	float:left;
	background:url(images/bg_lpattern.jpg) repeat-x;
}
.rightcontent {
	min-height:50px;
	width:50%;
	float:left;
	background:url(images/bg_rpattern.jpg) repeat-x;
}

  <div class="subcontent" style="position:relative;">
  	<div style="margin-left:auto; margin-right:auto; width:400px; height:50px; position:absolute;">
  		<img src="images/logo.jpg" alt="Insert Logo Here" name="Insert_logo" width="200px" height="50px" />
    </div>
    <div class="leftcontent">
    </div>
    <div class="rightcontent">
    </div>
  </div>

Centering An Image Within A Div

Similar Tutorials

View Content

I have a div with background images. It is styled float:left. That is all fine. The div is sized at 50x50px. Inside this div is a smaller image. I want the image to appear centered of the div. I have tried everything I can think of w r t margins and padding but the image allways shows up in the upper left corner.

Here is an example:
Code:

<div   class='caltool'   onmouseover="this.style.backgroundImage = 'url(images/litegearani.gif)';" onmouseout="this.style.backgroundImage = 'url(images/litegearstill.gif)';">
<a  href="whatever.html" title="export to desktop calendar"><img style="margin: auto; height:16px; width:16px;" src="icon_export_vcal.png"  width="16" height="16" border="0" /></a>
</div>

Here are the styles in the caltool class:
Code:

.caltool {
    float: left; 
    background-image: url(../images/litegearstill.gif);   
    background-repeat:  no-repeat; 
    background-position:center; 
    height:50px; 
    width: 50px; 
}

How can I make the images be CENTERED over the gear background??

Centering Image With Border?

Similar Tutorials

View Content

hello,

i have this in my html:

Code:

<div id="link_image">
<a href="http://www.mylink.com/" target="_blank">My link with image
</div>

& here the css:

Code:

#link_image a
{
display:block;
width: 130px;
height: 21px;
text-indent:-3000px;
overflow:hidden;
text-decoration:none;
background:url(images/image.jpg) 0 0 no-repeat;
padding: 7px;
background-color: #667700;
}

Now I would like that the image is right in the center of the background border with color #667700. Like now, it's just on the left side, not centered.

thanks!

Centering An Image Inside A <div> Using Css

Similar Tutorials

View Content

My page has:
1) a left-sidebar which goes from the top-left corner and stretches down
2) a top-bar which goes from the edge of the left-sidebar and stretches all the way across to the right side of the page
3) a main content which covers the rest of the page

I want to place an image in the center of the top-bar but so far it only is centered when the window is maximised...I want it to be centered no matter what size the window is.

currently my css rules a

Code:

#topBar {
   position: absolute;
   height:15%;
   text-align: center;
   left:30%;
   margin:0px auto;
}

the xhtml source code for the topBar and image is:

Code:

<div id="topBar">
   <p><img src="../logo1.jpg" alt="..." id="sirgLogo"/></p>
</div>

(the image id is just concerned with the size of the image at this time)

any suggestions as to how to I can have the image centered within the <div>?

some bright spark on Yahoo Answers failed to spot that I'm using xhtml (which tbf is only mentioned once) and told me to try:

Code:

<div id="topBar">
   <p><center><img src="../logo1.jpg" alt="..." id="sirgLogo"/></center></p>
</div>

or

Code:

<div id="topBar" align="center">
   <p><img src="../logo1.jpg" alt="..." id="sirgLogo"/></p>
</div>

Unless I'm mistaken, these are possibilities which will cause w3's validator to throw up an error.
For the record I'm using XHTML 1.0 Transitional and I presume my doctype declaration is correct as it was automatically generated by dreamweaver when I first made the document!

Css For Centering A Banner Image

Similar Tutorials

View Content

I've been away for nearly three months and may have forgotten some of the basics of CSS.
Today I added a banner photo to the top of my new bike club site, but cannot remember how to style it so that, when a visitor adjusts the width of their browser window, the banner photo sidles to the left or right to remain centered at the top of their window, along with the the bike club name and pull-down menus immediately below (see http://stallinswebdesign.com/vs/index.php). Can you suggest how I can style that banner photo so that it remains centered whenever a visitor stretches their browser window?

I know you can view source to view my <div> structure and so forth; let me know if you'd like
to see any parts of my style sheet.

Thank you for your valuable time.
Curtis

Absolute Positioning And Centering An Image

Similar Tutorials

View Content

Hi all,
I am having trouble getting an image to go where I want it to, which is flush up against the top of the page and horizontally centered. I originally accomplished this a few years ago on my website, but now I am trying to do a new build, and this time around the code I used last time is not working!

The working image can be seen here, it is the banner logo displayed at the top of the page. It's currently perfectly set, and all I want is to have that again on a new page. However, when I simply copy/paste the old code onto that new page, it doesn't look anything like the original.

Here is the original code. In retrospect I have no idea how I got it to work, since it looks messy as heck:
Code:

<table align="center" style="position:relative; top:-15; z-index:5"  border="0" width="983" height="198">
<tr><td><img style="position:absolute; top:0;" src="http://www.thesunderedguard.com/images/banner.jpg"></td></tr>
</table>

All my tinkering around with the new page has not been successful at all. Any help would be much appreciated!

Cheers

Centering Image Inside < Div > Block

Similar Tutorials

View Content

How do i center the image both horizontally and vertically....

I have read the < ALIGN > has be depreciated and must use style, but STYLE="vertical-align:middle" dpesnt seem to work in either/both the < DIV > and < IMG > tags

I am using an external CSS with a hiehgt of 168px, and calling the < DIV > block, then just using a < IMG > tag.

How can i align the image int he middle??

Centering Image Beneath Text

Similar Tutorials

View Content

There's probably a simple, obvious solution for this, but I'm having problems managing to get this to work. Here's the isse: I have a menu that basically looks like so:

Home | Guestbook | Contact Us | Help

I need to place an image beneath each menu item so that is centered directly below the text, to indicate which page the user is on (not my design; I don't want to hear about it).

I can not use tables for this - the menu items are pulled out of a database, and are generated in a loop; I also can't use some sort of div that requires a set width for each menu item, due to the fact that the menu items are all of variable widths.

Ideas?

Centering An Image Within A Block Element

Similar Tutorials

View Content

Centering Image Behind Overflowing Text

Similar Tutorials

View Content

Hi,

I'm new to CSS and haven't been able to get this working. I have two layers, one for an image, and another for text that goes on top. The text is supposed to be centered and the image should be centered wrt the text.

The problem is that sometimes a word in the text will be too long and there's overflow. When this happens, the image stays on the left and the text box gets larger. This way the image isn't right behind the center of the text.

I tried using overflow: visible but this didn't change anything.

Thanks for any help.

Centering An Image In A Float Right Column

Similar Tutorials

View Content

Hello,
I am a fan of css and use it all the time. My one and only one problem with it is centering an image in a column that has been floated right. I've tried numerous ways to do this, but none have worked. Usually I end up adding a 2 column table, fixing the right column with x px, then adding images in rows in the left table column. This really does not center the image for all screen sizes, but it does move the images to the left. Also, margin-right:xpx would do about the same thing.
This long-winded explanation leads to my css question: Is there a way to center images in a column that has been floated right? Maybe I am over-looking the obvious.
Regards,
Lee

Problems With Css Image Map

Similar Tutorials

View Content

problem fixed, please delete this post

Help Image Problems!

Similar Tutorials

View Content

every time i upload a picture through html or css it affects other images around it or creates a big gap how do i avoid this......also for a template im i best to use individual pictures or make the template all as 1 photo

Image Problems In Ie

Similar Tutorials

View Content

Hi
I have a two curved images. They sit fine on the webpages in FF but there is a gap in IE.
I have tried allsorts of things to get it sorted but nothing seems to work.
Have a look at me code:
PHP Code:
<div class='main'>
            <div style='float:left;'><img src='images/left_corner.gif'  alt='left_corner' /></div>
            <div style='float:right;'><img src='images/right_corner.gif'  alt='right_corner' /></div>
                <div class='proheader'>Problem with images</div>
        </div>

And heres the CSS code:
PHP Code:
.main{
    position:absolute;
    top:125px;
    left:140px;
}

.proheader{
    background-color:#0099CC;
    font-size:12px;
    font-weight:800;
    height:19px;
}

The file can b found at :
http://pfwd.org.uk/sfd/image_problem.htm
Please help
Thanks

Strange Image Problems In Win/ie6

Similar Tutorials

View Content

I've got a background image problem with my first real attempt at a table-free CSS design. There are two main images (one is top-right in the body background, the other is bottom-left in a div).

It looks like the bottom-left image occasionally gets displayed at the bottom of the viewable area instead of the actual page. When you scroll down you can see that the image is repeated.

Refreshing the page sometimes solves the problem (and sometimes creates it), but switching windows with Alt-Tab fixes it every time. Hovering over the links in the body of the page, which change the background color, sort of "erases" the repeat image.

Has anyone come across this before? Any chance it's the same problem Dave Shea mentions at:
http://www.mezzoblue.com/archives/2004/04/08/ie_vs_image_/index.php

Thanks,
Josh

html: http://66.213.53.5/index.html
css: http://66.213.53.5/season.css
screen: http://66.213.53.5/images/problem.gif