SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Wizard lukeurtnowski's Avatar
    Join Date
    Mar 2003
    Location
    Coronado
    Posts
    1,644
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    stack text above an image

    On the .box in the bottom right, Im trying to place the picture (of the stick figures in a circle) behind a <h2> So I tried to position its container relatively so I could absolutely position the image to give it a negative z-index.
    How can this be done?
    http://fixmysite.us/menu.php

    thx
    "Oh, and Jenkins--apparently your mother died this morning."

  2. #2
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Which image? I didn't see any stick figures on the page you linked to.

    Also, I might not understand the issue, but can you just use a background image instead of an inline <img> element?
    I'm the web overlord for Graphic Business Systems

  3. #3
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why not just take out the z-index and place the H2 within the SPAN that has the background image? Then the H2 naturally sits on top of the image.

  4. #4
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by sdt76 View Post
    Why not just take out the z-index and place the H2 within the SPAN that has the background image? Then the H2 naturally sits on top of the image.
    I don't think it's valid html to place a block level element inside an inline element

  5. #5
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Then why not change SPAN to DIV?

  6. #6
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In fact with CSS 3, he wouldn't need to even have the extra span or div, just add a second background to .box. But, of course ie8- would be non compliant.

  7. #7
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by sdt76 View Post
    Then why not change SPAN to DIV?
    No idea!

    In my FF7 I don't see the stick figure and circle the op mentioned.

  8. #8
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's because the z-index is set to -100 or something like that. It's sitting under that lower left hand box.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I couldn't find the stick figure either but those h2 bowes are in need of renovation as you can't place an h2 inside a span as already mentioned. You can do it much more simply like this:

    Code:
    <h2 class="box community">Join the Community</h2>
    <h2 class="box from">From the Blog<span></span></h2>
    <h2 class="box contact">Contact us<span></span></h2>
    Code:
    .box {
    	float:left;
    	position:relative;
    	width:250px;
    	height:189px;
    	padding:20px 0 0 25px;
    	border:1px solid #442;
    	-moz-border-radius:8px;
    	-webkit-border-radius:8px;
    	border-radius:8px;
    	-moz-box-shadow:0 0 4px #000, 0 0 4px 8px #666;
    	-webkit-box-shadow:0 0 4px #000, 0 0 4px 8px #666;
    	box-shadow:0 0 4px #000, 0 0 4px 8px #666;
    	background: #ffffff url(http://fixmysite.us//images/box_bg.png) bottom repeat-x;
    	margin:0 84px 100px 0;
    	font: bold 160% Georgia, Times, serif;
    	color: #333;
    }
    .community{background:url(http://fixmysite.us/images/community.jpg);}
    .from span,.contact span{
    	background:url(http://fixmysite.us/images/blog.jpg) no-repeat 100% 0;
    	width:275px; 
    	height:150px;
    	position:absolute;
    	right:0;
    	top:20px;
    	z-index:3;
    }
    .contact span{
    	background:url(http://fixmysite.us/images/contact.jpg) no-repeat 100% 100%; 
    }
    .contact{margin-right:0}


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
  •