Member Avatar for davy_yg

Hello,

I am trying to create carousel that is liquid (with bootstrap):

index.php

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Home</title>

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/chili-1.7.pack.js"></script>
<script src="js/jquery.cycle.all.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript" ></script>
<link href= "css/style.css" rel="stylesheet" type="text/css" media="screen">
<link href="css/styledrop.css" rel="stylesheet" type="text/css" media="screen" >
<link href= "css/banner.css" rel="stylesheet" type="text/css" media="screen"> 

<script type="text/javascript">
$('#slideshow').cycle({ 
    fx:     'fade', 
    speed:   900, 
    timeout: 10000, 
    pager:  '#nav1', 
    pagerAnchorBuilder: function(idx, slide) { 
        // return selector string for existing anchor 
        return '#nav1 li:eq(' + idx + ') a'; 
    } 
});
</script>

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-35837400-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

</head>

<body>

<?php  include('nav.php');  ?>

<!-- BANNERS -->

<div id="demos">
    <div id="slideshow" class="pics">

            <div class="item active">
                <img src="Images/banner1.jpg" width="1000" height="500" class="hidden-phone"/>                       
            </div>
            <div class="item">
                <img src="Images/banner2.jpg" width="1000" height="500" class="hidden-phone"/>                       
            </div>
            <div class="item">
                <img src="Images/banner3.jpg" width="1000" height="500" class="hidden-phone"/>                   
            </div>              

    <ul id="nav1">
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>          
    </ul>
</div>

<!-- END BANNERS -->

<div style="margin: 510px 0 0 0; width: 1000px; position: absolute;">

<!-- ICONS -->
<center>
<div id="icons">
<table border="0">
    <tr>
    <td>
    <div style="padding-left: 30px;"><img src="Images/Home/icon1.jpg"></div>
    </td>
    <td>
    <img src="Images/Home/icon2.jpg">
    </td>
    <td>
    <div style="padding-left: 30px;"><img src="Images/Home/icon3.jpg"></div>
    </td>
    <td>
    <img src="Images/Home/icon4.jpg">
    </td>
    </tr>
</table>
</div>
</center>
<!-- END ICONS -->

</div>
</body>

<div style="margin: 580px 0 0 0; width: 1000px; position: absolute;">

<br><br><br><br><br>

<script src="js/jquery.js"></script>
        <script src="js/bootstrap.min.js"></script><!-- Bootstrap -->

        <script type="text/javascript" charset="utf-8"> 
            $(document).ready(function(){

                $('#mySlide1').carousel();

            });
        </script>


<?php include('footer.php'); ?>



</html>

I am wishing that the banner will be liquid that adjust to it's environment but this is not the case. The banner does not adjust to its environment.

How to fix it so that the banner turn into a liquid banner?

  • 4 Contributors
  • 5 Replies
  • 161 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by diafol
Member Avatar for diafol

Bootstrap offers fluidity via this class:

<div class="container-fluid">
Edited by diafol
Member Avatar for tobyITguy

Try adding the class img-responsive to the images in the slideshow class.

Member Avatar for davy_yg

Thanks for advice.

This part has not work as it suppose to.

index.php

<div class="container-fluid">
<div id="icons">
<table border="0">
    <tr>
    <td>
    <div style="padding-left: 30px;"><img src="Images/Home/icon1.jpg"></div>
    </td>
    <td>
    <img src="Images/Home/icon2.jpg">
    </td>
    <td>
    <div style="padding-left: 30px;"><img src="Images/Home/icon3.jpg"></div>
    </td>
    <td>
    <img src="Images/Home/icon4.jpg">
    </td>
    </tr>
</table>
</div>
</div>

style.css

#icons { height: 180px; width: auto; background-color: #8a8a8a; }

I wonder how to make that icons background adjust to the internet browser.

Member Avatar for gentlemedia

div #icons can never reach the full width of the browser window, because it's placed in a div that has a width of 1000px, so div #icons will also get a maximun width of 1000px.

You use bootstrap, so stick with the way bootstrap advices you how to handle the grid. Don't just do whatever comes up in your mind if you don't know what you're doing.

Edited by gentlemedia
Member Avatar for diafol

Hold up, you're not using tables for layout are you?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.