jquery - Difficulty positioning images using CSS -


i experiencing difficulty positioning (or more accurately, combining) various graphical images form one complete image using css. reason doing way (eventually), when have them correctly placed in header of web site building, able use easing css animation bring them together.

the bigger picture consists of following graphic images:

solid line

curve up curve down

greek key greek coin

the way want this:

expected header image

with css have below, looking this:

actual header image

here css , html code:

.clip_frame  /* used clip contents in case of image frame */    {    overflow: hidden;  }  .middlecontent {    text-align: center;    position: relative;  }  .middlecontent > img {    display: inline-block;  }  .centervertical {    display: inline-block;    vertical-align: middle;  }  .header-left {    float: left;    margin-left: 0;    position: relative;  }  .header-left-top {    vertical-align: top;    position: absolute;  }  .header-left-bottom {    vertical-align: bottom;    position: absolute;  }  .header-right {    float: right;    margin-right: 0;    position: relative;  }  .header-right-top {    vertical-align: top;    margin-top: 0;    position: absolute;  }  .header-right-bottom {    vertical-align: bottom;    margin-bottom: 20;    position: absolute;  }  .center-top {    text-align: center;    vertical-align: top;  }  .center-top > img {    display: inline-block;    position: absolute;    z-index: 1;  }  .center-bottom {    text-align: center;    vertical-align: bottom;  }  .center-bottom > img {    display: inline-block;    position: absolute;    z-index: 2;  }
<?php /* wrapper name: header */ ?>. . .  <div class="row">    <div class="middlecontent">      <div class="clip_frame centervertical">        <div class="clip_frame header-left">          <span class="clip_frame header-left-top">                          <img src="http://i.stack.imgur.com/yujmj.gif" alt="" width="500" height="6px"/>                      </span>            <img src="http://i.stack.imgur.com/1kdly.gif" alt="" width="500" height="80" />            <span class="clip_frame header-left-bottom">                          <img src="http://i.stack.imgur.com/yujmj.gif" alt="" width="500" height="6px"/>                      </span>        </div>      </div>        <div class="clip_frame centervertical">        <span class="clip_frame center-top">                      <img src="http://i.stack.imgur.com/kujpv.gif" alt="" width="238" height="70"/>                  </span>          <span class="clip_frame" data-motopress-type="static" data-motopress-static-file="static/static-logo.php">                      <img src="http://i.stack.imgur.com/fombd.gif">                  </span>          <span class="clip_frame center-bottom">                      <img src="http://i.stack.imgur.com/dpz1l.gif" alt="" width="238" height="70"/>                  </span>      </div>        <div class="clip_frame centervertical">        <div class="clip_frame header-right">          <span class="clip_frame header-right-top">                          <img src="http://i.stack.imgur.com/yujmj.gif" alt="" width="500" height="6px"/>                      </span>            <img src="http://i.stack.imgur.com/1kdly.gif" alt="" width="500" height="80" />            <span class="clip_frame header-right-bottom">                          <img src="http://i.stack.imgur.com/yujmj.gif" alt="" width="500" height="6px"/>                      </span>        </div>      </div>    </div>  </div>

i have embedded php header wrapper:

note using cherry framework of wordpress, hence definition of 'row' class selector not defined theme developing. it's purpose, however, vertically align text/images rows of table, apparently cherry framework uses structure header of each page. nevertheless, not believe should interfere trying achieve. correct me if wrong.... advice and/or feedback, including suggestions using easing css animation, appreciated.

n.b. actual logo using not 1 have provided here. in fact greyscale 182x182 gif image.

replace html code

<div class="middlecontent">                 <div class="clip_frame centervertical">                     <div style="width:500px;" class="clip_frame header-left">                         <span class="">                             <img width="500" height="6px" alt="" src="http://i.stack.imgur.com/yujmj.gif">                         </span>                          <img width="500" height="80" alt="" src="http://i.stack.imgur.com/1kdly.gif">                          <span style="top:-9px;position:relative;" class="">                             <img width="500" height="6px" alt="" src="http://i.stack.imgur.com/yujmj.gif">                         </span>                     </div>                 </div>                  <div style=" height: 233px; margin-left: -14px; margin-right: -14px;  position: relative;  width: 220px;" class="clip_frame centervertical">                     <span style="position: absolute; top: 0px; left: 1px;" class="">                         <img width="217" height="70" alt="" src="http://i.stack.imgur.com/kujpv.gif">                     </span>                      <span style="position: relative; top: 27px;" data-motopress-static-file="static/static-logo.php" data-motopress-type="static" class="clip_frame">                         <img src="http://i.stack.imgur.com/fombd.gif">                     </span>                      <span style="bottom: 1px; position: absolute; left: 1px;" class="">                         <img width="217" height="70" alt="" src="http://i.stack.imgur.com/dpz1l.gif">                     </span>                 </div>                  <div style="width:500px;" class="clip_frame centervertical">                     <div class="clip_frame header-right">                         <span class="">                             <img width="500" height="6px" alt="" src="http://i.stack.imgur.com/yujmj.gif">                         </span>                          <img width="500" height="80" alt="" src="http://i.stack.imgur.com/1kdly.gif">                          <span style="top:-9px; position:relative;" class="">                             <img width="500" height="6px" alt="" src="http://i.stack.imgur.com/yujmj.gif">                         </span>                     </div>                 </div>             </div>

-

Comments

Post a Comment

Popular posts from this blog

java - UnknownEntityTypeException: Unable to locate persister (Hibernate 5.0) -

Image
in code below when try execute main.java getting exception: exception in thread "main" org.hibernate.unknownentitytypeexception: unable locate persister: com.np.vta.test.pojo.users @ org.hibernate.internal.sessionfactoryimpl.locateentitypersister(sessionfactoryimpl.java:792) @ org.hibernate.internal.sessionimpl.locateentitypersister(sessionimpl.java:2637) @ org.hibernate.internal.sessionimpl.access$2500(sessionimpl.java:164) @ org.hibernate.internal.sessionimpl$identifierloadaccessimpl.<init>(sessionimpl.java:2575) @ org.hibernate.internal.sessionimpl$identifierloadaccessimpl.<init>(sessionimpl.java:2562) @ org.hibernate.internal.sessionimpl.byid(sessionimpl.java:1044) @ org.hibernate.internal.sessionimpl.get(sessionimpl.java:955) @ com.app.test.main.main(main.java:20) but if uncomment cfg.addclass( users.class ).addresource( "com/np/vta/test/pojo/users.hbm.xml" ); code works fine. why not reading <mapping...
Read more

python - ValueError: empty vocabulary; perhaps the documents only contain stop words -

i'm using (for first time) scikit library , got error: valueerror: empty vocabulary; perhaps documents contain stop words file "c:\users\a605563\desktop\velibprojetpreso\traitementtwitterdico.py", line 33, in <module> x_train_counts = count_vect.fit_transform(filetweets) file "c:\python27\lib\site-packages\sklearn\feature_extraction\text.py", line 804, in fit_transform self.fixed_vocabulary_) file "c:\python27\lib\site-packages\sklearn\feature_extraction\text.py", line 751, in _count_vocab raise valueerror("empty vocabulary; perhaps documents contain stop words but don't understand why that's happening. import sklearn sklearn.feature_extraction.text import countvectorizer import pandas pd import numpy import unicodedata import nltk tweetsfile = open('tweets2015-08-13.csv', 'r+') f2 = open('analyzer.txt', 'a') print tweetsfile.readline() count_vect = countvectorizer(strip_accents='ascii...
Read more

ubuntu - collect2: fatal error: ld terminated with signal 9 [Killed] -

Image
i'm trying build precimonious on ubuntu 16.04.3 x64. allocated 1gb memory it. file structure looks like ~ |--- llvm/ |--- precimonious/ where llvm on version 3.0 mentioned @ https://github.com/corvette-berkeley/precimonious#requirement . followed steps on readme command make ended with ... llvm[1]: linking debug shared library libllvm-3.0.so collect2: fatal error: ld terminated signal 9 [killed] compilation terminated. ... i went through answers online , might because there's not enough memory perform link. memory usage the gcc version on machine gcc version 5.4.0 20160609 (ubuntu 5.4.0-6ubuntu1~16.04.4) , installed via apt-get install build-essential . fresh droplet created on digitalocean btw. appreciated. it memory exhaustion. sampling interval memory measurement not small enough covers exact point oom killer kicks in. depending on container/vm technology, may able set vm.overcommit_memory=2 before build, process not killed (but doing requires m...
Read more