Jump to content
amitamberker

Converting the Design into DIV tags

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

Share this post


Link to post
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.

Share this post


Link to post
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:

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
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;}

Share this post


Link to post
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>

 

Share this post


Link to post
Share on other sites

I was talking about the main center menu. I don't know what boxes you are talking about.

  • Like 1

Share this post


Link to post
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

Share this post


Link to post
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? */}

Share this post


Link to post
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;}

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...