html - Issue with aligning back arrow with dropdown -

-

having issues spacing arrow next dropdown. issue is centering arrow if dropdown active. want on left of dropdown not aligned how is.

i included jsfiddle show display.

html

<div id="portfolio">  <table>  <tr>  <td>     <a href="index.html"><div class="back-arrow-left" ></div></a>  </td>  <td>  <dropdown>     <input id="toggle2" type="checkbox">     <label for="toggle2" class="animate">portfolio<i class="fa fa-list float-right"></i></label>     <ul class="animate">        <li class="animate">websites</li>        <li class="animate">computer animations</li>        <li class="animate">c/c++ programs</li>     </ul>  </dropdown>  </td>  </tr>  </table>  </div>

css

.back-arrow-left { width: 0; height: 0; border-top: 30px solid transparent; border-bottom: 30px solid transparent; border-right:30px solid gray; vertical-align: top; }  .back-arrow-left:hover { border-right:30px solid #1abc9c; }  #portfolio{ width: 400px; float: right; }  *{  padding: 0;  margin: 0;  font-family: 'lato', sans-serif;  box-sizing: border-box;    }    .float-right{  float: right;    }    .fa{     font-size: .8em;   line-height: 22px !important;     }     dropdown{    display: inline-block;    margin: 0px 50px;     }     dropdown label, dropdown ul li{     display: block;     width: 200px;     background: #ecf0f1;     padding: 15px 20px;      }    dropdown label:hover, dropdown ul li:hover{    background: #1abc9c;    color: white;    cursor: pointer;}     dropdown label{    color: #1abc9c;    border-left: 4px solid #1abc9c;    border-radius: 0 5px 0 0;    position: relative;    z-index: 2; }   dropdown input{   display: none; } dropdown input ~ ul{ position: relative;  visibility: hidden;  opacity: 0;  top: -20px;  z-index: 1; } dropdown input:checked + label{  background: #1abc9c;  color: white;  }  dropdown input:checked ~ ul{  visibility: visible;  opacity: 1;  top: 0;  }   $colors: #e74c3c, #0072b5, #2c3e50;  @for $i 1 through length($colors) {  dropdown ul li:nth-child(#{$i}) {   border-left: 4px solid nth($colors, $i);   .fa{     color: nth($colors, $i);   }   &:hover {     background: nth($colors, $i);     color: white;     .fa{     color: white;      }   }   }  }  .animate{ -webkit-transition: .3s; -moz-transition: .3s; -ms-transition: .3s; -ms-transition: .3s; transition: .3s;   backface-visibility:hidden; -webkit-backface-visibility:hidden; /* chrome , safari */ -moz-backface-visibility:hidden; /* firefox */ -ms-backface-visibility:hidden; /* internet explorer */

http://jsfiddle.net/e1nuabgs/

is there particular reason using table? not html 5 compliant, , cause issues later on.

in fact, table causing problem. have table surrounding data should orientate order want, using css align out table!

if take out table , add 1 line css work perfectly. 

.back-arrow-left {        float: left;        width: 0;        height: 0;        border-top: 30px solid transparent;        border-bottom: 30px solid transparent;        border-right:30px solid gray;        vertical-align: top; }  <div id="portfolio">     <a href="index.html"><div class="back-arrow-left" ></div></a>     <dropdown>       <input id="toggle2" type="checkbox">       <label for="toggle2" class="animate">portfolio<i class="fa fa-list float-right"></i></label>          <ul class="animate">            <li class="animate">websites</li>            <li class="animate">computer animations</li>          <li class="animate">c/c++ programs</li>       </ul>    </dropdown>  </div>

i've updated jsfiddle


Comments

Post a Comment

Popular posts from this blog

c++ - No viable overloaded operator for references a map -

-
i trying use map can make tag names reference number. when try , use it, in code error (6 in total every time reference map): src/main.cpp:25:45: error: no viable overloaded operator[] type 'std::map<std::string, std::string>' const char* idcs = node.child_value(tagmap[3]); this code: #include "pugi/pugixml.hpp" #include <iostream> #include <string> #include <map> int main() { pugi::xml_document doca, docb; std::map<std::string, pugi::xml_node> mapa, mapb; std::map<std::string, std::string> tagmap {{"1", "data"}, {"2", "entry"}, {"3", "id"}, {"4", "content"}}; if (!doca.load_file("a.xml") || !docb.load_file("b.xml")) { std::cout << "can't find input files"; return 1; } (auto& node: doca.child(tagmap[1]).children(tagmap[2])) { co
Read more

java - Custom OutputStreamAppender not run: LOGBACK: No context given for <MYAPPENDER> -

-
i wish write custom appender on basis of outputstreamappender . wrote following class package tests; import java.io.ioexception; import java.io.outputstream; import ch.qos.logback.core.outputstreamappender; public class myappender<e> extends outputstreamappender<e> { public myappender() { system.out.println("myappender created"); setoutputstream(new outputstream() { @override public void write(int b) throws ioexception { throw new unsupportedoperationexception(); } }); } } then wrote following runner: package tests; import org.slf4j.loggerfactory; import ch.qos.logback.classic.logger; public class runner { private static final logger log = (logger) loggerfactory.getlogger(runner.class); public static void main(string[] args) { //log.addappender(new myappender<iloggingevent>()); log.info("hello world"); } } finall
Read more

java - Cannot secure connection using TLS -

-
i'm trying establish secure socket connection between java client applet (built jdk 1.7.0_75-b13) , vc++ server application. as test vehicle, used vc++ client/server sample found in msdn forums, modified use schannel , able establish socket using cipher suite tls_rsa_with_aes_128_cbc_sha. works of tls 1.0/1.1/1.2. when try opening socket java applet same server application, connection rejected server reporting following: tls 1.0 acceptsecuritycontext failed: 0x80090327 tls 1.1 acceptsecuritycontext failed: 0x80090331 tls 1.2 acceptsecuritycontext failed: 0x80090331 this java code used create socket: debugprint("setting secure connection"); sslsocketfactory sslsocketfactory = (sslsocketfactory) sslsocketfactory.getdefault(); sslsocket sslsocket = (sslsocket) sslsocketfactory.createsocket("127.0.0.1", socketnumber); debugprint("starting handshake"); sslsocket.settcpnodelay(true); sslsocket.setsolinger(false, 0); sslsocket.s
Read more