How to position submit button, HTML -
i new html , having trouble positioning button. @ top of webpage, in navigation bar have couple of icons , add button. want button @ end of icons. can assist me that? here how have code set up.
<!-- icon 1 --> <li class="customer"> {% if customer %} <a href="/account"><i class="icon-user"></i></a> {% else %} <a href="/account/login"><i class="icon-user"></i></a> {% endif %} </li> <!-- icon 2 --> <li class="cart-overview"><a href="/cart"><i class="icon-shopping-cart"></i><span id="item_count">{{ cart.item_count }}</span></a> <div id="crt"> {% include 'shopping-cart' %} {% if cart.item_count != 0 %} <a class="checkout-link" href="/cart">checkout</a> {% endif %} </div> </li> <!-- button icon --> <li class="toolbar_btn"> <div id="btn"> <form method="post" action="/cart/add" data-money-format="$ {{amount}}" id="product-form-288451297"> <input type="hidden" id name="id" value="680177761"> <div id="product-add"> <input type="submit" name="button" value="buy now" style="height: 40px; width: 100px"> <p id="add-to-cart-msg"></p> </div> </form> </div> </li> the style looks how want it, need button moved. here screenshot. in advance!!
update: there have been many requests see css. presume want see stylesheet.css file. not know part of file important posted as could. here can me out.
/* =============== */ /* = start css = */ /* =============== */ header, #logo img, #logo { transition: .3s; -moz-transition: .3s; /* firefox 4 */ -webkit-transition: .3s; /* safari , chrome */ -o-transition: .3s; /* opera */ } header{ float: left; width: 100%; position: fixed; z-index: 5; top: 0; } /* sizes bigger menu */ header.large{ height: 80px; line-height: 80px; overflow: hidden; white-space: nowrap; } header.large img, header.large #logo { height: 80px; line-height: 80px; } /* sizes smaller menu */ header.small{ height: 50px; line-height: 50px; overflow: hidden; white-space: nowrap; } header.small img, header.small #logo { height: 50px; line-height: 50px; } #searchbox { position: absolute; top: 50%; margin-top: -24px; margin-left: 0; display: none; } #content { margin-bottom: 50px; margin-top: 100px; position: relative; } .smallcash { font-size: 12px; margin-left: 5px; } #logo { margin: 0; padding: 0; } #logo { font-family: {{ settings.logo-font }}; font-size: {{ settings.logo-size }}; text-transform: {{ settings.logo-transform }}; font-weight: {{ settings.logo-weight }}; color: {{ settings.logo-color }}; text-decoration: none; } nav { background: {{ settings.navigation }}; box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.33); -moz-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.33); -webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.33); } #navigation { padding: 0; position: relative; } .mnav { display: none; } ul#nav { list-style: none; float: right; text-align: right; } ul#nav li { display: inline-block; position: relative; z-index: 21; -webkit-transition: background .5s ease,color .5s ease; -moz-transition: background .5s ease,color .5s ease; -o-transition: background .5s ease,color .5s ease; transition: background .5s ease,color .5s ease; } ul#nav li:hover { color: {{ settings.nav_hover_link_color }}; background: {{ settings.nav_hover_color }}; } ul#nav li { font-size: {{ settings.nav_size }}; font-weight: {{ settings.nav_weight }}; color: {{ settings.nav_color }}; font-family: {{ settings.navigation-font }}; display: block; padding: 0 10px 0 10px; text-transform: {{ settings.navigation-transform }}; letter-spacing: 1px; } ul#nav li a:hover { background: {{ settings.nav_hover_color }}; color: {{ settings.nav_hover_link_color }}; text-decoration: none; } ul#nav li ul{ display: none; background: {{ settings.dropdown_background_color }}! important; float: left; position: absolute; left: 0; z-index: 25; margin: 0; padding: 0; line-height: 40px! important; -webkit-transition: background .5s ease,color .5s ease; -moz-transition: background .5s ease,color .5s ease; -o-transition: background .5s ease,color .5s ease; transition: background .5s ease,color .5s ease; } ul#nav li:hover ul{ display: block; background: {{ settings.dropdown_background_color }}! important; } ul#nav li ul li{ background: {{ settings.dropdown_background_color }}; color: {{ settings.nav_dropdown_color }}; width: 180px; text-align: left; } ul#nav li ul li:hover { background: {{ settings.dropdown_hover_background_color }}; } ul#nav li ul li a:hover { color: {{ settings.dropdown_hover_link_color }}; background: {{ settings.dropdown_hover_background_color }}; } ul#nav li ul li a{ text-align: left; font-size: {{ settings.dropdown-font-size }}; padding-left: 10px; color: {{ settings.nav_dropdown_color }}; text-transform {{ settings.dropdown-transform }}! important; } .down { float: right; margin-top: -31px; margin-right: 7px; font-weight: bolder; font-size: 10px; color: {{ settings.nav_color }}; } nav.primary select { display: none; } #nav-border { margin-top: 20px; margin-bottom: 20px; height: 1px; background: {{ settings.dotted_color }}; position: relative; } #navigation #q { background: {{ settings.navigation }}; height: 39px; line-height: 39px; border: 0 none; border-left: 1px solid {{ settings.nav_hover_color }}; letter-spacing: 1px; color: {{ settings.nav_color }}; font-size: {{ settings.nav_size }}; font-weight: {{ settings.nav_weight }}; font-family: {{ settings.navigation-font }}; padding: 0; margin: 0; } #navigation #q:focus { color: {{ settings.nav_color }}; -moz-box-shadow: 0 0 3px rgba(255,255,255,.1); -webkit-box-shadow: 0 0 3px rgba(255,255,255,.1); box-shadow: 0 0 3px rgba(255,255,255,.1); } .nav-search:hover { background: transparent! important; } ul#nav li.got-dropdown a:after { font-family: fontawesome; content:"\f078"; margin-left: 0.5em; font-size: 8px; } .submenu li a:after { content: initial! important; } #nav { /* container */ } #nav > { display: none; }
the problem absolutely in css classes , parents, way editing these tags might solve problem :
<li class="cart-overview" style="float:left"> and :
<li class="toolbar_btn" style="float:right">
Comments
Post a Comment