Link to home
Start Free TrialLog in
Avatar of breeze351
breeze351

asked on

Simple street map #2

I'm not sure where to post this to.  I'm trying to a simple street map of Manhattan.  

The page is "langsystems.net/walk.php"

On the left side of the page is what I know about the address followed by the actual address of the building.  After that is going to be the name of the avenue running north to south.  The right side mirrors the left side (address/space/tenant).

The problem I'm having with this is that "Macy's" can take the entire side of the block and the other side of the street can have multiple stores.

From the database, I know how much space each "row" on the left or right should take up.

My question is should I be using a "frame"?  I can't figure out how to do this with tables or anything else.

Glenn
Avatar of Ray Paseur
Ray Paseur
Flag of United States of America image

Is this the URL?
http://langsystems.net/walk.php

What is the issue?  Is there any SSCCE we can use to see what is going on?
Whoa a page full of php errors is not a good place to start.

What you are asking is not clear at all.  You are going to need to describe functionality, data, and user interface requirements.

As for the direct question.  Frame? absolutely not; it is an obsolete technique.  Iframe? maybe we need need more information to know whether that is practical.

 
Cd&
Avatar of breeze351
breeze351

ASKER

I have something else going on with the errors.  I'm sure it has to do with the security on the pages.  This is just a test page and I'm trying to quickly bypass the security.

Go to:

http://langsystems.net/

When the page comes up, edit the url and add "walk.php".

Glenn
OK, did that.  What is the expectation that is not being met?

 Is there any SSCCE we can use to see what is going on?
There is no SSCCE.

On the left side,  there are tenants, addresses as well as what it in the building.
On the right is a mirror of the left.

The problem is that on the left, there could be 5 addresses and on the right there could be one.

I'm trying to create a street map.
There is no SSCCE.
Understood.  I'm out.  Best of luck with your project, ~Ray
What does that mean.  You can't help?
Right now I'm fighting the flu!!!! So any response to your answer may take a day or two.

What I need to do is create five vertical tables that are independent of each other.  I need to put the borders around the data per the customer.  I'm not sure how to do this.  Do I need frames or something else?

Macy's takes up the entire right hand side of the street.

If you would like to take a look at a mock up.  Go to http:/langsystems.net and then add walk.php to the url.  You can't go there directly because of security issues. "walk.php" is just a temp that I was trying to work on.

Table 1:
Column 1:
Data:
    Rental Available
    Deli
    Fred's Hot Dogs

Table 2:
Column 1:
Data:
    111 Fifth Avenue

Table 3:
Column 1:
Data:
    F - (Fifth Avenue going down the screen)

Table 5:
Column 1:
Data:
    150 Fifth Avenue
Data:
    Macy's

Table 1:
Column 1:
Data:
    Jeweler
    New Stand

Table 2:
Column 1:
Data:
    113 Fifth Avenue

Table 3:
Column 1:
Data:
    I - (Fifth Avenue going down the screen)

Table 4:
    Blank
Table 5:
    Blank
I've been in the hospital for the last ten days.
I'll get back to this.
I'm still looking for help.
Avatar of Gary
I'm finding it hard to understand what the question is about, frames around what?
If you are trying to expand the right side to fill the equivalent (street) space on the left then just use rowspans.
not sure what to suggest, however, I would use a rectangle array of <DIV>, maybe like this -
<style>
.street{font-family:arial,sans-serif;border:2px solid #900;padding:3px; display:-moz-inline-box;-moz-box-orient:vertical;display:inline-block;vertical-align:top;zoom:1;*display:inline;}
.street div{padding:4px;display:-moz-inline-box;-moz-box-orient:vertical;display:inline-block;vertical-align:top;zoom:1;*display:inline;}
</style>

<div class="street">
  <div style="display:block;text-align:center;">East 42nd</div>
  <div style="border:1px solid #0c0;height:11em;">
    <div style="border:1px solid #cc0;width:10em;"><div style="color:#00c;float:right;">111h</div>Retail Available<br>Deli<br />Fred's Hot Dogs</div>
    <br /><div style="border:1px solid #cc0;width:10em;"><div style="color:#00c;float:right;">113th</div>Jeweler<br />News Stand</div>
    <br /><div style="border:1px solid #cc0;width:10em;"><div style="color:#00c;float:right;">115th</div>Grocery<br />.</div>
  </div>
  <div style="font-weight:bold;line-height:90%;padding-top:1em;">F<br />i<br />f<br />t<br />h<br /><br />A<br />v<br />e</div>
  <div style="border:1px solid #0c0;height:11em;width:10em;text-align:right;"><div style="color:#00c;float:left;">150</div><p style="margin-top:4.5em;">Macy's</p></div>
  <div style="display:block;text-align:center;">East 41nd</div>
</div>

Open in new window

but this would be difficult to do all the math to show these out of a database read with many different amounts of addresses and businesses on either side of the street
Here is the related question: https://www.experts-exchange.com/questions/28159536/Simple-street-map.html
Breeze351, I would suggest closing off that question (probably requesting it deleted) before continuing here
I thought about loading this from a data base, and decided that this Table structure would be the best, as you could get the number of addresses per block and load each into a separate DIV, and you would never have to calculate the heights, as the table would would auto adjust to match left and right sides of street -
<style>
.blk{border:1px solid #00d;padding:4px;}
.blk div{border:1px solid #b77;padding:6px;display:-moz-inline-box;-moz-box-orient:vertical;display:inline-block;vertical-align:top;zoom:1;*display:inline;}
.addy{color:#fff;margin-top:5px;background-color:#000;}
</style>

<table>
  <tr><td colspan="3" style="text-align:center;border-top:1px solid #00d;">East 42nd</td></tr>
  <tr><td class="blk" style="text-align:right;">
    <div>Retail Available<br>Deli<br />Fred's Hot Dogs</div><div class="addy">111h</div>
    <br /><div>Jeweler<br />News Stand</div><div class="addy">113th</div>
    <br /><div>Grocery</div><div class="addy">115th</div>
    <br /><div>Office Supplies<br />Beth's Hair and Nails</div><div class="addy">117n</div>
    <br />
  </td>
  <td style="font-weight:bold;padding:4px;line-height:90%;">F<br />i<br />f<br />t<br />h<br /><br />A<br />v<br />e</td>
  <td class="blk"><div class="addy">150</div><div style="height:100%;">Macy's</div></td>
  </tr>
  <tr><td colspan="3" style="text-align:center;border-bottom:1px solid #00d;">East 41nd</td><tr>
</table>

Open in new window

Sorry that I haven't replied in a while.  I've been in the hospital with "Pneomia" (you spell it).  They let me go and I ended up back there 3 days later.  They would give me a pill to  loosen up my lungs at night and then I was up all night spitting into a cup.  The one night I finally fell asleep at 7:10 AM, and at 7:30 AM the nurse comes in "Time for your blood test"!!!

To Slick:
I'll give your idea a shot.  I actually have the height on the left and right side of the street.
The database is using Delphi.  They actually said that the screen was 200px and then used that to determine the boxes for each store(s) on the side of the street.

Glenn
????
OK, I was just guessing at how to do this, I looked at your example on  http://langsystems.net/walk.php and the Table output was really not visually anything like a map with two sides of the street, addresses on each side of street, it looked bad to me in a desktop Monitor view.
If you are determined to present some sort of location Map visual display, I would think that it would require a good deal of CSS positioning and color, borders arrangements. If you use a fixed width and height rectangle for a block, then if there is 12 or 15 addresses and 20 or 30 businesses on one side of block, then I do not see that they would fit in that fixed size block.
Not sure what you can fit on a "screen was 200px ", seems small for any map display.

The good thing about about a fixed block height, is that you can use CSS absolute positioning to place all address-business info DIV at a precise location in the block rectangle.
Take another look at the same page.  I'm getting close.  I need to move the address # to a second column on the left and the right address # to a first column on the right:

Deli   |111st  |F|150  |Macy

Thanks for the help.
Glenn
????, Not really sure how to help you with this? ?
Your DHTML structures (table, div, tr, and td) are NOT corresponding to any where close to being correct,
First, in DHTML structures, it is extremely necessary to have in a <table> , ALL ROWS and ALL COLUMNS properly aligned. You do not, in this row, it all screwed up-
<tr>
        <td colspan="2" style="text-align:center;border-top:1px solid #00d;">East 42nd
    </td>
      <td width="117">
    </td>
   <td width="176" colspan="2" style="text-align:center;border-top:1px solid #00d;">East 42nd
    </td>
   </tr>
you have the equivalent of FIVE columns here, but in the rest of your rows, there are only THREE columns, not sure about the visual you want here, but you might try -
<tr>
    <td  width="285" style="text-align:center;border-top:1px solid #00d;">East 42nd
    </td>
    <td width="117">
    </td>
   <td style="text-align:center;border-top:1px solid #00d;">East 42nd
    </td>
   </tr>

if you define a WIDTH for the TABLE, then you really do not need to define a width for all columns, if you have 3 columns then define a width for 2, and the third will be auto made to fit.

as to your - "I need to move the address # to a second column on the left and the right address # to a first column on the right:"

This I did in my example using CSS, as in this STYLE -
<style>
.blk{border:1px solid #00d;padding:4px;}
.blk div{border:1px solid #b77;padding:6px;display:-moz-inline-box;-moz-box-orient:vertical;display:inline-block;vertical-align:top;zoom:1;*display:inline;}
.addy{color:#fff;margin-top:5px;background-color:#000;}
</style>

only you compleatly messed up my DIV structures and the formatting placement -
"Deli" is not even in a DIV
then you have this line -

<br />Fred's Hot Dogs</div><div class="addy"></div>111th</div>

This will not work , , you have a </div> after "Hot Dogs" BUT you do not have the begining <div> tag, so that is a mistake,
then you have -
<div class="addy"></div>
And there is NOTHING in the addy Div it should be -
<div class="addy">111th</div>

but these div are not functioning for placement without the CSS Style in this -
<style>
.blk{border:1px solid #00d;padding:4px;}
.blk div{border:1px solid #b77;padding:6px;display:-moz-inline-box;-moz-box-orient:vertical;display:inline-block;vertical-align:top;zoom:1;*display:inline;}
.addy{color:#fff;margin-top:5px;background-color:#000;}
</style>

maybe I can do something later
I have again done more css for this and hopefully  got a more better view-
In your page code, at the very top under the <link rel=  , add my STYLE -
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta content="IE=edge,chrome=1">
  
<link rel="stylesheet" type="text/css" href="NewCss.css">

<style> /* ADD THIS HERE */
.blk{
  width:16em; height:16em; border:1px solid #000; padding:4px;
  }

.blk div{
  border:1px solid #b77;
  padding:7px 7px 4px 7px;
  margin-bottom:2px;
  display:-moz-inline-box;
  moz-box-orient:vertical;display:inline-block;vertical-align:top;zoom:1;*display:inline;
  }

.blk span{
  position:relative;
  left:-4px;top:6px;color:#fff;
  padding:4px;
  background-color:#000;
  border-radius:10px;
  }
</style>

</head>
<body>

Open in new window


I have changed the table a small amount, and now have <span> for the address Numbers -
<table>
  <tr>
    <td style="text-align:center; border-top:1px solid #000;">
    East 42nd
    </td>
	
    <td></td>
	
    <td style="text-align:center;border-top:1px solid #000;">
    East 42nd
    </td>
  </tr>
  <tr>
    <td class="blk" style="text-align:right;">
    <div>Retail Available<br>Deli<br />Fred's Hot Dogs</div><span>111h</span>
    <br /><div>Jeweler<br />News Stand</div><span>113th</span>
    <br /><div>Grocery</div><span>115th</span>
    <br /><div>Office Supplies<br />Beth's Hair and Nails</div><span>117n</span>
    <br />
    </td>
	
    <td style="font-weight:bold; padding:6px; line-height:90%;">F<br />i<br />f<br />t<br />h<br /><br />A<br />v<br />e</td>
	
    <td class="blk">
    <span style="left:4px;">150</span><div style="height:100%;">Macy's</div>
    </td>
  </tr>
  <tr>
    <td style="text-align:center;border-Bottom:1px solid #000;">
    East 41nd
    </td>
	
    <td></td>
	
    <td style="text-align:center; border-Bottom:1px solid #000;">
    East 41nd
    </td>
  <tr>
</table>

Open in new window

Maybe this will help some?
it looks as though you have not done much with DHTML and the CSS, , sorry I thought you had some knowledge for that , , and I dumped this css on you. Hope you can pick some of it up from this.
Slick
Check out the site again:
langsystems.net
login in as sales pwd=lsi
change the url to langsystems.net/walk.php

I modified you original code to be (this is for the 1st 3 columns)

<table width="715">
  <tr>
        <td colspan="2" class="Body_Labels" style="text-align:center;border-top:1px solid #00d;">East 42nd
    </td>
      <td width="117">
    </td>
   <td width="176" colspan="2" style="text-align:center;border-top:1px solid #00d;">East 442nd
    </td>
   </tr>
   
  <tr>
        <td width="285" class="Body_Labels" style="text-align:left;">
          Deli
          <br />Fred's Hot Dogs Stand</div>
       
          <div>Jeweler
        <br />News Stand</div>
       
          <div>Grocery</div>
       
          <div>Office Supplies
        <br />Beth's Hair and Nails</div>
      </td>
 
      <td width="285" class="Body_Labels" style="text-align:left;">
          111th
        <br />&nbsp;</div>

          <div>113th
        <br />&nbsp;</div>
   
          <div>115th
        <br /></div>

            <div>117th
        <br />&nbsp;</div>
      </td>

   
      <td width="117" class="Body_Labels" style="font-weight:bold;padding:4px;line-height:90%;">
        F
        <br />i
        <br />f
        <br />t
        <br />h
        <br />
        <br />A
        <br />v
        <br />e
      </td>

The only problem that I see right now is that the 1st address has a blank line at the top.

After I solve this I have to figure out the height of each address.  I'm not worried about that because in the database there is a field that tells you how tall it is based on 200 pixels per street.  I'm figuring all I have to do is some simple math to convert that into a percentage.  I'm going to know how tall the page is so if I get a return that is 20 pixels, that's 10% of the page height.


I haven't had time to look at your new solution.  If everyone leave me alone, hopefully tomorrow.  I'm more on the data side of the problems.  I know enough about css, html and php to get me in trouble!

I have another question about this page.  If from the main menu, you click on exclusives, when you scroll over an address it hilights the address and clicking on it goes to the detail display for the space.  I'm doing this by having a hidden radio button off the left side of the screen.   I was just wondering if I could duplicate this same logic and have it work on the right side of the screen as well as the left.  The thinking was that when you click on a tenant on either side of the street, it would bring you to the detail tenant info.

Thanks
Glenn
????
I do not like the way that you have coded your new TABLE at all! IT IS INCORRECT! !
I really tried to tell you before to make sure you have the same column count in each table row,  And now you do NOT have the same column count in ANY ROW! ! !
In first row you have equivalent of 5 columns.
In second row you have 4 columns.
In third row you have equivalent of 2 columns.

On the left side of street, there is way too much blank space on either side of the number addresses like 111th, why oh why is this  <td width="285" ? ? 285 wide seems way too much  width to me.
ALSO You have completely USELESS <div> around the number addy like -
<div>113th
 <br />&nbsp;</div>
They do nothing, and should not be there

ALSO in the business list, you have completely USELESS <div> around the business name like -
<div>Jeweler
<br />News Stand</div>

I placed these <div> in my code, because with my CSS they actually DO SOMETHING useful, in yours they need to be removed if you are not going to use them.
Please clean up your table code.

I have done much in some very different html table displays for database output, and I really can not see a non-complex way to get proper correspondence-connection between the business names groups, and the number address, in the column with addys like 111th you use line breaks <br /> to space them to a first line business name, so I guess you will do PHP code to calculate the amount of business names in each group and add <br /> for spacing, there are easier ways.
For that matter you have NO WAY to tell the grouping of the business names, how can you tell that Grocery is not grouped with News Stand? ? I added the <div>  and <span> in my CSS code to group together the correct business names with the correct number address, in a way that could be output from data base SELECT.

You ask - " I was just wondering if I could duplicate this same logic and have it work on the right side of the screen as well as the left."
I guess the answer is yes, but I do not understand much of the methods you say, but I do know about clicking, you can make it so where you want a click to happen, it will happen, however I can not tell what you need.

You are wearing me out, I gave you code to have some sort of VISUAL solution, but You have not used my CSS code and then redo my table with incorrect HTML. Even if you clean up your table code, you may not be much closer to having much of a map display, your Fifth Ave street does not even have lines on either side to at least make it look like a map lane.
At least look at my CSS Table, to see what I have done.
OK, since you are a beginner at tables html, I have done a version with Tables within a Table, which is not recommended anymore in HTML5 and CSS3, but you are a long way from the  HTML5 and CSS3 page coding. I have left out ALL declared CSS classes, because you seem to not get that, and have all style= in the html elements.
<table style="background:#fea;">
<tr>
<td style="text-align:center;border-top:1px solid #000;">East 42nd</td>
<td></td>
<td style="text-align:center;border-top:1px solid #000;">East 42nd</td>
</tr>
<tr>
<td>
  <table style="width:17em;height:17em;border:1px solid #000;">
  <tr><td style="border:1px dashed #07b;text-align:right;">Retail Available<br />Deli<br />Fred's Hot Dogs</td>
    <td style="width:3.5em;"><div style="text-align:right;background:#0cd;padding-right:3px;">111h</div></td>
  </tr>
  <tr><td style="border:1px dashed #07b;text-align:right;">Jeweler<br />News Stand</td>
    <td><div style="text-align:right;background:#0cd;padding-right:3px;">113th</div></td>
  </tr>
  <tr><td style="border:1px dashed #07b;text-align:right;">Grocery</td>
    <td><div style="text-align:right;background:#0cd;padding-right:3px;">115th</div></td>
  </tr>
  <tr><td style="border:1px dashed #07b;text-align:right;">Office Supplies<br />Beth's Hair and Nails</td>
    <td><div style="text-align:right;background:#0cd;padding-right:3px;">117c</div></td>
  </tr>
  </table>
</td>
<td style="font-weight:bold;padding:5px;line-height:90%;">F<br />i<br />f<br />t<br />h<br /><br />A<br />v<br />e</td>
<td>
  <table style="width:17em;height:17em;border:1px solid #000;">
  <tr><td style="width:3.5em;"><div style="text-align:left;background:#0cd;padding-left:3px;">150</div></td>
    <td style="border:1px dashed #07b;">Macy's</td>
  </tr>
  </table>
</td>
</tr>
<tr>
<td style="text-align:center;border-Bottom:1px solid #000;">East 41st</td>
<td></td>
<td style="text-align:center;border-Bottom:1px solid #000;">East 41st</td>
</tr>
</table>

Open in new window

This to me gives an adequate view display for a map thing, and the browser table rendering helps with placing the stuff in correct ways. I have left out the <tbody> and other to have a minimum code write

You may can look at the learning examples for CSS here -
http://w3schools.com/css/css_examples.asp
they have TRY IT pages where you can test your skills and learn more CSS
They also have pages for HTML examples and table code.
Check it out again.
I'm getting there.  Nobody is going to bother be over the weekend.  By Monday, I should have it working with data.

Thanks again for the help.

I did the table within the table.  I knew this wasn't the correct way and I didn't want to do it.
It looks pretty and that's what the customer cares about.  I'll correct this later.

Glenn
I looked at the page addy  http://langsystems.net/walk.php
WOW, that's a tremendous improvement on the table views you had before, I hope you are understanding some more of the HTML and CSS that are used there.

I will say that your using a "MIXED" referenced between the OLD table html calls and the new CSS view calls like this -
<td bgcolor="#ffccff"; style="text-align:left;">

where you use OLD  bgcolor="#ffccff";   // YOU should NOT have the ; in the OLD HTML
and the new css style="text-align:left;"

are not what I would consider correct, HOWEVER if it works for you, and you understand it, then you are on the way to a better web page! Hoo Raa!
perhaps you should ask any further PHP troubles with your "working with data." in a separate question?
Hey, I may be dumb but I'm not stupid!

In my last job we wrote software for Unions and Jewelers/Furriers (how they got in to the second one is beyond me!)  The line over there when the 12 programmers couldn't figure it out, they would go to the owner and he would tell them "Give it to Glenn, he'll figure out evintally."

The one thing that I've learned is that the only stupid question is the one that you don't ask.

I didn't understand the line in your previous message where the line starts:
"where you use OLD"

I think that I know what you're trying to say, but the line in the message didn't make sense.

Glenn
sorry about how I am trying to say things to you for corrections,  where I said ""where you use OLD"", I maybe should have said "where you used the older table html  coding of '<td bgcolor="#ffccff";', , , the "bgcolor=" in the <td> has been surpassed with the newer CSS  style="background:#ffccff;"  or even the style="background-color:#ffccff;"

I am not here in EE to categorize coders as "dumb or stupid", and any thing that I write here is my stupidness in doing these things. Oh well, totally my bad.
No, the "dumb or stupid" was me.  No harm no foul.

I kind of get what the "old/css" is.  I'm working on the page.

Glad you liked had modified the code after your help.

Like I said before, I'm more of a database guy.   My partner just told me I have about a month to show something at an expo.  He's killing me!!!!!!!!!!!!!!  I just got out of the hospital with "pneomia" and now  and the last couple of days I'm fighting a cold.  Doesn't happen that all of a sudden it all falls down on you?

I'm leaving this open.

Thanks again.

Glenn
ASKER CERTIFIED SOLUTION
Avatar of Member_2_248744
Member_2_248744
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Almost done with this, it does work