html - Centering a div which contains images -

-

i'm trying centre images failed so. added margin: auto; images not working. when removing float: left; carousel, structure gets messed up.

how can centre images?

thanks

<html>     <head>         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>          <script type="text/javascript">             $(document).ready(function ()             {                 var showing_default = true;                 var did_scroll = false;                  $(window).on("scroll", function (e)                 {                     did_scroll = true;                 });                  window.setinterval(function ()                 {                     if (did_scroll)                     {                         did_scroll = false;                          if (showing_default && $(document).scrolltop() >= 100)                         {                             showing_default = false;                             $("#header").css('position', 'fixed');                             $("#default").stop().hide();                             $("#sticky").fadein(500);                         }                         else if (! showing_default && $(document).scrolltop() < 100)                         {                             showing_default = true;                             $("#sticky").stop().hide();                             $("#default").fadein(500);                             $("#header").css('position', 'fixed');                         }                     }                 }, 250);             });         </script>          <style>             *             {                 margin: 0px;                 padding: 0px;             }             #header, #default, #carousel, #body, #footer             {                 display: block;                 width: 100%;             }             /* --- header ------------------------------------------------------------------ */             #header, #default, #sticky             {                 background: #eeeeee;             }             #header             {                 position: fixed;                 z-index: 100;                 border-bottom: 1px solid #cccccc;             }             #default             {                 height: 100px;             }             #sticky             {                 display: none;                 height: 50px;             }             /* --- carousel ---------------------------------------------------------------- */             #carousel             {                 margin-top: 101px;                 float: left;                 height: 400px;                 background: #ffffff;             }             #images             {                 position: absolute;             }             .image             {                 display: none;                 position: absolute;                 width: 900px;                 height: 400px;             }             .image img             {                 width: 900px;                 height: 400px;             }             .first             {                 display: block;             }             /* --- body -------------------------------------------------------------------- */             #body             {                 background: #eeeeee;             }             /* --- footer ------------------------------------------------------------------ */             #footer             {                 background: #dddddd;             }         </style>     </head>      <body>         <div id="header">             <div id="default">default header</div>             <div id="sticky">sticky header</div>         </div>          <div id="carousel">             <div id="images">                 <div class="image first"><img src="images/1.jpg" /></div>                 <div class="image"><img src="images/2.jpg" /></div>                 <div class="image"><img src="images/3.jpg" /></div>                 <div class="image"><img src="images/4.jpg" /></div>             </div>         </div>          <div id="body">top<br /><br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br />body<br /><br />bottom</div>          <div id="footer">footer</div>     </body> </html>

you have used structure this:

<div id="images">     <div id="image">...</div>     <div id="image">...</div>     <div id="image">...</div>     <div id="image">...</div> </div>

so suggest center divs instead, , adapt image on div width... unique problem solution may images different sizes.

u can check example fiddles: http://jsfiddle.net/zsfjl/11/ http://jsfiddle.net/zsfjl/10/embedded/result/


Comments

Post a Comment

Popular posts from this blog

java - Run a .jar on Heroku -

-
i trying run .jar file on heroku, , can't find instructions anywhere on how this. have read wants me compile uploading heroku. possible, , if is, how this? if helps, trying run minecraft craftbukkit server, , don't have pom.xml file yet. you didn't provide details i'll try give , people reaches question way it. first of all, create heroku account , create heroku application (assumed have done that). second, need generate application jar , upload heroku. so, open terminal , install heroku cli (assuming unix terminal): $ sudo npm install -g heroku-cli you need have npm , nodejs installed, can check link: https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu-16-04 once done that, can use npm update node version acceptable heroku-cli: $ sudo npm install -g n $ sudo n 7.10.0 and run: $ sudo npm install -g heroku-cli in order deploy jars, need install deploy plugin: $ sudo heroku plugins:install heroku-cli-deploy ...
Read more

java - Jtable duplicate Rows -

-
Image
when add new rows in jtable duplicate rows many times this method update jtable public final void tableaucomande(){ ((defaulttablemodel)tabcommande.getmodel()).getdatavector().clear(); session s=hibernateutil.getsessionfactory().opensession(); criteria cr1= s.createcriteria(commande.class); list <commande> lcs=cr1.list() ; criteria cr2= s.createcriteria(lignecommande.class); list <lignecommande> lck=cr2.list() ; if(lcs.size()!=0 && lck.size()!=0) { (commande lc:lcs) { for(lignecommande lig:lck){ ((defaulttablemodel)tabcommande.getmodel()).addrow(new object[]{ lc.getid_cmd(),lc.getnumcmd(),lc.getdate_cmd(),lc.getclient().getnomprenom(), lig.getproduit().getlib_prd(),lig.getquantite(),lig.getproduit().getid_prd() }); } } // tabcommande.setrowselectioninterval(tabcommande.getrowcount()-1,tabcommande.getrowcount()-1); } } this code add add data rows displaye...
Read more

validation - How to pass paramaters like unix into windows batch file -

-
i need pass various parameters .cmd file unix format file.cmd -configuration=value -source=value -flag but, try this: startlocal @echo off cls setlocal set cmdline=%* set configuration= set source= set badargs= set validation= goto main :splitargs echo splitargs(%*) if "%*" neq "" ( /f "tokens=1,2,* delims== " %%i in ("%*") call :assignkeyvalue %%i %%j & call :splitargs %%k ) goto :eof :assignkeyvalue echo assignkeyvalue(%1, %2) if /i %1==-configuration ( set configuration=%2 ) else if /i %1==-source ( set source=%2 ) else ( rem append unrecognised [key,value] badargs echo unknown key %1 set badargs=%badargs%[%1, %2] ) goto :eof :validate echo validating set validation=fail if defined configuration ( echo -configuration ok if defined source ( echo -source ok if not defined badargs ( set validation=success ) ) ) goto :eof :main cl...
Read more