Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Nov 2011
    Location
    NZ
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Problems with position relative/absolute

    I'm wanting to do a caption overlaid on an image - the idea is that the bottom of the caption will be at the bottom of the picture regardless of how many lines the caption is.

    My understanding is that in order to do that the container element - which I think is .node .field-name-field-image - should be position: relative and the caption should be position: absolute but, for some reason, I'm unable to make that work.

    The caption-text and semi-transparent background (background is named .caption) are position: absolute and appear at the bottom of the page, not the bottom of the image.

    An example can be seen here: http://playground.virtualvagabond.ne...i-new-heritage and have added an excerpt from the stylesheet here.

    Any advice much appreciated,

    Blair

    Code:
    .node .field-name-field-image{
      position: relative;
    } 
    
    .caption{
      position: absolute;
      padding: 10px 10px;
      width: 240px;
      bottom: 10px;
      right: 30px;
      height: 40px;
      background: black;
      y-index: 2000;
      filter:alpha(opacity=70);
      opacity:0.7;
      -moz-opacity:0.7;
    }
    
    .caption-text {
      position: absolute;
      bottom: 10px;
      padding: 10px 10px;
      width: 245px;
      right:25px;
      color: #eee;
      font-size: 12px;
      text-align: justify;
      text-justify: newspaper;
    }
    Last edited by wordjuggler; 11-21-2011 at 10:37 PM. Reason: Added code from stylesheet

  • #2
    New Coder
    Join Date
    Oct 2011
    Posts
    27
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Its hard to say without the HTML structure but an element with "position:absolute" will reference the closest parent element with "position:absolute" or "position:relative". So if you want your caption to be at the bottom of the image, you should make it a child of the image element. Or you put both in one container div element and position both at the bottom of that element.
    Does that help?

  • #3
    New to the CF scene
    Join Date
    Nov 2011
    Location
    NZ
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for the reply.

    Does that mean the caption would need to be a child element of the image for this to work?
    The divs are being generated by PHP template file, so would I have to edit or override that in order to make the caption a child of the image?

  • #4
    New Coder
    Join Date
    Oct 2011
    Posts
    27
    Thanks
    0
    Thanked 2 Times in 2 Posts
    It would be best if post a part of your generated HTML, to show how it looks right now. But yes, i think putting the caption in the image should work. But probably somethink link this is considered "cleaner":

    Code:
    <div class="container">
       <img src="..."/>
       <span>Caption</span>
    </div>
    Code:
    .container {position:relative;}
    .container img {position:absolute;bottom:0px;}
    .container span {position:absolute;bottom:0px;}
    This one would probably work already depending on your current HTML structure.

  • #5
    New to the CF scene
    Join Date
    Nov 2011
    Location
    NZ
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi,

    The CSS you suggested is the same sort of format I used on a slideshow for the homepage - that's why I'm getting so frustrated with this! I've done it before but there's something I can't work out with this case.
    Have taken your advice and posted the HTML from the content area, which includes the image and caption:

    Code:
    <div id="content-inner">
    <div id="content-header">
    <h1 class="title">Johnny Rotten's graffiti: the new heritage?</h1>
    <div class="tabs">
    <h2 class="element-invisible">Primary tabs</h2>
    <ul class="tabs primary">
    <li class="active">
    <a class="active" href="/drupal-7.8/johnny-rottens-graffiti-new-heritage">
    View
    <span class="element-invisible">(active tab)</span>
    </a>
    </li>
    <li>
    <a href="/drupal-7.8/node/2909/edit">Edit</a>
    </li>
    <li>
    <a href="/drupal-7.8/node/2909/log">Log</a>
    </li>
    <li>
    <a href="/drupal-7.8/node/2909/devel">Devel</a>
    </li>
    </ul>
    </div>
    </div>
    <div class="region region-content">
    <div class="node node-article node-promoted node-full">
    <div class="node-inner clearfix">
    <div class="meta">
    Published by
    <span rel="sioc:has_creator">
    <span class="username" property="foaf:name" typeof="sioc:UserAccount" xml:lang="">Anonymous (not verified)</span>
    </span>
    on
    <span datatype="xsd:dateTime" content="2011-11-22T07:58:27+13:00" property="dc:date dc:created">Tue, 11/22/2011 - 07:58</span>
    </div>
    <div class="content clearfix">
    <div class="field field-name-field-image field-type-image field-label-hidden clearfix">
    <div class="field-items">
    <div class="field-item even" resource="http://playground.virtualvagabond.net/drupal-7.8/sites/default/files/styles/medium/public/field/image/johnny-rotten-feat.jpg" rel="og:image rdfs:seeAlso">
    <img title="Sex Pistols' graffiti may be of greater significance than the discover" alt="" src="http://playground.virtualvagabond.net/drupal-7.8/sites/default/files/styles/medium/public/field/image/johnny-rotten-feat.jpg" typeof="foaf:Image">
    </div>
    </div>
    </div>
    <div class="caption"></div>
    <div class="caption-text">Sex Pistols' graffiti may be of greater significance than the discover</div>
    <div class="field field-name-body field-type-text-with-summary field-label-hidden">
    <div class="field-items">
    <div class="field-item even" property="content:encoded">
    <div id="mdcolumn">
    <p class="newsTeaserText">Archaeologists typically record and analyse the traces of past human activities. The caves of Lascaux in southern France are celebrated as a place where early humans made their marks on cave walls. The cave is now protected, and an exact replica is what the public now encounter.</p>
    <p>But a new study by archaeologists has been examining marks made much more recently &ndash; graffiti by the Sex Pistols now discovered on the walls of the flat the punk group rented in London in the mid-1970s.</p>
    <p>
    <p>Dr John Schofield, of the Department of Archaeology at the University of York, and independent researcher Dr Paul Graves-Brown, suggest that the intact Sex Pistols graffiti may be of greater significance than the discovery of early Beatles recordings.</p>
    <p>They say the graffiti found behind cupboards in the property in Denmark Street in London is “a direct and powerful representation of a radical and dramatic movement of rebellion.”</p>
    <p>The researchers carried out a detailed analysis of the graffiti’s content and its cultural significance. Though they concede it could be considered rude, offensive and uncomfortable, they contend that its presence confirms the Denmark Street flat as an important historical and archaeological site in a street known as London’s ‘Tin Pan Alley’.</p>
    <p>
    <p>
    <p>The bulk of the graffiti is by John Lydon (aka Rotten) and consists of eight cartoons depicting himself and other members of the band, as well as their manager, Malcolm McLaren, and other Pistols’ associates.</p>
    <p>Dr&nbsp; Schofield says: “The tabloid press once claimed that early Beatles recordings discovered at the BBC were the most important archaeological find since Tutankhamun’s tomb. The Sex Pistols’ graffiti in Denmark Street surely ranks alongside this and &mdash; to our minds &mdash; usurps it.”</p>
    <p>The researchers refer to the site as ‘anti-heritage:’ because it contradicts what agencies and heritage practitioners typically value or wish to keep, and even what is generally regarded as landscape and place. And they agonise over whether or not the Denmark Street property should become a conventional heritage site with a blue plaque to mark its historical significance.</p>
    <p>But as the authors say: “We feel justified in sticking our tongues out at the heritage establishment and suggesting that punk’s iconoclasm provides the context for conservation decision-making. Our call is for something that directly follows punk’s attitude to the mainstream, to authority; contradicting norms and challenging convention.</p>
    <p>“This is an important site, historically and archaeologically, for the material and evidence it contains. But should we retain it for the benefit of this and future generations? In our view, with anti-heritage, different rules apply.&nbsp; The building is undoubtedly important, and could meet criteria for listing or for a blue plaque, if not now then in time.”</p>
    <p>But they “recoil from the suggestion”. Instead, they argue, there appears to have been an informal consensus as to the importance of the site, and, in the spirit of punk, “perhaps this DIY approach to heritage management is all that the site needs.”</p>
    <p>So could Denmark Street be Punk’s Lascaux?</p>
    <p>&nbsp;</p>
    </div>
    </div>
    </div>
    </div>
    </div>
    <div class="extra-links"> </div>
    </div>
    </div>
    </div>
    </div>

  • #6
    New Coder
    Join Date
    Oct 2011
    Posts
    27
    Thanks
    0
    Thanked 2 Times in 2 Posts
    I would suggest you put the following elements in one extra div element:

    Code:
    <div class="field field-name-field-image field-type-image field-label-hidden clearfix">
     ....
    </div>
    <div class="caption"></div>
    <div class="caption-text">Sex Pistols' graffiti may be of greater significance than the discover</div>
    so that it looks like this:

    Code:
    <div class="container">
    <div class="field field-name-field-image field-type-image field-label-hidden clearfix">
     ....
    </div>
    <div class="caption"></div>
    <div class="caption-text">Sex Pistols' graffiti may be of greater significance than the discover</div>
    </div>
    And you give the container a "position:absolute" or "position:relative". Then it should work.

  • Users who have thanked moon-safari for this post:

    wordjuggler (11-22-2011)

  • #7
    New to the CF scene
    Join Date
    Nov 2011
    Location
    NZ
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Makes sense when you see it written down like that.

    Thanks for your help,

    Blair


  •  

    Posting Permissions

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