Image on the left : Image « CSS Controls « HTML / CSS

Home
HTML / CSS
1.CSS
2.CSS Controls
3.Form
4.IE Firefox
5.Layout
6.Marquee Attributes
7.Meta Tags
8.Microsoft Attributes
9.Object
10.Reference
11.Style Basics
12.Tags
13.Templates
14.XML
HTML / CSS » CSS Controls » Image 




Image on the left
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Free css template 056</title>
<style type='text/css'>
@charset "utf-8";
body  {
  font-family:Arial, Helvetica, sans-serif;
  font-size:12px;
  background: #101415;
  margin: 0/* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
  padding: 0;
  color: #000000;
}
h1 {
  color:#84be19;
}
#container 
  width: 900px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
  background: #FFFFFF;
  margin: auto; /* the auto margins (in conjunction with a width) center the page */

#header 
  background: #DDDDDD;
  width: 900px;
  height: 316px;
}
#header .headerBackground {
  width:900px;
  height:270px;
  background:url(056-images/headerBackground.jpgno-repeat left top;

#header h1 {
  margin: 0/* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
  padding: 200px 40px 0 0/* using padding instead of margin will allow you to keep the element away from the edges of the div */
  color:#FFFFFF;
  text-align:right;
  font-size:30px;
}
#sidebar1 {
  float: right; /* since this element is floated, a width must be given */
  width: 200px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
  background: #ffffff; /* the background color will be displayed for the length of the content in the column, but no further */
  margin:20px 40px 20px 0;
}
#sidebar1 a, #mainContent a {
  color:#84be19;
  font-weight: bold;
}
#mainContent 
  margin: 20px 280px 20px 40px; /* the right margin on this div element creates the column down the right side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */

.productPic {
  float:left;
  margin:0 20px 15px 0;
}
#footer 
  height:90px;
  background:url(056-images/footerBackground.jpgrepeat-x left top;
}
.rss {
  float:right;
  width:212px;
  margin:16px 0 0 20px;
}
#footer p {
  padding-top:28px;
  margin:0 240px 0 0;
  text-align:center;

.footerLink  {
  color:#292b25;
  text-decoration:underline;
}
.clearfloat /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
  clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
/*begin main menu*/
#navcontainer {
  margin:auto 0;
  width:900px;
  text-align:center;
}
#navcontainer ul {
  padding: 0;
  margin: auto 0;
  background: url(056-images/menuBackground.gifrepeat-x left top;
  float: left;
  width: 100%;
}
#navcontainer ul li 
  display: inline;
}
#navcontainer ul li a {
  color: #626161;
  text-decoration: none;
  float: left;
  border-right: 1px solid #fff;
  font-size:18px;
  padding:11px 30px;
}
#navcontainer ul li a:hover {
  background: url(056-images/menuBackgroundActive.gifrepeat-x left top;
  color: #fff;
}
#navcontainer ul li #current {
  background: url(056-images/menuBackgroundActive.gifrepeat-x left top;
  color: #fff;
}
/*end main menu*/
/* begin border corners*/
.t {background: #ffffff url(056-images/dot.gif0 0 repeat-x;}
.b {background:url(056-images/dot.gif0 100% repeat-x}
.l {background:url(056-images/dot.gif0 0 repeat-y}
.r {background:url(056-images/dot.gif100repeat-y}
.bl {background:url(056-images/bl.gif0 100% no-repeat}
.br {background:url(056-images/br.gif100100% no-repeat}
.tl {background:url(056-images/tl.gif0 0 no-repeat}
.tr {background:url(056-images/tr.gif100no-repeat; padding:1px 20px
/* end border corners*/
/* begin news border corners*/
.n_t {background: #eeeeee url(056-images/n_dot.gif0 0 repeat-x;}
.n_b {background:url(056-images/n_dot.gif0 100% repeat-x}
.n_l {background:url(056-images/n_dot.gif0 0 repeat-y}
.n_r {background:url(056-images/n_dot.gif100repeat-y}
.n_bl {background:url(056-images/n_bl.gif0 100% no-repeat}
.n_br {background:url(056-images/n_br.gif100100% no-repeat}
.n_tl {background:url(056-images/n_tl.gif0 0 no-repeat}
.n_tr {background:url(056-images/n_tr.gif100no-repeat; padding:1px 20px
/* end news border corners*/


</style>


<!--[if IE 5]>
<style type="text/css"
/* place css box model fixes for IE 5* in this conditional comment */
#sidebar1 width: 220px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css"
/* place css fixes for all versions of IE in this conditional comment */
#mainContent zoom: 1}
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
</head>
<!--This template was created by www.flash-templates-today.com
Flash-Templates-Today.com - Gives a possibility to obtain a ready free flash template, free css template and other kind of website template!-->
<body>
<!-- begin #container -->
<div id="container">
    <!-- begin #header -->
    <div id="header">
      <div class="headerBackground"><h1>In the twilight of one's life</h1></div>
        <div id="navcontainer">
            <ul id="navlist">
                <li id="active"><a href="#" id="current">HOME</a></li>
                <li><a href="#">ABOUT</a></li>
                <li><a href="#">BLOG</a></li>
                <li><a href="#">GALLERY</a></li>
                <li><a href="#">CONTACT</a></li>
            </ul>
        </div>
    </div>
    <!-- end #header -->
    <!-- begin #sidebar1 -->
    <div id="sidebar1">
        <div class="n_t">
        <div class="n_b">
        <div class="n_l">
        <div class="n_r">
        <div class="n_bl">
        <div class="n_br">
        <div class="n_tl">
        <div class="n_tr">
            <h1>NEWS</h1>
            <p>
                <b>August 22009</b><br />
                Duis tempor posuere diam. Suspendisse vel tellus quis nunc malesuada porta.<br />
                <a href="">see more...</a>
            </p>
            <p>
                <b>August 12009</b><br />
                Tempus Duis tempor posuere diam. Suspendisse quis nunc malesuada porta.<br />
                <a href="">see more...</a>
            </p>
            <p>
                <b>July 282009</b><br />
                Duis tempor posuere diam. Suspendisse vel tellus quis nunc malesuada porta.<br />
                <a href="">see more...</a>
            </p>
        </div>
        </div>
        </div>
        </div>
        </div>
        </div>
        </div>
        </div>
        <br />
        <div class="t">
        <div class="b">
        <div class="l">
        <div class="r">
        <div class="bl">
        <div class="br">
        <div class="tl">
        <div class="tr">
            <h1>MESSAGES</h1>
            <p>
                <b>August 22009</b><br />
                I have just found the best flash templates. I\'ve been surfing the in the past but could find the ones like yours. They they are simple with magnificent interface and most of all free with the credit your way.<br /><br />
                This is incredible. I knew very little about website design and development. I\'m still learning through surfing and reading the webs tutorials on html and css and I\' still learning slowly. I hope I will have the time to learn more about developing Flash Websites from your site. I\'m quite new to all this so I\'m really enjoy learning about it.<br /><br />
                By the way I\'m from Solomon islands in the South Pacific if you haven\'t seen it on the map. Its just a tiny dot. Anyway thanks a lot for your site. its been really helpful for me. I will certainly download one template when I\'m comfortable with web development.
Have great time<br />
                Author: <b>Rolland Gito</b><br /><br />
                <a href="http://flash-templates-today.com/testimonials.php">see all testimonials...</a>
            </p>
        </div>
        </div>
        </div>
        </div>
        </div>
        </div>
        </div>
        </div>
    </div>
    <!-- end #sidebar1 -->
    <!-- begin #mainContent -->
    <div id="mainContent">
        <div class="t">
        <div class="b">
        <div class="l">
        <div class="r">
        <div class="bl">
        <div class="br">
        <div class="tl">
        <div class="tr">
            <h1>WELCOME TO HOME PAGE</h1>
            <p>
                <b>All website template is released under a Creative Commons Attribution 2.5 License</b><br /><br />
                We request you retain the full copyright notice below including the link to www.flash-templates-today.com. This not only gives respect to the large amount of time given freely by the developers but also helps build interest, traffic and use of our free and paid designs. If you cannot (for good reasonretain the full copyright we request you at least leave in place the Website Templates line, with Website Templates linked to www.flash-templates-today.com. If you refuse to include even this then support may be affected.<br /><br />
                <b>You are allowed to use this design only if you agree to the following conditions:</b><br />
        - You can not remove copyright notice from any our template without our permission.<br />
                If you modify any our template it still should contain copyright because it is based on our work.<br />
                - You may copy, distribute, modify, etc. any our template as long as link to our website remains untouched.<br /><br />
                <b>For support please visit <a href="http://www.flash-templates-today.com/contact.php">http://www.flash-templates-today.com/contact.php</a></b>
            </p>
        </div>
        </div>
        </div>
        </div>
        </div>
        </div>
        </div>
        </div>
        <br />
        <div class="t">
        <div class="b">
        <div class="l">
        <div class="r">
        <div class="bl">
        <div class="br">
        <div class="tl">
        <div class="tr">
            <h1>Our Free Products</h1>
            <p>
                <a href="http://www.flash-templates-today.com/ftt_templates/free-flash-templates-as3/0005"><img src="056-images/0005.jpg" alt="" class="productPic" /></a>
                <b>Just try to find me</b><br /><br />Best animation, Best design, Best usability for you! Download and enjoy with our templates. You need just open .fla file and change images, content and sounds  - and you will get absolutely unique exiting flash site. Please read <a href="http://flash-templates-today.com/testimonials.php">what other customers this about us</a>. Don't forgot write your meaning about our work on <a href="http://flash-templates-today.com/contact.php">testimonials page</a>;)<br /><br />
                <a href="http://www.flash-templates-today.com/ftt_templates/free-flash-templates-as3/0005">Preview</a> | <a href="/cgi-bin/counters/unicounter.pl?name=fft_as3_0005&amp;trackip=0&amp;deliver=http://www.flash-templates-today.com/ftt_templates/free-flash-templates-as3/0005/0005.zip">Download</a>
            </p><br />
            <p>
                <a href="http://www.flash-templates-today.com/ftt_templates/free-flash-templates-as3/0004"><img src="056-images/0004.jpg" alt="" class="productPic" /></a>
                <b>Meeting Place</b><br /><br />Everyone who like exciting animation can use this template. You can absolutely free to download and change content images and music files. Use Flash CS4 program from <a href="http://www.adobe.com">adobe.com</a> Everyone who like exciting animation can use this template. You can absolutely free to download and change content images and music files. Use Flash CS4 program from <a href="http://www.adobe.com">adobe.com</a><br /><br />
                <a href="http://www.flash-templates-today.com/ftt_templates/free-flash-templates-as3/0004">Preview</a> | <a href="/cgi-bin/counters/unicounter.pl?name=fft_as3_0004&amp;trackip=0&amp;deliver=http://www.flash-templates-today.com/ftt_templates/free-flash-templates-as3/0004/0004.zip">Download</a>
            </p><br />
            <p>
                <a href="http://www.flash-templates-today.com/ftt_templates/free-flash-templates-as3/0003"><img src="056-images/0003.jpg" alt="" class="productPic" /></a>
                <b>Skate Show</b><br /><br />Skate Show - flash template for extreme people! Very good animation and beauty design make this template unique and exciting. Skate Show - flash template for extreme people! Very good animation and beauty design make this template unique and exciting.<br /><br />
                <a href="http://www.flash-templates-today.com/ftt_templates/free-flash-templates-as3/0003">Preview</a> | <a href="/cgi-bin/counters/unicounter.pl?name=fft_as3_0003&amp;trackip=0&amp;deliver=http://www.flash-templates-today.com/ftt_templates/free-flash-templates-as3/0003/0003.zip">Download</a>
            </p>
        </div>
        </div>
        </div>
        </div>
        </div>
        </div>
        </div>
        </div>
    </div>
    <!-- end #mainContent -->
    <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
    <!-- begin #footer -->
    <div id="footer">
      <a href="http://flash-templates-today.com/blog/?feed=rss2" class="rss"><img src="056-images/rss.jpg" alt="" /></a>
        <p>
        In the twilight of one's life Copyright  August 2009 
        <a title="This page validates as XHTML 1.0 Strict" href="http://validator.w3.org/check/referer" class="footerLink"><abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> | 
        <a title="This page validates as CSS" href="http://jigsaw.w3.org/css-validator/check/referer" class="footerLink"><abbr title="Cascading Style Sheets">CSS</abbr></a><br/>
        Design by <a title="Free Flash Templates" href="http://www.flash-templates-today.com" class="footerLink">Free Flash Templates</a>
        </p>
    </div>
    <!-- end #footer -->
</div>
<!-- end #container -->
</body>
</html>

   
    
  














Related examples in the same category
1.Image wrap text
2.Image floating
3.Image as list icon
4.Using huge image as background
5.Image and text
6.Huge topic image
7.Image gallary inside the sidebar
8.Image centered design
9.Fill left and right side of the content with image pattern
10.Single column with Top image section
11.Anchor hover with image background
12.List with image background
13.Flowing text around an image
14.inline images
15.Adding shading and mask to a picture
16.Gallery Grid Demo
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.