CSS HTML Template site Free

CSS_HTML_form

How to Wrap text around an Image on a website page Using CSS & HTML

I have Found this to be very useful when using images and content text together and have Included a small summary on the CSS FLOAT TAG so you can understand whats going on below is the free download.

Free website Template Complete Download



So You may think that HTML allows us to use the align attribute to get around this text and image issue and you would be correct to a degree, How ever this attribute is now deprecated, cast to the heap of redundant code but please don’t worry just now there is a way if you use the following Transitional Doctype you can get away with it. Below I have included all code HTML CSS

<!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">

If you use the strict doctype version you will have to learn CSS AND HTML together, However there is a css option. The css solution is very easy and it comes in the form of THE css FLOAT PROPERTY Style code below

CSS STYLE :float: left

Summary

By using the CSS float property you are effectively removing the floated element from the flow of the the document, So you are now floating the element with in the block level element that contains it, you can choose left, right,and center, Other
block elements will ignore the floated element as if it where not there, but other in-line elements such as content eg text
will render as if it was there, so this works great for this situation one thing we will need to be aware of is if you give
the floated element a border for instance you will see that the text element is sitting tight along side the border of the floated element this can be cured very simply with a margin-left attribute demonstrated below with code example

Example HTML With CSS Float tag float property

For the sake of this example I have included the CSS with the html normally I lke to call the CSS style sheets thru the
head with <link rel=”stylesheet” type=”text/css” href=”example.css” /> this reduces the code that google need to index the page loads faster as the file size is reduced two more very important reasons to do it

CSS STYLE :float: left

<!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>

<title>Wrap text around and image</title>

<meta http-equiv="content-type"

content="text/html; charset=iso-8859-1" />

<style type="text/css">

.leftimg {

float: left;

}

</style>

</head>

<body><h1>BLAH bLAH BLAH</h1>

<img src="image.jpg" width="319" height="255" alt="peppers" class="leftimg" />

<p>Bla, Bla, Bla, Bla, Blaa, Bla, Bla, Bla,Blaa, Bla, Bla, Bla,Blaa, Bla, Bla, Bla, Blaa, Bla, Bla, Bla, Blaa, Bla, Bla, Bla</p>

<p>Bla, Bla, Bla, Bla, Blaa, Bla, Bla, Bla,Blaa, Bla, Bla, Bla,Blaa, Bla, Bla, Bla, Blaa, Bla, Bla, Bla, Blaa, Bla, Bla, Bla</p>

<p>Bla, Bla, Bla, Bla, Blaa, Bla, Bla, Bla,Blaa, Bla, Bla, Bla,Blaa, Bla, Bla, Bla, Blaa, Bla, Bla, Bla, Blaa, Bla, Bla, Bla</p>

<p>Bla, Bla, Bla, Bla, Blaa, Bla, Bla, Bla,Blaa, Bla, Bla, Bla,Blaa, Bla, Bla, Bla, Blaa, Bla, Bla, Bla, Blaa, Bla, Bla, Bla</p>

<p>Bla, Bla, Bla, Bla, Blaa, Bla, Bla, Bla,Blaa, Bla, Bla, Bla,Blaa, Bla, Bla, Bla, Blaa, Bla, Bla, Bla, Blaa, Bla, Bla, Bla</p>

<p>Bla, Bla, Bla, Bla, Blaa, Bla, Bla, Bla,Blaa, Bla, Bla, Bla,Blaa, Bla, Bla, Bla, Blaa, Bla, Bla, Bla, Blaa, Bla, Bla, Bla</p>

</body>

</html>

Summary

By using the float property you are effectively removing the floated element from the flow of the the document,So you are now
floating the element with in the block level element that contains it, you can choose left, right,and center, Other
block elements will ignore the floated element as if it where not there, but other in-line elements such as content eg text
will render as if it was there, so this works great for this situation one thing we will need to be aware of is if you give
the floated element a border for instance you will see that the text element is sitting tight along side the border of the floated
element this can be cured very simply with a margin-left attribute demonstrated below with code example

Example CSS Float tag float property with padding

For the sake of this example I have included the CSS with the html normally I lke to call the CSS style sheets thru the
head with <link rel=”stylesheet” type=”text/css” href=”example.css” /> this reduces the code that google need to index the page
loads faster as the file size is reduced two very important reasons to do it

<!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>

<title>Wrap text around and image</title>

<meta http-equiv="content-type"

content="text/html; charset=iso-8859-1" />

<style type="text/css">

.leftimg {

float: left;

border: 2px solid #000000;

margin-right: 20px;

margin-bottom: 6px;

}

</style>

</head>

<body>

<h1>BLAH bLAH BLAH</h1>

<img src="image.jpg" width="319" height="255" alt="Float with margin" class="leftimg" />

<p>Bla, Bla, Bla, Bla, Blaa, Bla, Bla, Bla,Blaa, Bla, Bla, Bla,Blaa, Bla, Bla, Bla, Blaa, Bla, Bla, Bla, Blaa, Bla, Bla, Bla</p>

<p>Bla, Bla, Bla, Bla, Blaa, Bla, Bla, Bla,Blaa, Bla, Bla, Bla,Blaa, Bla, Bla, Bla, Blaa, Bla, Bla, Bla, Blaa, Bla, Bla, Bla</p>

<p>Bla, Bla, Bla, Bla, Blaa, Bla, Bla, Bla,Blaa, Bla, Bla, Bla,Blaa, Bla, Bla, Bla, Blaa, Bla, Bla, Bla, Blaa, Bla, Bla, Bla</p>

<p>Bla, Bla, Bla, Bla, Blaa, Bla, Bla, Bla,Blaa, Bla, Bla, Bla,Blaa, Bla, Bla, Bla, Blaa, Bla, Bla, Bla, Blaa, Bla, Bla, Bla</p>

<p>Bla, Bla, Bla, Bla, Blaa, Bla, Bla, Bla,Blaa, Bla, Bla, Bla,Blaa, Bla, Bla, Bla, Blaa, Bla, Bla, Bla, Blaa, Bla, Bla, Bla</p>

<p>Bla, Bla, Bla, Bla, Blaa, Bla, Bla, Bla,Blaa, Bla, Bla, Bla,Blaa, Bla, Bla, Bla, Blaa, Bla, Bla, Bla, Blaa, Bla, Bla, Bla</p>

</body>

</html>

>

Lets Wrap it up

OK so that’s A basic Idea of how to wrap text around and image so lets apply this to a web site situation
where the above is the content filler for a typical web page I have included some head optimization such as meta tags for
description and Key words etc as you will notice I have links to external scripts this is great way to use scripts and style sheets
it save the amount of code sitting in the head giving faster page load times and gives google a great look at you Content and
keywords sooner

Web design CSS template site

This Is a great template I have included the image wrapping code as well, you will see a small bit
of Java script this is to render the current time on the users machine in a display bar situated at the top of the page
beneath the header this is great for giving your site the feel that the content is current I have also added a Javascript
image slide show <a href=”http://sunflowerlodge.co.nz”>Example</a> this renders much better in IE as it crossfades into each
new image where as Mozilla renders it abruptly but still looks good as well you can be the Judge </p>

<!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>

<title>EXAMPLE SITE</title>

<meta http-equiv="content-type"content="text/html; charset=iso-8859-1" />

<meta http-equiv="Content-Language" content="en-us" />

<meta name="description" content="YOUR DESCRIPTION">

<meta name="keywords" content="YOUR KEYWORDS HERE">

<meta name="MSSmartTagsPreventParsing" content="true">

<meta name="ROBOTS" content="INDEX ALL">

<meta http-equiv="pragma" content="no-cache">

<meta name="distribution" content="Global">

<meta name="rating" content="Safe For Kids">

<meta name="author" content="Bill Bailey">

<link rel="stylesheet" type="text/css" href="css/example.css"/>

<script src="java/time_stamp.js" language="javascript"  type="text/javascript" ></script>

<link rel="shortcut icon" href="favicon.ico"/>

</head>

<body onload="runSlideShow();" id ="xxxxx_id">

<div id="contents">

<div id="header">

<h1>YOUR HEADER HERE</h1>

<!--<img src="images/slide_images/image1.jpg" width="187" height="29" alt="EXAMPLE PAGE" class="logo" name="SlideShow"/> --><div id="time_stamp" > <a>Todays Date|</a> <b><font color="#FF0000">

<script language="JavaScript" type="text/javascript">

document.write(TODAY);

</script>

</font></b>   |    <b><a href="#">JOIN MY MEMBERS

CLUB</a> Keep up to date with News letters</b> <br />

</div>

<div id="content">

<br />

<h1 align="center">Example Blah Blah Site</h1>

<img src="#.jpg" width="319" height="255" alt="Float left with margin" class="leftimg" />

<h2>Heading for Article</h2>

<p>Bla, Bla, Bla, Bla, Blaa, Bla, Bla, Bla,Blaa, Bla, Bla, Bla,Blaa, Bla,

Bla, Bla, Blaa, Bla, Bla, Bla, Blaa, Bla, Bla, Bla Bla, Bla, Bla, Bla, Blaa, Bla, Bla, Bla,Blaa, Bla, Bla, Bla,Blaa, Bla,

Bla, Bla, Blaa, Bla, Bla, Bla, Blaa, Bla, Bla, Bla Bla, Bla, Bla, Bla, Blaa, Bla, Bla, Bla,Blaa, Bla, Bla, Bla,Blaa, Bla,

Bla, Bla, Blaa, Bla, Bla, Bla, Blaa, Bla, Bla, Bla Bla, Bla, Bla, Bla, Blaa, Bla, Bla, Bla,Blaa, Bla, Bla, Bla,Blaa, Bla,

Bla, Bla, Blaa, Bla, Bla, Bla, Blaa, Bla, Bla, Bla Bla, Bla, Bla, Bla, Blaa, Bla, Bla, Bla,Blaa, Bla, Bla, Bla,Blaa, Bla,

Bla, Bla, Blaa, Bla, Bla, Bla, Blaa, Bla, Bla, Bla Bla, Bla, Bla, Bla, Blaa, Bla, Bla, Bla,Blaa, Bla, Bla, Bla,Blaa, Bla,

Bla, Bla, Blaa, Bla, Bla, Bla, Blaa, Bla, Bla, Bla Bla, Bla, Bla, Bla, Blaa, Bla, Bla, Bla,Blaa, Bla, Bla, Bla,Blaa, Bla,

Bla, Bla, Blaa, Bla, Bla, Bla, Blaa, Bla, Bla, Bla Bla, Bla, Bla, Bla, Blaa, Bla, Bla, Bla,Blaa, Bla, Bla, Bla,Blaa, Bla,

Bla, Bla, Blaa, Bla, Bla, Bla, Blaa, Bla, Bla, Bla Bla, Bla, Bla, Bla, Blaa, Bla, Bla, Bla,Blaa, Bla, Bla, Bla,Blaa, Bla,

Bla, Bla, Blaa, Bla, Bla, Bla, Blaa, Bla, Bla, Bla Bla, Bla, Bla, Bla, Blaa, Bla, Bla, Bla,Blaa, Bla, Bla, Bla,Blaa, Bla,

Bla, Bla, Blaa, Bla, Bla, Bla, Blaa, Bla, Bla, Bla Bla, Bla, Bla, Bla, Blaa, Bla, Bla, Bla,Blaa, Bla, Bla, Bla,Blaa, Bla,

Bla, Bla, Blaa, Bla, Bla, Bla, Blaa, Bla, Bla, Bla Bla, Bla, Bla, Bla, Blaa, Bla, Bla, Bla,Blaa, Bla, Bla, Bla,Blaa, Bla,

Bla, Bla, Blaa, Bla, Bla, Bla, Blaa, Bla, Bla, Bla</p>

<p>Bla, Bla, Bla, Bla, Blaa, Bla, Bla, Bla,Blaa, Bla, Bla, Bla,Blaa, Bla,

Bla, Bla, Blaa, Bla, Bla, Bla, Blaa, Bla, Bla, Bla Bla, Bla, Bla, Bla, Blaa, Bla, Bla, Bla,Blaa, Bla, Bla, Bla,Blaa, Bla,

Bla, Bla, Blaa, Bla, Bla, Bla, Blaa, Bla, Bla, Bla Bla, Bla, Bla, Bla, Blaa, Bla, Bla, Bla,Blaa, Bla, Bla, Bla,Blaa, Bla,

Bla, Bla, Blaa, Bla, Bla, Bla, Blaa, Bla, Bla, Bla Bla, Bla, Bla, Bla, Blaa, Bla, Bla, Bla,Blaa, Bla, Bla, Bla,Blaa, Bla,

Bla, Bla, Blaa, Bla, Bla, Bla, Blaa, Bla, Bla, Bla Bla, Bla, Bla, Bla, Blaa, Bla, Bla, Bla,Blaa, Bla, Bla, Bla,Blaa, Bla,

Bla, Bla, Blaa, Bla, Bla, Bla, Blaa, Bla, Bla, Bla Bla, Bla, Bla, Bla, Blaa, Bla, Bla, Bla,Blaa, Bla, Bla, Bla,Blaa, Bla,

Bla, Bla, Blaa, Bla, Bla, Bla, Blaa, Bla, Bla, Bla</p>

<p>Bla, Bla, Bla, Bla, Blaa, Bla, Bla, Bla,Blaa, Bla, Bla, Bla,Blaa, Bla,

Bla, Bla, Blaa, Bla, Bla, Bla, Blaa, Bla, Bla, Bla Bla, Bla, Bla, Bla, Blaa, Bla, Bla, Bla,Blaa, Bla, Bla, Bla,Blaa, Bla,

Bla, Bla, Blaa, Bla, Bla, Bla, Blaa, Bla, Bla, Bla Bla, Bla, Bla, Bla, Blaa, Bla, Bla, Bla,Blaa, Bla, Bla, Bla,Blaa, Bla,

Bla, Bla, Blaa, Bla, Bla, Bla, Blaa, Bla, Bla, Bla Bla, Bla, Bla, Bla, Blaa, Bla, Bla, Bla,Blaa, Bla, Bla, Bla,Blaa, Bla,

Bla, Bla, Blaa, Bla, Bla, Bla, Blaa, Bla, Bla, Bla Bla, Bla, Bla, Bla, Blaa, Bla, Bla, Bla,Blaa, Bla, Bla, Bla,Blaa, Bla,

Bla, Bla, Blaa, Bla, Bla, Bla, Blaa, Bla, Bla, Bla Bla, Bla, Bla, Bla, Blaa, Bla, Bla, Bla,Blaa, Bla, Bla, Bla,Blaa, Bla,

Bla, Bla, Blaa, Bla, Bla, Bla, Blaa, Bla, Bla, Bla</p>

<p>Bla, Bla, Bla, Bla, Blaa, Bla, Bla, Bla,Blaa, Bla, Bla, Bla,Blaa, Bla,

Bla, Bla, Blaa, Bla, Bla, Bla, Blaa, Bla, Bla, Bla Bla, Bla, Bla, Bla, Blaa, Bla, Bla, Bla,Blaa, Bla, Bla, Bla,Blaa, Bla,

Bla, Bla, Blaa, Bla, Bla, Bla, Blaa, Bla, Bla, Bla Bla, Bla, Bla, Bla, Blaa, Bla, Bla, Bla,Blaa, Bla, Bla, Bla,Blaa, Bla,

Bla, Bla, Blaa, Bla, Bla, Bla, Blaa, Bla, Bla, Bla Bla, Bla, Bla, Bla, Blaa, Bla, Bla, Bla,Blaa, Bla, Bla, Bla,Blaa, Bla,

Bla, Bla, Blaa, Bla, Bla, Bla, Blaa, Bla, Bla, Bla Bla, Bla, Bla, Bla, Blaa, Bla, Bla, Bla,Blaa, Bla, Bla, Bla,Blaa, Bla,

Bla, Bla, Blaa, Bla, Bla, Bla, Blaa, Bla, Bla, Bla Bla, Bla, Bla, Bla, Blaa, Bla, Bla, Bla,Blaa, Bla, Bla, Bla,Blaa, Bla,

Bla, Bla, Blaa, Bla, Bla, Bla, Blaa, Bla, Bla, Bla</p>

<p>Bla, Bla, Bla, Bla, Blaa, Bla, Bla, Bla,Blaa, Bla, Bla, Bla,Blaa, Bla,

Bla, Bla, Blaa, Bla, Bla, Bla, Blaa, Bla, Bla, Bla Bla, Bla, Bla, Bla, Blaa, Bla, Bla, Bla,Blaa, Bla, Bla, Bla,Blaa, Bla,

Bla, Bla, Blaa, Bla, Bla, Bla, Blaa, Bla, Bla, Bla Bla, Bla, Bla, Bla, Blaa, Bla, Bla, Bla,Blaa, Bla, Bla, Bla,Blaa, Bla,

Bla, Bla, Blaa, Bla, Bla, Bla, Blaa, Bla, Bla, Bla Bla, Bla, Bla, Bla, Blaa, Bla, Bla, Bla,Blaa, Bla, Bla, Bla,Blaa, Bla,

Bla, Bla, Blaa, Bla, Bla, Bla, Blaa, Bla, Bla, Bla Bla, Bla, Bla, Bla, Blaa, Bla, Bla, Bla,Blaa, Bla, Bla, Bla,Blaa, Bla,

Bla, Bla, Blaa, Bla, Bla, Bla, Blaa, Bla, Bla, Bla Bla, Bla, Bla, Bla, Blaa, Bla, Bla, Bla,Blaa, Bla, Bla, Bla,Blaa, Bla,

Bla, Bla, Blaa, Bla, Bla, Bla, Blaa, Bla, Bla, Bla</p>

</div>

<div id="clear"></div>

<div id="nav">

<h2>Search</h2>

<form method="post" action="">

<input type="text" name="textfield" class="txt" /><br />

<input type="submit" name="Submit" value="Submit" />

</form><br />

<h2>Latest News Links</h2>

<ul>

<li><a href="#">Example nav link</a></li>

<li><a href="#">Example nav link</a></li>

<li><a href="#">Example nav link</a></li>

<li><a href="#">About this site</a></li>

<li><a href="#">Contact Us</a></li>

</ul>

<h2>Latest News Links</h2>

<ul>

<li><a href="#">Example nav link</a></li>

<li><a href="#">Example nav link</a></li>

<li><a href="#">Example nav link</a></li>

<li><a href="#">Example nav link</a></li>

</ul>

<h2>Advertising</h2>

<ul>

<li><a href="#">Example nav link</a></li>

<li><a href="#">Example nav link</a></li>

<li><a href="#">Example nav link</a></li>

<li><a href="#">Example nav link</a></li>

</ul>

</div>

<div id="footer">

<p>Copyright © 2007 - 2008 EXAMPLE SITE</p>

</div>

</div>

</body>

</html>

CSS code for web site Template

Below is the code for the CSS I will give YOU the zipped folder with all the correct Folder structures files and
scripts use this as you like its great how it is or if you want to muck aroud with this be my guest if you make improvements
post them back here

<style>/*I try to make some sense out of my style lables MEANING they should make sense as inlogo means logo so hopefully you can understand how this is called to duty thru the HTML*/

body {

margin: 0;

padding: 0;

background-color:#cccccc;

color: #000000;

font-family: Arial, Helvetica, sans-serif;

}

/* this is a hack to set the page to always be the length of the browser page no matter how much content

is on that page this sets the footer to show at the browser bottom */

html, body, #contents {

min-height: 100%;

width: 100%;

height: 100%;

}

html>body, html>body #contents {

height: auto;

}

/*contents wrapper this creates a wrapper around all CSS boxes and helps with the footer*/

#contents {

position: absolute;

top: 0;

left: 0;

}

/*header control*/

#header {

background-color:orange; /*this is not considered good so try not to make a habbit of it*/

border-top: 1px solid #778899;

border-bottom: 1px dotted #B2BCC6;

height: 3em;

}

/*Header image control*/

#header .logo {

float: left;

margin-left: 1.5em;

margin-top: 0.5em;

}

/* this controls the position of the time stamp and color of the text and box*/

#time_stamp {

color:#000000;

background-color:#00CCFF;

position: relative;

float: auto;

margin-top: -15px;

border-top: 1px solid #778899;

border-bottom: 1px dotted #B2BCC6;

padding-top:4px ;

height:1.5em

}

/*this controls the text befor the time stamp*/

#time_stamp a {

font: 110% Georgia, "Times New Roman", Times, serif;

color: #fff;

margin-left: 1.3em;

padding:5px 5px 5px 5px;

}

/*the navigation bar you can go crazy with this be brave but save everything first*/

#nav {

position: absolute;

top: 5em;

left: 1em;

width: 14em;

}

/* Navigation unordered list control*/

#nav ul {

list-style: none;

margin-left: 1em;

padding-left: 0;

}

/*Navigation list item control*/

#nav li {

font-size: 80%;

border-bottom: 1px dotted #B2BCC6;

margin-bottom: 0.3em;

}

/*Navigation link control*/

#nav a:link, #nav a:visited {

text-decoration: none;

color: #2A4F6F;

background-color: transparent;

}

/*Navigation list item rollover control*/

#nav a:hover {

color: #778899;

}

/*Navigation list header h2 control*/

#nav h2 {

font: 110% Georgia, "Times New Roman", Times, serif;

color: #2A4F6F;

background-color: transparent;

border-bottom: 1px dotted #cccccc;

}

/*THE MAIN BODY OF CONTENT CONTROL*/

#content {

background-color: #ffffff;

margin-top:-15px;

margin-left: 16em;

margin-bottom:35px;

}

h1 {

padding-left:15px;

font: 150% Georgia, "Times New Roman", Times, serif;

}

#content p {

font-size: 80%;

line-height: 1.6em;

padding-left: 1.2em;

padding-right: 1.2em;

padding-bottom: 1em;

}

.leftimg {

float: left;

border: 2px solid #000000;

margin-left: 15px;

margin-right: 20px;

margin-bottom: 6px;

}

/*Footer control do I need to say more*/

#footer {

position: absolute;

width: 100%;

border-top: 1px dotted #AAAAAA;

background-color: #000000;

color: #626262;

font-size: 70%;

}

#footer p {

margin: 0.5em 0 1em 2em;

padding: 0;

}

</style>

Here is that Web site template I promised

Ok, I will get back to you real soon with the Zip file Hope this was useful I find with CSS its better to get going with it and Learn as you go, Mozilla has an amazing webdeveloper plug in that allows you to make changes while using the browser down Load it its worth it!

Free website Template Complete Download

Free website Template

Leave a Reply