SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2009
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Text overlay issues

    What I am trying to do is place an image inside a div and then use CSS to write over the image.

    This is the page:

    http://www.gameguidecentral.com/2010...-2-dog-days-2/

    It works on my other site swearingatvideogames.com but on gameguidecentral.com the text is left aligned and only the size of the text.

    It should be centered and 100% width. I've also tried changing things like font color and height and it doesn't do anything. I don't know if it's getting overwritted by something else.

    I can change the boxgrid attributes but I can't seem to do anything to boxcaption

    I want the text on the bottom of the images to be centered, the opaque background to 100% wide and the text color to be white.

    Code:
    div.boxgrid{
    	width: 228px;
    	height: 115px;
    	margin: 1px;
    	float:left;
    	background:#161613;
    	border: solid 2px #666;
    	overflow: hidden;
    	position: relative;
    	text-align: center;
    }
    
    div.boxgrid img{
    	position: absolute;
    	top: 0;
    	left: 0;
    	border: 0;
    }
    
    div.boxcaption{
    	float: left;
    	position: absolute;
    	background: #000;
    	height: 20px;
            font-size: 9pt;
           *width: 100%;
    	opacity: .8;
    	/* For IE 5-7 */
    	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
    	/* For IE 8 */
    	-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    }
    
    .captionfull .boxcaption {
    	top: 20px;
    	left: 0;
    }
    
    .caption .boxcaption {
    	top: 98px;
    	left: 0;
    }

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by swaggers View Post
    I want the text on the bottom of the images to be centered, the opaque background to 100% wide and the text color to be white.
    Hi,
    Remove the star from your width:100%; so good browsers can have the width.
    There is no need to float an AP element either, the AP wins out and the float is ignored. An AP element will shrinkwrap like a float does when no width is set, that's why your BG does not extend the full width.
    Code:
    div.boxcaption{
        /*float: left;*/
        position: absolute;
        background: #000;
        height: 20px;
        font-size: 9pt;
        width: 100%;
        opacity: .8;
        /* For IE 5-7 */
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
        /* For IE 8 */
        -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    }
    You got your top and left positions here so that positions them as you intended.
    Code:
    .caption .boxcaption {
        top: 98px;
        left: 0;
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2009
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't know how the * got on the code part but it's not my site.

    Do you mean for me to take out the position:absolute? I did that and then it throws the text way up to the top.

    Unless I misunderstood what you think I should do neither of these two changes help.

    It's weird because it works on my other site perfectly. So I don't know what is going on.

  4. #4
    SitePoint Enthusiast
    Join Date
    Aug 2009
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think I had a space or something weird on the width because deleting it and re-writing it it works now.

    Where would I put text coloring in this? I put color: #FFFFFF; in .boxcaption and nothing changes.

  5. #5
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by swaggers View Post
    Do you mean for me to take out the position:absolute? I did that and then it throws the text way up to the top.
    No, I said to remove the Float not the position:absolute;

    I highlighted what you needed in Blue and commented out the float in Red.

  6. #6
    SitePoint Enthusiast
    Join Date
    Aug 2009
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    No, I said to remove the Float not the position:absolute;

    I highlighted what you needed in Blue and commented out the float in Red.
    Yep. I figured it out right after I posted. Thank you so much for your help.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •