CSS - Css Skin Or Content (semantic Markup Question)

Curious, what is regarded as the standard CSS markup method?

Displaying your attrbutes horizontally:
#wrapper{selector:attribute; selector:attribute; selector:attribute; selector:attribute;}


Or Vertically:
#wrapper{
selector:attribute;
selector:attribute;
selector:attribute;
}

Personally, horizontal seems the best. I like it because I can see the #id's and .classes all together and can follow the structure abit better. Makes it easier for me to find a certain stlye element. The argument someone presented in favor of vertical display is you won't miss a selector:attribute and the horizontal display it is hard to see the selectors:attributes. My counter arguement, in my head, was I can glance at a set of selectors:attributes and can easily identify what is / isn't there. I think I've read and written so much css that I can quickly identify pattens for certain elements and can spot rather quickly what is missing, if that is the problem, sometimes there is a large issue at hand. Eitherway, I'm in support of the horizontal display. Especially when there is a vertical style sheet that is 1152 lines long and the find option in dreamweaver is my best way of locating the style element.

Thoughts on the matter?

I noticed that googlebot is reading and indexing the content of the left sidebar and and not the center content (title of posts etc).

I have tried this fix:

Place the sidebar call after The Loop in your theme files and then use CSS to float your post content right or absolutely position your sidebar on the left.

Because the spider bots read the page markup from the top down. So if your left sidebar lies above your post content in the markup, the sidebar will be indexed first. If, on the other hand, your left sidebar appears below your post content in the markup but is positioned left by CSS, the bots will index your post content first.

It works when I float the center content to the right to the point where the sidebars are where they are supposed to be but they are pushed down a little from the top and it throws the page nav (bottom of center content) and the footer out of wack.

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.

Well I managed to find a partial solution by adding "clear" to the "statusDiv" like so:

Code:

.statusDiv {
	clear: both
	background-image: url(../png/disclosure_triangles/blue_block.png);
	height: 20px;
	margin-bottom: 1px;
	}

This kicks sibling divs onto their own line (which is what I wanted) but the spacing between divs is 2 pixels and I can't seem to find any combination of padding, margins etc to get the spacing down to one pixel.

Does anyone know of a way to control the inter-div spacing when "clear" is defined?

Thanks

Ken


---------------------------------------------------------------
Original post
---------------------------------------------------------------
I'm trying to make a few divs to create the same basic functionality as an outline (with disclosure triangles etc...) and am having alignment problems.

The first row renders perfectly but the text of subsequent rows overlaps the text of first row.

Here's the html:
Code:

<div id="contentBlock" class="bodyText">
	<div class='statusDiv'>
		<div class='disclosureCollapsed'></div>
		<div class="disclosureDivLabel">New</div>
	</div>
	<div class='statusDiv'>
		<div class='disclosureCollapsed'></div>
		<div class="disclosureDivLabel">Open</div>
	</div>
</div>

And here's the CSS:
Code:

#contentBlock {
	position: absolute;
	top: 130px;
	left: 200px;
	height: 101%;   /* Hack to force vertical scroll bars */
	right: 280px;
	min-width: 400px;
	visibility: visible;
	display: block;
	}

.statusDiv {
	clear: both
	background-image: url(../png/disclosure_triangles/blue_block.png);
	height: 20px;
	margin-bottom: 1px;
	}

.disclosureCollapsed {
	background-image: url(../png/disclosure_triangles/blue_collapsed_wide.png);
	display: block;
	text-align: right;
	/*position: absolute;*/
	float: left;
	top: 0px;
	left: 0px;
	width: 18px;
	height: 20px;
	}

.disclosureCollapsed:hover {
	cursor: pointer;
	}

How would I make the text in each subsequent row (statusDiv) line up?

Thanks for any help

Ken

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!

Greetings all,

Firstly, I am just now starting to use CSS instead of tabled layouts. I must say I am impressed by the power of CSS, but am still learning the ins-and-outs of it.

I was wondering if there are any good references/books you'd suggest purchasing or looking at online?

Now for my specific question. For my simple page project I am using to learn CSS, I have a <div> that denotes the header. This is supposed to simply have a small .jpg image on the left and some text on the right, like this:
___________________________
|[ i m a g e ]....................text |

However, it comes out looking like this:

___________________________
|[ i m a g e ]..........................|
|.....................................text|

I suspect it is due to the align: right of the text, but am not sure how to correct it.

Relevant snippets of code:

testpage.html
Code:

...
<div class=header>
<img src="image.jpg"><h1>TEXT</h1>
</div>
...

style.css
Code:

...
#header{
background-color: #FFF;
border: 2px solid #666666;
width: 860px;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
margin-bottom: 0;
}

#header h1{
text-align: right;
margin-right: 20px;
font-style: italic;
letter-spacing: 3px;
}

Thanks for any advice.

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

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'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?

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

Hi guys,

I am trying to achieve the following:

Box 1 |
------
Box 2 |

** With a 3rd box to the right of box 1&2


I have got this far but cant work out how to do 'box2'


Code:

<div id="box2">
box 2
</div>
<div id="box3">
box 3
</div>

Code:

#box2 {
	float: left;
	padding: 10px;
	margin: 20px;
	background: #ffffff;
	width: 100px; 
	/* ie5win fudge begins */
	voice-family: "\"}\"";
	voice-family:inherit;
	width: 100px;
	}
html>body #box2 {
	width: 100px; 
	/* ie5win fudge ends */
	}


#box3 {
	float: right;
	padding: 10px;
	margin: 20px;
	background: #ffffff;
	width: 100px; 
	/* ie5win fudge begins */
	voice-family: "\"}\"";
	voice-family:inherit;
	width: 100px;
	}
html>body #box3 {
	width: 100px; 
	/* ie5win fudge ends */
	}

Can anyone possibly help?

Hi,

I know this may be a basic question, but I'm apparently one of the last converts from tables to css and I've been searching how to center my site within the browser window. I've currently done all my layout using css and absolute positioning... it looks great, and it sure is easier than tables... but it's as if the site is aligned to run on the left of the browser rather than the preferred center. Should I use something other than "absolute" positioning (too bad if so, because I liked the ease)? Any advice?

Thanks in advance for any help.

Hi there,

I am trying to create a div with a opaque background.. I have done this, but my content is using the opacity as well.

How can I stop my content appearing semi-transparent? It is ok in IE, but FF, Opera and Chrome are making the content opaque too.

This is my code:

PHP Code:
#news{
float:left;
width: 470px;
padding: 10px;
background-color: #000000;
filter: alpha(opacity = 70);
-moz-opacity:0.7;
opacity: 0.7;
z-index: 100;
}
#news_content{
position:relative;
z-index: 1000;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #ffffff;
filter: alpha(opacity = 100);
-moz-opacity:1;
opacity: 1;
} 






Any ideas?

I have a website that using AJAX with PHP to display a Flash slideshow. The slideshow is generated dynamically based on MySQL queries and PHP-generated XML. However, this is all above the scope of my problem. I made a static version of the page to remove all PHP and AJAX variables, and the problem persists.

Basically, I have a content column DIV that contains a DIV for "story" (i.e. whatever the content happens to be, in this case a variety of links and a flash slideshow). Inside that DIV is another DIV for "picview". This is where the OBJECT tags are included that show the Flash file.

When the picview DIV is populated with the code, the entire content column DIV shifts down to below the vnav. When the code is removed, the page looks as expected (with the content column just under the header, lining up with the vnav).

gatewaylatin.com/scrapbook/test1.htm
The above URL is a link to a static page showing what the page SHOULD look like.

gatewaylatin.com/scrapbook/test.htm
The above URL is a link to another page, using the exact same static code with the one exception that the PICVIEW DIV is populated with the appropriate tags to include the Flash object.

In Firefox, IE7, and other modern browsers, both of these pages look the same (with the obvious exception of the Flash object on the second page). However, on IE6/Win, the second page is completely malformed.

I would appreciate any help in this matter. For easy reference, the CSS files used by the above page a

gatewaylatin.com/style/base.css
gatewaylatin.com/style/base_v4.css

Thanks in advance and let me know if you need further information or want me to try anything. I hope this is a quick fix and someone with more expertise than myself can easily spot the problem.