Jump to content

Html Code Versus Div Tag


amitamberker
 Share

Recommended Posts

Hi,Could you please help me to build the following HTML code in "<div></div>" tags?

<tr><td class="logo01"> </td><td class="logo02"> </td></tr>
For the following code:
<<tr><td class="header01" colspan="2"> </td></tr><tr><td class="bgbar" colspan="2"> </td></tr>
I made like this:
<div class="header01"></div><div class="bgbar"></div>
Link to comment
Share on other sites

As you've probably guessed, the HTML will probably end up pretty simple. What you are really asking about is probably the layout and appearance. We can't help you unless we know how you want the page to look: graphics, space, width, height, what's on the left side, what's on the right side, etc.And we can't just guess at a couple of divs in the middle of the document. We'll need to see how they work in context.Hint: the answer will probably involve some CSS.

Link to comment
Share on other sites

Hi Deirdre's Dad,Thanks for your response.The following are the Space, Width, Height, What's on the Left Side, What's on the Right Side and etc.

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Test</title><style type="text/css">.header01 { width: 800px; height: 11px; background-color: #d3c9b8;}.bgbar { height: 21px; width: 800px; background-color: #9B8560;}.bgbar-bottom { height: 19px; width: 800px; background-color: #181510;}.logo01 { height: 57px; width: 271px; background-color: #939393;}.logo02 { height: 57px; width: 529px; background-color: #464646;}.pic { height: 222px; width: 529px; background-color: #800000;}.pic02 { height: 46px; width: 271px; background-color: #464646;}.pic03 { height: 46px; width: 529px; background-color: #939393;}.pic04 { height: 200px; width: 123px; background-color: #000080;}.text { padding: 15px 5px 15px 15px; font-family: verdana; font-size: 10px; vertical-align: top; background-color: #d3c9b8;}.bg01 { height: 21px; width: 271px; background-color: #800000;}.bg02 { height: 21px; width: 529px; background-image: url('images/bg_02.jpg'); background-repeat: repeat-x; font-family: verdana; font-size: 9px; color: #3d3b3b; text-indent: 410px;}.bg03 { height: 200px; width: 17px; background-image: url('images/bg_03.jpg'); background-repeat: no-repeat;}</style></head><body style="margin-top:0px;margin-bottom:0px;background-color:#383123"><table style="width: 800px" cellspacing="0" cellpadding="0" align="center"> <tr> <td class="header01" colspan="2"> </td> </tr> <tr> <td class="bgbar" colspan="2"> </td> </tr> <tr> <td class="logo01"> </td> <td class="logo02"> </td> </tr> <tr> <td class="text">Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah...Blah... Blah... Blah... Blah... Blah...Blah... Blah...<br /> <br /> Blah... Blah... Blah...Blah... Blah... Blah... Blah... Blah...Blah... Blah... Blah... Blah... <br /> <br /> Blah...Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah...<br /> <br /> Blah... Blah... Blah... Blah... Blah...</td> <td class="pic"> </td> </tr> <tr> <td colspan="2" class="header01"> </td> </tr> <tr> <td class="pic02"> </td> <td class="pic03"> </td> </tr> <tr> <td colspan="2" class="header01"> <table style="width: 100%" cellspacing="0" cellpadding="0"> <tr> <td class="pic04"> </td> <td bgcolor="yellow" align="center">Blah... Blah... Blah...</td> <td bgcolor="red" align="center">Blah... Blah... Blah...</td> <td bgcolor="yellow" align="center">Blah... Blah... Blah...</td> <td class="bg03"> </td> </tr> </table> <tr> <td class="bg01"> </td> <td class="bg02">All Rights Reserved</td> </tr> <tr> <td class="bgbar-bottom" colspan="2"> </td> </tr> <tr> <td class="header01" colspan="2"> </td> </tr> </td> </tr></table></body></html>
I would like to make it just with "<div></div>" tags instead of Table TR and TD.
Link to comment
Share on other sites

Okay. A lot of stuff going on. So let's make sure we agree how it's supposed to look. This is a screen shot from my Firefox. Tell me where it's correct and where it's not:EDIT: image removed

Edited by Deirdre's Dad
Link to comment
Share on other sites

Hi Deirdre's Dad,Thanks for your response.

Okay. A lot of stuff going on. So let's make sure we agree how it's supposed to look. This is a screen shot from my Firefox. Tell me where it's correct and where it's not:
Yup! Lots of stuffs... The Screen Shot from your MZ Firefox looks correct... No Typos. But I would like to have "One More Column" on the 8th Row. I mean, just underneath the 7th Row which has 5 Columns into it. I mean, just next to "Reserved" and just underneath the 5th Column. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~<tr><td class="bg01"> </td><td class="bg02">All Rights Reserved</td>HERE… perhaps the "Class" could be as class="bg04"</tr>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~Deirdre's Dad, let’s proceed with 2 ROWs at a time and thus it would be easier for me to follow and understand you. There are totally 10 Rows.
Link to comment
Share on other sites

I decided to give you 4 rows, since the first two rows are incredibly easy to understand. The next two are trickier, since they use float and clear properties. If you get all this, you can probably finish this by yourself. If not, someone will be here. :)CSS

html, body {	margin: 0;	background-color: #383123;}p {	padding: 0;	margin: 0 0 1em 0;}div#container {	width: 800px;	margin: 0 auto;}div.header01 {	height: 21px;	background-color: #d3c9b8;}div.bgbar {	height: 21px;	background-color: #9B8560;}div.left {	clear: both;	float: left;	width: 271px;}div.right {	float: left;	width: 529px;}div#logo01 {	height: 57px;	background-color: #939393;}div#logo02 {	height: 57px;	background-color: #464646;}div#text {	padding: 15px 5px 15px 15px;	font-family: verdana;	font-size: 10px;	background-color: #d3c9b8;	height: 192px;	width: 251px;}div#pic {	height: 222px;	width: 529px;	background-color: #800000;}

HTML

<div id="container">	<div class="header01">		The original 11px height of this "row" was misleading.		 The &nbsp; character made it taller.</div>	<div class="bgbar"></div>	<div id="logo01" class="left"></div>	<div id="logo02" class="right"></div>	<div id="text" class="left">		<p>			Padding in the .text class required changes to the height and width.		</p>		<p>			Defining CSS for the  <p> elements lets us get rid of <br> elements.			Using multiple <br> elements to create space is wasteful and inaccurate.			Defining a bottom margin leads to predictable results.		</p>		<p>			I used relative units (em) for the margin, to make it the same height as			a line of text, but you could use px if you prefer.		</p>	</div>	<div id="pic" class="right">	</div></div>

Link to comment
Share on other sites

I decided to give you 4 rows, since the first two rows are incredibly easy to understand.
Okay Cool...
The original 11px height of this "row" was misleading. The &nbsp; character made it taller.
You mean this once?~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~<tr><td class="header01" colspan="2"> </td></tr>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~But then, I don't see a & character in the original...
Padding in the .text class required changes to the height and width.div#text { padding: 15px 5px 15px 15px; font-family: verdana; font-size: 10px; background-color: #d3c9b8; height: 192px; width: 251px;}
But why do I need to change the Height and Width in Padding? Any specific reason?
Defining CSS for the <p> elements lets us get rid of <br> elements. Using multiple <br> elements to create space is wasteful and inaccurate. Defining a bottom margin leads to predictable results.
Oh! hummm... Gotch you! But what does "Defining a bottom margin leads to predictable results." mean?
I used relative units (em) for the margin, to make it the same height as a line of text, but you could use px if you prefer.
Okay... Gotch you... Now let me try the 5th and 6th Line :) ... HOLD ON! Edited by creative1977
Link to comment
Share on other sites

Hi Deirdre's Dad,The 5th Line, 9th Line and 10th Line are not showing-up on my Browser. Could you please tell me why are they not showing-up?

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Deirdre's Dad</title><style type="text/css">body { margin: 0; background-color: #383123;}p { padding: 0; margin: 0 0 1em 0;}div#container { width: 800px; margin: 0 auto;}div.header01 { height: 21px; background-color: #d3c9b8;}div.bgbar { height: 21px; background-color: #9B8560;}div.left { clear: both; float: left; width: 271px;}div.right { float: left; width: 529px;}div#logo01 { height: 57px; background-color: #939393;}div#logo02 { height: 57px; background-color: #464646;}div#text { padding: 15px 5px 15px 15px; font-family: verdana; font-size: 10px; background-color: #d3c9b8; height: 192px; width: 251px;}div#pic { height: 222px; width: 529px; background-color: #800000;}/* My CSS Style */div#pic02 { height: 46px; width: 271px; background-color: #464646;}div.left-a { float: left;}div#pic03 { height: 46px; width: 529px; background-color: #939393;}div.right-a { float: right;}div#pic04 { height: 200px; width: 123px; background-color: #000080;}div#yellow { height: 200px; width: 220px; background-color: #FFFF00; font-family: verdana; font-size: 10px; text-align: center;}div#red { height: 200px; width: 220px; background-color: #FF0000; font-family: verdana; font-size: 10px; text-align: center;}div#fifth-column { background-color: #d3c9b8; height: 200px; width: 17px;}div#bg01 { height: 21px; width: 271px; background-color: #800000;}div#bg02 { height: 21px; width: 512px; font-family: verdana; font-size: 9px; color: #3d3b3b; text-indent: 411px; background-color: #d3c9b8;}div#third-column { background-color: #000000; height: 21px; width: 17px;}div.bgbar-bottom { height: 19px; width: 800px; background-color: #181510;}</style></head><body><div id="container"> <div class="header01"> The original 11px height of this "row" was misleading. The &nbsp; character made it taller.</div> <div class="bgbar"></div> <div id="logo01" class="left"></div> <div id="logo02" class="right"></div> <div id="text" class="left"> <p> Padding in the .text class required changes to the height and width. </p> <p> Defining CSS for the <p> elements lets us get rid of <br> elements. Using multiple <br> elements to create space is wasteful and inaccurate. Defining a bottom margin leads to predictable results. </p> <p> I used relative units (em) for the margin, to make it the same height as a line of text, but you could use px if you prefer. </p> </div> <div id="pic" class="right"></div> <div class="header01"> 5th Line</div> <div id="pic02" class="left">6th Line</div> <div id="pic03" class="right"></div> <div id="pic04" class="left-a">7th Line</div> <div id="yellow" class="left-a"> <p>Blah... Blah... Blah...</p> </div> <div id="red" class="left-a"> <p>Blah... Blah... Blah...</p> </div> <div id="yellow" class="left-a"> <p>Blah... Blah... Blah...</p> </div> <div id="fifth-column" class="right-a"></div> <div id="bg01" class="left-a">8th Line</div> <div id="bg02" class="left-a"> <p>All Rights Reserved</p> </div> <div id="third-column" class="right-a"></div> <div class="bgbar-bottom">9th Line</div> <div class="header01">10th Line</div> </div></body></html>
Link to comment
Share on other sites

Pretty close! I'm glad to see you're not an idiot. This has been a good learning experience for you. :)The problem hear is the float property. What it does it not obvious. When you assign it to Element X, the element that comes right after it will be floated next to it. Because we floated the items before the missing rows, we need to turn off the float. We use the clear property to do that. You'll notice we need that already for div.left. If we hadn't done that, row four would have a problem, because the elements in row 3 are floated. Of course the same problem affects row 5, so we need the same solution. Here is the most straight-forward:First, create a clear class:

div.clear {	clear: both;}

You could call it anything, but "clear" makes it obvious what it does. Now add it to the class attribute of the missing rows, like this:

<div class="header01 clear">

Notice the blank space between the classnames. That's important. Combining classes like this is a very powerful feature of CSS that a lot of people miss. It lets you cut down on a lot of redundancy.+++For the non-breaking space, I needed to print it like this ( &nbsp; ) so that you'd be able to see the ampersand when the entity was printed in your page. If I didn't, it would BE a nonbreaking space, and you might not see what I was talking about. Of course, I confused you anyway. :)Paragraph margins: When you use <br> elements to to create space between paragraphs, you never really know how much space you are adding. It depends on the font-family, the font size, and how much line-height the browser decides to give your text. So the result is a lot of guess work.I like things very precise, so I almost never use <br> elements. If I can, I put all text in a <p> element. I initially set the padding and margin to 0. Then, if I want space below the paragraph, I'll define it with the bottom margin. 1em means it will be as tall as one line of text, even if I decide later to change the font size. Or if I need to fit into a very specific space, I'll define it in pixels.

Edited by Deirdre's Dad
Link to comment
Share on other sites

Hi Deirdre's Dad!Hey, thanks a bunch for your Help, Guidance, Information and Clarification! I just did as per your comments and I can see the 5th, 9th and 10th Lines now. I shall send you a "Personal Message" to show you the Original Layout. Maybe sometime tomorrow.I would be glad if you could let me know your email ID and Skype ID.Again Thanks a LOT!

Edited by creative1977
Link to comment
Share on other sites

Hi Again Deirdre's Dad!Just an Hour Ago replied to your message. Read it above...Alrightyyy!!!... Now I am unable to see the 9th Row and 10th Row from the following updated CODE with a proper Graphics, proper ID Names and proper Class Names:

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>James</title><style type="text/css">body { margin: 0px; background-color: #383123;}p { padding: 0px; margin: 0px 0px 1em 0px;}div#container { margin: 0px auto 0px auto; width: 800px;}div.row1 { height: 21px; background-color: #d3c9b8;}div.row2 { background-image: url('images/bg_bar.jpg'); background-repeat: no-repeat; height: 21px;}div#row3 { background-image: url('images/logo01.jpg'); background-repeat: no-repeat; height: 57px;}div.left { width: 271px; float: left; clear: both;}div.left-a { float: left;}div#row3-a { height: 57px; background-image: url('images/logo02.jpg');}div.right { width: 529px; float: right;}div.right-a { float: right;}div#row4 { font-family: verdana; height: 222px; font-size: 10px; background-color: #d3c9b8; width: 271px;}div#row4-a { height: 222px; width: 529px; background-image: url('images/pic.jpg'); background-repeat: no-repeat;}div.row5 { height: 21px; background-color: #d3c9b8;}div#row6 { background-image: url('images/pic_02.jpg'); background-repeat: no-repeat; height: 46px;}div#row6-a { background-image: url('images/pic_03.jpg'); background-repeat: no-repeat; height: 46px;}div#row7 { background-repeat: no-repeat; background-image: url('images/pic_04.jpg'); width: 123px; height: 200px;}div#row7-a { background-color: #FFFFFF; font-family: verdana; font-size: 10px; height: 200px; width: 220px;}div#row7-b { background-image: url('images/bg_03.jpg'); background-repeat: no-repeat; width: 17px; height: 200px;}div#row8 { background-repeat: no-repeat; background-image: url('images/bg_01.jpg'); width: 271px; height: 21px;}div#row8-a { background-image: url('images/bg_02.jpg'); width: 512px; height: 21px; background-repeat: repeat-x; font-family: verdana; font-size: 10px; text-indent: 400px;}div#row8-b { background-color: #d3c9b8; width: 17px; height: 21px;}div#row9 { background-image: url('images/bg_bar_bottom.jpg'); background-repeat: no-repeat; height: 19px; width: 800px;}div#row10 { height: 21px; background-color: #d3c9b8;}</style></head><body><div id="container"><div class="row1"></div><div class="row2"></div><div id="row3" class="left"></div><div id="row3-a" class="right"></div><div id="row4" class="left"><p>Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah...Blah... Blah... Blah... Blah... Blah...Blah... Blah...</p><p>Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah...Blah... Blah... Blah... Blah... Blah...Blah... Blah...</p><p>Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah...Blah... Blah... Blah... Blah... Blah...Blah... Blah...</p><p>Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah...Blah... Blah... Blah... Blah... Blah...Blah... Blah...</p></div><div id="row4-a" class="right"></div><div class="row5"></div><div id="row6" class="left"></div><div id="row6-a" class="right"></div><div id="row7" class="left-a"></div><div id="row7-a" class="left-a"><p>Blah... Blah... Blah...</p></div><div id="row7-a" class="left-a"><p>Blah... Blah... Blah...</p></div><div id="row7-a" class="left-a"><p>Blah... Blah... Blah...</p></div><div id="row7-b" class="right-a"></div><div id="row8" class="left-a"></div><div id="row8-a" class="left-a"><p>All Rights Reserved</p></div><div id="row8-b" class="left-a"></div><div id="row9"></div><div id="row10"></div></div></body></html>
1. Why am I unable to see the 9th Row and 10th Row on the Browser? I did the 9th and 10th rows similar like rest of the thingys... Then why are 9th and 10th rows are acting-up and doing dramas?2. What is the difference between "div.xyz" versus "div#xyz"?3. What does a id="" and class="" do?
Link to comment
Share on other sites

They need that clear property, like I explained in my previous post.#selector means that selector is an id.Use an id selector when you want one element to have unique properties. (Also if there is only one element like it, so creating a class would be a waste.).selector means that identifier is a classname.Use a class selector when multiple elements share the same properties. Use combinations of these to cut down on repetitions in your CSS.Remember that id's must be unique. You have 3 elements withe id "row7-a". That will not work with CSS or JavaScript.These two pages explain most of that, and also element selectors:http://www.w3schools.com/css/css_syntax.asphttp://www.w3schools.com/css/css_id_class.asp

Edited by Deirdre's Dad
Link to comment
Share on other sites

Hi Deirdre's Dad!Here we goo...

They need that clear property, like I explained in my previous post.
Oh! Gotch you... HOLD ON, let me try......... YUP!!!... Now I am able to see the 9th Row and 10th Row. But kinda I am bit confused. Why do they need the "Clear Property"? I mean, like I said - I did the 9th and 10th rows similar like rest of the thingys... Then why were the 9th and 10th rows were doing dramas? Why does it needs a "Clear Property"?
#selector means that selector is an id.Use an id selector when you want one element to have unique properties. (Also if there is only one element like it, so creating a class would be a waste.selector means that identifier is a classname.Use a class selector when multiple elements share the same properties..)
I think I understood you what you mean. But however - Could you please explain still more on this? Perhaps with a story kind of example?
Use combinations of these to cut down on repetitions in your CSS.
I didn't get you? Could you please explain again?
Remember that id's must be unique. You have 3 elements withe id "row7-a". That will not work with CSS or JavaScript.
What?
These two pages explain most of that, and also element selectors:http://www.w3schools.com/css/css_syntax.asphttp://www.w3schools.com/css/css_id_class.asp
I would like to discuss with you instead of pulling and reading those two pages.
Link to comment
Share on other sites

The answers to all your questions are in the earlier posts and the pages I linked you to.
Okay - Gotch you. I shall read all the back and forth discussion again. But however - You made me CAPABLE and Skilled to Design a TableLess Website :) Thanks a lot Deirdre's Dad for your Support, Help and Guidance. Shortly I will make a New Post on "PHP". Please catch hold of me over there.Again thanks a lot!!!...
Link to comment
Share on other sites

The answers to all your questions are in the earlier posts and the pages I linked you to.
Hi Deirdre's Dad,Gotch the answers to all my questions. By the way, I am trying to align TEXT in Row 4 and then in Row 7. I have removed the padding: 15px 5px 15px 15px; from:div#row4 { font-family: verdana; height: 222px; font-size: 10px; background-color: #d3c9b8; width: 271px;} Edited by creative1977
Link to comment
Share on other sites

what are you using to try and align the text?
padding: 15px 5px 15px 15px;But then, the Width Area is growing longer and the Design Concept is doing DRAMAS and hence I deleted it from Class. The Width Area is "271 px" and the Height Area is "222 px". But guess what? Deirdre's Dad suggested something like this:
div#text { padding: 15px 5px 15px 15px; font-family: verdana; font-size: 10px; background-color: #d3c9b8; height: 192px; width: 251px;}~~~~~~~~~~~~~~~~~~~~~~~~ <p> Padding in the .text class required changes to the height and width. </p>
Link to comment
Share on other sites

padding is more for positioning content relative to its border (like for instance if you wanted some gutter space for text against the edge of a div). why not use text-align?http://www.w3schools.com/css/css_text.asp

Edited by thescientist
Link to comment
Share on other sites

padding is more for positioning content relative to its border (like for instance if you wanted some gutter space for text against the edge of a div).
Yup... I know... I know... But as I said, the div's width is growing longer and the Design Concept is doing DRAMAS and hence I deleted the padding from Class.
why not use text-align?
text-align??? WOW!... Hey, how can I use a text-align? I mean, the Center OR Justify OR Left OR Right would not make sense for my Designing Concept. Go and Check-Out Yourself:Here I my Class and Code:-pdiv#row4 { font-family: verdana; height: 222px; font-size: 10px; background-color: #d3c9b8; width: 271px;}ooO--------------------------------------------------Ooo<div id="row4" class="left"><p>Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah...Blah... Blah... Blah... Blah... Blah...Blah... Blah...</p><p>Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah...Blah... Blah... Blah... Blah... Blah...Blah... Blah...</p><p>Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah...Blah... Blah... Blah... Blah... Blah...Blah... Blah...</p><p>Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah...Blah... Blah... Blah... Blah... Blah...Blah... Blah...</p></div>
Link to comment
Share on other sites

the link i posted will tell you how to use text align.
thescientist,I have used "text align" so many times. I know HOW and WHERE to use it.
As far as flexible layouts are concerned, why not try using em or %'s?
I don't prefer em or %'s. Edited by creative1977
Link to comment
Share on other sites

Hi Deirdre's Dad,Hope you are doing well. Could you please help me to get the layout on the center of the page?

<html><head><META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW" /><title>Testing</title><style type="text/css">body {margin: 0px;}div#container {margin: 0px auto 0px auto;width: 800px;}</style></head><body><div id="container"><div><form method="post" action=""><table style="width: 100%" cellspacing="0" cellpadding="0"><tr><td align="left">Upon clicking the submit button, the visitor's entriesshould display here.</td></tr><tr><td> </td></tr><tr><td align="left"><label><br />Name: <input name="Text1" type="text" size="40" /><br /><br />Email: <input name="Text2" type="text" size="40" /><br /><br />Comments: <br /><br /><textarea name="comments" id="comments" cols="45" rows="5"></textarea><br /><br /><input type="submit" name="Submit" id="Submit" value="Submit" /></label></td></tr></table></form></div></div></body></html>
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...