SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Sep 2007
    Location
    Wiltshire, UK.
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Positioning problem

    With reference to this site:
    http://myweb.tiscali.co.uk/simonrive...isc/index.html
    and this css
    http://myweb.tiscali.co.uk/simonriverdale/misc/mads.css

    When the cursor hovers over the images of wings stage left and right the block of text that appears is offset to the right (presumably because the left: 50% positioning applies to the top left corner of the block). Is there a way I can get it to apply to the centre of the block containing the text so that that block appears 'mid-stage'?

    Thank you.

    Of course it may be that my thoughts above are inaccurate and that the text block is actually centred, in that case why does the centreing include the width of the right div?
    Last edited by SRD; Feb 28, 2008 at 04:31. Reason: further investigation:

  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The span left edge is 50% from the left edge of #stage.
    To make the span exactly centered, use a negative margin-left of half its width:
    Code CSS:
    a:hover span {
    	display: inline;
    	position: absolute;
    	left:50%;
    	top: 100px;
    	width:150px;
    	z-index:20;
    	background:#222222;
    	margin-left: -75px; /* center the span */
    }
    Happy ADD/ADHD with Asperger's

  3. #3
    SitePoint Zealot
    Join Date
    Sep 2007
    Location
    Wiltshire, UK.
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks erik; spot on.


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
  •