Hi,
Could anyone please tell me where to refer and how to create a html5 and css3 coding for it i mean a short description of tags to be used will be great helpful for me thank you.
There’s not a “short description” for that, I’m afraid. What code you have so far? Do you know HTML/CSS at all? What’s your starting point?
If you don’t know HTML/CSS at all, you are basically asking forum member to teach you web design. It would be better to get a book and learn the basics first. Of course, there are sites that lay out all the elements of HTML5 and CSS3, but are you sure you need them? (They aren’t supported properly in a lot of browsers yet anyway.) You can do that layout perfectly well with current HTML 4.01 and CSS2 (perhaps with a few CSS3 rounded corners as an easy option for the rounded corners in the design).
Hello can you please give me a rough idea of this layout like what are the tags used and one more doubt is i am planning to create seperatly the content sectio using html4 and css2 and then merge with html5 and css3 using there tags is this logic rite presently i am trying but if you could tell me how to deal with section it would be great help.
That’s great! Show us what you have so far so we can advise on the next step. 
HTML5 is nothing like HTML 4.01 so you cannot really convert the two they are trying to redefine page layout and document structure. So unless there is something seriously important you have to experiment with in HTML5 you won’t gain any benefit whatsoever over a normative language. Like the Admin Ralph said a code sample might help so we can see if you are using the correct FORM elements, etc.
dude just could you mail me similar problem coding relevent to jpeg i tryed using grid but it does not seem working tough any link would be very helpful.
once if you help me in tackling the problem in xhtml i can code it to html 5 then just a procedure how to handle a problem is enough my mind is just blank even after goin basic’s of html just how should i deal with this problem using xhtml will help me a lot i tried grid 960 but failed in it
[FONT=Verdana]
No, sorry, that’s not going to happen. The whole point of posting questions and replies in a forum like this is that it can benefit not only the person who first asked the question, but anybody else who comes along with a similar problem. That doesn’t work if you start asking for e-mails or PMs. Please keep the discussion here in the open.
You’re still not giving us very much to go on. What code did you try and in what way does it not work? If you can provide a link to the site under development, that would be the easiest way for us to see what you have so far and how to improve on it. If you can’t do that, then the next best thing is to post the full HTML and CSS that you’ve used, so we can see where any problems lie.
[/FONT]
Those things just make life harder, I think. If you know HTML basics, just code the page yourself. Start with the basic wrapper—easy. Then maybe the header, if you have one. Then add in the content area, with a div floated left, and another floated right for the sidebar. If you can’t at least get the basic layout started, our suggestions probably won’t be much help. It sounds like you’d be better off hiring someone, to be honest.
rose infomedia.html
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
<!------------ content --------------->
<section id="content"><div class="ic">More Website Templates @ TemplateMonster.com. December10, 2011!</div>
<div class="main">
<div class="container_12">
<div class="wrapper">
<article class="grid_8">
<h3>Welcome! Why Choose Us?</h3>
<em class="text-1 margin-bot">Consulting is one of <a class="link" target="_blank" href="http://blog.templatemonster.com/free-website-templates/">free website templates</a> created by TemplateMonster.com team. This website template is optimized for 1280X1024 screen resolution. It is also XHTML & CSS valid.</em>
<div class="wrapper p4">
<article class="grid_4 alpha">
<div class="wrapper p1">
<figure class="img-indent2"><img src="images/page1-img1.png" alt="" /></figure>
<div class="extra-wrap">
<div class="indent-top">
<h4>E-Buiseness Solutions </h4>
</div>
</div>
</div>
<p class="prev-indent-bot">This <a class="color-2" href="http://blog.templatemonster.com/2011/12/10/free-website-template-jquery-slider-consulting-business/" target="_blank" rel="nofollow">Consulting Template</a> goes with two<br> packages – with PSD source files and<br> without them.</p>
<a class="link-1" href="#">Know More</a>
</article>
<article class="grid_4 omega">
<div class="wrapper p1">
<figure class="img-indent2"><img src="images/page1-img2.png" alt="" /></figure>
<div class="extra-wrap">
<div class="indent-top">
<h4>Development<em>Strategies</em></h4>
</div>
</div>
</div>
<p class="prev-indent-bot">PSD source files of this Consulting Template<br> are available for free for the registered<br> members of TemplateMonster.com.</p>
<a class="link-1" href="#">Know More</a>
</article>
</div>
<div class="wrapper">
<article class="grid_4 alpha">
<div class="wrapper p1">
<figure class="img-indent2"><img src="images/page1-img3.png" alt="" /></figure>
<div class="extra-wrap">
<div class="indent-top">
<h4>Planning<em>Need Help?</em></h4>
</div>
</div>
</div>
<p class="prev-indent-bot">The basic package of this Consulting<br> Template (without PSD source) is available<br> for anyone without registration.</p>
<a class="link-1" href="#">Know More</a>
</article>
<article class="grid_4 omega">
<div class="wrapper p1">
<figure class="img-indent2"><img src="images/page1-img4.png" alt="" /></figure>
<div class="extra-wrap">
<div class="indent-top">
<h4>INTEGRATION<em>Exploit your ideas</em></h4>
</div>
</div>
</div>
<p class="prev-indent-bot">This template has several pages: <a class="color-2" href="index.html">Home</a>,<br> <a class="color-2" href="company.html">Company</a>, <a class="color-2" href="services.html">Services</a>, <a class="color-2" href="projects.html">Projects</a>, <a class="color-2" href="contact.html">Contacts</a> (note<br> that contact us form – doesn’t work).</p>
<a class="link-1" href="#">Know More</a>
</article>
</div>
</article>
<article class="grid_4">
<h3>Testimonials</h3>
<div class="wrapper p3">
<figure class="img-indent"><a href="#"><img class="img-border" src="images/page1-img5.jpg" alt="" /></a></figure>
<div class="extra-wrap">
<span class="text-2">Director</span>
<h4 class="p2">Mary Ryan</h4>
<p class="prev-indent-bot">Ut vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum atque corrupti...</p>
<a class="link-1" href="#">Read More</a>
</div>
</div>
<div class="wrapper p3">
<figure class="img-indent"><a href="#"><img class="img-border" src="images/page1-img6.jpg" alt="" /></a></figure>
<div class="extra-wrap">
<span class="text-2">Senior assistant</span>
<h4 class="p1">Bill Joel</h4>
<p class="prev-indent-bot">Ut vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum atque corrupti...</p>
<a class="link-1" href="#">Read More</a>
</div>
</div>
<div class="wrapper">
<figure class="img-indent"><a href="#"><img class="img-border" src="images/page1-img7.jpg" alt="" /></a></figure>
<div class="extra-wrap">
<span class="text-2">Junior researcher</span>
<h4 class="prev-indent-bot">Michael Anderson</h4>
<p class="prev-indent-bot">Ut vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum atque corrupti...</p>
<a class="link-1" href="#">Read More</a>
</div>
</div>
</article>
</div>
</div>
</div>
<div class="block"></div>
</section>
</div>
style.css
/* Getting the new tags to behave */
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {display:block}
mark, rp, rt, ruby, summary, time {display:inline}
/* Global properties ======================================================== */
html {width:100%}
body {font-family:Arial, Helvetica, sans-serif; font-size:100%; color:#333; min-width:960px; background:#f1f1f1}
.ic {border:0;float:right;background:#fff;color:#f00;width:50%;line-height:10px;font-size:10px;margin:-220% 0 0 0;overflow:hidden;padding:0}
.main {
width:960px;
padding:0;
margin:0 auto;
font-size:0.8125em;
line-height:1.3846em;
}
a {color:black; outline:none}
a:hover {text-decoration:none}
.wrapper {width:100%; overflow:hidden; position:relative}
.extra-wrap {overflow:hidden}
p {margin-bottom:18px}
.p1 {margin-bottom:8px}
.p2 {margin-bottom:15px}
.p3 {margin-bottom:30px}
.p4 {margin-bottom:40px}
.p5 {margin-bottom:50px}
.reg {text-transform:uppercase}
.fleft {float:left}
.fright {float:right}
.alignright {text-align:right}
.aligncenter {text-align:center}
.color-1 {color:#fff}
.color-2 {color:#333}
.color-3 {color:#39b9d6}
.img-border {border:1px solid #fff}
/*********************************boxes**********************************/
.indent {padding:20px}
.indent-top {padding-top:24px}
.indent-left {padding-left:2px}
.indent-left2 {padding-left:40px}
.indent-left3 {padding-left:20px}
.indent-left4 {padding-left:10px}
.indent-right {padding-right:150px}
.indent-bot {margin-bottom:20px}
.indent-bot2 {margin-bottom:28px}
.prev-indent-bot {margin-bottom:10px}
.img-indent-bot {margin-bottom:25px}
.margin-bot {margin-bottom:35px}
.img-indent {float:left; margin:0 20px 0px 0}
.img-indent2 {float:left; margin:0 15px 0px 0}
.img-indent3 {float:left; margin:0 6px 0px 0}
.buttons a:hover {cursor:pointer}
.menu li a,
.list-1 li a,
.list-2 li a,
.link,
.button,
h1 a {text-decoration:none}
/*********************************content*************************************/
#content {
width:100%;
border-top:1px solid #fff;
background:url(../images/content-tail.gif) center top repeat-x #f1f1f1;
padding:0;
position:relative;
z-index:1;
}
#page1 #content {border-top:none; background:grey; padding:43px 0 60px}
.content-bg {
width:100%;
padding:24px 0 49px;
background:url(../images/content-bg.jpg) center top no-repeat;
}
h3 {
font-size:26px;
line-height:2em;
color:#333;
margin-bottom:3px;
}
h4 {
font-size:17px;
line-height:1.2em;
color:#39b9d6;
text-transform:uppercase;
}
h4 strong {
display:block;
margin-top:-3px;
}
.text-1 {
display:block;
font-size:18px;
line-height:24px;
color:#999;
}
.text-2 {
display:block;
color:#929292;
}
.link-1 {
display:inline-block;
padding-right:15px;
}
dl span {float:left; width:88px}
grid.css
/*
Variable Grid System.
Learn more ~ http://www.spry-soft.com/grids/
Based on 960 Grid System - http://960.gs/
Licensed under GPL and MIT.
*/
/* Containers
----------------------------------------------------------------------------------------------------*/
.container_12 {
margin-left: auto;
margin-right: auto;
width: 960px;
}
/* Grid >> Global
----------------------------------------------------------------------------------------------------*/
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
display:inline;
float: left;
position: relative;
margin-left: 10px;
margin-right: 10px;
}
/* Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/
.alpha {
margin-left: 0;
}
.omega {
margin-right: 0;
}
/* Grid >> 12 Columns
----------------------------------------------------------------------------------------------------*/
.container_12 .grid_1 {
width:60px;
}
.container_12 .grid_2 {
width:140px;
}
.container_12 .grid_3 {
width:220px;
}
.container_12 .grid_4 {
width:300px;
}
.container_12 .grid_5 {
width:380px;
}
.container_12 .grid_6 {
width:460px;
}
.container_12 .grid_7 {
width:540px;
}
.container_12 .grid_8 {
width:620px;
}
.container_12 .grid_9 {
width:700px;
}
.container_12 .grid_10 {
width:780px;
}
.container_12 .grid_11 {
width:860px;
}
.container_12 .grid_12 {
width:940px;
}
/* Prefix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/
.container_12 .prefix_1 {
padding-left:80px;
}
.container_12 .prefix_2 {
padding-left:160px;
}
.container_12 .prefix_3 {
padding-left:240px;
}
.container_12 .prefix_4 {
padding-left:320px;
}
.container_12 .prefix_5 {
padding-left:400px;
}
.container_12 .prefix_6 {
padding-left:480px;
}
.container_12 .prefix_7 {
padding-left:560px;
}
.container_12 .prefix_8 {
padding-left:640px;
}
.container_12 .prefix_9 {
padding-left:720px;
}
.container_12 .prefix_10 {
padding-left:800px;
}
.container_12 .prefix_11 {
padding-left:880px;
}
/* Suffix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/
.container_12 .suffix_1 {
padding-right:80px;
}
.container_12 .suffix_2 {
padding-right:160px;
}
.container_12 .suffix_3 {
padding-right:240px;
}
.container_12 .suffix_4 {
padding-right:320px;
}
.container_12 .suffix_5 {
padding-right:400px;
}
.container_12 .suffix_6 {
padding-right:480px;
}
.container_12 .suffix_7 {
padding-right:560px;
}
.container_12 .suffix_8 {
padding-right:640px;
}
.container_12 .suffix_9 {
padding-right:720px;
}
.container_12 .suffix_10 {
padding-right:800px;
}
.container_12 .suffix_11 {
padding-right:880px;
}
/* Push Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/
.container_12 .push_1 {
left:80px;
}
.container_12 .push_2 {
left:160px;
}
.container_12 .push_3 {
left:240px;
}
.container_12 .push_4 {
left:320px;
}
.container_12 .push_5 {
left:400px;
}
.container_12 .push_6 {
left:480px;
}
.container_12 .push_7 {
left:560px;
}
.container_12 .push_8 {
left:640px;
}
.container_12 .push_9 {
left:720px;
}
.container_12 .push_10 {
left:800px;
}
.container_12 .push_11 {
left:880px;
}
/* Pull Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/
.container_12 .pull_1 {
left:-80px;
}
.container_12 .pull_2 {
left:-160px;
}
.container_12 .pull_3 {
left:-240px;
}
.container_12 .pull_4 {
left:-320px;
}
.container_12 .pull_5 {
left:-400px;
}
.container_12 .pull_6 {
left:-480px;
}
.container_12 .pull_7 {
left:-560px;
}
.container_12 .pull_8 {
left:-640px;
}
.container_12 .pull_9 {
left:-720px;
}
.container_12 .pull_10 {
left:-800px;
}
.container_12 .pull_11 {
left:-880px;
}
/* Clear Floated Elements
----------------------------------------------------------------------------------------------------*/
/* http://sonspring.com/journal/clearing-floats */
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */
.clearfix:after {
clear: both;
content: ' ';
display: block;
font-size: 0;
line-height: 0;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
this is the code i fetched from template i want same to be implemented to my to jpeg is it possible i am on my way off coding it any help would be greater.
OK, that’s the template you downloaded and it looks to be a pretty similar layout to the one you’re trying to achieve. How have you attempted to modify it? What specific problems do you have? As ralph.m said, it’s probably easier to code your own page from scratch, but if you really want to adapt this template, that’s up to you. We’re more than happy to help you sort out your problems with your code, but you do need to show us what you’ve done so far, so that we can work from there.
i tried to give background grid alpha and omega but nothing seems to work presently am trying in html4 onside but if you help me it would be great once i get through in this field i think it will be good to solve myself nothing seems to work with this code so i decded to solve using my own method from scratch but it would be very helpful if you help me in solving this problem and even i can help others beacuse i will come to know a grid system which would be very helpful for me.
Please don’t use adjacent hyphens within the HTML comment delimiters:
It can do strange things to browser rendering; so don’t use any extra – within any normal standard <!-- Comment –>
Since asked of me to look at that image regarding markup; there is a main heading, paragraph then four sub heading(s); four unordered lists, several hyperlinks; a heading and form (including form controls and labels). Then another heading and two block quotations that pretty much covers the majority of markup you need if you chose HTML 4.01. I don’t work with grid systems or non normative markup. But that’s probably what I would have loosely considered doing with the markup semantics only (not considering extra CSS styling wrappers, etc.).
hello admin so far i have come to this point now could please help me in providng little detail how to deal with those boxes and contact form section and mainly a single line over there please. 
I am not the Admin; the ‘temporary’ SPF Admin is: Ralph the Mighty @ralph.m ; so perhaps if you ask him nicely he’ll help you with the CSS layout?
Your latest markup example is abusing TABLE elements for layout, which is not at all very good semantically since there isn’t any data table to be found on that image. Neither can you have those right angle brackets: “>>” within markup it wouldn’t validate: http://validator.w3.org/
Those listed items are more likely to be an UL rather than a paragraph:
<!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>
<style type="text/css">
<!--
ul {
list-style-type: none;
padding: 0;
}
ul li:before {
content: ">> ";
}
-->
</style>
<title>
Example
</title>
</head>
<body>
<div>
<h3>
E Business Solutions
</h3>
<ul>
<li>foo
</li>
<li>bar
</li>
</ul>
<p>
<a href="#">More..</a>
</p>
</div>
</body>
</html>
The contact form should have the relevant FORM controls and labels so it functions as a form; it isn’t a collection of P (paragraphs) it should actually function. Loosely it should contain; FORM, LEGEND, FIELDSET, LABEL and INPUT elements. Obviously below is an extremely crude example.
<div>
<h3>
Contact US
</h3>
<form action="form-to-email.php" method="post">
<fieldset>
<legend>Enter your Contact Details:</legend>
<label for="txtname">NAME:</label> <input type="text"
id="txtname" /><br />
<label for="txtemail">EMAIL:</label> <input type="text"
id="txtemail" /><br />
<label for="txtComment">COMMENT:</label>
<textarea id="txtComment" rows="10" cols="80"></textarea><br />
<input type="submit" id="cmdSubmit" value="Submit" />
<input type="reset" id="cmdReset" value=
"Reset" /><br />
</fieldset>
</form>
</div>
The “Recent Comments” are in reality BLOCKQUOTE and should be treated as such, for example:
<div>
<h3>
RECENT COMMENTS
</h3>
<blockquote>
<p>
"I killed mothers with their babies. I've killed great
philosophers, proud young warriors, and
revolutionaries. I've killed the evil, the good, the
intelligent, the weak, and the beautiful. I have done
this in the service of His Divine Shadow and his
predecessors, and I have never once shown any mercy."
</p>
<p>
- [Kai, Last of the Brunnen-G]
</p>
</blockquote>
</div>
That should give you a very loose idea of how you would approach the markup semantics obviously the examples I have given aren’t exactly what you are after. Though it will give you a starting point. Without the proper markup usage there isn’t much point in skipping to the CSS positioning, you should get the markup sorted first so you have a solid foundation to apply the CSS this is how a true master would work.
As xhtmlcoder says, using a table for layout is not the way to go about things, and hasn’t been for many years now.
ralph.m gave you the basics for your layout in post #9. Start with something like this:
<div id="wrapper">
<div id="main-content">
<h1>Welcome! Why Choose us?</h1>
<p>At RoseInfomedia we convert your concept into a brilliant website. When companies world-wide need a unique and original website they turn to us. Whether you want to create a lasting impression for your brand, or increase leads and sales, our team has the creativity, technology, and marketing.</p>
<div class="category"><!-- E-business solutions content goes here --></div>
<div class="category"><!-- Technology content goes here --></div>
<div class="category"><!-- Products content goes here --></div>
<div class="category"><!-- IT Support Solutions content goes here --></div>
</div>
<div id="sidebar">Contact Us form, etc.</div>
</div>
#main-content {width: 60%; float: left;}
#sidebar {width: 30%; float: right; }
.category {width: 48%; float: left;}
hi following jpeg is the layout i require
rose infomedia contain top and header part coded in html5 and css3
rose content contains code for content section in html4 and css
please can anyone could help me in solving the layout within monday it would be great help.
You can use the same kind of layout outline I provided - it’s equally valid in HTML4 and HTML5. There seems to me to be no point in starting a layout in HTML5, which is so recent that the specs are still incomplete, and then using a table layout in the middle of it that’s ten years out of date.
HTML5 probably isn’t even going to be a full recommendation and supported in all mainstream browsers until around 2020, which be years away… by which time they’ll be revisions; 5.1, 5.2, etc. and several other major changes.
Currently no browser fully supports it; the Search Engines don’t utilise it; most Assistive Technologies mainly ignore it, and legacy browsers cannot cope with it. Whoever wrote the header was mostly wasting their time with non normative markup (they might as well have applied “divitis” instead) and JS polyfills that don’t work if JavaScript is disabled.
You cannot sensibly get enough control with abusing TABLE elements anyway for that design best you scrap the idea of using TABLE for layout it’s not really viable. Neither can you get the CSS layout until the markup structure is in good order. The Bear more-or-less created the main content layout structure in post: #16.
hi could you help me in solving by tommorrow
first is jpeg of layout
second one top and header section
content and footer section is in last one which is still under coding.