Jump to content

Converting the Design into DIV tags


amitamberker

Recommended Posts

Ok, so all of this mysterious stuff is because you feel the client would want the development website to be kept secret?

 

What is it you are stuck on? Does the png file accurately describe what the client wants or is it an approximation?

 

Also, if this project is running behind schedule I don't see why you couldn't simply put up a page with the png image as an image map rather than the useless placeholder website.

Edited by davej
Link to comment
Share on other sites

When you have a column of items such as titled images, you don't add a bunch of empty nameless divs with inline dimensions to create uniform spacing -- you simply apply an appropriate style to the images.

Link to comment
Share on other sites

Ok, so all of this mysterious stuff is because you feel the client would want the development website to be kept secret?

 

What is it you are stuck on? Does the png file accurately describe what the client wants or is it an approximation?

 

Also, if this project is running behind schedule I don't see why you couldn't simply put up a page with the png image as an image map rather than the useless placeholder website.

 

No Comments :facepalm:

Link to comment
Share on other sites

When you have a column of items such as titled images, you don't add a bunch of empty nameless divs with inline dimensions to create uniform spacing -- you simply apply an appropriate style to the images.

 

I know. Those empty DIVs are for my Reference. I have to to Give Name and Use those empty DIVs.

Link to comment
Share on other sites

 

I know. Those empty DIVs are for my Reference. I have to to Give Name and Use those empty DIVs.

 

There is nothing on the master PNG file for them. Anyway I sent you two versions to look at (by e-mail).

Edited by davej
  • Like 1
Link to comment
Share on other sites

 

There is nothing on the master PNG file for them. Anyway I sent you two versions to look at (by e-mail).

 

Thanks a lot for Sending Me 2 Versions for my Reference. I saw your Both the Emails.

Link to comment
Share on other sites

You will need to wrap anchors around the main menu items and then style...

<ul id="menu"><li><a href="#">Home</a></li><li><a href="#">About Us</a></li>[etc...]<li><a href="#">Contacts</a></li> </ul>
#menu li {list-style: none;background-image: url("images/btn01.png");display: block;width: 135px;height: 32px;margin: 10px 0 0 -20px;padding: 0;text-align: center;line-height: 30px;font-weight: bold;cursor: pointer;text-shadow: 1px 2px 3px #444;}#menu li a {color: #000;text-decoration: none;}
Link to comment
Share on other sites

 

You will need to wrap anchors around the main menu items and then style...

<ul id="menu"><li><a href="#">Home</a></li><li><a href="#">About Us</a></li>[etc...]<li><a href="#">Contacts</a></li> </ul>
#menu li {list-style: none;background-image: url("images/btn01.png");display: block;width: 135px;height: 32px;margin: 10px 0 0 -20px;padding: 0;text-align: center;line-height: 30px;font-weight: bold;cursor: pointer;text-shadow: 1px 2px 3px #444;}#menu li a {color: #000;text-decoration: none;}

 

Okie. Thanks a lot! I was Doing those 4 Boxes in a Separate HTML File. So, is this the Correct Way? I am heading to my Bed now. It's too late.

 

<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 was talking about the main center menu. I don't know what boxes you are talking about.

 

Yup! I know you were Referring about Center Menu. As per your Feedback, I have Done the Changes and Uploaded into Server. I am Referring about Different Segment. The Once which is Above the Footer (Left Side)

Edited by creative1977
Link to comment
Share on other sites

Oh, I see. You are adding on to the bottom area of the page.

 

There is now a background gap under the main center menu. This is probably because this...

ul#menu {padding-bottom: 22px;}

...has been changed to...

ul#menu a {	padding-bottom: 22px; /* Where does this Apply? */}
Link to comment
Share on other sites

 

Oh, I see. You are adding on to the bottom area of the page.

 

There is now a background gap under the main center menu. This is probably because this...

ul#menu {padding-bottom: 22px;}

...has been changed to...

ul#menu a {	padding-bottom: 22px; /* Where does this Apply? */}

 

Nope! I am not Adding anything New on the Bottom Area of the Page. I am Just doing What-Ever I have Done (Designed) as per the Master PNG File. Did you Get a Chance to See that CODE? Did I Do it in a Right Way? In your Version it was one Single File (bottomblocks.png). And then, there was Gap at the Left and Right side (because of my Padding). In your Version those 4 Boxes were not Looking as per the Master PNG File. But no problem. I am not Complaining. I am just Telling you. Yup! There is a White Color Gap underneath "Contact Us" Button. I wanted to Ask you about it Today since Yesterday was Too Late but you have Found it by Yourself. BUT the "padding-bottom: 22px;" is Already in ul#menu a {...} Please see this:

 

body {margin-top: 0px;margin-bottom: 0px;background-color: #891e90;/*background-image: url('images/XXX.png');background-repeat: repeat-x;background-attachment:fixed;*/}ul#menu a {padding-bottom: 22px; /* Where does this Apply? */ }#menu li{list-style: none;background-image: url("images/btn01.png");display: block;width: 135px;height: 32px;margin: 10px 0 0 -20px;padding: 0;text-align: center;line-height: 30px;font-weight: bold;cursor: pointer;text-shadow: 1px 2px 3px #444;font-family: Arial;font-size: 10pt;}
Link to comment
Share on other sites

Oh, you are trying to fix the padding in the BG02 div. Let me e-mail you a new version.

 

I am not Trying to Fix Padding. I am trying to Fix those 4 Boxes as per the Requirement. Okie! Will wait for your Email.

Link to comment
Share on other sites

  • 4 weeks later...

I think he is done or very close to done. Next time we will have to immediately suggest that the design be "de-classified" with a Lorum Ipsum version so that anyone and everyone can be allowed to look at it.

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