0

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
30
Views
3 Years
Discussion Span
Last Post by diafol
0

Bootstrap offers fluidity via this class:

<div class="container-fluid">

Edited by diafol

0

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.

0

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

0

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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.