html - Building a Product Box using images w/ CSS -


i designed basic looking box in photoshop use show product information inside of. consists of header, body , button (each separate image) image below.

how can use css/html piece these together? need show header text in top box , bullet points in body area, not sure how build image files.

i know html such, confused how build box, such stacking images , overlaying button in position on body.

<div id="product_box">     <div id="header">title here</div>      <div id="body">         <ul>             <li>point here</li>             <li>point here</li>             <li>point here</li>         </ul>     </div>      <div id="button></div> </div>

enter image description here

well have at:

http://jsfiddle.net/2a2fn/4/

you don't have change html markup use css:

here relevant css:

#product_box{     border:2px solid #bbc;     border-radius:15px;     display:block;     width:50%;     height:100%;     position:relative;     box-shadow: 5px 5px 5px rgba(0,0,0,0.5);     padding:0px; !important     background: #b5bdc8; /* old browsers */     /* gradient */     background: -moz-linear-gradient(top,  #b5bdc8 0%, #828c95 36%, #28343b 100%); /* ff3.6+ */     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b5bdc8), color-stop(36%,#828c95), color-stop(100%,#28343b)); /* chrome,safari4+ */     background: -webkit-linear-gradient(top,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* chrome10+,safari5.1+ */     background: -o-linear-gradient(top,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* opera 11.10+ */     background: -ms-linear-gradient(top,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* ie10+ */     background: linear-gradient(to bottom,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* w3c */     filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#b5bdc8', endcolorstr='#28343b',gradienttype=0 ); /* ie6-9 */     } #header{     background:#aaf;     width:100%;     height:50px;     border:0px;     border-bottom:1px solid #99b;     padding-top:15px;     padding-bottom:15px;     border-radius:5px;     background: #b5bdc8; /* old browsers */     /* gradient */     background: -moz-linear-gradient(top,  #b5bdc8 0%, #828c95 36%, #28343b 100%); /* ff3.6+ */     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b5bdc8), color-stop(36%,#828c95), color-stop(100%,#28343b)); /* chrome,safari4+ */     background: -webkit-linear-gradient(top,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* chrome10+,safari5.1+ */     background: -o-linear-gradient(top,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* opera 11.10+ */     background: -ms-linear-gradient(top,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* ie10+ */     background: linear-gradient(to bottom,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* w3c */     filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#b5bdc8', endcolorstr='#28343b',gradienttype=0 ); /* ie6-9 */    } #body{  padding-bottom:15px;    } #button{     background:#756;     border:1px solid #645;     display:block;     width:150px;     height:50px;     border-radius:5px;     position:absolute;     bottom:-25px;     right:33%;     color:#fff;     box-shadow:5px 5px 5px rgba(0,0,0,0.4);     text-align:center;     font-weight:bolder;     font-size:15px;     background: #b5bdc8; /* old browsers */     /* gradient */     background: -moz-linear-gradient(top,  #b5bdc8 0%, #828c95 36%, #28343b 100%); /* ff3.6+ */     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b5bdc8), color-stop(36%,#828c95), color-stop(100%,#28343b)); /* chrome,safari4+ */     background: -webkit-linear-gradient(top,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* chrome10+,safari5.1+ */     background: -o-linear-gradient(top,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* opera 11.10+ */     background: -ms-linear-gradient(top,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* ie10+ */     background: linear-gradient(to bottom,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* w3c */     filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#b5bdc8', endcolorstr='#28343b',gradienttype=0 ); /* ie6-9 */ } div{      text-align:center;      color:#fff;      font-weight:bold; }

and here output of that:

output

edit

according comment here updated code:

http://jsfiddle.net/2a2fn/5/

and output:

updated output

hope helps.


Comments

Post a Comment

Popular posts from this blog

commonjs - How to write a typescript definition file for a node module that exports a function? -

consider, toml node module can use: // toml.d.ts declare module toml { export function parse(value:string):any; } declare module "toml" { export = toml; } then: /// <reference path="../../../../../defs/toml/toml.d.ts"/> import toml = require('toml'); toml.parse(...); however, node module export single function, such 'glob' ( https://github.com/isaacs/node-glob ). the node usage of module be: var glob = require("glob") glob("*.js", {}, callback(err, files) { ... }); you'd naively expect this: // glob.d.ts declare function globs(paths:string, options:any, callback:{(err:any, files:string[]):void; ...but because typescripts 'import' semantics bit strange, seems can use 'import .. = require()' statement alias modules . trying call: /// <reference path="../../../../../defs/glob/glob.d.ts"/> import blog = require('glob'); results in: error ts2072: mod...
Read more

openid - Okta: Failed to get authorization code through API call -

i'm integrating okta own idp server using okta's api. i'm implementing authorization code flow following steps below: in own server, use /api/v1/authn endpoint sessiontoken. use sessiontoken obtain authorization calling endpoint: /oauth2/v1/authorize?client_id=" + clientid + "&sessiontoken=" + sessiontoken + "&response_type=code&response_mode=query&scope=openid&redirect_uri=" + redirecturl + "&state=evanyang&nonce=" it's supposed return response status code 302 , location header containing redirect url code value. however, keep getting response status code 200 , without location header, html body saying "you using unsupported browser." , "javascript disabled on browser." according api documentation: http://developer.okta.com/docs/api/resources/oidc.html#authentication-request , sessiontoken parameter sufficient this: an okta one-time sessiontoken. allows api-based ...
Read more

ios - Change Storyboard View using Seague -

i have following code checks connection server, , depending on want change views if no connection found. nsstring *connect = [nsstring stringwithcontentsofurl:[nsurl urlwithstring:@"http://myserver.com"] encoding:nsutf8stringencoding error:nil]; if (connect == null) { [self performseguewithidentifier:@"network_failure" sender:self]; } else { // other code here } my problem not change views. have added storyboard segue between 2 views identifier of network_failure . not have navigation controller or that, problem? thanks help! no not problem. first of all, in objectivec exists nil object oriented null . must use that. so: if(connect == nil) or better: if(!connect) so due fact nil not same of null , probably code does't enter in if scope . you have been able discover breakpoint. anyway: be sure set trigger segue (line) 2 view controller , , name network_failure (that not best name. should instead view1toview2 ) as, m...
Read more