amitamberker Posted December 4, 2011 Share Posted December 4, 2011 Hello Everyone, Greetings! As a part of assignment test I have to make the HTML Code in DIVs (tableless) as per the attached "Screenshot.png" file. FYI - On clicking on the "Populate Values" button, the div below the button should populate the values of the selected radio buttons of the preferred and home locations respectively as shown in the attached .png file. --------------------------------------------Current status of My HTML Code:--------------------------------------------<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...ransitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Test</title><meta name="description" content="#" /><meta name="keywords" content="#" /><link rel="stylesheet" type="text/css" href="StyleSheet.css" /></head><body><div id="container"><div> </div><div class="LogoHeader"></div><div style="float:left;width:280px;text-align:left">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> </div><div id="OL-Bg"><div class="OL">Office Locations</div><div><textarea name="TextArea1" cols="20" class="OL-Text">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...</textarea></div></div><div style="float:right;width:738px">ABOUT XYZ</div><div class="content">Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah...<br /> <br /> Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah...<br /> <br /> Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... <img alt="X" src="images/XYZ.png" width="200" height="86" style="float: left" />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... 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="clearBoth"> </div><div class="copyRight">Copyright - Blah... blah... Blah...</div></div></body></html> -------------------------------------------Current status of My CSS Code:-------------------------------------------body { margin-top: 0px; margin-bottom: 0px; background-color: #999999;}div#container { width: 980px; margin: 0 auto; background-color: #FFFFFF;}.FloatRight {float: right;}.FloatLeft { float: left;}.clearBoth { clear: both;}.OL-Text { table-layout: fixed; height: 90px; width: 214px; font-family: Verdana; font-size: 10pt;}.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{ background-image: url('images/XYZ.png'); background-repeat: no-repeat; float:left; width:220px; height:35px; text-align:left;}.copyRight { border-color: #808080; font-family: Verdana; margin-top: 0; margin-bottom: 0; font-size: 11px; color: #333333; text-decoration: none; height: 30px; text-align: center; vertical-align: middle; line-height: 30px; border-top-style: groove; border-top-width: 2px;}.content { border: 1px solid #FFCC00; float: right; width: 736px;; font-family: verdana; font-size: 10pt; color: #333333;} Please help... Thank you. Link to comment Share on other sites More sharing options...
amitamberker Posted December 5, 2011 Author Share Posted December 5, 2011 Waiting to hear from someone. I have to submit this assignment asap.Please help. Link to comment Share on other sites More sharing options...
thescientist Posted December 5, 2011 Share Posted December 5, 2011 what exactly is your problem/question? The layout? the JS? Please be clear and specific with what you need help with. Link to comment Share on other sites More sharing options...
amitamberker Posted December 5, 2011 Author Share Posted December 5, 2011 what exactly is your problem/question? The layout? the JS? Please be clear and specific with what you need help with.Hi thescientist,Thanks for your response. Alrighty, my 1st problem is - How do I place one more DIV box underneath the Office Locations?<div id="OL-Bg">< div class="OL">Office Locations</div>< div><textarea name="TextArea1" cols="20" class="OL-Text">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...< /textarea></div>< /div> Link to comment Share on other sites More sharing options...
thescientist Posted December 5, 2011 Share Posted December 5, 2011 unless I am missing something... just add another <div></div> element with the styles you need. Link to comment Share on other sites More sharing options...
amitamberker Posted December 5, 2011 Author Share Posted December 5, 2011 I tried that but in-vain. Link to comment Share on other sites More sharing options...
thescientist Posted December 5, 2011 Share Posted December 5, 2011 ok. so show us. post your code/provide a link. tell us the issue. what did it do? what did you expect it do? help us help you, as it were. Link to comment Share on other sites More sharing options...
amitamberker Posted December 5, 2011 Author Share Posted December 5, 2011 ok. so show us. post your code/provide a link. tell us the issue. what did it do? what did you expect it do? help us help you, as it were.Posting the code for your 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>Test</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;}.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; width: 738px; text-align: left; height: 32px; vertical-align: middle; line-height: 30px; float:right;}.TitleText-a { font-family: Verdana; font-size: 12pt; font-weight: bold; width: 200px; text-align: left; height: 32px; vertical-align: middle; line-height: 30px; float: right;}.MD { font-family: Verdana; font-size: 11pt; font-weight: bold; width: 738px; text-align: left; height: 32px; vertical-align: middle; line-height: 30px; float:right;}.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{ background-image: url('images/Logo_Header.png'); background-repeat: no-repeat; float:left; width:220px; height:35px; text-align:left;}.copyRight { border-color: #808080; font-family: Verdana; margin-top: 0; margin-bottom: 0; font-size: 11px; color: #333333; text-decoration: none; height: 30px; text-align: center; vertical-align: middle; line-height: 30px; border-top-style: groove; border-top-width: 2px;}.content { border: 1px solid #FFCC00; float: right; width: 736px;; 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; color: #FF0000;}.SNcontent { font-family: verdana; font-size: 10pt; color: #FF0000; line-height: 22px;}</style></head><body><div id="container"><div> </div><div class="LogoHeader"></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> </div><div id="OL-Bg"><div class="OL">Office Locations</div><div><textarea name="TextArea1" cols="20" class="OL-Text">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...</textarea></div></div><div style="float:left" ID="OL-Bg"><span class="SN">Hi thescientist</span><br /> <span class="SNcontent">How do I get this Box underneath Office Locations's Box?</span></div><div class="AS">ABOUT XYZ</div><div class="content">Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah...<br /> <br /> Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah...<br /> <br /> Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... <img alt="X" src="images/XYZ.png" width="200" height="86" style="float: left" />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... 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="clearBoth"> </div><div class="copyRight">Copyright - Blah... blah... Blah...</div></div></body></html> Link to comment Share on other sites More sharing options...
amitamberker Posted December 6, 2011 Author Share Posted December 6, 2011 Waiting to hear from someone. I have to submit this assignment asap.Please help. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.