amitamberker Posted July 26, 2013 Share Posted July 26, 2013 Hello,Am I Doing it Correct OR am I Doing Something Wrong? <style type="text/css">#ContainerOf4Boxes {width: 470px;}.Testing01 {background-image: url('images/XXX.png');width: 116px;height: 83px;background-repeat: no-repeat;padding-right: 2px;width:116px;float:left; }.Testing02 {background-image: url('images/XXX.png');width: 116px;height: 83px;background-repeat: no-repeat;padding-right: 2px;width:116px;float:left;}.Testing03 {background-image: url('images/XXX.png');width: 116px;height: 83px;background-repeat: no-repeat;padding-right: 2px;width:116px;float:left;}.Testing04 {background-image: url('images/XXX.png');width: 116px;height: 83px;background-repeat: no-repeat;width:116px;float:right; }.TextFor4Boxes {width: 116px;height: 33px;float: left;background-color: #4e1152;font-family: Arial;font-size: 11px;text-align: center;color: #FFFFFF;text-decoration: none;margin-right: 2px;padding-top: 4px;}.TextFor4Boxes02 {/* Update = float: right and Removed margin */width: 116px;height: 33px;float: right;background-color: #4e1152;font-family: Arial;font-size: 11px;text-align: center;color: #FFFFFF;text-decoration: none;padding-top: 4px;}</style></head><body><div id="ContainerOf4Boxes"><div class="Testing01"></div><div class="Testing02"></div><div class="Testing03"></div><div class="Testing04"></div><div class="TextFor4Boxes">w3schools</div><div class="TextFor4Boxes">w3schools<br />...w3schools...</div><div class="TextFor4Boxes">w3schools<br />AB w3schools CD</div><div class="TextFor4Boxes02">w3schools</div><b>How do I Delete (Remove) this Additional SPACE?</b></div></body></html> Link to comment Share on other sites More sharing options...
thescientist Posted July 26, 2013 Share Posted July 26, 2013 I'm not sure what you're asking. What are you asking for feedback on? Some sort of technique? Something technical or presentation related? Is there a problem you are trying to solve and asking for advice on the solution? 1 Link to comment Share on other sites More sharing options...
amitamberker Posted July 26, 2013 Author Share Posted July 26, 2013 I'm not sure what you're asking. What are you asking for feedback on? Some sort of technique? Something technical or presentation related? Is there a problem you are trying to solve and asking for advice on the solution? Hi thescientist, Thanks for your Reply. I am asking if I have Done the entire CODE Properly OR Not. Please Save the FILE into test.html File and Publish it on your Browser. Oh! By the way, there is a Additional Grab at the Bottom. Could you please tell me How should I Remove it? Please check the CODE from your Browser. Link to comment Share on other sites More sharing options...
davej Posted July 26, 2013 Share Posted July 26, 2013 (edited) So you want four boxes that have images on top on one background and text below on a different background... <!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><style type="text/css">#ContainerOf4Boxes {width: 470px;height: 80px;border: 1px solid red;}.Testing01 {background-color: #999;background-image: url('images/XXX.png');width: 116px;height: 50px;background-repeat: no-repeat;margin-right: 2px;float:left;}.Testing02 {background-color: #999;background-image: url('images/XXX.png');width: 116px;height: 50px;background-repeat: no-repeat;margin-right: 2px;float:left;}.Testing03 {background-color: #999;background-image: url('images/XXX.png');width: 116px;height: 50px;background-repeat: no-repeat;margin-right: 2px;float:left;}.Testing04 {background-color: #999;background-image: url('images/XXX.png');width: 116px;height: 50px;background-repeat: no-repeat;margin-right: 0;float:left;}.TextFor4Boxes {float:left;width: 116px;height: 30px;background-color: #4e1152;margin-right: 2px;font-family: Arial;font-size: 11px;color: #FFF;text-decoration: none;text-align: center;}.TextForLastBox {margin-right: 0;}</style></head><body><div id="ContainerOf4Boxes"><div class="Testing01"></div><div class="Testing02"></div><div class="Testing03"></div><div class="Testing04"></div><div class="TextFor4Boxes"><p>Text Box 01</p></div><div class="TextFor4Boxes"><p>Text Box 02</p></div><div class="TextFor4Boxes"><p>Text Box 03</p></div><div class="TextFor4Boxes TextForLastBox"><p>Text Box 04</p></div></div></body></html> Edited July 26, 2013 by davej Link to comment Share on other sites More sharing options...
amitamberker Posted July 26, 2013 Author Share Posted July 26, 2013 Nope. Not like this. Please check those 4 Boxes (Image and Content) in Master PNG Link to comment Share on other sites More sharing options...
davej Posted July 27, 2013 Share Posted July 27, 2013 You're putting in those crazy empty divs again. I see... <div style="height:30px;background-color:#b8f378"></div> If it is really empty then get rid of it. Link to comment Share on other sites More sharing options...
amitamberker Posted July 27, 2013 Author Share Posted July 27, 2013 You're putting in those crazy empty divs again. I see... <div style="height:30px;background-color:#b8f378"></div> If it is really empty then get rid of it. You mean, above the Footer? But that 30px and #b8f378 is Needed. Yup! It's an Empty DIV but 30px and #b8f378 is Part of Design. Hence, I had to Make it that Way. Link to comment Share on other sites More sharing options...
amitamberker Posted July 27, 2013 Author Share Posted July 27, 2013 Yup! There is a Gap underneath Text and Purple Background. What should I do to Get-Rid of it? So you want four boxes that have images on top on one background and text below on a different background... <!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><style type="text/css">#ContainerOf4Boxes {width: 470px;height: 80px;border: 1px solid red;}.Testing01 {background-color: #999;background-image: url('images/XXX.png');width: 116px;height: 50px;background-repeat: no-repeat;margin-right: 2px;float:left;}.Testing02 {background-color: #999;background-image: url('images/XXX.png');width: 116px;height: 50px;background-repeat: no-repeat;margin-right: 2px;float:left;}.Testing03 {background-color: #999;background-image: url('images/XXX.png');width: 116px;height: 50px;background-repeat: no-repeat;margin-right: 2px;float:left;}.Testing04 {background-color: #999;background-image: url('images/XXX.png');width: 116px;height: 50px;background-repeat: no-repeat;margin-right: 0;float:left;}.TextFor4Boxes {float:left;width: 116px;height: 30px;background-color: #4e1152;margin-right: 2px;font-family: Arial;font-size: 11px;color: #FFF;text-decoration: none;text-align: center;}.TextForLastBox {margin-right: 0;}</style></head><body><div id="ContainerOf4Boxes"><div class="Testing01"></div><div class="Testing02"></div><div class="Testing03"></div><div class="Testing04"></div><div class="TextFor4Boxes"><p>Text Box 01</p></div><div class="TextFor4Boxes"><p>Text Box 02</p></div><div class="TextFor4Boxes"><p>Text Box 03</p></div><div class="TextFor4Boxes TextForLastBox"><p>Text Box 04</p></div></div></body></html> Link to comment Share on other sites More sharing options...
davej Posted July 27, 2013 Share Posted July 27, 2013 (edited) A gap where? Some gaps can be caused by browser defaults. When in doubt set the margin and padding to zero. You want to try to use the minimum number of divs that will get the job done. To fill a space you can usually adjust the size or padding of the elements that are already there. Edited July 27, 2013 by davej 1 Link to comment Share on other sites More sharing options...
amitamberker Posted July 27, 2013 Author Share Posted July 27, 2013 A gap where? Some gaps can be caused by browser defaults. When in doubt set the margin and padding to zero. You want to try to use the minimum number of divs that will get the job done. To fill a space you can usually adjust the size or padding of the elements that are already there. Yup! A Gap. I will Email you the HTML File for your Reference.Okie Dokee. Gotch you. Thanks for the Info. I think I am Aware about that. But still, thank you. Link to comment Share on other sites More sharing options...
davej Posted July 27, 2013 Share Posted July 27, 2013 What HTML editor are you using? Link to comment Share on other sites More sharing options...
amitamberker Posted July 28, 2013 Author Share Posted July 28, 2013 What HTML editor are you using? Microsoft Office SharePoint Designer 2007. I hope You received my Email. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now