How should I set this caption over my image using CSS? -



    i beginning dabble in responsive design, , result trying pinpoint best practices in css. working on placing caption text on custom, jquery driven image slider.

    all of running @ http://www.taylorp0994.net/websites/cincoschool/index.html, please live results , code further information.

    i have achieved appears workable solution; however, fear not semantic use pixels, regardless of context. how can use percentages achieve same , approach should take, (margin-top, position:relative/top, etc.)? i've yet have success of obvious except current solution position:relative caption box , move via top:-46.5px.

the work you've posted looks promising!

two things worth mentioning cursory look:

  • there's nothing particularly 'wrong' using pixel measurements. time potentially become problem caption's length. if text change length (and thus: roll onto 2 lines), using set height adjustment won't work.
  • there's lot of empty 'p' tags within caption, deliberate?

the way tend tackle type of task use positioning:

  • have single div wrap contains both image , caption. position relative;
  • set image z-index low number;
  • set caption's z-index higher, , set position: absolute, bottom: 0. position caption off bottom edge of parent div, in turn inherit it's height image.

two secs , i'll post example.

here go: http://jsfiddle.net/hhuhr/ quick-and-dirty should put on right track:

<style>     .img-wrap{         width: 60%; /*just here preview */         position: relative;     }         .img-wrap img{             max-width: 100%;             z-index: 1         }         .img-wrap .caption{             display: block;             width: 100%;             position: absolute;             bottom: 5px; /*if using padding in caption, match here */             left: 0;             z-index: 2;             margin: 0;             padding: 5px 0;             text-indent: 5px;             color: #fff;             font-weight: bold;             background: rgba(0, 0, 0, 0.4);         } </style>  <div class="img-wrap">     <img src="http://taylorp0994.net/websites/cincoschool/img/slide1.png" alt= "">     <span class="caption">lorem ipsum dolor sit amet</span> </div>

do remember viewport width gets narrower, caption text dominate image (as image gets smaller). tend identify point in design becomes problem , overwrite caption position bottom/left , set position: relative - drops caption directly beneath image rather over-lapping (and potentially covering) it.


Comments

Post a Comment

Popular posts from this blog

.htaccess - First slash is removed after domain when entering a webpage in the browser -

sometimes when hit address of webpage in browser, removes first slash after domain. examples: www.mywebsite.com/scripts/script_6.php -> trying load www.mywebsite.comscripts/script_6.php www.mywebsite.com/test.php -> trying load www.mywebsite.comtest.php after entering again, loads page. a .htaccess settings must wrong: rewritebase / errordocument 404 http://www.mywebsite.com/oops.php errordocument 401 /notallowed.php rewriteengine on # turn on rewriting engine #gzip <ifmodule mod_deflate.c> addoutputfilterbytype deflate text/text text/html text/plain text/xml text/css application/x- javascript application/javascript </ifmodule> #end gzip rewritecond %{http_host} ^mywebsite\.com rewriterule ^(.*)$ http://www.mywebsite.com$1 [r=permanent,l] directoryindex index6.php rewriterule ^termsofuse/?$ termsofuse.php [nc,l] # handle requests "adpolicy" rewriterule ^privacy-policy/?$ privacy-policy.php [nc,l] # handle requ...
Read more

Automatically create pages in phpfox -

i have array of information of places , wanna use them create multiple pages in phpfox site. first tried manually insert data in phpfox database (in tables of phpfox_pages , phpfox_pages_text ). the page shown in site when opening it's link, site says: the page looking cannot found. do know other tables should manipulate make work? or know plugin phpfox same? thanks, solved ( @purefan guide): "pages" has user if take @ phpfox_user table, you'll found out how fetch new records on that. there 2 ambiguous fields in table ( password & password_salt ). can use script create values fields: <?php function generaterandomstring() { $length = 164; $characters = '-_0123456789abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz'; $randomstring = ''; ($i = 0; $i < $length; $i++) { $randomstring .= $characters[rand(0, strlen($characters) - 1)]; } return $randomstring; } $ssalt = '';...
Read more

c# - Farseer ContactListener is not working -

i'm using farseer in xna project, have trouble contactlistener. created class contactlistener these 2 error messages , don't know how fix problems. the type or namespace name 'contactlistener' not found (are missing using directive or assembly reference?) the type or namespace name 'contactimpulse' not found (are missing using directive or assembly reference?) what wrong contactlistener class? class mycontactlistener: contactlistener { void begincontact(contact contact) { /* handle begin event */ } void endcontact(contact contact) { /* handle end event */ } void presolve(contact contact, ref manifold oldmanifold) { fixture fixturea = contact.fixturea; fixture fixtureb = contact.fixtureb; if (fixtureb.collisioncategories == category.cat10) { contact.enabled = false; } } void postsolve(contact contact, ref contactimpulse impulse) { /* handle post-solve event */ } }...
Read more