How Do I Convert This To Div Based Layout?

[Ingolme]

Hi Ingolme, Could you please show us an example of "Semantic Elements"? I removed most of the "inline styles" before submitting it to them. Yup! Among the mistakes in the page which I had sent them, even they saw some <div> elements without any content in them at all and pointed-out to me. Shortly I will list-out the list of mistakes in the page which they have pointed-out.

Writing semantic HTML means using the elements that best describe the content instead of using meaningless elements like <div> or <span>. For example, a list of links would use a list element, like <ul> (unordered list). A label for a form element would use the <label> element. The container of a set of form fields could be the <fieldset> element.

<!-- Non-semantic --><div class="title">My Details</div><form action="...">  <div class="wrapper">	<div style="height:32px;">Name:</div>	<div style="height:32px;">Email:</div>	<div style="height:32px;">Password:</div> 	<div style="height:32px;"><input type="text" name="name" id="name" /></div>	<div style="height:32px;"><input type="text" name="email" id="email" /></div>	<div style="height:32px;"><input type="password" name="password" id="password" /></div>  </div></form> <!-- Semantic --><h3>My Details</h3><form action="...">  <fieldset id="basic-info">	<label>Name: <input type="text" name="name" id="name" /> </label>	<label> E-mail: <input type="text" name="email" id="email" /></label>	<label>Password: <input type="password" name="password" id="password" /></label>  </fieldset></form>

And a bit of CSS that could go with the semantic code:

#basic-info {  width: 180px;  border: 0;  margin: 0;  padding: 0 10px;}#basic-info label {  height: 32px;  line-height: 32px;  display: block;}

[amitamberker]

Writing semantic HTML means using the elements that best describe the content instead of using meaningless elements like <div> or <span>. For example, a list of links would use a list element, like <ul> (unordered list). A label for a form element would use the <label> element. The container of a set of form fields could be the <fieldset> element.

<!-- Non-semantic --><div class="title">My Details</div><form action="...">  <div class="wrapper">	<div style="height:32px;">Name:</div>	<div style="height:32px;">Email:</div>	<div style="height:32px;">Password:</div> 	<div style="height:32px;"><input type="text" name="name" id="name" /></div>	<div style="height:32px;"><input type="text" name="email" id="email" /></div>	<div style="height:32px;"><input type="password" name="password" id="password" /></div>  </div></form> <!-- Semantic --><h3>My Details</h3><form action="...">  <fieldset id="basic-info">	<label>Name: <input type="text" name="name" id="name" /> </label>	<label> E-mail: <input type="text" name="email" id="email" /></label>	<label>Password: <input type="password" name="password" id="password" /></label>  </fieldset></form>

And a bit of CSS that could go with the semantic code:

#basic-info {  width: 180px;  border: 0;  margin: 0;  padding: 0 10px;}#basic-info label {  height: 32px;  line-height: 32px;  display: block;}

Hi Ingolme,Very Interesting!!!... Hummm... Hummm... Thank you for sharing and clarifying about semantic HTML (aka) Semantic Elements. I understood the basic meaning of "Semantic" now.

[amitamberker]

Hello Everyone, Alrighty, they have point-out 7 mistakes (typos) from my efforts. Here it goes: ONE:They said, the following CSS definitions was Un-optimized.

margin-top: 0px;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;

It should have been “margin:0;” instead. I have fixed it as:

body { margin: 0px;background-color: #999999;/* Unoptimised CSS Definitions. Should use margin:0; insteadmargin-top: 0px;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;*/ }

TWO:They said, the following CSS definitions was Un-optimized again.

font-family: Verdana;font-size: 12pt;font-weight: bold;

It should have been “font:Arial 12px bold;” instead in the body segment so that it is not repetitive in relevant class. But how is it possible? I mean, if I give bold and 12 px in body {......}, then the entire text in the Layout will become bold and 12 px? Kinda I am little bit confused with this feedback. THREE:They said, the following empty container DIV was not required. I should have controlled it from CSS instead of adding <div> </div> in HTML Code at relevant areas.

<body><div id="container"><div> </div><div class="LogoHeader">

So, which is the best way to control it from CSS? Currently I have added "padding-top:20px;" in div#container and removed <div> </div> from the code:

div#container { width: 980px; margin: 0 auto; background-color: #FFFFFF; border-left-style: groove; border-left-width: 2px; border-right-style: groove; border-right-width: 2px; border-right-color: #808080; border-left-color: #808080; /*height: 540px; --- (div#container does not see floated child elements within it. It will only surround the non-floated child elements. For the div#container to see the floated elements, we need to add overflow:hidden; instead of height: 540px;) */ overflow:hidden; padding-top:20px; /* Instead of <div> </div> Empty Container */} ~~~~~~~~~~~~~~~~~~~~~~~~ <body><div id="container"><!-- <div> </div> (No need of this) --><div class="LogoHeader">

FOUR:They said, the following Menu should have been controlled from ul and li.

<div class="MenuText"><a href="#">Home</a> | <a href="#">About Sapient</a> | <a href="#">Contact Us</a></div>

I tried controlling it from ul and li but seems I am doing something wrong?

<body><div id="container"><!-- <div> </div> (No need of this) --><div class="LogoHeader"> <img alt="" src="images/Logo_Header.png" width="95" height="33" /></div><!--<div class="MenuText"><a href="#">Home</a> | <a href="#">About Sapient</a> | <a href="#">Contact Us</a></div> --><div><ul id="???" class="???"><li><a href="#">Home</a></li><li><a href="#">About XXX</a></li><li><a href="#">Contact Us</a></li></ul></div><!--<div class="IconText"><img alt="Print" src="images/Print_Icon.png" width="15" height="16" class="img01" /><a href="#">Print</a><img alt="Share" src="images/Share_Icon.png" width="15" height="16" class="img02" /><a href="#">Share</a><img alt="RSS" src="images/RSS_Icon.png" width="15" height="16" class="img02" /><a href="#">RSS</a></div>--><div><ul id="???" class="???"><li><a href="#">Print</a></li><li><a href="#">Share</a></li><li><a href="#">RSS</a></li></ul></div> <div class="clearBoth"> </div>

FIVE:They said, the following should have been controlled from ul and li. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~<div>textarea name="TextArea1" cols="20" style="height: 90px;width:214px">Blah...Blah...Blah...Blah...Blah...Blah...Blah...Blah...Blah...Blah...Blah...Blah...</textarea></div>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ I have no idea how to do it. So, how do I create this using ul and li ? By the way I am unable to put the above <div>...</div> in Quote. I am getting an alert message as - "The number of opening quote tags does not match the number of closing quote tags." SIX:They said, the following Sub-Title should have been controlled from H1 tag.

<div class="AS">ABOUT XXX</div>

I have updated it as:

<div><h1>ABOUT XXX</h1></div> ---------------- h1 { font-family: Verdana; font-size: 12pt; font-weight: bold; text-align: left; height: 32px; vertical-align: middle; line-height: 30px; display:inline; }

SEVEN:They said, the following has No Form tag, No Labels and No flow in Data. It should have been Label and then the Field.~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~div class="wrapper">< div class="MDText">Name:</div>< div class="MDText">E-Mail:</div>< div class="MDText">Password:</div></div><div class="input">< div class="TextBoxHeight"><input type="text" name="name" id="name" /></div>< div class="TextBoxHeight"><input type="text" name="email" id="email" /></div><div class="TextBoxHeight"><input type="password" name="password" id="password"/></div></div>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

[dsonesuk]

you don't require unit 'px' at end, 0 is 0 for any unit, background-color: #999999; can be shorten to background-color: #999;

[amitamberker]

you don't require unit 'px' at end, 0 is 0 for any unit, background-color: #999999; can be shorten to background-color: #999;

Hi dsonesuk, I see. Okie Dokie, gotch you.

body { /* margin: 0px; - No need of unit 'px' at end. 0 is 0 for any unit */ margin: 0; /* background-color: #999999; - background-color: #999999; can be shorten to background-color: #999; */ background-color: #999; /* Unoptimised CSS Definitions. Should use margin:0; instead margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;*/ }

[amitamberker]

Looking forward to hear from someone...

[Ingolme]

What is your question?

[amitamberker]

What is your question?

Hi Ingolme,Please click the following link - http://w3schools.invisionzone.com/index.php?showtopic=41024&view=findpost&p=230863 Please see from ONE: to till SEVEN: ... My questions are in between 1 to 7 - (ONE: to SEVEN:)

[Ingolme]

I thought that was already properly explained. To optimize CSS, you use shorthand codes.

1. Margin sets all the values of margin-top, margin-right, margin-bottom and margin-left in one single statement.
2. Like margin, all font declarations can all be put into one statement as well.
3. Empty containers of any kind should not be necessary in your code. It's extra mark-up that can be avoided.
4. Semantic HTML, as I mentioned before. <div> has no semantic meaning. If you want a list of links, you use an unordered list (<ul>) with list items (<li>) in it. Each list item would contain a link.
5. If that textarea is part of a list of inputs, you should be using <ul> and <li> instead of <div>. As I said, <div> lacks any semantic meaning and should only be used if no other element suits the situation better.
6. <h1> to <h6> elements should be used as headers for sections of the page. Don't put them inside <div> elements, that's redundant. Just erase the <div> altogether.
7. I already showed you how to properly make a semantic HTML form using <form>, <label> and <fieldset> here: http://w3schools.invisionzone.com/index.php?showtopic=41024&view=findpost&p=230739

[amitamberker]

Hi Ingolme,

2.Like margin, all font declarations can all be put into one statement as well.

If I give bold and 12 px in body {......}, then the entire text in the Layout will become bold and 12 px?

3.Empty containers of any kind should not be necessary in your code. It's extra mark-up that can be avoided.

So, which is the best way to control it from CSS? Currently I have added "padding-top:20px;" in div#container and removed <div> </div> from the code:

div#container {width: 980px;margin: 0 auto;background-color: #FFFFFF;border-left-style: groove;border-left-width: 2px;border-right-style: groove;border-right-width: 2px;border-right-color: #808080;border-left-color: #808080;/*height: 540px; --- (div#container does not see floated child elements within it. It will only surround the non-floated child elements. For the div#container to see the floated elements, we need to add overflow:hidden; instead of height: 540px;) */overflow:hidden;padding-top:20px; /* Instead of <div> </div> Empty Container */} ------------------- <body><div id="container"><!-- <div> < /div> (No need of this) --><div class="LogoHeader">

[Ingolme]

It's unrelated, but styles applies to the body are inherited on the rest of the page. I was talking about the shorthand definition for fonts: http://w3schools.com/cssref/pr_font_font.asp You should also condense your border definitions.From this:

border-left-style: groove;border-left-width: 2px;border-right-style: groove;border-right-width: 2px;border-right-color: #808080;border-left-color: #808080;

To this:

border: groove #808080;border-width: 0 2px;

[amitamberker]

It's unrelated, but styles applies to the body are inherited on the rest of the page. I was talking about the shorthand definition for fonts: http://w3schools.com...r_font_font.asp You should also condense your border definitions.From this:

border-left-style: groove;border-left-width: 2px;border-right-style: groove;border-right-width: 2px;border-right-color: #808080;border-left-color: #808080;

To this:

border: groove #808080;border-width: 0 2px;

Hi Ingolme,Okie, gotch you. Thank you.