I am a new for css and I am trying myself to working around from the template. I could change and edit something. But there are many things I wish to have on my page and I can't make it my own, Any one could help please
Preview of current site
http://www.bobbymart.com/screenshot.jpg
Preview of my dream site
http://www.bobbymart.com/future.jpg
Here is my HTML Code
Code:
<!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" lang="en">
<!-- Recommended XHTML-Editor: HTML-Kit 292 (Freeware) -->
<!-- http://www.chami.com/html-kit/download/ -->
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Your description goes here" />
<meta name="keywords" content="your,keywords,goes,here" />
<meta name="author" content="Your Name or Company / Template design: G. Wolfgang / June 8, 2006 / Email: gw@actamail.com / Check my favorite website: www.sda.org" />
<link rel="stylesheet" type="text/css" media="screen,projection" href="./css/style_screen.css" />
<link rel="stylesheet" type="text/css" media="print" href="./css/style_print.css" />
<script type="text/javascript" src="./js/matching_columns.js"></script>
<title>Travel Thailand Today</title>
</head>
<body>
<div class="page-container-1">
<!-- HEADER -->
<!-- Flag navigations -->
<div class="navflag-container">
<div class="navflag">
<ul>
<li><a href="#"><img class="img-navflag" src="./img/flag_uk.png" alt="" /></a></li>
<li><a href="#"><img class="img-navflag" src="./img/flag_germany.png" alt="" /></a></li>
<li><a href="#"><img class="img-navflag" src="./img/flag_sweden.png" alt="" /></a></li>
</ul>
</div>
</div>
<!-- Navigation Level 1 -->
<div class="nav1-container">
<div class="nav1">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Hotels</a></li>
<li><a href="#">Air Ticket</a></li>
<li><a href="#">Package Tour</a></li>
<li><a href="#">Car rent</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Sitemap</a></li>
</ul>
</div>
</div>
<!-- Sitename -->
<div class="site-name">
<p class="title"><a href="index.html">Travel Thailand Today</a></p>
<p class="subtitle"><a href="index.html">Amazing Thailand Travel Guide</a></p>
</div>
<!-- Site slogan -->
<div class="site-slogan-container">
<div class="site-slogan">
<p class="title">Ao Ton Sai And Koh Dalam</p>
<p class="subtitle">Ko Phi Phi, Thailand</p>
<p class="text">Serving the webcommunity<br />with XHTML/CSS designs</p>
<p class="readmore">››› <a href="#">Go to templates</a></p>
</div>
</div>
<!-- Header banner -->
<div><img class="img-header" src="./img/header.jpg" alt=""/></div>
<!-- Navigation Level 2 -->
<div class="nav2">
<ul>
<li><a href="index.html" class="selected">Blog</a></li>
<li><a href="layout2.html">Bangkok</a></li>
<li><a href="layout2.html">Pattaya</a></li>
<li><a href="layout3.html">Chiang Mai</a></li>
<li><a href="options_basic.html">Samui</a></li>
<li><a href="options_extra.html">Hua Hin</a></li>
<li><a href="options_basic.html">Krabi</a></li>
<li><a href="options_extra.html">Phang Nga</a></li>
<li><a href="options_extra.html">Phuket</a></li>
<li><a href="options_extra.html">Phi Phi Island</a></li>
</ul>
</div>
<!-- Buffer after header -->
<div class="buffer"></div>
<!-- NAVIGATION -->
<!-- Navigation Level 3 -->
<div class="nav3">
<ul>
<li class="title">Exotic Thailand</li>
<li class="group"><a href="#">Thailand Top Destination</a></li>
<li class="group"><a href="#">Group Link</a></li>
<li><a href="#">Sublink</a></li>
<li><a href="#" class="selected">Sublink</a></li>
<li class="group"><a href="#">Group Link</a></li>
</ul>
<ul>
<li class="title">Travel By Regions</li>
<li class="group"><a href="#">Northern Region</a></li>
<li class="group"><a href="#">Northeastern Region</a></li>
<li class="group"><a href="#">Central Region</a></li>
<li class="group"><a href="#">Eastern Region</a></li>
<li class="group"><a href="#">Southern Region</a></li>
</ul>
<ul>
<li class="title">Travel Tips</li>
<li class="group"><a href="#">Group Link</a></li>
<li class="group"><a href="#">Group Link</a></li>
</ul>
<ul>
<li class="title">Service</li>
<li class="group"><a href="#">Hotel & Resort</a></li>
<li class="group"><a href="#">Sightseeing</a></li>
<li class="group"><a href="#">Package Tour</a></li>
<li class="group"><a href="#">Car Rental</a></li>
<li class="group"><a href="#">Air Ticket</a></li>
<li class="group"><a href="#">Transport</a></li>
</ul>
<!-- Main title -->
<p class="sidebar-maintitle">My templates</p>
<!-- Textbox -->
<div class="sidebar-txtbox-noshade">
<p><b>GoFlexible</b><br />Released: 20.03.2006<br />
Not for operational use.</p>
<p><b>GoFlexible-2</b><br />Released: 10.04.2006<br />
Not for for operational use.</p>
<p><b>GoFlexiblePro/GoFlexPro</b><br />Released: 16.04.2006<br />
OK for operational use.</p>
<p><b>MultiFlex-1</b><br />Released: 01.05.2006<br />
<b class="txt-red10">GOOD</b> for operational use.</p>
<p><b>MultiFlex-1.1</b><br />Released: 15.05.2006<br />
<b class="txt-red10">BETTER</b> for operational use.</p>
<p><b>MultiFlex-2</b><br />Released: 15.05.2006<br />
<b class="txt-red10">BEST</b> for operational use.</p>
</div>
<!-- Main title -->
<p class="sidebar-maintitle">Advertisements</p>
<!-- Textbox -->
<div class="sidebar-txtbox-noshade">
<p align="left"><script type="text/javascript"><!--
google_ad_client = "pub-xxxxxxxxxxxxxxxx";
/* TTT Left 160x600, created 8/9/08 */
google_ad_slot = "xxxxxxxxxxxx";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></p>
</div>
</div>
<!-- CONTENT -->
<div class="content1">
<!-- Page title -->
<div class="content1-pagetitle">Welcome to Travel Thailand Today</div>
<!-- Text container -->
<div class="content1-container line-box">
<div class="content1-container-1col">
<p class="content-title-noshade-size3">Thailand Overview</p>
<p class="content-subtitle-noshade-size1">Experience freedom</p>
<div class="content-txtbox-noshade">
<p>MultiFlex-2 is an improvement of MultiFlex-1. Changes consist of: 1) More page layouts, 2) more title options, 3) better viewing on 800x600 screens, 4) more efficient code, 5) increased browser support, 6) better stylesheet for printing. The template has many options for layout, pictures, text, tables, and colors, and is suitable for personal, business and portal websites. Three basic page layouts exist, <a href="index.html">Layout 1</a>, <a href="layout2.html">Layout 2</a>, <a href="layout3.html">Layout 3</a>. Please check the <a href="options_basic.html">Basic Options</a> and <a href="options_extra.html">Extra Options</a> to discover the full potential.</p>
<p class="readmore">| 15.05.2006 | <a href="#">Read more</a> | <a href="#">Print</a> |</p>
</div>
</div>
</div>
<!-- Text container -->
<div class="content1-container line-box">
<div class="content1-container-2col-left">
<p class="content-title-noshade-size3">Code quality</p>
<p class="content-subtitle-noshade-size1">Solid and stable</p>
<div class="content-txtbox-noshade">
<p>MultiFlex-2 has a clean and stable code giving a firm foundation for current and future browsers. Use <a href="http://www.chami.com/html-kit/">HTML-Kit 292</a> and <a href="http://www.newsgator.com/NGOLProduct.aspx?ProdId=TopStyle&ProdView=lite">TopStyle Lite 3.10</a> freeware for easy editing.<br />
<br />
</p>
</div>
</div>
<div class="content1-container-2col-right">
<p class="content-title-noshade-size3">Browser support</p>
<p class="content-subtitle-noshade-size1">Tested for all platforms</p>
<div class="content-txtbox-noshade">
<p>Test passed at <a href="http://www.browsercam.com/">Browsercam</a> for:</p>
<p>MSIE 6.0 SP2, MSIE 7.0 Beta2, Firefox 1.0/1.5, Mozilla 1.6/1.7, Netscape 6.2.3/7.2/8.1, Opera 7.54/8.5.0/8.54, Konqueror 3.4.0, Camino 1.0, Safari 1.2/1.3/2.0.</p>
</div>
</div>
</div>
<!-- Text container -->
<div class="content1-container">
<div class="content1-container-3col-left">
<p class="content-title-noshade-size3">Lorem Ipsum</p>
<p class="content-subtitle-noshade-size1">Lorem Ipsum</p>
<div class="content-txtbox-noshade">
<p>Lorem ipsum dolor sit amet, adipiscing elit, sed diam nonummy nibh euismod.</p>
</div>
</div>
<div class="content1-container-3col-middle">
<p class="content-title-noshade-size3">Lorem Ipsum</p>
<p class="content-subtitle-noshade-size1">Lorem Ipsum</p>
<div class="content-txtbox-noshade">
<p>Lorem ipsum dolor sit amet, adipiscing elit, sed diam nonummy nibh euismod.</p>
</div>
</div>
<div class="content1-container-3col-right">
<p class="content-title-noshade-size3">Lorem Ipsum</p>
<p class="content-subtitle-noshade-size1">Lorem Ipsum</p>
<div class="content-txtbox-noshade">
<p>Lorem ipsum dolor sit amet, adipiscing elit, sed diam nonummy nibh euismod.</p>
</div>
</div>
</div>
<!-- Text container -->
<div class="content1-container">
<div class="content1-container-3col-left">
<p class="content-title-noshade-size3">Lorem Ipsum</p>
<p class="content-subtitle-noshade-size1">Lorem Ipsum</p>
<div class="content-txtbox-noshade">
<p>Lorem ipsum dolor sit amet, adipiscing elit, sed diam nonummy nibh euismod.</p>
</div>
</div>
<div class="content1-container-3col-middle">
<p class="content-title-noshade-size3">Lorem Ipsum</p>
<p class="content-subtitle-noshade-size1">Lorem Ipsum</p>
<div class="content-txtbox-noshade">
<p>Lorem ipsum dolor sit amet, adipiscing elit, sed diam nonummy nibh euismod.</p>
</div>
</div>
<div class="content1-container-3col-right">
<p class="content-title-noshade-size3">Lorem Ipsum</p>
<p class="content-subtitle-noshade-size1">Lorem Ipsum</p>
<div class="content-txtbox-noshade">
<p>Lorem ipsum dolor sit amet, adipiscing elit, sed diam nonummy nibh euismod.</p>
</div>
</div>
</div>
<!-- Text container -->
<div class="content1-container">
<div class="content1-container-3col-left">
<p class="content-title-noshade-size3">Lorem Ipsum</p>
<p class="content-subtitle-noshade-size1">Lorem Ipsum</p>
<div class="content-txtbox-noshade">
<p>Lorem ipsum dolor sit amet, adipiscing elit, sed diam nonummy nibh euismod.</p>
</div>
</div>
<div class="content1-container-3col-middle">
<p class="content-title-noshade-size3">Lorem Ipsum</p>
<p class="content-subtitle-noshade-size1">Lorem Ipsum</p>
<div class="content-txtbox-noshade">
<p>Lorem ipsum dolor sit amet, adipiscing elit, sed diam nonummy nibh euismod.</p>
</div>
</div>
<div class="content1-container-3col-right">
<p class="content-title-noshade-size3">Lorem Ipsum</p>
<p class="content-subtitle-noshade-size1">Lorem Ipsum</p>
<div class="content-txtbox-noshade">
<p>Lorem ipsum dolor sit amet, adipiscing elit, sed diam nonummy nibh euismod.</p>
</div>
</div>
</div>
</div>
<!-- SIDEBAR -->
<div class="sidebar">
<!-- Main Title -->
<p class="sidebar-maintitle">Infobar</p>
<!-- Textbox -->
<p class="sidebar-title-noshade">Check options!</p>
<div class="sidebar-txtbox-noshade">
<p>This page only shows the basics of MultiFlex-2. For more options, see <a href="options_basic.html">Basic Options</a> and <a href="options_extra.html">Extra Options</a>.</p>
</div>
<!-- Textbox -->
<p class="sidebar-title-noshade">It's free!</p>
<div class="sidebar-txtbox-noshade">
<p>Enjoy the template for free. Of course it would be nice if you keep author infos, but you can remove them if you prefer to do so.</p>
</div>
<!-- Textbox -->
<p class="sidebar-title-noshade">Questions?</p>
<div class="sidebar-txtbox-noshade">
<p>My name is Gerhard. If you have any questions about the template, just send me an email to <a href="mailto:gw@actamail.com">gw@actamail.com</a>. By the way, why not take a look at my <a href="http://www.sda.org">favorite website</a>.</p>
</div>
<!-- Textbox -->
<p class="sidebar-title-noshade">News and Links</p>
<div class="sidebar-txtbox-noshade">
<p>Use the left and right sidebars for news, events, links, ad banners, or other things.</p>
<p><b>»</b> <a href="#">Link A</a><br />
<b>»</b> <a href="#">Link B</a></p>
</div>
<!-- Main Title-->
<p class="sidebar-maintitle">Advertisements</p>
<!-- Textbox -->
<div class="sidebar-txtbox-noshade">
<p><script type="text/javascript"><!--
google_ad_client = "pub-xxxxxxxxxxxxxxxx";
/* TTT Right 160x600, created 8/9/08 */
google_ad_slot = "xxxxxxxxxx";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></p>
</div>
</div>
<!-- FOOTER -->
<div class="footer">
<p><b>Copyright © 2006 Your Company | All Rights Reserved</b></p>
<p>Design <a href="mailto:gw@actamail.com">G. Wolfgang</a> | <a href="http://validator.w3.org/check?uri=referer" title="Validate code as W3C XHTML 1.1 Strict Compliant">W3C XHTML 1.0</a> | <a href="http://jigsaw.w3.org/css-validator/" title="Validate Style Sheet as W3C CSS 2.0 Compliant">W3C CSS 2.0</a><br />
<!--This theme is free for distriubtion, so long as link to openwebdesing.org and florida-villa.com stay on the theme-->
Courtesy <a href="http://www.openwebdesign.org" target="_blank">Open Web Design</a><a href="http://www.dubaiapartments.biz" target="_blank"><img src="spacer.gif" width="5" height="5" border="0"/></a>Thanks to <a href="http://www.florida-villa.com" target="_blank">Florida Vacation Homes</a>
</p>
</div>
</div>
</body>
</html>
You can see my CSS Code is in attachment
Thank you very much for your kindly help
Mekthoop
