html - How to align an img and a carousel next to each other, with max-width of 1000px? -

-

i beginner , i've ran obstacle while trying align img (#logo) , carousel (#my-slider) - both located in #img-header.

under them there navigation bar , under text. site supposed hava max-width of 1000px (the width of img 350px , width of carousel 630px, supposably they're both under 1000px), when trying align them, carousel jumps under logo. if try align carousel navbar , text, float:left works (if change max-width 1060) however, float:right not work @ - moves right, no matter how change max-width. 3, navbar, text , img-header supposed equally wide. img , carousel "agree" in same line if set max-width 1880, makes stick left , not being centered. tried setting max-width 1000 , float logo left , carousel right doesn't work - neither work if float both same side (for example, both float:left;.

this how website supposed like- in center.

demo of website

html:

<div id="img-header">     <img id="logo" src="logo/logo3.png" style="width:350px;height:240px">      <div class="container">         <div class"row">             <div class="col-sm-12">                 <div id="my-slider" class="carousel slide" data-ride="carousel" style="width:630px;height:240px">                      <!-- indicators, small dots -->                     <ol class="carousel-indicators">                         <li data-target="#my-slider" data-slide-to="0" class="active"></li>                         <li data-target="#my-slider" data-slide-to="1"></li>                         <li data-target="#my-slider" data-slide-to="2"></li>                     </ol>                      <!-- wrapper slides -->                     <div class="carousel-inner" role="listenbox">                         <div class="item active">                               <img src="food/food1.jpg" alt="food 1">                         </div>                         <div class="item">                               <img src="food/food2.jpg" alt="food 2">                         </div>                         <div class="item">                               <img src="food/food3.jpg" alt="food 3">                         </div>                     </div>                      <!--navigations/ next , prev buttons -->                      <a class="left carousel-control" href="#my-slider" role="button" data-slide="prev">                         <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>                         <!--<span class="sr-only">previous</span>-->                     </a>                      <a class="right carousel-control" href="#my-slider" role="button" data-slide="next">                         <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>                         <!--<span class="sr-only">previous</span>-->                     </a>                 </div>             </div>         </div>     </div> </div>

css:

#img-header { max-width: 1060px ; margin-left: auto ; margin-right: auto ;    }      #logo { float: left; }   #my-slider { float: left; }  #navbar { max-width: 1000px ; margin-left: auto ; margin-right: auto ; }  ul { list-style-type: none; overflow: hidden; background-color: #125ea3; } li { float: right ;   } li:last-child { border-right: none; } li { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover:not(.active) { background-color: #3594ff; } .active { background-color: #3594ff; } .text { max-width: 1000px ; margin-left: auto ; margin-right: auto ; } h1 { text-align="center" } p { text-align="center" }

i know begginer have made quite few mistakes, please forgive me in advance.

thanks , advice in advance!

documentation of bootstrap has everything. need it. http://getbootstrap.com/css"

and think problem can solved by

<div class="row">   <div class="col-md-4">      <!--logo comes here-->   </div>   <div class="col-md-8">      <!--carousal comes here-->   </div> </div>

Comments

Post a Comment

Popular posts from this blog

magento2 - Magento 2 admin grid add filter to collection -

-
i created grid in admin xml ui components. need filter collection via url parameter , dont know how achieve that. tried inject requestinterface collection, filter didnt work. di.xml <virtualtype name="slidelistingdataprovider" type="magento\framework\view\element\uicomponent\dataprovider\dataprovider"> <arguments> <argument name="collection" xsi:type="object" shared="false">xxx\xxx\model\resourcemodel\grid\slide\collection</argument> <argument name="filterpool" xsi:type="object" shared="false">slidelistingfilterpool</argument> <!-- define new object filters --> </arguments> </virtualtype> <virtualtype name="slidelistingfilterpool" type="magento\framework\view\element\uicomponent\dataprovider\filterpool"> <arguments> <argument name="applier...
Read more

Android volley - avoid multiple requests of the same kind to the server? -

-
i using volley upload list of images server. happens within service. once image uploaded remove list. problem arises when internet connection breaks. when internet connection breaks , comes again thinking of adding images yet uploaded request queue. this can result in more 1 copy of same image saved on server request same image might have gone through before getting rseponse. how can address scenario? i'm not quite sure why you're using service schedule requests volley automatically runs it's request in seperate thread. nevertheless can listen both request results, successful , unsuccessful adding listeners. you can remove image list schedule request using volley. if succeeds can carry on desired, if fails can add again list. public static request getimageuploadrequest(final string image) { response.listener<t> responselistener = new response.listener<t>() { @override public void onresponse(t response...
Read more

Combining PHP Registration and Login into one class with multiple functions in one PHP file -

-
i'm trying combine registration, activation , login scripts php website backend script front end developer can pass variables different forms to. my question whether appropriate approach this. don't want have lot of php files different pieces of application developing. far have written following 2 functions login, register , activate user front end developer can call: <?php /** * created phpstorm. * user: karl * date: 26/07/2016 * time: 02:25 */ class users { function register_user($email, $password, $user_name) { $server_name = "localhost"; $u_name = "root"; $db_password = "root"; $db_name = "betamath_graspe"; //email notification variable $from_address="info@slack.com"; //registration form $msg_reg_user='username taken. please choose different username'; $msg_reg_email='email registered'; $msg_reg_active=...
Read more