Jump to content

Is this the Proper Way OR Am I doing Something Wrong?


amitamberker

Recommended Posts

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

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?

  • Like 1
Link to comment
Share on other sites

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

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 by davej
Link to comment
Share on other sites

Nope. Not like this. Please check those 4 Boxes (Image and Content) in Master PNG

Link to comment
Share on other sites

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

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

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

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 by davej
  • Like 1
Link to comment
Share on other sites

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

What HTML editor are you using?

 

Microsoft Office SharePoint Designer 2007. I hope You received my Email.

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...