Web Analytics Made Easy -
StatCounter Billboard Overlay problem - CodingForum

Announcement

Collapse
No announcement yet.

Billboard Overlay problem

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Billboard Overlay problem

    Hello,

    I'm building a site in Word Press. I've created a Rotator that has an overlay...allowing for text, etc, to be placed over the image.



    Notice that the overlay is well above the top of the text, taking up have the photo. Instead, I want the overlay to be at the top where it says "PBS Kids Shop" and I want the text to be positioned at the bottom of the pic, instead of having the padding at the bottom. Make sense?

    Now, one reason I'm confused is I use this exact rotator on another site and don't have this problem. The CSS is below. Currently the site isn't up yet or I'd just post a link. Any ideas?

    Code:
    #bboard {
    	position:relative;
    	/*height:25.3em;*/ height:290px;
    	width: 650px;
    	background:#000;
    	padding:0; margin:0;
    }
    
    #bboard ul {list-style:none; padding:0; margin:0;}
    #bboard ul li {float:left; padding:0; margin:0;}
    
    .bboard_image {position:relative; z-index:10; padding:0; margin:0; height:290px; width:650px;}
    .bboard_image img {padding:0; margin:0;}
    
    .textwrap { /* FOR POSITION ONLY */
    	padding: 0; margin:0;
    	background:transparent url(/highlights/graytint.png) repeat 0;
    	position:absolute; z-index:10; left:0; bottom:0; width:100%;
    }
    
    .bboard_overlay {color:#fff; position:relative; z-index:20; padding:.5em 1em .7em 1em; margin:0;}
    
    .bboard_overlay h2 {color:#7dd; font-size:170%; font-weight:normal; padding:0; margin:0;}
    .bboard_overlay h2 a {color:#7dd; padding:0 1.6em 0 0; margin:0; right:2px;}
    .bboard_overlay h2 a:hover {color:#fff;}
    
    
    /* BOTH TITLE AND DESCRIPTIONS */
    .bboard_overlay p {padding:0; margin:0;}
    
    /* TITLE */
    .bboard_title {color:#7dd; font-weight:bold;}
    .bboard_title, .bboard_title a {color:#7dd;}
    .bboard_title a:hover {color:#9ff;}
    
    /* DESCRIPTION */
    .bboard_desc {color:#fff; font-size:90%;}
    .bboard_time {color:#a1d600;}
    .bbtime {color:#a1d600;} /* used for manual text highlighting in the blurb system */
    
    
    /* DOT LINKS */
    .bb_dotlinks {position:absolute; top:.5em; right:1em; z-index:30; margin:0; padding:0;}
    .bb_dotlinks ul.bb_dotlist {margin:0; padding:0; float:right;}
    .bb_dotlist li {
    	text-align:center;
    	list-style-type:none;
    	margin:0 .2em 0 0; padding:0;
    	float:left; width:30px; height:30px;
    }
    .bb_dotlist li:last-child {margin:0;}
    
    #bboard .bb_dotlist li a {
    	color:#666;
    	font-weight:bold; line-height:1.2;
    	display:block;
    	background:transparent url(/highlights/02numbdots.gif) no-repeat 1px 0;
    	padding:4px 0 6px 0;
    }
    #bboard .bb_dotlist li a:hover {text-decoration:none; background-position: 1px -66px;}
    #bboard .bb_dotlist li a.bbtab_selected {background-position: 1px -33px;}
    
    
    .bboard_page {display:none;}
    .bboard_page_active {display:block;}
    </style>
    Last edited by javanewbie7; Aug 27, 2011, 02:33 PM.
Working...
X