amitamberker Posted December 6, 2011 Share Posted December 6, 2011 Hello Everyone,Please find the attached "Screenshot.png" file.How do I convert it into DIV based Layout?Look forward to hearing from you.Thank you. Link to comment Share on other sites More sharing options...
Krewe Posted December 6, 2011 Share Posted December 6, 2011 There is no photo attached... Link to comment Share on other sites More sharing options...
amitamberker Posted December 6, 2011 Author Share Posted December 6, 2011 Now? Link to comment Share on other sites More sharing options...
Krewe Posted December 6, 2011 Share Posted December 6, 2011 Yup I see it now.You are the guy who has to create the page without tables right?I can try and mess around and see if I can get it. Link to comment Share on other sites More sharing options...
Krewe Posted December 7, 2011 Share Posted December 7, 2011 Here ya go.A lot of floating. <!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>Untitled Document</title><style type="text/css">.content{float:left;background-color:#FFFFFF;}.content .wrapper{float:left;padding:8px;width:100px;}.content .input{float:left;padding:8px;}.content .home_location{float:left;width:150px;padding-top:8px;}.pick{padding-left:10px;padding-right:12px;background-color:#EFEFEF;}.populate{background-color:#FFFFFF;}.content .preferred_location{float:left;width:160px;padding-top:8px;padding-left:8px;}.content .submit{float:left;width:110px;padding-top:8px;padding-left:8px;}.content .value{float:left;padding-top:3px;width:440px;}</style></head><body><div style="padding:8px;">My Details</div><form action="..."><div class="content"><div class="wrapper"> <div style="height:32px;">Name:</div> <div style="height:32px;">E-Mail:</div> <div style="height:32px;">Password:</div> </div> <div class="input"> <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> <div style="float:left; width:450px;"> <div class="home_location"> <div class="pick"> Home Location<br /> <input type="radio" name="homelocation" id="homelocation" value="india" /> India<br /> <input type="radio" name="homelocation" id="homelocation" value="usa" /> USA </div> </div> <div class="preferred_location"> <div class="pick"> Preferred Location<br /> <input type="radio" name="preferredlocation" id="preferredlocation" value="india" /> India<br /> <input type="radio" name="preferredlocation" id="preferredlocation" value="usa" /> USA </div> </div> <div class="submit"> <div class="populate"> <br /> <br /> <input type="submit" name="submit" value="Populate Values" /> </div> </div> <div class="value"> <div class="pick"> My home location is: My preferred location is: </div> </div> </div></div></form></body></html> There are some cross browser differences, nothing bad, just minor stuff. Chrome looks perfect to me.Firefox and IE look the same, they both end the bottom grey row a little short.Opera looks like Chrome except for the fact it moves the text inputs down further than the other browsers. (Screenshot from Chrome) Thanks for the practice bud.This made me understand divs a lot better. ~Krewe Link to comment Share on other sites More sharing options...
amitamberker Posted December 7, 2011 Author Share Posted December 7, 2011 Hi Krewe,Thanks a lot! Even for me too, this has made me understand a lot better in DIVs... Yup! I am the guy who has to create the page without tables. You are right Krewe.Alrighty, now let's proceed to next level. Even I have prepared few other DIVs. I am trying to incorporate your DIVs into my DIVs at a specific section to complete the over-all layout. Please find the attached "Discussion with Krewe from w3schools.zip" file for your reference.There are 4 files in the attached zip file. After un-zipping the attached zip file:1. Please see the "01 - Screenshot_02.png" and "02 - My Work.html" files.2. And then, please see the "03 - Merged Version.html" file.3. However, if you need your version, you can refer it from "04 - Krewe's Work.html" file. (just wanted to make your life easier)So, what do I need to do (add / delete) in the "Merged Version.html" file to complete it.Look forward to hearing from you soon.Thank you. Link to comment Share on other sites More sharing options...
Krewe Posted December 8, 2011 Share Posted December 8, 2011 Ok I got it to work, However I couldn't get it to go on the right side...And then there is this white space above it in Firefox only... <!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>Untitled</title> <meta name="description" content="#" /><meta name="keywords" content="#" /> <style type="text/css"> body { margin-top: 0px; margin-bottom: 0px; background-color: #999999;}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: 420px;}.FloatRight {float: right;}.FloatLeft {float: left;}.clearBoth {clear: both;}.OL-Text {table-layout: fixed;height: 90px;width: 214px;font-family: Verdana;font-size: 10pt;}.AS {font-family: Verdana;font-size: 12pt;font-weight: bold;text-align: left;height: 32px;vertical-align: middle;line-height: 30px;}.MD {font-family: Verdana;font-size: 11pt;font-weight: bold;text-align: left;height: 32px;vertical-align: middle;line-height: 30px;}.OL {font-family: Verdana;font-size: 11pt;font-weight: bold;width: 220px;background-color: #969696;text-align: center;height: 32px;vertical-align: middle;line-height: 30px;}#OL-Bg {border: 1px solid #B0B0B0;width: 220px;padding: 10px;float: left;}.LogoHeader{float: left;width: 198px;height: 35px;text-align: left;padding-left: 22px;}.copyRight {width:980px;background-color: #FFFFFF;border-right:2px groove #808080;border-left:2px groove #808080;border-up:1px groove #CCCCCC;margin:-2px;float:right;text-align:center;}.AScontent {padding: 15px 5px 30px 15px;border: 1px solid #B0B0B0;font-family: verdana;font-size: 10pt;color: #333333;}.Text {font-family: Verdana;font-size: 10pt;}.SN {font-family: Verdana;font-size: 12pt;font-weight: bold;text-align: left;}.SNcontent {font-family: verdana;font-size: 10pt;color: #333333;line-height: 22px;}.MDText {font-family: Verdana;font-size: 10pt;font-weight: bold;text-align: left;height: 32px;}.content{float:right;text-align:left;background-color:#FFFFFF;width:980px;border-right-style: groove;border-right-width: 2px;border-right-color: #808080;border-left-style: groove;border-left-width: 2px;border-left-color: #808080;margin-right:-14px;}.title{float:right;text-align:left;background-color:#FFFFFF;width:980px;border-right-style: groove;border-right-width: 2px;border-right-color: #808080;border-left-style: groove;border-left-width: 2px;border-left-color: #808080;margin-right:-14px;padding:-8px;}.content .wrapper{float:left;padding:8px;width:100px;}.content .input{float:left;padding:8px;}.content .home_location{float:left;width:125px;padding-top:8px;}.pick{padding-left:10px;padding-right:12px;background-color:#EFEFEF;}.populate{background-color:#FFFFFF;}.content .preferred_location{float:left;width:145px;padding-top:8px;padding-left:8px;}.content .submit{float:left;padding-top:8px;padding-left:8px;}.content .value{float:left;padding-top:3px;width:407px;}</style> </head> <body><div id="container"><div> </div><div class="LogoHeader"><img alt="" src="images/ABC.png" width="95" height="33" /></div><div style="float:left;width:280px;text-align:left" class="Text">Home | About XYZ | Contact Us</div><div style="float:left;width:480px;text-align:right">(icon) Print (icon) Share (icon) RSS</div><div class="clearBoth"> </div><div style=" float:left;width:10px;height:100%"> </div><div style=" float:left;width:240px"><div id="OL-Bg"><div class="OL">Office Locations</div><div><textarea name="TextArea1" cols="20" style="height: 90px;width:214px">INDIA - GURGAONINDIA - NOIDAINDIA - BANGALOREUSA - MIAMIUSA - NEW YORKINDIA - GURGAONINDIA - NOIDAINDIA - BANGALOREUSA - MIAMIUSA - NEW YORK</textarea></div></div><div> </div><div style="float:left" ID="OL-Bg"><span class="SN">SN</span><br /><span class="SNcontent">Blah... Blah... Blah... Blah... Blah...Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah...Blah... Blah... Blah... Blah... Blah... </span></div></div><div style=" float:left;width:20px;height:100%"> </div><div style=" float:left;width:698px"><div class="AS">ABOUT...</div><div class="AScontent">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... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... <img alt="X" src="images/DEF.png" width="200" height="86" style="float: left" /><br />Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah...Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah...Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah...Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah...<br />Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah...Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah...Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah...Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah...Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah...Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah...Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah...Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... <br /> </div><div class="title"> My Details</div><form action="..."><div align="right" class="content"><div class="wrapper"> <div style="height:32px;">Name:</div> <div style="height:32px;">E-Mail:</div> <div style="height:32px;">Password:</div> </div> <div class="input"> <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> <div style="float:left; width:410px;"> <div class="home_location"> <div class="pick"> Home Location<br /> <input type="radio" name="homelocation" id="homelocation" value="india" /> India<br /> <input type="radio" name="homelocation" id="homelocation" value="usa" /> USA </div> </div> <div class="preferred_location"> <div class="pick"> Preferred Location<br /> <input type="radio" name="preferredlocation" id="preferredlocation" value="india" /> India<br /> <input type="radio" name="preferredlocation" id="preferredlocation" value="usa" /> USA </div> </div> <div class="submit"> <div class="populate"> <br /> <br /> <input type="submit" name="submit" value="Populate Values" /> </div> </div> <div class="value"> <div class="pick"> My home location is: My preferred location is: </div> </div> </div></div></form></div><div style=" float:left;width:10px;height:100%"> </div><div class="copyRight">Copyright - SC.</div></div></body> </html> ~krewe Link to comment Share on other sites More sharing options...
DarkxPunk Posted December 8, 2011 Share Posted December 8, 2011 Hey, to add. I tested this in FireFox 8.0.1 on Mac OS X Lion no problems... Originally I thought it maybe the boarder, but nope. What version are you using and what operating system? Link to comment Share on other sites More sharing options...
Krewe Posted December 8, 2011 Share Posted December 8, 2011 I upgraded just to be sure.,8.0.1 Firefox Windows 7 Still have the break Link to comment Share on other sites More sharing options...
ShadowMage Posted December 8, 2011 Share Posted December 8, 2011 It must be something with Win7 because it looks fine to me with FF8 on WinXP. I don't currently have a Win7 machine to test it on, but I have noticed differences from XP to 7 in the past. If I remember correctly, they were always problems with margins, but I'm not sure. Link to comment Share on other sites More sharing options...
dsonesuk Posted December 8, 2011 Share Posted December 8, 2011 1) Its to do browser default setting for font, and font size. IF you don't set a default font, and font size within the body element, and the child element have none of these set either, the browser will use its default font settings, that is why some of the text is larger than normal, causing the elements to be wider/higher than they should. 2) I also recently had a problem with using font Verdana, it seems compared to other browsers that you can't get identical number of characters to fit on one line, even though i had set font-size etc, when i used Arial they matched perfectly. 3) You can't use...Well you are not supposed to use negative value for padding, and unless this is a new CSS 3 styling, there is no such thing as border-up: Link to comment Share on other sites More sharing options...
Krewe Posted December 9, 2011 Share Posted December 9, 2011 3) You can't use...Well you are not supposed to use negative value for padding, and unless this is a new CSS 3 styling, there is no such thing as border-up: With all the div tags and floats it cause some areas to no match up so that is why I used Negative Padding.Border-Up was his code I had no idea it was even there. Funny part is I messed with that exactly part! Haha. ~Krewe Link to comment Share on other sites More sharing options...
amitamberker Posted December 9, 2011 Author Share Posted December 9, 2011 Hi Krewe and other participants,Thanks a lot! You folks are so awesome Please keep an eye on this posting. Shortly I shall be showing you the final design. Upon seeing the final design, please let me know if I have done it properly or something needs to be done.By the way, I think w3schools should provide a Live Chat kind of option to discuss in a Live Mode. Link to comment Share on other sites More sharing options...
amitamberker Posted December 9, 2011 Author Share Posted December 9, 2011 Hi Krewe, Please find the attached "PreFinal.html" file for your reference (and also for other participant's reference). However, I can't figure out a thing. * How do I get-rid of that space which is above "Copyright - SC." at the footer section? Please tell me what do I need to do. I would like to fix it by myself.So, does everything looks proper or something needs to be done? Link to comment Share on other sites More sharing options...
amitamberker Posted December 9, 2011 Author Share Posted December 9, 2011 I managed to fix it by myself. Just added "position: absolute;" in class="copyRight" Link to comment Share on other sites More sharing options...
amitamberker Posted December 12, 2011 Author Share Posted December 12, 2011 This has been solved. Thank you Krewe and other members. Link to comment Share on other sites More sharing options...
amitamberker Posted December 22, 2011 Author Share Posted December 22, 2011 Hi Krewe, How are you doing? They said, there were many mistakes in the page which I had sent them. They said, the quality of the code was not as per their hopes. I am not sure if they were referring about JavaScript Code or DIVs / CSS code. I have replied to their email and waiting for the response. Link to comment Share on other sites More sharing options...
Krewe Posted January 16, 2012 Share Posted January 16, 2012 Well I don't know what to fix if they didn't tell you. Link to comment Share on other sites More sharing options...
Ingolme Posted January 16, 2012 Share Posted January 16, 2012 The problem with the quality of the code is the excessive use of <div> instead of semantic elements, and so many inline styles. I even see some <div> elements without any content in them at all. Link to comment Share on other sites More sharing options...
Krewe Posted January 16, 2012 Share Posted January 16, 2012 I only added divs that had stuff in them, so that would be something to ask Creative why some are empty. I used Inline just due to the fact I didn't know what to name them, so I was going to leave that for him. Link to comment Share on other sites More sharing options...
amitamberker Posted January 20, 2012 Author Share Posted January 20, 2012 Well I don't know what to fix if they didn't tell you. Hi Krewe,Finally they told me. Will post it shortly. Let me organize it. Link to comment Share on other sites More sharing options...
amitamberker Posted January 20, 2012 Author Share Posted January 20, 2012 The problem with the quality of the code is the excessive use of <div> instead of semantic elements, and so many inline styles. I even see some <div> elements without any content in them at all. 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. Link to comment Share on other sites More sharing options...
amitamberker Posted January 20, 2012 Author Share Posted January 20, 2012 I only added divs that had stuff in them, so that would be something to ask Creative why some are empty.I used Inline just due to the fact I didn't know what to name them, so I was going to leave that for him. Hi Krewe,Some of the <div> elements where empty because of layout design. Perhaps I should have controlled it with Padding instead of adding empty <div> elements? (I don't know...)The Inlines was easier and faster to do and hence I used Inlines. But like I said, I removed Inlines before submitting it to them. Link to comment Share on other sites More sharing options...
ShadowMage Posted January 20, 2012 Share Posted January 20, 2012 Some of the <div> elements where empty because of layout design. Perhaps I should have controlled it with Padding instead of adding empty <div> elements? (I don't know...)Yes, it is preferrable to use padding, margin, and display for laying out a page. Even elements like <br> are frowned upon. The Inlines was easier and faster to do and hence I used Inlines.I have to disagree with that statement. It's much easier and quicker if you create class names and stuff first, rather than trying to sort through a jumbled mess of inline statements to find out what properties elements have in common and what is unique. Link to comment Share on other sites More sharing options...
amitamberker Posted January 21, 2012 Author Share Posted January 21, 2012 Hi ShadowMage, I have to disagree with that statement. It's much easier and quicker if you create class names and stuff first, rather than trying to sort through a jumbled mess of inline statements to find out what properties elements have in common and what is unique.Oh! Okie. Yes! You are making sense. Gotch you. I stand corrected mate. Henceforth will try to avoid inline styles and practice to create class names and stuff first. Will submit the list of mistakes shortly. Perhaps before end of the day. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.