www.webdeveloper.com
Results 1 to 12 of 12

Thread: background slider

  1. #1
    Join Date
    Jul 2013
    Posts
    57

    background slider

    hello,

    Does anyone knows how to make background slide like this?

    http://agencexy.com/#home

  2. #2
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,456
    Hi there aelynne,

    that site seems to have used javascript to achieve the effect.

    Here is a pure CSS example...
    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <base href="http://www.coothead.co.uk/images/">
    
    <meta charset="utf-8">
    
    <title>CSS transform skew and animation</title>
    
    <style>
    html,body {
        margin:0;
        height:100%;
        background-image:linear-gradient(to bottom,rgba(0,0,0,0.2),rgba(0,0,0,1.0));
     }
    #box0,#box1,#box2,#box3 {
        position:relative;
        z-index:3;
        float:left;
    
        width:22%;
        height:100%;
        margin:-100% 1% 0 1%;
    
        background-image:url(autumn.jpg);
        background-size:100% 100%;	
        box-shadow:10px 10px 10px rgba(0,0,0,1.0),
              inset 1px  1px  1px rgba(0,0,0,1.0);
    
        -webkit-transform:skew(-10deg);
        -moz-transform:skew(-45deg);
        -ms-transform:skew(-10deg);
        -o-transform:skew(-10deg);
        transform:skew(-10deg);
    
        animation-delay:0s;
        animation-duration:1s;
        animation-name:slideDown;
        animation-fill-mode:forwards;
    
        -webkit-animation-delay:0s;
        -webkit-animation-duration:1s;
        -webkit-animation-name:slideDown;
        -webkit-animation-fill-mode:forwards;
     }
    #box1 {
        z-index:2;
        background-image:url(blood.jpg);
        animation-delay:0.5s;
        -webkit-animation-delay:0.5s;
     }
    #box2 {
       z-index:1;
       background-image:url(buddha.jpg);
       animation-delay:1s;
       -webkit-animation-delay:1s;
     }
    #box3 {
        z-index:0;
        background-image:url(avenue.jpg);
        animation-delay:1.5s;
        -webkit-animation-delay:1.5s;
     }
    
    #nav {
        position:absolute;
        z-index:4;
    
        width:100%;
        padding:0;
        margin:0;
        border-top:1px solid rgb(0,0,0);
        border-bottom:1px solid rgb(0,0,0);
        bottom:10%;
    
        list-style-type:none;
        line-height:100px;
        text-align:center;
        background-color:rgb(247,247,247);
        box-shadow:0 0 30px rgba(0,0,0,0.8),
             inset 0 0 30px rgba(0,0,0,0.8);
        opacity:0;
    
        animation-delay:2.5s;
        animation-duration:2.0s;
        animation-name:show;
        animation-fill-mode:forwards;
    
        -webkit-animation-delay:2.5s;
        -webkit-animation-duration:2.0s;
        -webkit-animation-name:show;
        -webkit-animation-fill-mode:forwards;
     }
    #nav li { 
        display:inline;
        margin:0 20px;
     }
    #nav a {
        color:rgb(0,0,0); 
        text-transform:uppercase;
        text-decoration:none;
     }
    @keyframes slideDown{
        from {margin-top:-100%;}
        to   {margin-top:0;}
     }
    @-webkit-keyframes slideDown {
        from {margin-top:-100%;}
        to   {margin-top:0;}
     }
    
    @keyframes show {
        from {opacity:0}
        to   {opacity:1;}
     }
    @-webkit-keyframes show {
        from {opacity:0}
        to   {opacity:1;}
     }
    </style>
    
    </head>
    <body>
    
    <div id="box0"></div>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
    
    
    <ul id="nav">
     <li><a href="#">Home</a></li>
     <li><a href="#">About</a></li>
     <li><a href="#">Information</a></li>
     <li><a href="#">Contact</a></li>
    </ul>
    
    </body>
    </html>

    coothead

  3. #3
    Join Date
    Jul 2013
    Posts
    57
    thank you. it works.

  4. #4
    Join Date
    Jul 2013
    Posts
    57
    why when i separate the css and html, its not working?

  5. #5
    Join Date
    Jul 2013
    Posts
    57
    how can i add something like this under the nav?Screen Shot 2013-09-25 at 12.49.17 PM.jpg

  6. #6
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,456
    Hi there aelynne,

    you have probably made a coding error somewhere.

    Do you have a link to your test page , so that we may see your problem?

    coothead

  7. #7
    Join Date
    Jul 2013
    Posts
    57
    nope. i make it offline, so i dont have the link. if i need to separate the css and html, how?

  8. #8
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,456
    Hi there aelynne,

    how can we test your code, if we don't have it?

    If the background images are failing to show up, then you
    have not used the correct location address in the CSS.

    Put the absolute url in the CSS to test.

    coothead

  9. #9
    Join Date
    Jul 2013
    Posts
    57
    how to make the gap between photos in background more smaller.means no gaps.
    Screen Shot 2013-09-26 at 03.06.59 PM.jpg

    this is my code
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Vensta | Home</title>
    
    <style>
    html,body {
        margin:0;
        height:100%;
    	background-color:#F69220;
        /*background-image:linear-gradient(to bottom,rgba(0,0,0,0.2),rgba(0,0,0,1.0));*/
    	font-family:Arial, "Gill Sans", Helvetica, "Myriad Pro";
     }
    #box0,#box1,#box2,#box3 {
        position:relative;
        z-index:2;
        float:left;
    
        width:32%;
        height:100%;
        margin:-100% 1% 0 1%;
    
        background-image:url(images/home_bg1.png);
        background-size:100% 100%;	
        box-shadow:0px 0px 0px rgba(0,0,0,1.0),
              inset 0px  0px  0px rgba(0,0,0,1.0);
    
        -webkit-transform:skew(-10deg);
        -moz-transform:skew(-45deg);
        -ms-transform:skew(-10deg);
        -o-transform:skew(-10deg);
        transform:skew(-10deg);
    
        animation-delay:0s;
        animation-duration:1s;
        animation-name:slideDown;
        animation-fill-mode:forwards;
    
        -webkit-animation-delay:0s;
        -webkit-animation-duration:1s;
        -webkit-animation-name:slideDown;
        -webkit-animation-fill-mode:forwards;
     }
    #box1 {
        z-index:1;
        background-image:url(images/home_bg2.png);
        animation-delay:0.5s;
        -webkit-animation-delay:0.5s;
     }
    #box2 {
       z-index:0;
       background-image:url(images/home_bg3.png);
       animation-delay:1s;
       -webkit-animation-delay:1s;
     }
    /*#box3 {
        z-index:0;
        background-image:url(avenue.jpg);
        animation-delay:1.5s;
        -webkit-animation-delay:1.5s;
     }*/
    
    #nav {
        position:absolute;
        z-index:4;
    
        width:100%;
        padding:0;
        margin:0;
        border-top:0px solid rgb(0,0,0);
        border-bottom:0px solid rgb(0,0,0);
        bottom:20%;
    
        list-style-type:none;
        text-align:center;
        background-color:#ffffff;
        box-shadow:0 0 30px rgba(0,0,0,0.8);
             inset 0 0 0px rgba(0,0,0,0.8);
        opacity:0;
    
        animation-delay:2.5s;
        animation-duration:2.0s;
        animation-name:show;
        animation-fill-mode:forwards;
    
        -webkit-animation-delay:2.5s;
        -webkit-animation-duration:2.0s;
        -webkit-animation-name:show;
        -webkit-animation-fill-mode:forwards;
     }
    #nav li { 
        display:inline;
        margin:0 20px;
     }
     
    #nav a {
        color:rgb(0,0,0); 
        text-transform:uppercase;
        text-decoration:none;
    	color:#E34927;
    	font-weight:bold;
    	font-size:14px;
     }
     
    #nav li.navlogo img{
    	padding-bottom: 0px;
    	vertical-align:middle;
     } 
     
    div.menu {
    	 z-index:5;
    	 bottom: 5%;
    	 position:absolute;
    	 background: rgba(255,255,255,.4);
    	 /*background-color:#FFF;*/
    	 /*opacity: .45;
         filter: alpha(opacity=80);*/
    	 left: 50%;
    	 margin-left: -225px;/*negative half of the divs width*/
         height: 80px;
         width:450px;
    	 display:inline-block;
     }
     
    div.textfixed {
    	height: 80px;
    	width: 150px;
    	float:left;
    	font-size:14px;
    	font-family:"Gill Sans";
    }
    
    div.textscroll {
    	height: 80px;
    	width: 300px;
    	float:right;
    	font-size:14px;
    	font-family:"Gill Sans Light";
    }
    
    .text marquee {
    	color:#666;
    }
    
    #typetext {
    	font-style:italic;
    }
    
    @keyframes slideDown{
        from {margin-top:-100%;}
        to   {margin-top:0;}
     }
    @-webkit-keyframes slideDown {
        from {margin-top:-100%;}
        to   {margin-top:0;}
     }
    
    @keyframes show {
        from {opacity:0}
        to   {opacity:1;}
     }
    @-webkit-keyframes show {
        from {opacity:0}
        to   {opacity:1;}
     }
    </style>
    
    </head>
    
    <body>
    
    <div id="box0"></div>
    <div id="box1"></div>
    <div id="box2"></div>
    <!--<div id="box3"></div>-->
    
    <ul id="nav">
     <li class="navlogo"><img src="images/logo.png"></li>
     <li><a href="#">ABOUT VENSTA</a></li>
     <li><a href="#">PROPERTY DEVELOPMENT</a></li>
     <li><a href="#">CONTACT US</a></li>
    </ul>
    <div class="menu">
      <div class="textfixed">
        <table width="150" border="0">
      <tr>
        <td height="76" valign="middle" style="line-height:28px; padding-left:10px;">ON GOING<br />DEVELOPMENT</td>
        <td><img src="images/arrow_home.png"></td>
      </tr>
      </table>
    </div><!--textfixed-->
    
    <div class="textscroll">
    <marquee behavior="scroll" scrolldelay="90"  direction="up" height="80" scrollamount="2" onmouseover="this.stop();" onmouseout="this.start();">
    <table width="300" border="0">
       <tr>
       	 <td width="113" rowspan="2" align="center" valign="middle" style="padding-left:2%;"><img src="images/simpang_mutiara_logo.png">     </td>
         <td colspan="2" align="right" valign="bottom" style="padding-right: 5%;">Single Storey Semi-D</td>
       </tr>
       <tr>
         <td width="138" align="right" valign="middle"><div id="typetext">TYPE A</div></td>
         <td width="35" align="right" valign="middle"><a href="simpang_mutiara_typeA.html"><img border="0" style="padding-right:20%;" src="images/arrow_info.png" alt="Simpang Mutiara Type A" width="23" height="23"></a></td>
       </tr>
       
       <tr>
       	 <td width="113" rowspan="2" align="center" valign="middle" style="padding-left:2%;"><img src="images/simpang_mutiara_logo.png">     </td>
         <td colspan="2" align="right" valign="bottom" style="padding-right: 5%;">Single Storey Semi-D</td>
       </tr>
       <tr>
         <td width="138" align="right" valign="middle"><div id="typetext">TYPE B</div></td>
         <td width="35" align="right" valign="middle"><a href="simpang_mutiara_typeB.html"><img border="0" style="padding-right:20%;" src="images/arrow_info.png" alt="Simpang Mutiara Type B" width="23" height="23"></a></td>
       </tr>
       
       <tr>
       	 <td width="113" rowspan="2" align="center" valign="middle" style="padding-left:2%;"><img src="images/jana_impian_logo.png">     </td>
         <td align="right" valign="bottom" style="padding-right: 5%;">Double Storey</td>
         <td width="35" rowspan="2" align="right" valign="middle" style="padding-right: 5%;"><a href="jana_impian_semiD.html"><img border="0" style="padding-right:20%;" src="images/arrow_info.png" alt="Jana Impian Semi D" width="23" height="23"></a></td>
       </tr>
       <tr>
         <td width="138" align="right" valign="top" style="padding-right:5%;">Semi-D</td>
         </tr>
         
       <tr>
       	 <td width="113" rowspan="2" align="center" valign="middle" style="padding-left:2%;"><img src="images/jana_impian_logo.png">     </td>
         <td align="right" valign="bottom" style="padding-right: 5%;">Double Storey</td>
         <td width="35" rowspan="2" align="right" valign="middle" style="padding-right: 5%;"><a href="jana_impian_bungalow.html"><img border="0" style="padding-right:20%;" src="images/arrow_info.png" alt="Jana Impian Bungalow" width="23" height="23"></a></td>
       </tr>
       <tr>
         <td width="138" align="right" valign="top" style="padding-right:5%;">Bungalow</td>
         </tr>
       
       <tr>
       	 <td width="113" rowspan="2" align="center" valign="middle" style="padding-left:2%;"><img src="images/putra_indah_logo.png">     </td>
         <td align="right" valign="bottom" style="padding-right: 5%;">Single Storey</td>
         <td width="35" rowspan="2" align="right" valign="middle" style="padding-right: 5%;"><a href="putra_indah_bungalow.html"><img border="0" style="padding-right:20%;" src="images/arrow_info.png" alt="Putra Indah Bungalow" width="23" height="23"></a></td>
       </tr>
       <tr>
         <td width="138" align="right" valign="top" style="padding-right:5%;">Bungalow</td>
         </tr>
       
       <tr>
       	 <td width="113" rowspan="2" align="center" valign="middle" style="padding-left:2%;"><img src="images/taman_kota_muhibbah_logo.png">     </td>
         <td align="right" valign="bottom" style="padding-right: 5%;">Single Storey</td>
         <td width="35" rowspan="2" align="right" valign="middle" style="padding-right: 5%;"><a href="kota_muhibbah_terrace.html"><img border="0" style="padding-right:20%;" src="images/arrow_info.png" alt="Kota Muhibbah Terrace" width="23" height="23"></a></td>
       </tr>
       <tr>
         <td width="138" align="right" valign="top" style="padding-right:5%;">Terrace</td>
         </tr>
       
       <tr>
       	 <td width="113" rowspan="2" align="center" valign="middle" style="padding-left:2%;"><img src="images/bukit_mas_logo.png">     </td>
         <td align="right" valign="bottom" style="padding-right: 5%;">Single Storey</td>
         <td width="35" rowspan="2" align="right" valign="middle" style="padding-right: 5%;"><a href="bukit_mas_semiD.html"><img border="0" style="padding-right:20%;" src="images/arrow_info.png" alt="Bukit Mas Semi D" width="23" height="23"></a></td>
       </tr>
       <tr>
         <td width="138" align="right" valign="top" style="padding-right:5%;">Semi-D</td>
         </tr>
       
    </table>
    </marquee>
    </div><!--textscroll-->
    </div><!--menu-->
    
    </body>
    </html>

  10. #10
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,456
    Hi there aelynne,

    change the highlighted value here...
    Code:
    
    #box0,#box1,#box2,#box3 {
        position:relative;
        z-index:2;
        float:left;
    
        width:32%;
        height:100%;
        margin:-100% 1% 0 1%;
    ...to this...
    Code:
    
        margin:-100% 0 0;
    coothead

  11. #11
    Join Date
    Jul 2013
    Posts
    57
    still have gap. why?

  12. #12
    Join Date
    Jul 2013
    Posts
    57
    i have solved that. thank you. but another problem appear, that is the black line between the image, how to remove that?
    Screen Shot 2013-09-27 at 12.26.15 PM.jpg

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Vensta | Home</title>
    
    <style>
    html,body {
        margin:0;
        height:100%;
    	background-color:#F69220;
        /*background-image:linear-gradient(to bottom,rgba(0,0,0,0.2),rgba(0,0,0,1.0));*/
    	font-family:Arial, "Gill Sans", Helvetica, "Myriad Pro";
     }
    #box0,#box1,#box2 {
        position:relative;
        z-index:2;
        float:left;
    
        width:31.5%;
        height:100%;
        margin:-100% 0 0;
    	
    	background-image:url(images/homebg1.png);
        background-size:100% 100%;	
        box-shadow:0px 0px 0px rgba(0,0,0,1.0),
              inset 0px  0px  0px rgba(0,0,0,1.0);
    
        -webkit-transform:skew(-8deg);
        -moz-transform:skew(-30deg);
        -ms-transform:skew(-8deg);
        -o-transform:skew(-8deg);
        transform:skew(-8deg);
    
        animation-delay:0s;
        animation-duration:1s;
        animation-name:slideDown;
        animation-fill-mode:forwards;
    
        -webkit-animation-delay:0s;
        -webkit-animation-duration:1s;
        -webkit-animation-name:slideDown;
        -webkit-animation-fill-mode:forwards;
     }
     
    #box0 {
    	border-left: 12px solid #FFFFFF;
     }
     
    #box1 {
        z-index:1;
        background-image:url(images/homebg2.png);
        animation-delay:0.5s;
        -webkit-animation-delay:0.5s;
    	border-left: 12px solid #FFFFFF;
     }
    #box2 {
       z-index:0;
       background-image:url(images/homebg3.png);
       animation-delay:1s;
       -webkit-animation-delay:1s;
       border-left: 12px solid #FFFFFF;
       border-right: 12px solid #FFFFFF;
     }
    /*#box3 {
        z-index:0;
        background-image:url(avenue.jpg);
        animation-delay:1.5s;
        -webkit-animation-delay:1.5s;
     }*/
    
    #nav {
        position:absolute;
        z-index:3;
    
        width:100%;
        padding:0;
        margin:0;
        border-top:0px solid rgb(0,0,0);
        border-bottom:0px solid rgb(0,0,0);
        bottom:20%;
    
        list-style-type:none;
        text-align:center;
        background-color:#ffffff;
        box-shadow:0 0 30px rgba(0,0,0,0.8);
             inset 0 0 0px rgba(0,0,0,0.8);
        opacity:0;
    
        animation-delay:2.0s;
        animation-duration:1.0s;
        animation-name:show;
        animation-fill-mode:forwards;
    
        -webkit-animation-delay:2.0s;
        -webkit-animation-duration:1.5s;
        -webkit-animation-name:show;
        -webkit-animation-fill-mode:forwards;
     }
    #nav li { 
        display:inline;
        margin:0 20px;
     }
     
    #nav a {
        color:rgb(0,0,0); 
        text-transform:uppercase;
        text-decoration:none;
    	color:#E34927;
    	font-weight:bold;
    	font-size:14px;
     }
     
    #nav li.navlogo img{
    	padding-bottom: 0px;
    	vertical-align:middle;
     } 
     
    div.menu {
    	 z-index:5;
    	 bottom: 5%;
    	 position:absolute;
    	 background: rgba(255,255,255,.4);
    	 /*background-color:#FFF;*/
    	 /*opacity: .45;
         filter: alpha(opacity=80);*/
    	 left: 50%;
    	 margin-left: -225px;/*negative half of the divs width*/
         height: 80px;
         width:450px;
    	 display:inline-block;
     }
     
    div.textfixed {
    	height: 80px;
    	width: 150px;
    	float:left;
    	font-size:14px;
    	font-family:"Gill Sans";
    }
    
    div.textscroll {
    	height: 80px;
    	width: 300px;
    	float:right;
    	font-size:14px;
    	font-family:"Gill Sans Light";
    }
    
    .text marquee {
    	color:#666;
    }
    
    #typetext {
    	font-style:italic;
    }
    
    @keyframes slideDown{
        from {margin-top:-100%;}
        to   {margin-top:0;}
     }
    @-webkit-keyframes slideDown {
        from {margin-top:-100%;}
        to   {margin-top:0;}
     }
    
    @keyframes show {
        from {opacity:0}
        to   {opacity:1;}
     }
    @-webkit-keyframes show {
        from {opacity:0}
        to   {opacity:1;}
     }
    </style>
    
    </head>
    
    <body>
    
    <div id="box0"></div>
    <div id="box1"></div>
    <div id="box2"></div>
    <!--<div id="box3"></div>-->
    
    <ul id="nav">
     <li class="navlogo"><a href="index.html"><img src="images/logo.png"></a></li>
     <li><a href="about.html">ABOUT VENSTA</a></li>
     <li><a href="#">PROPERTY DEVELOPMENT</a></li>
     <li><a href="#">CONTACT US</a></li>
    </ul>
    <div class="menu">
      <div class="textfixed">
        <table width="150" border="0">
      <tr>
        <td height="76" valign="middle" style="line-height:28px; padding-left:10px;">ON GOING<br />DEVELOPMENT</td>
        <td><img src="images/arrow_home.png"></td>
      </tr>
      </table>
    </div><!--textfixed-->
    
    <div class="textscroll">
    <marquee behavior="scroll" scrolldelay="90"  direction="up" height="80" scrollamount="2" onmouseover="this.stop();" onmouseout="this.start();">
    <table width="300" border="0">
       <tr>
       	 <td width="113" rowspan="2" align="center" valign="middle" style="padding-left:2%;"><img src="images/simpang_mutiara_logo.png">     </td>
         <td colspan="2" align="right" valign="bottom" style="padding-right: 5%;">Single Storey Semi-D</td>
       </tr>
       <tr>
         <td width="138" align="right" valign="middle"><div id="typetext">TYPE A</div></td>
         <td width="35" align="right" valign="middle"><a href="simpang_mutiara_typeA.html"><img border="0" style="padding-right:20%;" src="images/arrow_info.png" alt="Simpang Mutiara Type A" width="23" height="23"></a></td>
       </tr>
       
        <tr>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
       </tr>
       
       <tr>
       	 <td width="113" rowspan="2" align="center" valign="middle" style="padding-left:2%;"><img src="images/simpang_mutiara_logo.png">     </td>
         <td colspan="2" align="right" valign="bottom" style="padding-right: 5%;">Single Storey Semi-D</td>
       </tr>
       <tr>
         <td width="138" align="right" valign="middle"><div id="typetext">TYPE B</div></td>
         <td width="35" align="right" valign="middle"><a href="simpang_mutiara_typeB.html"><img border="0" style="padding-right:20%;" src="images/arrow_info.png" alt="Simpang Mutiara Type B" width="23" height="23"></a></td>
       </tr>
       
        <tr>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
       </tr>
       
       <tr>
       	 <td width="113" rowspan="2" align="center" valign="middle" style="padding-left:2%;"><img src="images/jana_impian_logo.png">     </td>
         <td align="right" valign="bottom" style="padding-right: 5%;">Double Storey</td>
         <td width="35" rowspan="2" align="right" valign="middle" style="padding-right: 5%;"><a href="jana_impian_semiD.html"><img border="0" style="padding-right:20%;" src="images/arrow_info.png" alt="Jana Impian Semi D" width="23" height="23"></a></td>
       </tr>
       <tr>
         <td width="138" align="right" valign="top" style="padding-right:5%;">Semi-D</td>
       </tr>
       
       <tr>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
       </tr>
         
       <tr>
       	 <td width="113" rowspan="2" align="center" valign="middle" style="padding-left:2%;"><img src="images/jana_impian_logo.png">     </td>
         <td align="right" valign="bottom" style="padding-right: 5%;">Double Storey</td>
         <td width="35" rowspan="2" align="right" valign="middle" style="padding-right: 5%;"><a href="jana_impian_bungalow.html"><img border="0" style="padding-right:20%;" src="images/arrow_info.png" alt="Jana Impian Bungalow" width="23" height="23"></a></td>
       </tr>
       <tr>
         <td width="138" align="right" valign="top" style="padding-right:5%;">Bungalow</td>
       </tr>
       
        <tr>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
       </tr>
       
       <tr>
       	 <td width="113" rowspan="2" align="center" valign="middle" style="padding-left:2%;"><img src="images/putra_indah_logo.png">     </td>
         <td align="right" valign="bottom" style="padding-right: 5%;">Single Storey</td>
         <td width="35" rowspan="2" align="right" valign="middle" style="padding-right: 5%;"><a href="putra_indah_bungalow.html"><img border="0" style="padding-right:20%;" src="images/arrow_info.png" alt="Putra Indah Bungalow" width="23" height="23"></a></td>
       </tr>
       <tr>
         <td width="138" align="right" valign="top" style="padding-right:5%;">Bungalow</td>
       </tr>
       
        <tr>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
       </tr>
       
       <tr>
       	 <td width="113" rowspan="2" align="center" valign="middle" style="padding-left:2%;"><img src="images/taman_kota_muhibbah_logo.png">     </td>
         <td align="right" valign="bottom" style="padding-right: 5%;">Single Storey</td>
         <td width="35" rowspan="2" align="right" valign="middle" style="padding-right: 5%;"><a href="kota_muhibbah_terrace.html"><img border="0" style="padding-right:20%;" src="images/arrow_info.png" alt="Kota Muhibbah Terrace" width="23" height="23"></a></td>
       </tr>
       <tr>
         <td width="138" align="right" valign="top" style="padding-right:5%;">Terrace</td>
       </tr>
       
        <tr>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
       </tr>
       
       <tr>
       	 <td width="113" rowspan="2" align="center" valign="middle" style="padding-left:2%;"><img src="images/bukit_mas_logo.png">     </td>
         <td align="right" valign="bottom" style="padding-right: 5%;">Single Storey</td>
         <td width="35" rowspan="2" align="right" valign="middle" style="padding-right: 5%;"><a href="bukit_mas_semiD.html"><img border="0" style="padding-right:20%;" src="images/arrow_info.png" alt="Bukit Mas Semi D" width="23" height="23"></a></td>
       </tr>
       <tr>
         <td width="138" align="right" valign="top" style="padding-right:5%;">Semi-D</td>
       </tr>
       
    </table>
    </marquee>
    </div><!--textscroll-->
    </div><!--menu-->
    
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles