CSS - Content Of One Div Overlapping Content Of Sibling Div

Hi there,

I have a content glider script, but I have added it to a wrapper with a background image.

The css is using a white background colour so when a new layer is glided up, it covers the one underneath it. However, I want the background to be transparent to show the background image underneath....

If I remove the white background, they layers become transparent and overlay each other, so you can see all text in the layers on top of each other making it impossible to read.

Is there anyway I can make it so it has a transparent background, but so it will not show the content under the new slide?

This is my CSS:

PHP Code:
.glidecontentwrapper{
position: relative; /* Do not change this value */

height: 230px; /* Set height to be able to contain height of largest content shown*/

overflow: hidden;
}
/*
    Total wrapper width: 350px+5px+5px=360px
    Or width of wrapper div itself plus any left and right CSS border and padding
    Adjust related containers below according to comments
*/


.glidecontent{ /*style for each glide content DIV within wrapper.*/
position: absolute; /* Do not change this value */
background: white;
visibility: hidden;
width: 330px;
}
/*
 Total glidecontent width: 330px+10px+10px=350px
    Or width of wrapper div itself (not counting wrapper border/padding)
*/

.glidecontenttoggler{ /*style for DIV used to contain toggler links. */
width: 360px;
margin-top: 6px;
text-align: center; /*How to align pagination links: "left", "center", or "right"
background: white; /*always declare an explicit background color for fade effect to properly render in IE*/
} 





Any help would be great!
Thanks.

http://www.hybridillusions.com/wordpress/?m=200712

Still working on it, but something caught me and I'm clueless. See, I'm still learning Tableless CSS, and well... I'm not sure how to have it so that the content doesn't run over the footer like that. As it should be more like...

http://www.hybridillusions.com/wordpress/

For CSS reference, here is where the css file is located:
http://www.hybridillusions.com/wordpress/wp-content/themes/simplistic/style.css

Thanks in advance!

using the sibling selector like this

Code:

p, h3
{
margin-bottom: 1em;
}

p + h3
{
margin-top: 2em;
}

should produce output like this (taking mrgin collapsing into consideration)
Code:

first h3 at top of page

paragraph


h3 with 2em gap to preceding paragraph

paragraph

secondary paragraph with 1em gap to preceding paragraph


h3 etc

but alas, the sibling selector does not work in IE6! so how do i do it otherwise, whilst retaining simple markup?

Hi everyone.

I have a div with text and directly after that I have an image. Since a DIV is a block level element, it causes the image to wrap to the next line. Is there some way I can prevent it from doing so?

Thanks for any help or suggestions.

I am trying to create something similar to tooltips and having a problem. I know that the browsers support tooltips with the title attribute but I'm looking to do something different. Also, I know that IE has bugs with hovering on non-anchor tags but I'm trying to make this work in a standards-compliant browser (I'm not using IE). I've tried the code given by SantaKlauss and it worked fine.

But why doesn't this work (a simple example to illustrate the problem)?

Code:

<style type="text/css">
.test:hover + div
{
  background-color: red;
}
</style>

<img class='test' src='test.gif' />
<div>here is some text</div>

If I remove the :hover pseudo-class declaration like this:

Code:

.test + div
{
  background-color: red;
}

It correctly sets the background color on the div following the image. So why doesn't the first example work with the hover pseudo-class??

Thanks in advance,
Jeremiah

Hi,
So, there's the adjacent child selector element + element, but I was wondering if there was something that did the reverse of that selector. For example, let's say I have this:
Code:

<div id="menu">
    <div class="option">1</div
    <div class="option">2</div>
    <div class="option">3</div>
    <div class="option">4</div>
</div>

I know I can use the element + element selector to quickly style every option div but the first, but is there some selector to quickly style every option element but the last. Thanks.
--Surgery

I've been getting quite confused as to why some CSS wasn't doing what I'd expected it to do.

I have code like this:
Code:

.tBox { width: 50px; height: 50px; }
.tHeader { opacity: 1 }
.tBox:hover .tHeader { opacity: 0.5 }

I then have my DIVs like this (simplified)
Code:

<div class="holder">
<div class="section1"> 
<div class="tBox"> </div>
</div>
<div class="section2">
<div class="tHeader"></div>
</div>
</div>

So what I was expecting to happen is that when someone hovered over "tBox" then "tHeader" would switch opacity.

But it wasn't. And I believe this is because tBox and tHeader aren't in the same parent.

I read somewhere something about using a "+" to do some special selector stuff in the CSS but didn't really understand.

Can someone please help me with how I can get this to work outside of them sharing their parent.

Thanks.

my css :

Code:

#contentright {
		width:171px;
		padding:0px;
		float:left;
		background:#fff;
		}

I am new to useing css for layout and am running into a problem where if I do

Code:

<div id="contenteight">

some text

</div>

then try to do it again


Code:

<div id="contenteight">

some more text

</div>

it doesn't place the new text on the right, but rather at the bottom left.

also my while page is inside of
Code:

	#frame {
		width:823px;
		margin-right:auto;
		margin-left:auto;
		margin-top:10px;
		padding:0px;
		text-align:left;
		}

any help

thanks

I am working form a template that I am modifying a website and the the content is working fine in Chrome, Safari, and FF, but the part of the sidebar shows up in IE7 and no other content. Any asssitance will be appreciated. I tried different hacks with no luck. I got errors for unscrollable content but I don't believe that is it because I tried all "fixes"

Code:

/* begin Page */
www.justgreek.com/questions.html 

body
{
	margin: 0 auto;
	padding: 0;
	background-color: #D08C35;
	background-image: url('images/Page-BgTexture.jpg');
	background-repeat: repeat;
	background-attachment: scroll;
	background-position: top left;
}

#art-main
{
	position: relative;
	width: 100%;
	left: 0;
	top: 0;
}

#art-page-background-glare
{
	position: absolute;
	width: 100%;
	height: 630px;
	left: 0;
	top: 0;
}

#art-page-background-glare-image
{
	background-image: url('images/Page-BgGlare.png');
	background-repeat: no-repeat;
	height: 630px;
	width: 817px;
	margin: 0;
}

html:first-child #art-page-background-glare
{
	border: 1px solid transparent; /* Opera fix */
}


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

#art-page-background-gradient
{
	background-position: top left;
}


.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:0;
	margin:0 auto;
	width: 955px;
	min-width:55px;
	min-height:55px;
}

.art-Sheet-body
{
	position: relative;
	z-index: 1;
	padding: 4px;
}


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

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

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

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

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

.art-Sheet-tc, .art-Sheet-bc
{
	left: 33px;
	right: 33px;
	height: 66px;
	background-image: url('images/Sheet-h.png');
}

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

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

.art-Sheet-cr, .art-Sheet-cl
{
	top: 33px;
	bottom: 33px;
	width: 66px;
	background-image: url('images/Sheet-v.png');
}

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

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

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


.art-Sheet
{
	margin-top: 10px !important;
}

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

/* end Box, Sheet */

/* begin Header */
div.art-Header
{
	margin: 0 auto;
	position: relative;
	z-index:0;
	width: 947px;
	height: 136px;
}

div.art-Header-png
{
	position: absolute;
	z-index:-2;
	top: 0;
	left: 0;
	width: 947px;
	height: 136px;
	background-image: url('images/Header.png');
	background-repeat: no-repeat;
	background-position: left top;
}

div.art-Header-jpeg
{
	position: absolute;
	z-index:-1;
	top: 0;
	left: 0;
	width: 947px;
	height: 136px;
	background-image: url('images/Header.jpg');
	background-repeat: no-repeat;
	background-position: center center;
}
/* end Header */

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

.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: 4px 2px 0px 2px;
}

.art-nav
{
	position: relative;
	height: 29px;
	z-index: 100;
}

.art-nav .l, .art-nav .r
{
	position: absolute;
	z-index: -1;
	top: 0;
	height: 29px;
	background-image: url('images/nav.png');
}

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

.art-nav .r
{
	right: 0;
	width: 947px;
	clip: rect(auto, auto, auto, 947px);
}


/* end Menu */

/* begin MenuItem */
.art-menu ul li
{
	clear: both;
}

.art-menu a
{
	position:relative;
	display: block;
	overflow:hidden;
	height: 25px;
	cursor: pointer;
	text-decoration: none;
	margin-right: 4px;
	margin-left: 4px;
}


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

.art-menu a .l
{
	left:0;
	right:11px;
}

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

.art-menu a .t 
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
	color: #DEDEDE;
	padding: 0 2px;
	margin: 0 11px;
	line-height: 25px;
	text-align: center;
}

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

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

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

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

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


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

.art-menu a.active .t
{
	color: #000000;
}


/* end MenuItem */

/* begin MenuSubItem */
.art-menu ul a
{
	display:block;
	text-align: center;
	white-space: nowrap;
	height: 20px;
	width: 180px;
	overflow:hidden;
	line-height: 20px;
	margin-right: auto;


	background-image: url('images/subitem-bg.png');
	background-position: left top;
	background-repeat: repeat-x;
	border-width: 0px;
	border-style: solid;
}

.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: #000000;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
}

.art-menu ul ul a
{
	margin-left: auto;
}

.art-menu ul li a:hover
{
	color: #3B3B3B;
	background-position: 0 -20px;
}

.art-menu ul li:hover>a
{
	color: #3B3B3B;
	background-position: 0 -20px;
}

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

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


/* end MenuSubItem */

/* begin ContentLayout */
div.art-content
{
	width:709px;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-left: auto;
	margin-right auto;
}
.art-contentLayout
{
	position: absolute;
	top: 156px;
	margin-bottom: 6px;
	width: 947px;
}
/* end ContentLayout */

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

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

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

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

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

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

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

.art-Block-tc, .art-Block-bc
{
	left: 7px;
	right: 7px;
	height: 115px;
	background-image: url('images/Block-h.png');
}

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

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

.art-Block-cr, .art-Block-cl
{
	top: 7px;
	bottom: 7px;
	width: 1px;
	background-image: url('images/Block-v.png');
}

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

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

.art-Block-cc
{
	position:absolute;
	z-index:-1;
	top: 7px;
	left: 7px;
	right: 7px;
	bottom: 7px;
	background-color: #F8EFE2;
}


.art-Block
{
	margin: 7px;
}

/* end Box, Block */

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

.art-BlockHeader .t
{
	height: 30px;
	color: #000000;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
	white-space : nowrap;
	padding: 0 6px;
	line-height: 30px;	
}

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

.art-BlockHeader .l
{
	left:0;
	right:6px;
}

.art-BlockHeader .r
{ 
	width:947px;
	right:0;
	clip: rect(auto, auto, auto, 941px);
}





.art-header-tag-icon
{
    height: 30px;
	background-position:left top;
	background-image: url('images/BlockHeaderIcon.png');
	padding:0 0 0 12px;
	background-repeat: no-repeat;
	min-height: 12px;
	margin: 0 0 0 5px;
}


/* end BlockHeader */

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

.art-BlockContent-body
{
	position: relative;
	z-index: 1;
	padding: 8px;
}



.art-BlockContent-body
{
	color:#383838;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
}

.art-BlockContent-body a:link
{
	color: #832121;
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: underline;
}

.art-BlockContent-body a:visited, .art-BlockContent-body a.visited
{
	color: #525252;
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: underline;
}

.art-BlockContent-body a:hover, .art-BlockContent-body a.hover
{
	color: #290A0A;
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: none;
}

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

.art-BlockContent-body li
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
text-decoration: none;
}

.art-BlockContent-body ul li
{
	padding:0px 0 0px 13px;
	background-image: url('images/BlockContentBullets.png');
	background-repeat:no-repeat;
	margin:0.5em 0 0.5em 0;
	line-height:1.2em;
}

/* end Box, BlockContent */

/* begin Box, Post */
.art-Post
{
	position:absolute;
	z-index:0;
	margin:0 auto;
	min-width:706px;
	min-height:1px;
}

.art-Post-body
{
	position: absolute;
	z-index: 1;
	padding: 10px;
}



.art-Post
{
	margin: 7px;
}

/* Start images */
a img
{
	border: 0;
}

.art-article img, img.art-article
{
	border: solid 1px #C4C4C4;
	margin: 1em;
}

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

/* Start tables */

.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 #5C5C5C;
	vertical-align: top;
	text-align:left;
}

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

/* Finish tables */

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

/* end Box, Post */

/* begin PostHeaderIcon */
.art-PostHeader
{
	text-decoration:none;
	margin: 0.2em 0;
	padding: 0;
	font-weight:normal;
	font-style:normal;
	letter-spacing:normal;
	word-spacing:normal;
	font-variant:normal;
	text-decoration:none;
	font-variant:normal;
	text-transform:none;
	text-align:left;
	text-indent:0;
	line-height:inherit;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 22px;
font-style: normal;
font-weight: bold;
text-align: left;
	color: #661919;
}

.art-PostHeader a, .art-PostHeader a:link, .art-PostHeader a:visited, .art-PostHeader a:hover
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 22px;
font-style: normal;
font-weight: bold;
text-align: left;
	margin:0;
	color: #661919;
}

/* end PostHeaderIcon */

/* begin PostHeader */
.art-PostHeader a:link
{
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: none;
text-align: left;
  color: #7A1F1F;
}

.art-PostHeader a:visited, .art-PostHeader a.visited
{
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: none;
text-align: left;
  color: #4D4D4D;
}

.art-PostHeader a:hover, .art-PostHeader a.hovered
{
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: none;
text-align: left;
  color: #BC2F2F;
}
/* end PostHeader */

/* begin PostContent */
/* Content Text Font & Color (Default) */
body
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
  color: #404040;
}


.art-PostContent p 
{
	margin: 0.5em 0;
}

.art-PostContent, .art-PostContent p
{
	font-family: Arial, Helvetica, Sans-Serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	text-align: justify;
	color: #84561E;
}

.art-PostContent
{
  margin:0;
}


/* Start Content link style */
/*
The right order of link pseudo-classes: Link-Visited-Hover-Focus-Active.
http://www.w3schools.com/CSS/css_pseudo_classes.asp
http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states/
*/
a
{
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: underline;
  color: #8F2424;
}

/* Adds special style to an unvisited link. */
a:link
{
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: underline;
  color: #8F2424;
}

/* Adds special style to a visited link. */
a:visited, a.visited
{
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: underline;
  color: #3B3B3B;
}

/* :hover - adds special style to an element when you mouse over it. */
a:hover, a.hover
{
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: none;
  color: #BC2F2F;
}

/* Finish Content link style */

/* Resert some headings default style & links default style for links in headings*/
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
{
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
}


/* Start Content headings Fonts & Colors  */
h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 28px;
font-style: normal;
font-weight: bold;
text-align: left;
  color: #8F2424;
}

h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 22px;
font-style: normal;
font-weight: bold;
text-align: left;
  color: #BC2F2F;
}

h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 18px;
font-style: normal;
font-weight: bold;
text-align: left;
  color: #595959;
}

h4, h4 a, h4 a:link, h4 a:visited, h4 a:hover
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 16px;
font-style: normal;
font-weight: bold;
text-align: left;
  color: #A72A2A;
}

h5, h5 a, h5 a:link, h5 a:visited, h5 a:hover
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
text-align: left;
  color: #292929;
}

h6, h6 a, h6 a:link, h6 a:visited, h6 a:hover
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
text-align: left;
  color: #292929;
}
/* Finish Content headings Fonts & Colors  */
/* end PostContent */

/* begin PostBullets */
/* Start Content list */
ol, ul
{
	color: #404040;
	margin:1em 0 1em 2em;
	padding:0;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
}

li ol, li ul
{
	margin:0.5em 0 0.5em 2em;
	padding:0;
}

li 
{
	margin:0.2em 0;
	padding:0;
}

ul
{
	list-style-type: none;
}

ol
{
	list-style-position:inside;
	
}



.art-Post li
{
	padding:0px 0 0px 13px;
	line-height:1.2em;
}

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


/* Finish Content list */
/* end PostBullets */

/* begin PostQuote */
/* Start blockquote */
blockquote,
blockquote p,
.art-PostContent blockquote p
{
	color:#2E2E2E;
font-family: Arial, Helvetica, Sans-Serif;
font-style: italic;
font-weight: normal;
text-align: left;
}

blockquote,
.art-PostContent blockquote
{
		border:solid 1px #DD7878; 
		margin:10px 10px 10px 50px;
	padding:5px 5px 5px 41px;
	background-color:#EEBABA;
	background-image:url('images/PostQuote.png');
	background-position:left top;
	background-repeat:no-repeat;
}


/* Finish blockuote */
/* end PostQuote */

/* begin Button */
.art-button-wrapper .art-button
{
	display:inline-block;
	width: auto;
	outline:none;
	border:none;
	background:none;
	line-height:33px;
	margin:0 !important;
	padding:0 !important;
	overflow: visible;
	cursor: default;
	text-decoration: none !important;
	z-index:0;
}

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

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

.art-button-wrapper .art-button
{
	display:block;
	height: 33px;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
	white-space: nowrap;
	text-align: left;
	padding: 0 21px !important;
	line-height: 33px;
	text-decoration: none !important;
	color: #FAF3EA !important;
}

input, select
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
}

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

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

.art-button-wrapper .l, .art-button-wrapper .r
{
	display:block;
	position:absolute;
	z-index:-1;
	height: 92px;
	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;
}


/* end Button */

/* begin Footer */
.art-Footer
{
	position:relative;
	z-index:0;
	overflow:hidden;
	width: 947px;
	margin: 5px auto 0px auto;
}

.art-Footer .art-Footer-inner
{
	height:1%;
	position: relative;
	z-index: 0;
	padding: 8px;
	text-align: center;
}

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


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

.art-Footer .art-Footer-text
{
	display:inline-block;
	color:#000000;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 11px;
}

.art-Footer .art-Footer-text a:link
{
	text-decoration: none;
	color: #DEAF73;
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: underline;
}

.art-Footer .art-Footer-text a:visited
{
	text-decoration: none;
	color: #333333;
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: underline;
}

.art-Footer .art-Footer-text a:hover
{
	text-decoration: none;
	color: #291C0A;
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: none;
}
/* end Footer */

/* begin PageFooter */
.art-page-footer, .art-page-footer a, .art-page-footer a:link, .art-page-footer a:visited, .art-page-footer a:hover
{
	font-family:Arial;
	font-size:10px;
	letter-spacing:normal;
	word-spacing:normal;
	font-style:normal;
	font-weight:normal;
	text-decoration:underline;
	color:#D69D51;
}

.art-page-footer
{
	margin:1em;
	text-align:center;
	text-decoration:none;
	color:#949494;
}
/* end PageFooter */

/* begin LayoutCell */


.art-contentLayout .art-sidebar1
{
	position: absolute;
	margin: 0;
	padding: 0;
	border: 0;
	left: 0;
	overflow: hidden;
	width: 236px;
}
/* end LayoutCell */

/* begin LayoutCell */
.art-contentLayout .art-content
{
	position: absolute;
	margin: 0;
	padding: 0;
	border: 0;
	right: 0;
	overflow: hidden;
	width: 709px;
}
.art-contentLayout .art-content-wide
{
	position: relative;
	margin: 0;
	padding: 0;
	border: 0;
	float: left;
	overflow: hidden;
	width: 945px;
}


.ProductItem {
	border-color:#CCCCCC;
	border-style:solid;
	border-width:1;
	padding:5;
	padding-top:10;
	width:200px;

}

.ProductItem {

	font-size:11;
	width:200px;
	
}


.ProductItemClick {
	text-align:center;
	width:100%;
	cursor:pointer;
}


.ProductItemImage {
	text-align:center;
	width:200px;
	cursor:pointer;
	height:125px;
}

.ProductItemName {
	height:40;
	text-align:center;
	line-height:14px;
}

.ProductItemShortDesc {
	border-color:#857358;
	border-style:solid;
	border-width:1;

	background-image:url(Images/DescBG.png);
	color:#FFFFFF;
	height:35;
	padding:0;
	!padding:3;
	font-size:10px;
	line-height:12px;
}


/* end LayoutCell */

hi, I have a layour where the container is 100% high, and then I have a header and nav
then I have a #main and #bar divs (columns)
then #footer

I would like for the footer to stick to the bottom and the main, and bar expand to the bottom (even if there isn't enough text)

does this make sense, heres my css

PHP Code:
 html,body {
        height:100%;
        margin:0px;
        padding:0px;
        background: #eee;
    }
    
    #container {
        height:100%;
        margin: 0 auto;
        width: 720px;
        border-left: 1px solid #000;
        border-right: 1px solid #000;
        background: #f00;        
    }

    #header {
        height: 170px;
        background: #ff0 url('../images/header.gif');    
    }

    #nav {
        height: 25px;
        padding: 5px;
        background: #666;
    }

    #main {
        width: 400px;
        float: left;
        padding: 10px;
        background: #fff;
    }
    
    #bar {
        padding: 10px;
        margin-left: 420px;
        border-left: 1px solid #006;
        background: #fff;
    }

    #copy {
        height: 30px;
        background: #999;
        clear: both;
    } 

Hi,

I'm knocking up a new site and I'd like to place the content first in the source code, followed by the nav code etc.

The design of the site goes: header -> main content -> footer.

The navigation will sit in the header above the main content.
all the nav links etc. are text and will be resizable by the user as that is good accessibility practice. This means the header can change height as the font expands.

So my question is...

I see how I could put the header and nav last in the soiurce code and then position it absolutely, and position the main content etc. under it. but how do I do this when the height of the header can vary if the user alters the text size etc.?


any tips ladies and gentlemen?

Hi,

For some reason the bottom of my content is getting chopped off on some pages. For instance, the Bookmark icon and neighboring links are getting cut off at the bottom of this page when viewing with Google Chrome:

http://www.sustainablelivingcolorad...ble-living-101/

Any ideas? Thanks.

Hi,
I have a flash movie which it sppaearing on top of a drop down menu. I do not have access to the <object tag so I cannot add a wmode tag. Is there a way I can get the drop down menu to appear on top using just css?

Thanks!

Hi,

I had a little problem with this design earlier, and a kind soul on the forum helped me by showing me a template to use (instead of all the absolute positioning i was using), but i've got one little issue, and it's all that's stopping my site from going live. You'll see it quite clearly, my "content" gets pushed under my "menu" - fnb4wd.com.au/4x4wh/help/category1_1.htm is the URL.

Any advice would be greatly appreciated.

Thanks in advance.