layout - CSS Newbie: Position a Div over Each of a Row of Photos -


i'm new css , racking brain on following:

i have row of images sourced database query. display photos in row wraps within page. example, if there 20 photos, display 5 per row based on width of page , photo.

my challenge: want position div in same relative spot on each photo. div contain link take action on photo. of action code working, cannot, life of me, correctly position div.

i can't post image of mockup i'm trying achieve (i'm new), here's description:

imagine row of photos size of postage stamp. in upper right corner of each, gray box containing link. i'm unable consistently position gray box in same relative position on each photo. each photo same size, since number of photos unknown, can't "position:abosulte;" action box manually.

my html looks follows: i've simplified loop; dump of query coldfusion of indeterminate number of photos. 

<loop>      <div id="photo" style="display:inline;"><img src="abc"></div>     <div id="redbox" style="????"><a href="javascript:action(photo);">action</a></div>  </loop>

thoughts?

many kind in advance.

maybe wrap in div?

<loop>     <div class="container" style="display: inline-block;">         <div class="photo"><img src="abc"></div>         <div class="redbox" style="position:relative; top: -20px; right; 10px;"><a href="javascript:action(photo);">action</a></div>     </div> </loop>

Comments

Post a Comment

Popular posts from this blog

asp.net - repeatedly call AddImageUrl(url) to assemble pdf document -

i'm using abcpdf , i'm curious if can recursively call addimageurl() function assemble pdf document compile multiple urls? something like: int pagecount = 0; int theid = thedoc.addimageurl("http://stackoverflow.com/search?q=abcpdf+footer+page+x+out+of+", true, 0, true); //assemble document while (thedoc.chainable(theid)) { thedoc.page = thedoc.addpage(); theid = thedoc.addimagetochain(theid); } pagecount = thedoc.pagecount; console.writeline("1 document page count:" + pagecount); //flatten document (int = 1; <= pagecount; i++) { thedoc.pagenumber = i; thedoc.flatten(); } //now try again theid = thedoc.addimageurl("http://stackoverflow.com/questions/1980890/pdf-report-generation", true, 0, true); //assemble document while (thedoc.chainable(theid)) { thedoc.page = thedoc.addpage(); theid = thedoc.addimagetoc
Read more

java - Android recognize cell phone with keyboard or not? -

in android app, want detect user's device if device has keyboard(like motorola milestone) , show corresponding user interface. guys know how that? ! regards justicepenny http://developer.android.com/reference/android/content/res/configuration.html public int keyboard the kind of keyboard attached device. 1 of: keyboard_nokeys, keyboard_qwerty, keyboard_12key. that's it!
Read more

iphone - How would you achieve a LED Scrolling effect? -

how achieve led scrolling effect example below? led sign - led ticker emulator iphone , ipad http://img.skitch.com/20101201-rsfh4p1bajb1wp94k466pdpiuj.preview.jpg sometimes remunerates comment in other posts :) have put code you, should implement font '8pin matrix' realistic feeling. uilabel *label; - (void)viewdidload { [super viewdidload]; label = [[uilabel alloc]initwithframe:cgrectmake(10, 50, 300, 20)]; label.font = [uifont fontwithname:@"courier-bold" size:16.0]; label.backgroundcolor = [uicolor blackcolor]; label.textcolor = [uicolor greencolor]; label.linebreakmode = uilinebreakmodecharacterwrap; // otherwise "…" label.text = @"this led text scrolled "; // blanks space between [self.view addsubview:label]; [nstimer scheduledtimerwithtimeinterval:0.12f target:self selector:@selector(scrolllabel) use
Read more