Thursday, June 9, 2011

html using div

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" style="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>KCC Malls</title>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>
<body>
<div align="center">
  <div id="wrapper" align="left">
    <div id="logo">
      <img src="images/Logo.png"/>
    </div><!-- logo -->
    <div id="hr">
      <img src="images/hr.jpg"/>
    </div><!-- hr -->
    <div id="menu">
      <div id="home">
        <a title="Home" alt="Home" href="#">Home</a>
      </div><!-- home -->
      <div id="bar">
        <img src="images/bar.jpg">
      </div><!-- bar -->
      <div id="about">
          <a title="About Us" alt="About Us" href="#">About Us</a>
      </div><!-- about -->
      <div id="bar">
        <img src="images/bar.jpg">
      </div><!-- bar -->
      <div id="careers">
        <a title="Careers" alt="Careers" href="#">Careers</a>
      </div><!-- contact -->
      <div id="bar">
        <img src="images/bar.jpg">
      </div><!-- contact -->
      <div id="contact">
        <a title="Contact Us" alt="Contact Us" href="#">Contact Us</a>
      </div><!-- contact -->
    </div><!-- menu -->
    <div id="facebooklogo">
      <a target="_blank" href="http://www.facebook.com/KCC.Malls">
        <img src="images/facebook.gif">
      </a>
    </div><!-- facebooklogo -->
    <div id="facebooktext">
      <span class="styleFb">Like our Facebook Page and get the latest news on events and job opportunities!</span>
    </div><!-- facebooktext -->
    <div id="clear"></div>
    <div id="banner">
      <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="778" height="275">
        <param name="movie" value="images/sum_rand.swf" />
        <param name="quality" value="high" />
        <param name="wmode" value="opaque" />
        <param name="swfversion" value="7.0.70.0" />
        <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
        <param name="expressinstall" value="Scripts/expressInstall.swf" />
        <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
        <!--[if !IE]>-->
        <object type="application/x-shockwave-flash" data="images/sum_rand.swf" width="778" height="275">
          <!--<![endif]-->
          <param name="quality" value="high" />
          <param name="wmode" value="opaque" />
          <param name="swfversion" value="7.0.70.0" />
          <param name="expressinstall" value="Scripts/expressInstall.swf" />
          <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
          <div>
            <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
            <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
          </div>
          <!--[if !IE]>-->
        </object>
        <!--<![endif]-->
      </object>
    </div><!-- banner -->
    <div id="submenu">
      <div id="cont1">
        <img src="images/cont1.png"/>
      </div><!-- cont1 -->
      <div id="cont2">
        <img src="images/cont2.png"/>
      </div><!-- cont2 -->
      <div id="cont3">
        <img src="images/cont3.png"/>
      </div><!-- cont3 -->
    </div><!-- submenu -->
    <div id="hr">
      <img src="images/hr.jpg"/>
    </div><!-- hr -->
    <div id="events">
      <div id="top-text">U P C O M I N G  E V E N T S</div><!-- top-text -->
      <div id="down-text">
        <ul>
         <li>PSBEA CONVENTION on June 1, 2011</li>
         <li>MS. SILKA 2011 CORONATION NIGHT on June 11, 2011</li>
         <li>KAPUSO MALL SHOW on June 12, 2011</li>
         <li>VHONG NAVARRO MALL SHOW on June 18, 2011 7PM</li>
        </ul>
      </div><!-- down-text -->
    </div><!-- events -->
    <div id="cinema">
      <img src="images/cinema.png"/>
    </div><!-- cinema -->
    <div id="bottoms">
        <a href="#">Home</a> | <a href="#">About Us</a> | <a href="#">Careers</a> | <a href="#">Contact Us</a>
        <br />© 2010 KCC Malls. All rights reserved. l Telephone no: +63 83 3012345
    </div><!-- bottoms -->
  </div><!-- wrapper -->
</div><!-- main -->
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>
</body>
</html>

style.css

@charset "utf-8";
/* CSS Document */
.styleFb{
    color: #25BCF4;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 10px;
    font-weight: bold;
}
a {
    text-decoration: none;
}
#clear{
    clear:both;
}
#wrapper{
    width:778px;
}
#logo{
    margin-left: 8px;
    margin-top: 18px;
    width: 375px;
    height: 75px;
}
#hr img{
    float: left;
    height: 2px;
    width: 778px;
}

#bar{
    float: left;
    margin-left: 25px;
    margin-top: 5px;
}
#menu{
    float: left;
    margin-top: 14px;
}
#menu a{
    color: #25BCF4;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 19px;
}
#menu a:hover{
    color:#0f10f6;
}
#home{
    float: left;
    margin-left: 5px;
}
#about{
    float: left;
    margin-left: 15px;
}
#careers{
    float: left;
    margin-left: 15px;
}
#contact{
    float: left;
    margin-left: 15px;
}
#facebooklogo{
    float: left;
    margin-left: 15px;
    margin-top: 5px;
}
#facebooktext{
    float: left;
    margin-left: 5px;
    margin-top: 8px;
    width: 180px;
}
#banner{
    margin-top: 10px;
    margin-bottom: 10px;
}
#submenu{
    float: left;
    width:778px;
    margin-bottom: 20px;
}
#cont1{
    float: left;
    margin-top: 10px;
    margin-left: 10px;
}
#cont2{
    float: left;
    margin-top: 10px;
    margin-left: 10px;
}
#cont3{
    float: left;
    margin-top: 10px;
    margin-left: 10px;
}
#top-text{
    font-size:24px;
    color:#214099;
    font-weight:bold;
}
#down-text{
    text-align:justify;
    width:533px;
    color:#214099;
    font-size:14px;
}
#bottoms{
    text-align:center;
    margin:32px 0px 0px 0px;

}

#bottoms a{
    text-decoration:none;
    color:#0000ff;
}
#bottoms a:hover{
    text-decoration:underline;
}

No comments:

Post a Comment