Jump to content

Converting the Design into DIV tags


amitamberker

Recommended Posts

Hello Everyone,Please find the attached "MyDesign.png" file. Could you please Help Me with Constructing (Developing) it with DIV tags? Please help.

Link to comment
Share on other sites

Hi niche, Thanks for your Response.

<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>P S</title> <style type="text/css"> body {margin-top: 0px;margin-bottom: 0px;background-color: #891e90;/*background-image: url('images/XXX.png');background-repeat: repeat-x;background-attachment:fixed;*/ }#container01 {width: 950px;background-color: #FFFFFF;overflow: auto;margin: 0 auto;} </style> </head> <body> <div id="container01"><div>Big Pic along with Faded Title Bar on the Top Left Corner | Big Pic's Right Frame Bar | Navigation Menu (8 Buttons) | Left Frame Bar | Testimonials Segment</div><div>...</div><div>Footer</div></div> </body> </html>
Edited by creative1977
Link to comment
Share on other sites

Hello Everyone, Please find the attached "MyDesign.png" file. Could you please Help Me with Constructing (Developing) it with DIV tags? Please help.
ur png file is a 3 column template, so therefore you need to make a 3 column html template
  • Like 1
Link to comment
Share on other sites

ur png file is a 3 column template, so therefore you need to make a 3 column html template
Hi DDs1, Thanks for your Response. But how do Incorporate those Border Frames which is at the Top Segment? So, you mean I should put 1 Container and 3 DIVs with FLOAT attribute? Kinda I am little bit Confused. Not able to Decide how to Start it. Edited by creative1977
Link to comment
Share on other sites

Hello dsonesuk :)Indeed Pleasure to see you!!!... Thanks a lot for your Response! I will see that Post No 6 Tomorrow morning when I Wake-Up. Kindly drop me a Test Private Message.
Link to comment
Share on other sites

Hi DDs1, Thanks for your Response. But how do Incorporate those Border Frames which is at the Top Segment? So, you mean I should put 1 Container and 3 DIVs with FLOAT attribute? Kinda I am little bit Confused. Not able to Decide how to Start it.
pay attention to how the png template is set up, and start from there, its pretty much a simple template if u actually pay attention to it, because u pretty much want a,b,c div to be and have x
  • Like 1
Link to comment
Share on other sites

Here is my Updated CODE but please Keep the "MyDesign.png" file Opened for Reference.

<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>P S</title> <style type="text/css"> body {margin-top: 0px;margin-bottom: 0px;background-color: #891e90;/*background-image: url('images/XXX.png');background-repeat: repeat-x;background-attachment:fixed;*/ }#container01 {width: 960px;/*height:500px;*/background-color: #FFFFFF;overflow: auto; margin: 0 auto;}.Testing01 {width: 470px;float: left;background-image: url('images/Title_Bar_for_Eye_Image.jpg');background-repeat: no-repeat;height: 43px; }.Testing02 {float:left;width:23px;}.Testing03 {width:178px;float:left;height:353px;background-color:#54dc61;text-align: center;}.Testing04 {float:left;width:23px;}.Testing05 {float:left;width:266px;height:353px;background-color:#d5f7ab;}.FloatLeft {float:left;}.FloatRight {float:right;}.Testing06 {position: absolute;float: left;}.Titles {padding-left: 16px;font-family: Arial;font-weight: bold;font-size: 13.5pt;line-height: 42px;} </style> </head> <body> <div id="container01"><div class="FloatLeft"><div class="Testing01"><span class="Titles">Title 01</span></div><div class="Testing06"><img src="images/XXX.jpg" width="470" height="310" /></div></div><div class="Testing02"><img src="images/Frame01.png" /></div><div class="Testing03"><img alt="" src="images/XXX.png" width="122" height="32" /><br /><img alt="" src="images/XXX.png" width="122" height="32" /><br /><img alt="" src="images/XXX.png" width="122" height="32" /><br /><img alt="" src="images/XXX.png" width="122" height="32" /><br /><img alt="" src="images/XXX.png" width="122" height="32" /><br /><img alt="" src="images/XXX.png" width="122" height="32" /><br /><img alt="" src="images/XXX.png" width="122" height="32" /><br /><img alt="" src="images/XXX.png" width="122" height="32" /></div><div class="Testing04"><img src="images/Frame02.png" /></div><div class="Testing05">Testimonials</div><div>2nd Phase</div><div>Footer Segment</div></div> </body> </html>
1. The DIV tag of "Title 01" is Hiding behind - <div class="Testing06"><img src="images/XXX.jpg" width="470" height="310" /></div>... How should I make "Title 01" visible?2. How should I give Space between Navigation Buttons?
Link to comment
Share on other sites

Hi niche, dsonesuk and DDs1,
Here is the Updated version of CODE. Before seeing the CODE from your Browser, I would request you to Download and Keep the "MyDesign.png" file Opened from your MS Paint to View it 100%.
So, am I doing it Correct? Do I need to Change anything? What should I do?
Please help.
<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>P S</title><style type="text/css">body {margin-top: 0px;margin-bottom: 0px;background-color: #891e90;/*background-image: url('images/XXX.png');background-repeat: repeat-x;background-attachment:fixed;*/}#container01 {width: 960px; /*height:500px;*/;background-color: #FFFFFF;overflow: auto;margin: 0 auto;}.Testing01 {width: 470px;float: left;background-image: url('images/Title_Bar_for_Eye_Image.jpg');background-repeat: no-repeat;height: 43px; }.Testing02 {float:left;width:23px;}.Testing03 {width:178px;float:left;height:353px;background-color:#54dc61;text-align: center;}.Testing04 {float:left;width:23px;}.Testing05 {float:left;width:266px;height:353px;background-color:#d5f7ab;}.FloatLeft {float:left;}.FloatRight {float:right;}.Testing06 {position: absolute;float: left;}.Titles {padding-left: 16px;font-family: Arial;font-weight: bold;font-size: 13.5pt;line-height: 42px;}.FirstFrameBottom {background-image: url('images/FirstFrameBottom.png');background-repeat: no-repeat;width: 470px;height: 27px;}.FirstFrameRight {background-image: url('images/FirstFrameRight.png');background-repeat: no-repeat;width: 23px;height: 353px;}.FirstFrameCorner {background-image:url('images/FirstFrameCorner.png');background-repeat:no-repeat;width:23px;height:27px; }.TitleBarForEye {   background-image:url('images/Title_Bar_for_Eye_Image.jpg');   background-repeat:no-repeat;   width:470px;   height:43px;     }.Titles {padding-left: 16px;font-family: Arial;font-weight: bold;font-size: 13.5pt;line-height: 42px;}.BG01 {background-image: url('images/bg01.png');background-repeat: repeat-x;height: 27px;}.BG02 {background-image: url('images/bg02.png');background-repeat: repeat-x;height: 996px;padding-right: 15px;padding-left: 15px;padding-top: 24px;}.style1 {background-repeat: repeat;font-family: "Comic Sans MS";font-size: 12pt;text-align: justify;}.DropCap {font-family: "Comic Sans MS";font-size: 19pt;font-weight: bold;}</style></head><body><div id="container01"><div style="width:470px;float:left;"><div class="TitleBarForEye"><span class="Titles">Title 01</span></div><div><img alt="" src="images/EyeImage.jpg" width="470" height="310" /></div><div class="FirstFrameBottom"></div></div><div style="width:23px;float:left"><div class="FirstFrameRight"></div><div class="FirstFrameCorner"></div></div><div style="width:178px;float:left"><div style="background-color:#54dc61;height:380px"><ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li><li>07</li><li>08</li> </ul></div></div><div style="width:23px;float:left"><div style="background-color:blue"><img alt="" src="images/Frame02.png" width="23" height="353" /></div><div style="background-color:gray"><img alt="" src="images/FrameCorner02.png" width="23" height="27" /></div></div><div style="width:266px;float:left"><div style="background-color:#d5f7ab;height:353px">Testimo</div><div style="background-color:orange"><img alt="" src="images/Frame04.png" width="266" height="27" /></div></div><div> <!-- Add this into the DIV style="background-color:black" and Remove the Eye Image and Title Bar Image to Check the Black Color. FIX it Accordingly --><div style="width:470px;float:left"><div class="BG01"></div><div class="BG02"><p class="style1"><span class="DropCap">I</span> w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... </p> <p class="style1"><span class="DropCap">C</span>w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... </p><p class="style1"><span class="DropCap">H</span>w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... </p><p class="style1"><span class="DropCap">J</span>w3Schools...  specialises in</p><p class="style1">• w3Schools... <br />• w3Schools... <br />• w3Schools... <br />•   w3Schools... <br />• w3Schools... <br />• w3Schools... <br /></p></div><div>...</div><div>...</div><div>...</div><div>...</div><div>...</div><div>...</div><div>...</div><div>...</div></div><div style="width:224px;float:left"><div>...4 Icons</div><div>...Reflection of Icon</div><div>...Back-Up div Tag</div><div style="height:996px;background-color:#54dc61">height: 996px;</div><div>...</div><div>...</div><div>...</div><div>...</div><div>...</div><div>...</div></div><div style="width:266px;float:left"><div>...</div><div>...</div><div>...</div><div>...</div><div>...</div><div>...</div><div>...</div><div>...</div><div>...</div><div>...</div></div><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div><div style="height:100px">FOOTER</div></div></body></html>
Edited by creative1977
Link to comment
Share on other sites

 

Hi dsonesuk,

 

I saw the Post Number 6. Thanks for providing Reference.

Edited by creative1977
Link to comment
Share on other sites

 

Hi niche, dsonesuk and DDs1,
Here is the Updated version of CODE. Before seeing the CODE from your Browser, I would request you to Download and Keep the "MyDesign.png" file Opened from your MS Paint to View it 100%.
So, am I doing it Correct? Do I need to Change anything? What should I do?
Please help.
<!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"><body>......</body></html>

 

why do you have so many breaks?

Link to comment
Share on other sites

why do you have so many breaks?

 

Hi DDs1,To incorporate Title Bar and Images.

Edited by creative1977
Link to comment
Share on other sites

Here is my Updated CODE along with the Attachment of "MyDesign.png" file.

 

Please let me know if I am Doing it OKIE or am I Doing something Wrong.

 

Please Help.

 

<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>P S</title><style type="text/css">body {margin-top: 0px;margin-bottom: 0px;background-color: #891e90;/*background-image: url('images/XXX.png');background-repeat: repeat-x;background-attachment:fixed;*/}#container01 {width: 960px; /*height:500px;*/;background-color: #FFFFFF;overflow: auto;margin: 0 auto;}.Testing01 {width: 470px;float: left;background-image: url('images/Title_Bar_for_Eye_Image.jpg');background-repeat: no-repeat;height: 43px; }.Testing02 {float:left;width:23px;}.Testing03 {width:178px;float:left;height:353px;background-color:#54dc61;text-align: center;}.Testing04 {float:left;width:23px;}.Testing05 {float:left;width:266px;height:353px;background-color:#d5f7ab;}.FloatLeft {float:left;}.FloatRight {float:right;}.Testing06 {position: absolute;float: left;}.FirstFrameBottom {background-image: url('images/FirstFrameBottom.png');background-repeat: no-repeat;width: 470px;height: 27px;}.FirstFrameRight {background-image: url('images/FirstFrameRight.png');background-repeat: no-repeat;width: 23px;height: 353px;}.FirstFrameCorner {background-image:url('images/FirstFrameCorner.png');background-repeat:no-repeat;width:23px;height:27px; }.TitleBarForEye {   background-image:url('images/Title_Bar_for_Eye_Image.jpg');   background-repeat:no-repeat;   width:470px;   height:43px;     }.TitleBar01 {background-image: url('images/bg03.png');background-repeat: repeat-x;width: 470px;height: 43px;}.TitleBar02 {background-image: url('images/bg03.png');background-repeat: repeat-x;width: 266px;height: 43px;}.Titles01 {padding-left: 16px;font-family: Arial;font-weight: bold;font-size: 13.5pt;line-height: 42px;}.Titles02 {padding-left: 8px;font-family: Arial;font-weight: bold;font-size: 13.5pt;line-height: 42px;}.BG01 {background-image: url('images/bg01.png');background-repeat: repeat-x;height: 27px;}.BG02 {background-image: url('images/bg02.png');background-repeat: repeat-x;height: 996px;padding-right: 15px;padding-left: 15px;padding-top: 24px;}.style1 {background-repeat: repeat;font-family: "Comic Sans MS";font-size: 12pt;text-align: justify;}.DropCap {font-family: "Comic Sans MS";font-size: 19pt;font-weight: bold;}.style2 {text-align: center;}.NoBorder {border-width: 0px;}</style></head><body><div id="container01"><div style="width:470px;float:left;"><div class="TitleBarForEye"><span class="Titles01">Title 01</span></div><div><img alt="" src="images/EyeImage.jpg" width="470" height="310" /></div><div class="FirstFrameBottom"></div></div><div style="width:23px;float:left"><div class="FirstFrameRight"></div><div class="FirstFrameCorner"></div></div><div style="width:178px;float:left;background-color:#54dc61"><div style="height:309px"><ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li><li>07</li><li>08</li> </ul></div><div> </div><div> </div><div> </div></div><div style="width:23px;float:left"><div style="background-color:blue"><img alt="" src="images/Frame02.png" width="23" height="353" /></div><div style="background-color:gray"><img alt="" src="images/FrameCorner02.png" width="23" height="27" /></div></div><div style="width:266px;float:left"><div style="background-color:#d5f7ab;height:353px">Testimo</div><div style="background-color:orange"><img alt="" src="images/Frame04.png" width="266" height="27" /></div></div><div> <!-- Add this into the DIV style="background-color:black" and Remove the Eye Image and Title Bar Image to Check the Black Color. FIX it Accordingly --><div style="width:470px;float:left"><div class="BG01"></div><div class="TitleBar01"><span class="Titles01">Title 01</span></div><div class="BG02"><p class="style1"><span class="DropCap">I</span> w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... </p> <p class="style1"><span class="DropCap">C</span>w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... </p><p class="style1"><span class="DropCap">H</span>w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... w3Schools... </p><p class="style1"><span class="DropCap">J</span>w3Schools... w3Schools... w3Schools...</p><p class="style1">• w3Schools... w3Schools... w3Schools...<br />• w3Schools... w3Schools... w3Schools...<br />• w3Schools... w3Schools... w3Schools...<br />•   w3Schools... w3Schools... w3Schools...<br />• w3Schools... w3Schools... w3Schools...<br />• w3Schools... w3Schools... w3Schools...<br />• w3Schools... w3Schools... w3Schools...<br />• w3Schools... w3Schools... w3Schools...<br />• w3Schools... w3Schools... w3Schools...<br />• w3Schools... w3Schools... w3Schools...<br />• w3Schools... w3Schools... w3Schools...<br />• w3Schools... w3Schools... w3Schools...<br /></p></div><div>...</div><div>...</div><div>...</div><div>...</div><div>...</div><div>...</div><div>...</div><div>...</div></div><div style="width:224px;float:left;background-color:#54dc61"><div class="style2"><a target="_blank" href="http://www.facebook.com/"><img alt="" src="images/Icons/facebook_icon.png" width="36" height="36" style=" padding-right:17px" class="NoBorder" /></a><a target="_blank" href="http://www.linkedin.com/"><img alt="" src="images/Icons/linkedin_icon.png" width="36" height="36" style=" padding-right:17px" class="NoBorder" /></a><a target="_blank" href="http://www.tweeter.com/"><img alt="" src="images/Icons/tweeter_icon.png" width="36" height="36" style=" padding-right:17px" class="NoBorder" /></a><a target="_blank" href="http://www.youtube.com/"><img alt="" src="images/Icons/youtube_icon.png" width="36" height="36" class="NoBorder" /></a></div><div class="style2"><img src="images/Icons/Reflection_of_Icons.png" width="194" height="36" /></div><div> </div><div><img src="images/Icons/bg04.png" width="224" height="2" /></div><div style="height:1100px;background-color:#54dc61">height: 1400px;</div><div>...</div><div>...</div><div>...</div><div>...</div><div>...</div><div>...</div></div><div style="width:266px;float:left"><div style="height:27px"> </div><div class="TitleBar02"><span class="Titles02">Title 01</span></div><div style="height:10px"></div><div><img alt="XXX" src="images/pic01.png" width="266" height="177" /></div><div style="height:10px"></div><div class="TitleBar02"><span class="Titles02">Title 01</span></div><div style="height:10px"></div><div><img alt="XXX" src="images/pic02.png" width="266" height="213" /></div><div style="height:10px"></div><div class="TitleBar02"><span class="Titles02">Title 01</span></div><div style="height:10px"></div><div><img alt="XXX" src="images/pic03.png" width="266" height="186" /></div><div style="height:10px"></div><div class="TitleBar02"><span class="Titles02">Title 01</span></div><div style="height:10px"></div><div><img alt="XXX" src="images/pic04.png" width="266" height="341" /></div><div style="height:10px"></div></div><br /></div><div style="height:100px">FOOTER</div></div></body></html>
Link to comment
Share on other sites

Please Help

 

:huh::huh::huh::huh::huh::huh:

Link to comment
Share on other sites

  • 3 weeks later...

Waiting for Someone's Reply. I am Unable to Move Ahead.

 

Please Help.

Link to comment
Share on other sites

This looks like a big mess. Where is the link to the original page that is being "converted to div tags?"

 

Hi davej,

 

Thanks for your Response. Which Original Page's Link are you referring about?

Link to comment
Share on other sites

You say you are "converting the design into div tags" so where is the original non-div page or a picture of the desired layout?

 

Hi davej,

 

Oh! I had to Remove (Delete) that File because I wanted to Add (Upload) "Need the Name of this Font.jpg" file on "What is the Name of this Font?" topic. Could you please send me your Email ID? I will Send you a Zip Folder for your Reference.

Link to comment
Share on other sites

Wouldn't it be better to put it online where anyone here could download it?

 

Hi davej,

 

Yup! I Agree with you. But nobody are Willing to Help me into this Thread :( Could you please send me your Email ID?

Link to comment
Share on other sites

It is hard to guide step by step for most of people here. At best here you can sort out problems which you are having with your coding, to do that you need to be specific about which is not working and how do you want to work and any specific errors (if available) you are getting. Also you need to be comfortable with the basic at least. If you are in hurry and want to avoid learning curve you can give a try to any css framework. Also for client side debugginh it would be suitable if you put it online so people can test it themselves.

Link to comment
Share on other sites

 

Yup! I Agree with you. But nobody are Willing to Help me into this Thread :( Could you please send me your Email ID?

 

I received an e-mail from you but it did not contain any code or any helpful information. You complain that no one will help you but you do little to enable any help. There are free webhosts. You could post this page online where everyone could see it.

Link to comment
Share on other sites

 

I received an e-mail from you but it did not contain any code or any helpful information. You complain that no one will help you but you do little to enable any help. There are free webhosts. You could post this page online where everyone could see it.

 

Hi davej,Didn't I tell you that I will send you a Test Mail to your Email? I never said that I will Send you CODE and Helpful Information. It was Just a Test Mail. I am not Complaining. I am Just telling you. Please Scroll-Up and read How Many times I have Requested Members to Help Me. Please check your Private Message. I have Sent you 2 Links for your Reference.

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
×
×
  • Create New...