CSS HTML Image with Text Overlay & Button -

-

i'm newbie stuff & i'm sure it's simple enough fix, i'm struggling find way format text on image css button - need code responsive works on mobile devices also.

any advice hugely appreciated.

thanks all,

johnny_p

here's css:

   /* set custom square call action button */  #ctasquare-button-container {   text-align: center !important; }  #ctasquare-button {   text-align: center !important;   border: solid #000000 2px;   border-radius: 2px;   -moz-border-radius: 2px;   -webkit-box-shadow: 0 0px 0 0 #b13f21;   -moz-box-shadow: 0 0px 0 0 #b13f21;   box-shadow: 0 0px 0 0 #b13f21;   position: absolute;   margin: 0 0 0 -115px;     top:30;   -webkit-transition: .1s background-color linear;   -moz-transition: .1s background-color linear;   -o-transition: .1s background-color linear;   transition: .1s background-color linear;   padding: 21px 35px;   color: #fff;   border-color: #fff;   font-family: futura-pt;   font-size: 15px;   text-transform: uppercase;   letter-spacing: 2px;   font-weight: 500;   font-style: normal;   cursor: pointer; }  #ctasquare-button:hover {   background-color: #fff;   border-radius: 2px;   -webkit-box-shadow: 0 0px 0 0 #b13f21;   -moz-box-shadow: 0 0px 0 0 #b13f21;   box-shadow: 0 0px 0 0 #b13f21;   position: absolute;   -webkit-transition: .1s background-color linear;   -moz-transition: .1s background-color linear;   -o-transition: .1s background-color linear;   transition: .1s background-color linear;   color: black; } /* end custom sqaure call action button */ /* overlay text on image properties */  .sidebyside {   position: relative;   width:100%;   text-align:center;   /* ie 6 */ }  textoverlay {   position: absolute;   top: 0px;   text-align: center;   right: 50px;   left:50px;   width: 100%;   padding: 0px 0px 0px 0px;   margin: 30px 0px 0px 0px; }  h2.titleblock {   font-color: #fff;   font-size: 62px;   text-align: center;   position: relative;   font-weight: normal;   margin: 30px 40px;  } /* end overlay text on image properties */

and here's html:

<div> <div class="sidebyside">        <img src="http://static1.squarespace.com/static/548c3773e4b0c5db6dc87107/t/559d66a4e4b0f2834cbd26d0/1436378788290/surface-sq-left-orange.png" width="480"; height="480"alt="ict in education" />        <textoverlay>        <h2 class="titleblock"><span style="color:white">my awesome title</span></h2>         <h2>           <font color="white">this subtitle goes. quick brown fox jumps on lazy dog</font>         </h2>    <div class="ctasquare-button-container"> <a href="/xxx" id="ctasquare-button">learn more </a>   &nbsp;   <br><br> </div> </textoverlay> </div> </div>

for start try this:

   /* set custom square call action button */    #ctasquare-button-container {    text-align: center !important;  }    #ctasquare-button {    text-align: center !important;    border: solid #000000 2px;    border-radius: 2px;    -moz-border-radius: 2px;    -webkit-box-shadow: 0 0px 0 0 #b13f21;    -moz-box-shadow: 0 0px 0 0 #b13f21;    box-shadow: 0 0px 0 0 #b13f21;    position: absolute;    margin: 0 0 0 -115px;      top:30;    -webkit-transition: .1s background-color linear;    -moz-transition: .1s background-color linear;    -o-transition: .1s background-color linear;    transition: .1s background-color linear;    padding: 21px 35px;    color: #fff;    border-color: #fff;    font-family: futura-pt;    font-size: 15px;    text-transform: uppercase;    letter-spacing: 2px;    font-weight: 500;    font-style: normal;    cursor: pointer;  }    #ctasquare-button:hover {    background-color: #fff;    border-radius: 2px;    -webkit-box-shadow: 0 0px 0 0 #b13f21;    -moz-box-shadow: 0 0px 0 0 #b13f21;    box-shadow: 0 0px 0 0 #b13f21;    position: absolute;    -webkit-transition: .1s background-color linear;    -moz-transition: .1s background-color linear;    -o-transition: .1s background-color linear;    transition: .1s background-color linear;    color: black;  }  /* end custom sqaure call action button */  /* overlay text on image properties */    .sidebyside {    position: relative;    width:100%;    text-align:center;    /* ie 6 */  }    .sidebyside img{    width: 100%;    max-height: 100%;    height: auto;  }    textoverlay {    position: absolute;    text-align: center;    right: 0;    left:0;    bottom:0;    top:0;    padding: 0px 0px 0px 0px;    margin: auto;  }    h2.titleblock {    font-color: #fff;    font-size: 62px;    text-align: center;    position: relative;    font-weight: normal;    margin: 30px 40px;    }  /* end overlay text on image properties */
<div>  <div class="sidebyside">          <img src="http://static1.squarespace.com/static/548c3773e4b0c5db6dc87107/t/559d66a4e4b0f2834cbd26d0/1436378788290/surface-sq-left-orange.png" width="480"; height="480"alt="ict in education" />          <textoverlay>         <h2 class="titleblock"><span style="color:white">my awesome title</span></h2>          <h2>            <font color="white">this subtitle goes. quick brown fox jumps on lazy dog</font>          </h2>        <div class="ctasquare-button-container">  <a href="/xxx" id="ctasquare-button">learn more  </a>    &nbsp;    <br><br>  </div>  </textoverlay>  </div>  </div>

to display sites correctly on other divices need implement media queries example:

@media screen , (max-width: 300px) {   .sidebyside img{     width: auto;     height: 100%;   } }

Comments

Post a Comment

Popular posts from this blog

python - No exponential form of the z-axis in matplotlib-3D-plots -

-
Image
i have similar problem described in how prevent numbers being changed exponential form in python matplotlib figure : i don't want (in special case) weird scientific formatting of axis. problem different have problem @ z -axis. 2-d plots can use ax.get_yaxis().get_major_formatter().set_useoffset(false) . , there no function ax.get_zaxis() what use format z -axis same way? edit: example: from mpl_toolkits.mplot3d import axes3d import numpy np import sys import matplotlib import matplotlib.pyplot pyplot def func(xi, ti): res = 10e3 + np.cos(ti) * np.sin(xi) return res if __name__ == '__main__': timespacing = 20 timestart = 0 timeend = 1 time = np.linspace(timestart, timeend, timespacing) widthspacing = 50 widthstart = 0 widthend = 3 width = np.linspace(widthstart, widthend, widthspacing) reslist = [] matplotlib.rcparams['legend.fontsize'] = 10 fig = pyplot.figure() ax = fig.gca(projection = '3d...
Read more

php - Best Light server (Linux + Web server + Database) for Raspberry Pi -

-
i install web server database on raspberry pi (little computer). computer has 1gb ram. i want know best combination: linux distribution , web server , dbms run local server multiple users minimal latency, use php on server. , best settings performance , not have bugs (memory usage, disable plugin, disable service, etc)? i thought light debian , lighttpd server , sqlite database. solution? i think lighttpd + sqlite great choice. linux distro, debian @ centos or tiny core linux , although i'm not sure of compatibility pi. obviously, can't go wrong raspbian if want use in production , more stable performance, few more pi's , set them in cluster .
Read more

c# - "Newtonsoft.Json.JsonSerializationException unable to find constructor to use for types" error when deserializing class -

-
i developing app in xamarin android. have splash screen serialize class , pass mainactivity using intent . when try deserialize in mainactivity error message : "serializationexception unable find constructor use types" serialization : void loaddata() { currency currency = new currency(this); intent = new intent(this, typeof(mainactivity)); intent.putextra("currency", newtonsoft.json.jsonconvert.serializeobject(currency)); startactivity(intent); } deserialization : cur = newtonsoft.json.jsonconvert.deserializeobject<currency> (intent.getstringextra("currency")); // error here class constructor : public currency(context context) { thiscontext = context; } i began experiencing problem after added parameter context context constructor. has caused this? how can solve it? possible serialize/deserialize class has parameters? you need have empty constructor in currency class in order deserialize it. ...
Read more