|
CSS - Centering My Web Page In Browser Problems
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;
}
Similar TutorialsI am trying to center a 760x580 DIV box in the center of the browser window (horizontally AND vertically) regardless of the user's screen size. Horizontal centering hasn't been a problem, but I can't figure out how to get the thing to center vertically. Here is my code at the moment: Code:
<html>
<head>
<title>Center a DIV</title>
<style type='text/css'>
html {height:100%;}
body {height:100%; margin:0; padding:0;}
#content {
position: absolute;
right: 0;
left: 0;
width: 760px;
height: 580px;
margin: 0 auto;
overflow-x: hidden;
overflow-y: hidden;
background-image: url(grunge_paper.jpg);
}
img {display: block;}
</style>
</head>
<body bgcolor='black'>
<div id='content'>
</div>
</body>
</html>
Is there any way to center a <div> block itself, not the text in it? Using this code:
Code: #block{
padding:2px;
margin-left:auto;
margin-right:auto;
width: 480px;
}
(which I am currently using) centers it in Firefox, but not IE. Also the code which adds a rollover effect to the links in the menu works in Firefox but not IE. Code: #menu li:hover{
background-color:#369;
}
The site's current URL is here, because my webhost's disk is full, and they are having problems with PHP scripts not working. 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 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 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 With my limited knowledge of css, html, etc. I can mold my page to look just the way I desire on my given screen size (1280x1024) and browser (mozilla) but can not seem to get a fix for all variables (1024x768, etc.). I've tried containing divs & percents and a few other solutions to no avail. Just want to know if you guys know any quickfix or a recommended strategy in tackling this issue going further. id post code here, but the site wont allow it due to external links. so please check it out here and let me know http://needaputer.com css is at same url just located at .com /css/styles.css my goal: -- auto center content on page horizontally - (based on screen size - cross browser compatible) -- make sure header and footers are absolute top and bottom of page always (based on page size and cross-browser compatible) -- toggle "page zoom" for entire page via buttons (if needed and possible to adjust content for each screen size) 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? Howcome: html, body { color: #06F; background-color: #000; font-size: 16px; text-align: center; width: 768px; } Doesn't center the page in the browser? How can I center it? Output example on my website here. Fist of all, i am fairly new to css, so all my code is probably somewhat incorrect. My problem is with my nav bar. I can get it to work with FF and IE, but not both at the same time. Here is the my website : http://www.thekiwieffect.com/ The css: the part commented out makes it not work with IE but it does work with FF, but when i put it in, it's the other way around. Can anyone figure out why? Right not the navbar is set up to work with IE but not FF. It looks like it's wraping or something in FF. The html part is at the bottom of the post. Code: #logonav{
margin-top : 0px;
margin-left : auto;
width : 588px;
display : inline;
}
#logonav ul {
margin : 0;
padding : 0;
white-space : nowrap;
list-style : none;
}
/*
#navbar img{
float : left;
}
*/
#logonav li {
float : left;
background : url(http://www.thekiwieffect.com/img/button_up.gif) no-repeat;
width : 98px;
text-align : center;
margin-left : 0px; /* button spacing from each other */
}
#logonav li a {
font : Arial, Helvetica, sans-serif;
text-decoration : none;
display : block;
line-height : 43px; /* trick provided by trx */
height : 43px;
color : #cf0202;
font-size: 11px;
font-weight: bold;
}
#logonav li a:hover {
background : url(http://www.thekiwieffect.com/img/button_down.gif) no-repeat;
color : #494949;
}
html: Code: <td colspan='2'> <span id='navbar'> <img width='74' border='0' height='43' src='http://www.thekiwieffect.com/img/grade.gif' /><img height='43' src='http://www.thekiwieffect.com/img/nav_left.jpg' width='3' /> <div id='logonav'> <ul> <li> <a href='http://www.thekiwieffect.com/gallery'>Image Gallery</a> </li> <li> <a href='http://www.thekiwieffect.com/forum'>Forum</a> </li> <li> <a href='http://www.thekiwieffect.com/news'>News</a> </li> <li> <a href='http://www.thekiwieffect.com/games'>Games</a> </li> <li><a href='http://www.thekiwieffect.com/index.php'>To be added</a> </li> <li><a href='http://www.thekiwieffect.com/index.php'>To be added</a> </li> </ul> </div> <img height='43' src='http://www.thekiwieffect.com/img/nav_right.jpg' width='3' /> <img height='43' src='http://www.thekiwieffect.com/img/grade.gif' width='50' border='0' /> <a href='http://www.thekiwieffect.com'> <img height='43' alt='Home' src='http://www.thekiwieffect.com/img/m08.gif' width='28' border = '0' /></a> <a href='mailto:thethreesombreros@thekiwieffect.com'><img height='43' alt='E-Mail' src='http://www.thekiwieffect.com/img/m09.gif' width='34' border='0' /></a> </span> </td></tr> And the table tag it's in looks like this: <table cellspacing="0" cellpadding="0" width="780" align="center"> thanks I know there are a lot of articles lying around about this problem, but im having trouble with css layout for a site im working on, in IE6.0 the site displays as it should do. in Opera 7.23 + 7.11 the site displays with the main text sitting on the logo for the page, in firefox it displays as it does in opera. I am using includes for the full page with no html in the index.php page, i have tried this without includes bur get the same problems as before. the site addy is: http://www.kptspanishproperties.org.uk any help wpuld be great, also im not using tables just using css for all the layout needed I'm creating a new website, but it's not my field of expertise so i really need some help with CSS menus. I've integrated a drop down menu into the front page and the gallery menu into gallery page Gallery seems to be working fine in firefox 3, but in IE6 it's a bit messed up. With front page i dont have any more patience to work on it. Please help!, I can offer a compensation for that. I'm having a few related problems... 1. I want the Flash picture slideshow centered vertically and horizontally in its div id="flashbox", when viewed in IE 6 & 7. 2. Also when viewed in IE 7 the graphic buttons in the div id="topright" are overlapping text in the div id="rightcolumn" 3. And finally, the the graphic buttons in the div id="topright" do not fill up their space at the bottom when viewed in IE 6 & 7. Any ideas on any of these issues is much appreciated. Thank you in advance. The link to the page in question is: http://www.oharenoise.org/new/index.htm I hate to sound like a newbie. I am using dreamweaevr and I am trying to center a page using css. here is my html (I know it is ugly!) [code] <body onLoad="MM_preloadImages('/images/m2.jpg','/images/m1_over.jpg','/images/m3_over.jpg','/images/m4_over.jpg','/images/m5_over.jpg','/images/m6_over.jpg','/images/m7_over.jpg','/images/m8_over.jpg','/images/m1.jpg')"> <!-- Save for Web Slices (01_home.psd) --> <div id="Table_01"> <div id="logo"> <img src="images/logo.jpg" width="980" height="105" alt=""> </div> <div id="id01-home-02"> <img src="images/01_home_02.jpg" width="970" height="1" alt=""> </div> <div id="header-bgd1"> <img src="images/header_bgd1.gif" width="1" height="46" alt=""> </div> <div id="id01-home-04"> <img src="images/01_home_04.jpg" width="9" height="46" alt=""> </div> <div id="id01-home-05"> <img src="images/01_home_05.jpg" width="20" height="77" alt=""> </div> <div id="m1-act"> <img src="images/m1.jpg" width="114" height="45" id="Image2" onMouseOver="MM_swapImage('Image2','','images/m1_act.jpg',1)" onMouseOut="MM_swapImgRestore()"></div> <div id="id01-home-07"> <img src="images/01_home_07.jpg" width="4" height="77" alt=""> </div> <div id="m2"> <a href="#"><img src="images/m2.jpg" alt="" width="114" height="45" border="0" id="Image1" onMouseOver="MM_swapImage('Image1','','images/m2_over.jpg',1)" onMouseOut="MM_swapImgRestore()"></a> </div> <div id="id01-home-09"> <img src="images/01_home_09.jpg" width="4" height="77" alt=""> </div> <div id="m3"> <img src="images/m3.jpg" alt="" width="114" height="45" border="0" id="Image3" onMouseOver="MM_swapImage('Image3','','images/m3_over.jpg',1)" onMouseOut="MM_swapImgRestore()"> </div> <div id="id01-home-11"> <img src="images/01_home_11.jpg" width="4" height="77" alt=""> </div> <div id="m4"> <img src="images/m4.jpg" alt="" width="114" height="45" border="0" id="Image4" onMouseOver="MM_swapImage('Image4','','images/m4_over.jpg',1)" onMouseOut="MM_swapImgRestore()"> </div> <div id="id01-home-13"> <img src="images/01_home_13.jpg" width="4" height="77" alt=""> </div> <div id="m5"> <img src="images/m5.jpg" alt="" width="114" height="45" border="0" id="Image5" onMouseOver="MM_swapImage('Image5','','images/m5_over.jpg',1)" onMouseOut="MM_swapImgRestore()"> </div> <div id="id01-home-15"> <img src="images/01_home_15.jpg" width="4" height="77" alt=""> </div> <div id="m6"> <img src="images/m6.jpg" alt="" width="114" height="45" border="0" id="Image6" onMouseOver="MM_swapImage('Image6','','images/m6_over.jpg',1)" onMouseOut="MM_swapImgRestore()"> </div> <div id="id01-home-17"> <img src="images/01_home_17.jpg" width="4" height="77" alt=""> </div> <div id="m7"> <img src="images/m7.jpg" alt="" width="114" height="45" border="0" id="Image7" onMouseOver="MM_swapImage('Image7','','images/m7_over.jpg',1)" onMouseOut="MM_swapImgRestore()"> </div> <div id="id01-home-19"> <img src="images/01_home_19.jpg" width="4" height="77" alt=""> </div> <div id="m8"> <img src="images/m8.jpg" alt="" width="114" height="45" border="0" id="Image8" onMouseOver="MM_swapImage('Image8','','images/m8_over.jpg',1)" onMouseOut="MM_swapImgRestore()"> </div> <div id="id01-home-21"> <img src="images/01_home_21.jpg" width="10" height="45" alt=""> </div> <div id="id01-home-22"> <img src="images/01_home_22.jpg" width="114" height="32" alt=""> </div> <div id="id01-home-23"> <img src="images/01_home_23.jpg" width="114" height="32" alt=""> </div> <div id="id01-home-24"> <img src="images/01_home_24.jpg" width="114" height="32" alt=""> </div> <div id="id01-home-25"> <img src="images/01_home_25.jpg" width="114" height="32" alt=""> </div> <div id="id01-home-26"> <img src="images/01_home_26.jpg" width="114" height="32" alt=""> </div> <div id="id01-home-27"> <img src="images/01_home_27.jpg" width="114" height="32" alt=""> </div> <div id="id01-home-28"> <img src="images/01_home_28.jpg" width="114" height="32" alt=""> </div> <div id="id01-home-29"> <img src="images/01_home_29.jpg" width="114" height="32" alt=""> </div> <div id="header-bgd2"> <img src="images/header_bgd2.jpg" width="20" height="32" alt=""> </div> <div id="head-img1-01-01"> <img src="images/head_img1_01_01.jpg" width="595" height="246" alt=""> </div> <div id="head-img1-01-02"> <img src="images/head_img1_01_02.jpg" width="385" height="246" alt=""> </div> <div id="id01-home-33"></div> <div id="id01-home-34"></div> <div id="banner1"></div> <div id="id01-home-36"></div> <div id="id01-home-37"></div> <div id="id01-home-38"></div> <div id="id01-home-39"> <img src="images/01_home_39.jpg" width="980" height="73" alt=""> </div> <div id="id01-home-40"> <img src="images/01_home_40.jpg" width="979" height="36" alt=""> </div> <div id="id01-home-41"> <img src="images/01_home_41.jpg" width="1" height="36" alt=""> </div> </div> <!-- End Save for Web Slices --> </body> [code] I have tried using the tutorials on other sites and have had no luck. Can someone please help? Here is my CSS: [code]@charset "utf-8"; /* CSS Document */ <style type="text/css"> <!-- body { text-align: center; } #Table_01 { position:absolute; left:0px; top:0px; width:980px; height:987px; text-align:left; } #logo { position:absolute; left:0px; top:0px; width:980px; height:105px; } #id01-home-02 { position:absolute; left:0px; top:105px; width:970px; height:1px; } #header-bgd1 { position:absolute; left:970px; top:105px; width:1px; height:46px; } #id01-home-04 { position:absolute; left:971px; top:105px; width:9px; height:46px; } #id01-home-05 { position:absolute; left:0px; top:106px; width:20px; height:77px; } #m1-act { position:absolute; left:20px; top:106px; width:114px; height:45px; } #id01-home-07 { position:absolute; left:134px; top:106px; width:4px; height:77px; } #m2 { position:absolute; left:138px; top:106px; width:114px; height:45px; } #id01-home-09 { position:absolute; left:252px; top:106px; width:4px; height:77px; } #m3 { position:absolute; left:256px; top:106px; width:114px; height:45px; } #id01-home-11 { position:absolute; left:370px; top:106px; width:4px; height:77px; } #m4 { position:absolute; left:374px; top:106px; width:114px; height:45px; } #id01-home-13 { position:absolute; left:488px; top:106px; width:4px; height:77px; } #m5 { position:absolute; left:492px; top:106px; width:114px; height:45px; } #id01-home-15 { position:absolute; left:606px; top:106px; width:4px; height:77px; } #m6 { position:absolute; left:610px; top:106px; width:114px; height:45px; } #id01-home-17 { position:absolute; left:724px; top:106px; width:4px; height:77px; } #m7 { position:absolute; left:728px; top:106px; width:114px; height:45px; } #id01-home-19 { position:absolute; left:842px; top:106px; width:4px; height:77px; } #m8 { position:absolute; left:846px; top:106px; width:114px; height:45px; } #id01-home-21 { position:absolute; left:960px; top:106px; width:10px; height:45px; } #id01-home-22 { position:absolute; left:20px; top:151px; width:114px; height:32px; } #id01-home-23 { position:absolute; left:138px; top:151px; width:114px; height:32px; } #id01-home-24 { position:absolute; left:256px; top:151px; width:114px; height:32px; } #id01-home-25 { position:absolute; left:374px; top:151px; width:114px; height:32px; } #id01-home-26 { position:absolute; left:492px; top:151px; width:114px; height:32px; } #id01-home-27 { position:absolute; left:610px; top:151px; width:114px; height:32px; } #id01-home-28 { position:absolute; left:728px; top:151px; width:114px; height:32px; } #id01-home-29 { position:absolute; left:846px; top:151px; width:114px; height:32px; } #header-bgd2 { position:absolute; left:960px; top:151px; width:20px; height:32px; } #head-img1-01-01 { position:absolute; left:0px; top:183px; width:595px; height:246px; } #head-img1-01-02 { position:absolute; left:595px; top:183px; width:385px; height:246px; } #id01-home-33 { position:absolute; left:0px; top:429px; width:980px; height:40px; background-color:#363d3e; } #id01-home-34 { position:absolute; left:0px; top:469px; width:600px; height:208px; background-color:#363d3e; } #banner1 { position:absolute; left:600px; top:469px; width:360px; height:157px; background-image:url(images/banner1.jpg); } #id01-home-36 { position:absolute; left:960px; top:469px; width:20px; height:208px; background-color:#363d3e; } #id01-home-37 { position:absolute; left:600px; top:626px; width:360px; height:51px; background-color:#363d3e; } #id01-home-38 { position:absolute; left:0px; top:677px; width:980px; height:201px; background-color:#4a585a; } #id01-home-39 { position:absolute; left:0px; top:878px; width:980px; height:73px; } #id01-home-40 { position:absolute; left:0px; top:951px; width:979px; height:36px; } #id01-home-41 { position:absolute; left:979px; top:951px; width:1px; height:36px; } --> </style>[code] First off all, I am new to CSS so please go slow on me! I am trying to center a Wordpress website wich has 2 colums. #content and sidebar. I want the page to center according the users screen resolution. A good example of how I wood like to see it work is http://www.xterior.nl If you resize the window the site responds to it. Website adres: http://www.accent-aes.com Any help is highly appreciated. Many thanks in advance. Jeroen My current CSS file: Code: body {
background: url(images/qpwilm-bkgrnd.jpg) repeat-x top left fixed;
background-color: #f1f0e5;
font: 12px "Helvetica Neue", helvetica, tahoma, arial;
color: #000000;
margin:0px;
padding:0px;
}
a {
color: #000000;
text-decoration: underline;
font-weight:bold;
}
a:hover {
text-decoration:none;
}
/********************************************************************************/
/*wp admin bar plugin*/
#wp-admin-bar {margin:0; padding:5px; background:#f9f9f9; border:1px solid #666; clear:both; text-align:center;}
#wp-admin-bar ul {margin:0; padding:0;list-style:none;}
#wp-admin-bar ul li {list-style:none; display:inline; margin:0 10px; padding:0;}
/********************************************************************************/
/*Structure*/
#header{
position:relative;
margin:0px;
padding:0px;
background: url(images/qpwilm-header-bkgrnd.jpg) repeat-x top left;
width:100%;
height:150px;
}
#headerimg {
float:left;
margin:0px;
padding:0px;
width:100%;
height:150px;
background: url(images/qpwilm-header.jpg) no-repeat top left;
}
#header ul {position: absolute; bottom: 0; left: 55px;}
/********************************************************************************/
/*nav menu*/
ul#nav {list-style: none; font-size: 1em; margin:0; padding:0;}
ul#nav li { float: left; list-style: none; }
span.slash { margin-left: 10px; margin-right: 10px; color: #999;}
ul#nav li a { display: block; color: #2078ba; text-decoration: none; background-color: #f1f0e5; margin-right:5px; padding: 5px 10px;}
ul#nav li a:hover { color: #fff; background-color: #2078ba;}
/********************************************************************************/
/* #wrapper { padding-left: 30px; margin: 30px auto 0; } */
#wrapper {
padding-left: 30px; margin: 30px auto 0; }
#content {
width: 705px;
text-align: left;
float: left;
margin: 5px;
padding: 0px 20px 30px 20px;
background: url(images/qpwilm-trans.png) repeat top left;
}
.sidebar {
text-align: left;
padding: 20px;
float: left ;
margin: 5 px;
}
#sidebar-1 {
width: 156px;
background: url(images/qpwilm-trans.png) repeat top left;
}
#sidebar-2 {
width: 156px;
background: url(images/qpwilm-trans.png) repeat top left;
}
.sidebar ul li{
padding-bottom:15px;
}
.post, .page {
padding-top:30px;
padding-bottom:30px;
}
.post img, .page img {
background-color:#FFFFFF;
padding: 9px;
border: 1px solid #ffffff;
margin: 0 5px 5px 0;
}
.post img:hover, .page img:hover {
border: 1px solid #858482;
}
.post-title, .page-title {
font-size: 1.4em;
color:#ffffff;
margin: 0 5px 5px 0;
float:left;
}
.page-title {
margin-bottom: 30px !important!;
}
.post-date-meta {
float:left;
margin: 0 0 25px 0;
}
.comments-title-meta {
float:left;
margin: 0 0 20px 0;
}
span.date, .comments-title {
font-size: 0.9em;
margin:0;
padding:0;
font-weight:bold;
}
.postmeta, .comments-meta {
font-size: 0.7em;
font-weight:bold;
}
/**********************************************************************************/
/*Typography*/
/*Header text Option 1 - blog title text replaced with logo image.
This code hides the plain text blog title and description and adds an image or logo.
It's on by default. To disable it, just comment out the following "h1", "h1 a" and".description" tags
and uncomment out one of options 2 or 3.
*/
h1 {
float:center;
margin:0 43% 0 57%;
background: url(images/qpwilm-header-logo.png) no-repeat center left;
text-indent: -4000px;
width:80px;
height:105px;
}
h1 a {
display:block;
width:91px;
height:114px;
}
.description {
position: absolute;
font-size: 0;
left: -4000px;
}
/* end Option 1 */
/*Header text Option 2 - blog title in red box with live text. Blog description hidden.
This code uses the live text Blog Title and puts it in a nice red box, it also hides the blog description.
It's off by default. To enable it, just uncomment out the following "h1", "h1 a" and".description" tags
and comment out options 1 & 3.
h1 {
float:center;
margin:0 43% 0 57%;
background-color: red;
width:80px;
padding: 5px 5px 10px 5px;
text-align: center;
}
h1 a {
display:block;
bottom:0;
margin-top: 60px;
font-size: 0.5em;
color: #fff;
text-decoration: none;
}
h1 a:hover {
text-decoration: underline;
}
.description {
position: absolute;
font-size: 0;
left: -4000px;
}
/* end Option 2 */
/*Header text Option 3 - Plain text blog title and description
This code displays the Blog Title and Description in plain boring live text.
It's off by default. To enable it, just uncomment out the following "h1", "h1 a" and".description" tags
and comment out options 1 & 3.
h1 {
float:center;
font-size: 3em;
margin: 50px 0 0 55px;
}
h1 a {
text-decoration: none;
color: #fff;
display: block;
}
h1 a:hover {
color: #f0160c;
}
.description {
float:center;
margin: 0 0 0 55px;
font-size: 1.5em;
color: #fff;
}
*/
/**********************************************************************************/
/*Typography continued*/
h2 { margin-top: 20px; margin-bottom: 0; line-height: 1.5em;}
h2 a { color: #ffffff; text-decoration: none; background-color:#f0160c; padding: 5px 10px;}
h2 a:hover { color: #f0160c; background-color:#ffffff;}
.sidebar h2 {
font-size: 1.1em;
color:#f0160c;
}
.sidebar {
font-size: 1em;
}
.post h3, .page h3, .archive-title, div.page .archives-month a, #postcomment {
margin-top: 27px;
font-size: 1em;
color:#f0160c;
display:block;
padding: 5px 10px;
background-color:#ffffff;
clear:left;
font-weight: bold;
}
div.post h2 span.nobreak {
white-space: nowrap;
}
p { clear:both; font-size: 1em; line-height: 1.5em; margin: 1.2em 0; }
ol, ul {
font-size: 0.8em;
line-height: 1.5em;
margin: 1.2em 0 1.2em 0;
}
ul li,
ol li{ margin-bottom: 0.2em; }
.sidebar ul, .sidebar ol {
font-size: 1em;
}
img, a img{ border:0px;}
.sidebar a { text-decoration: none; }
#sideblog-1 a,
.textwidget a,
.widget widget_meta a,
.posts-nav a { text-decoration: underline !important!; }
#sideblog-1 a:hover,
.textwidget a:hover,
.widget widget_meta a:hover,
.posts-nav a:hover { text-decoration: none !important!; }
blockquote {
margin: 0px;
padding: 0 30px;
border-left: 4px solid #ffffff;
font-size: 0.9em;
}
pre{
display: block;
margin: 1.0em 1.5em 1.0em 0;
padding-left: 0.8em;
border-left: 1px solid #ccc;
background-color: #eee;
overflow: auto;
}
code{font-family: monospace; font-size: 11px; background-color: #eee;}
pre code{ line-height: 1.3em;}
kbd{
background-color: #ddd;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
font-size: inherit;
font-family: inherit;
padding: 0 3px 2px 4px;
}
del, del * { text-decoration: line-through; }
.comments-link, .tags, .small{
font-size: 0.7em;
}
ol.postspermonth, ul.postspermonth {
line-height: 1.5em;
margin: 1.2em 0 1.2em 0;
font-size: 0.7em;
}
ul.postspermonth li, ol.postspermonth li{ margin-bottom: 0.2em; }
.update {
color: #f0160c;
font-weight: bold;
}
.posts-nav {
margin-top: 27px;
font-size: 1em;
color:#f0160c;
padding: 5px 10px;
background-color:#ffffff;
font-weight: bold;
}
.alignright {
float: right;
}
.alignleft {
float: left
}
/***********floating images***************/
/* Using 'class="alignright"' on an image will (who would've
thought?!) align the image to the right. And using 'class="centered',
will of course center the image. This is much better than using
align="center", being much more futureproof (and valid) */
img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignright {
padding: 4px;
margin: 0 0 2px 20px !important!;
display: inline;
}
img.alignleft {
padding: 4px;
margin: 0 20px 2px 0 !important!;
display: inline;
}
/* End Images */
/***********comments***************/
#comment {
width: 100%;
}
.comments {
background: url(images/qpwilm-trans.png) repeat top left;
padding:10px;
margin-top:5px;
margin-bottom:5px;
}
.comments-alt {
background: url(images/qpwilm-trans2.png) repeat top left;
}
.comments ol, .comments ul {
line-height: 1.3em;
margin: 1.2em 0 1.2em 56px;
font-size: 0.8em;
}
.comments ul li,
.comments ol li{ margin-bottom: 0.2em; }
.comments li:hover{ background-color: #ffffff; }
.comments-title {
margin-top: 10px;
margin-bottom:2px;
}
.comments-meta {
padding-top: 1px;
}
.comments p {
margin: 15px 56px;
font-size: 0.8em;
}
/**********gravatar***************/
.gravatar {
float:left;
}
.gravatar img{
background-color: #ffffff;
padding: 5px;
margin-right:5px;
}
/*********Privado-comments***************/
.comments-author {
border:1px solid #B2FF66;
background-color: #95FFCE;
padding:5px;
margin-top:5px;
margin-bottom:5px;
}
.comments-author li {
border:1px solid #B2FF66;
background-color: #95FFCE;
padding:5px;
margin-top:5px;
margin-bottom:5px;
}
.comments-author li:hover{ background-color: #ffffff; }
/*********sidebars***************/
.sidebar h2 {
margin: .5em 0 0.6em 0;
display:block;
padding: 5px 10px;
background-color:#ffffff;
}
.sidebar ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.sidebar ul ul {
margin: 1.0em 0 1.5em 0;
border-top: 1px solid #858482;
}
#sideblog-1 ul {
border-top: 0;
}
.sidebar ul ul li {
padding: 0 0 0 10px;
border-bottom: 1px solid #858482;
}
.sidebar ul ul li a {
display: block;
margin: 0 0 0 -10px;
padding: 2px 10px;
font-weight:normal;
}
.sidebar ul ul li a:hover {
color: #f0160c;
background-color: #ffffff;
}
#flickr img, #runforcover img {
margin: 0 6px 6px 0;
padding: 5px;
background-color:#ffffff;
border: 1px solid #ffffff;
}
#flickr img:hover, #runforcover img:hover {
border: 1px solid #858482;
}
}
/**********formularios*********/
input, textarea, select {
border: 1px solid #C1C0B5;
background-color: #ffffff;
color: #000000;
font-size: 0.9em;
}
/**********************************************/
#searchform{
width:100%;
Hi, I'm in the construction phase of a site and have come into a bit of trouble.. The page is centered horizontally using a master <table align=center> that holds all the page content within it. I'm trying to put in some help widgets that appear or disappear based on an onClick event.. The only way I can find to have the help widgets layered over top of the already-displayed page is to use the position:absolute style, but this bases the position on the left and top edges of the window, rather than the left and top edges of the master table (of course). I'm wondering if there's any way I can set the style to base the absolute location of the help widgets on a figure such as the center of the window or something like the width of the window divided in half. I tried using javascript to set the element's style.left to (window.innerWidth/2)-(width of master table/2) but that only seems to work in FireFox as IE doesn't seem to recognize innerWidth. Any crafty solutions would be greatly appreciated! I am creating a website for a game (unnamed so far) the template is located at syckgamingleague(dot)com in Firefox this site looks perfect works extremely well. In Opera the navigation doesn't seem to be working like I want it. In IE it seems as if everything that should be vertically aligned to the middle doesn't appear to do that. I am just looking for a fix for the Opera navigation error currently but if you know the cause of the IE problems and would like to help that would be great. The website is located at the URI: syckgamingleague(dot)com I will include images for the display of each of the browsers mentioned above. Firefox at the above link in root folder Firefox_Polkamon.jpg Opera at the above link in root folder Opera_Polkamon.jpg IE at the above link in root folder InternetExplorer_Polkamon.jpg Sorry for no links but this forum would not allow it. Name for game isn't Polkamon it is more of a codename than anything currently game isn't named. http://64.232.240.200/new.html This site works well in Mozilla. There are spacing discrepancies between loads with Mozilla and latest Internet Explorer. The space under headings in the Main section differs between them, and there are gaps in the newsboxes where the background image runs uninterrupted on Mozilla. Internet Explorer Mac v5 does horrible things as can be seen in <a href="http://64.232.240.200/mac_ie5_screen.jpg">this screenshot</a>. (Colors have been changed slightly since this screenshot was taken, but you get the idea.) Any help is appreciated. |
|||||||