?
Solved

<DIV> Layers questions/critique/help?

Posted on 2006-11-03
6
Medium Priority
?
475 Views
Last Modified: 2010-05-18
I'm playing with a small app to generate a google maps page for a collection of geocaches (my hobby).  I'm dropping the results into an html doc trying to use <DIV> containers for the various elements (vs tables or frames).

Here's what it looks like so far:  http://home.comcast.net/~markp99/myGMEv02.jpg

Questions for the html/css guru's:

1.  Is there a better way to build the container banners?
2.  The map renders in IE no problem, but the map and sidepanels overlap in Firefox.
3.  Have I constructed the layers properly?
4.  My intent:
 -- 20px border around the entire page
 -- 20px banner for each container
 -- 20px gap between map and side panel
 -- map to re-size with window
 -- sidepanel width to remain fixed at 280px

I have stripped down the code to just the basic page w/containers.  I'd really love to get a little help/critique on what I've done so far, and how I might improve.  This is my very first attempt at html/css/layers.

Thanks!

Mark


<HTML><HEAD>
<TITLE>myGME - GSAK Google Maps Export</TITLE>

    <script src="http://maps.google.com/maps?file=api&v=2" type="text/javascript"></script>

<!-- Make the document body take up the full screen -->
<STYLE type=text/css>
      BODY {WIDTH: 100%; HEIGHT: 100%}
      BODY {
            MARGIN: 0px;
            PADDING-RIGHT: 20px;
            PADDING-LEFT: 20px;
            PADDING-BOTTOM: 20px;
            PADDING-TOP: 20px;
      }
      #mapHead {
            POSITION: relative;
            TOP: 0px;
            LEFT:0;
            HEIGHT: 20px;
            MARGIN-RIGHT: 300px;
            BACKGROUND-COLOR: #a7cc95;
            BORDER: green 2px solid;
      }
      #map {
            POSITION: relative;
            TOP: -2px;
            HEIGHT: 90%;
            MARGIN-RIGHT: 300px;
            BORDER: green 2px solid;
      }
      #radiusHead {
            POSITION: absolute;
            TOP: 20px;
            RIGHT:20px;
            WIDTH: 280px;
            HEIGHT: 20px;
            BACKGROUND-COLOR: #a7cc95;
            BORDER: green 2px solid;
      }
      #myRadius {
            POSITION: absolute;
            TOP: 40px;
            RIGHT: 20px;
            WIDTH: 280px;
            HEIGHT: 60px;
            BACKGROUND-COLOR: white;
            BORDER: green 2px solid;
      }
      #sideHead {
            POSITION: absolute;
            TOP: 98px;
            HEIGHT: 20px;
            RIGHT:20px;
            WIDTH: 280px;
            PADDING-TOP: 0PX;
            PADDING-LEFT: 5PX;
            FONT-WEIGHT: bold;
            BACKGROUND-COLOR: #a7cc95;
            BORDER: green 2px solid;
      }
      #sidepanel {
            POSITION: absolute;
            TOP: 118px;
            RIGHT: 20px;
            HEIGHT: 70%;
            WIDTH: 280px;
            BORDER: green 2px solid;
            PADDING-BOTTOM: 5px;
            OVERFLOW: auto;
            WHITE-SPACE:nowrap;
      }

.myBanner {FONT-FAMILY: Arial, Helvetica, sans-serif ; FONT-WEIGHT: bold; FONT-STYLE: italic; COLOR: white;}
.myList {FONT-FAMILY: Arial, Helvetica, sans-serif ; FONT-WEIGHT: normal; FONT-STYLE: normal; COLOR: black; ; FONT-SIZE:smaller }

</STYLE>
</HEAD>

<BODY>
      <DIV id=mapHead>
            <DIV class="myBanner" ALIGN=center>myGME - GSAK Google Maps Export</DIV>
      </DIV>

      <DIV id=map>
            The map goes here...
      </DIV>

      <DIV id=sideHead>
            <DIV class="myBanner" ALIGN=center>Geocaches</DIV>
      </DIV>

      <DIV id=sidepanel>
            The result list goes here...
      </DIV>

      <DIV id=radiusHead>
            <DIV class="myBanner" ALIGN=center >Search Radius</DIV>
      </DIV>

      <DIV id="myRadius" ALIGN=center CLASS="myList" >
            The search radius is defined here:
      </DIV>

      <DIV id=coords class = "myList">
            Mouse & marker coordinates go here
      </DIV>

<SCRIPT type=text/javascript>

<!-----create the map----->

var map = new GMap2(document.getElementById("map"));
  map.setCenter(new GLatLng(42.50,-71.00), 9);
  map.addControl(new GLargeMapControl());
  map.addControl(new GMapTypeControl());
  map.addControl(new GScaleControl(300));
  map.enableContinuousZoom();
  map.enableDoubleClickZoom();

<!-----minimap inset----->

  var ovSize=new GSize(200, 150)
  var ovMap=new GOverviewMapControl(ovSize);
  map.addControl(ovMap);
  var mini=ovMap.getOverviewMap();
  ovMap.hide();    //hide by default

<!-----hide controls----->

      map.hideControls();    //hide controls by default
            GEvent.addListener(map, "mouseover", function(){map.showControls();  });
            GEvent.addListener(map, "mouseout", function(){map.hideControls();  });

<!-----draggable marker----->

  var initialCenter = new GLatLng(42.50,-71.00);  //Starting point
  var centerPoint = new GMarker(initialCenter, {icon:G_DEFAULT_ICON, draggable: true});
  map.addOverlay(centerPoint);

</SCRIPT>

</BODY></HTML>
0
Comment
Question by:markp99
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
6 Comments
 
LVL 19

Expert Comment

by:VoteyDisciple
ID: 17870974
Before I forget: HTML tags and attributes, and CSS attributes should all be lowercase.

A good rule of thumb with CSS is if you remove all style information completely, it should still make sense when you read it.  It won't look pretty, but it should still be organized in a coherent way.  In this case, what I notice is that without style information,  none of your titles look like titles, and your sections won't actually be broken apart at all.  Here's what I'd suggest instead:


<div id="map-container" class="box">
<h1>myGME - GSAC Google Maps Export</h1>

<div id="map"></div>

</div>

<div id="side" class="box">
<h1>Geocaches</h1>

The result list goes here.

</div>

<div id="radius" class="box">
<h1>Search Radius</h1>

Search radius stuff here
</div>


Basically I've done two things: first, since all three of these boxes are gonna look basically the same, I've given them a class so we won't have to rewrite all the "make it look like a box" CSS.  Second, I've changed the headings to be, well, actual HTML headings, and I've relocated them inside the containing <div>.  This way you've got a single <div> you can move about freely on the page without having to carry around its title div too -- the heading comes with it for free.


So what should the CSS be?

Well, first let's make boxes look like boxes.

body {
    font-family: Arial, Helvetica, sans-serif;
}

.box {
    background: white;
    border: 1px solid black;
}

.box h1 {
   background: #17cc95;
   width: 100%;
   border-bottom: 1px solid black;
}

/* Then we just put stuff where you want it: */

#map-container {
    position: absolute;
    ....
}

#radius {
    position: absolute;
    ....
}

#side {
    position: absolute;
    ....
}



Note that I wrote this here without testing it in a browser, so I doubt I've got it looking exactly the same as you had it, but that doesn't mean it can't be done.  It'll just likely require some tweaking.
0
 

Author Comment

by:markp99
ID: 17871386
Votey,

Thanks for the great comments; they sure make a nice improvement and simplify the code.

I have just a coupel remaining issues:

1.  The "headers" render as expected, but when I drop the map into the container, it fills the "box" obscuring the header.

2.  The layers render just fine in IE, but they still overlap in firefox

- any additional suggestions?

Thanks again!

=======================================
Here is the result of changes made from Votey's comments:


<html><head>
<title>myGME - GSAK Google Maps Export</title>

<script src="http://maps.google.com/maps?file=api&v=2" type="text/javascript"></script>

<!-- Make the document body take up the full screen -->
<style type=text/css>
      body {width: 100%; height: 100%}
      body {
            margin: 0px;
            padding-right: 20px;
            padding-left: 20px;
            padding-bottom: 20px;
            padding-top: 20px;
            font-family: Arial, Helvetica, sans-serif;
      }
      #myMap {
            position: relative;
            height: 90%;
            margin-right: 300px;
      }
      #myRadius {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 280px;
            height: 100px;
      }
      #myResult {
            position: absolute;
            top: 118px;
            right: 20px;
            width: 280px;
            height: 300px;
            overflow: auto;
            white-space:nowrap;
      }

.box {
      background: white;
      border: 2px solid green;
}
.box h1 {
      background: #a7cc95;
      width: 100%;
      border-bottom: 2px solid green;
      text-align: center;
      color:white;
      font-size:18px;
      font-style:italic;
      }

</style></head>

<body>
      <div id=myMap class="box">
            <h1>myGME - GSAK Google Maps Export</h1>
            The map goes here...
      </div>

      <div id=myRadius class="box">
            <h1>Search Radius</h1>
            The search radius is defined here...
      </div>

      <div id=myResult class="box">
            <h1>Geocaches</h1>
            The result list goes here...
                </div>

      <div id=coords>
            Mouse & marker coordinates go here...
      </div>

<script type=text/javascript>

<!-----create the map----->

var map = new GMap2(document.getElementById("myMap"));
      map.setCenter(new GLatLng(42.50,-71.00), 9);
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.addControl(new GScaleControl(300));
      map.enableContinuousZoom();
      map.enableDoubleClickZoom();

<!-----minimap inset----->

      var ovSize=new GSize(200, 150)
      var ovMap=new GOverviewMapControl(ovSize);
      map.addControl(ovMap);
      var mini=ovMap.getOverviewMap();
      ovMap.hide();    //hide by default

<!-----hide controls----->

      map.hideControls();    //hide controls by default
            GEvent.addListener(map, "mouseover", function(){map.showControls();  });
            GEvent.addListener(map, "mouseout", function(){map.hideControls();  });

<!-----draggable marker----->

      var initialCenter = new GLatLng(42.50,-71.00);  //Starting point
      var centerPoint = new GMarker(initialCenter, {icon:G_DEFAULT_ICON, draggable: true});
      map.addOverlay(centerPoint);

</script>

</body></html>
0
 
LVL 19

Expert Comment

by:VoteyDisciple
ID: 17871427
You might want to set it up like:

<div id="map-container" class="box">
<h1>...</h1>

<div id="map"></div>

</div>



#map {
    margin-top: 1em;
    font-size: /* whatever the font-size of your h1 is */
}
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:markp99
ID: 17871633
That makes sense!  I only needed to play with a pesky padding issue on the top and bottom of the map.  Looks good now!   Thanks!

Last issue that the page renders as expected in IE, but badly in Firefox.  The map and sidepanel layers overlap by about 20px and the map spills over the header by ~5px and obscures the bottom border.

Are there better ways to define the locations of the containers that would play more nicely across the 2 browsers??


Mark
0
 
LVL 19

Accepted Solution

by:
VoteyDisciple earned 1000 total points
ID: 17871825
My first guess would be that the body's padding is what's screwing stuff up.

You might also try, instead of absolute positioning, just doing float: right;  on the two things you want on the right (and perhaps float: left; ) and then you don't have to balance the exact numbers.  I don't know how well that will work for the whole "make the map fill the whole screen" thing that works so well with Google maps, but for the other content it's probably perfectly fine.
0
 

Author Comment

by:markp99
ID: 17872139
I replaced <body> "padding" with "margin" and this mostly cleared up my firefox issues and kept IE happy.

Only remaining issue appears in Firefox during window/map resizing, but its just a few pixels of whitespace/border overlap over the range a window might be resized - no big deal.  I may play with it some more, but not a priority.

Here's the final version.   Thanks for the assist VoteyDicey!

============================================

<html><head>
<title>myGME - GSAK Google Maps Export</title>

<script src="http://maps.google.com/maps?file=api&v=2" type="text/javascript"></script>

<!-- Make the document body take up the full screen -->
<style type=text/css>
      body {
            margin-top: 20px;
            margin-left: 20px;
            margin-right: 20px;
            font-family: Arial, Helvetica, sans-serif;
      }
      #myMapContainer {
            position: relative;
            height:90%;
            margin-right: 300px;
      }
      
      #myMap {
            position:relative;
            margin-top: 0px;
            margin-bottom:0px;
            height: 95%;
      }

      #myRadius {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 280px;
            height: 100px;
      }
      #myResult {
            position: absolute;
            top: 118px;
            right: 20px;
            width: 280px;
            height: 300px;
            overflow: auto;
            white-space:nowrap;
      }

.box {
      background: white;
      border: 2px solid green;
}

.box h1 {
      background: #a7cc95;
      width: 100%;
      border-bottom: 2px solid green;
      text-align: center;
      color:white;
      font-size:18px;
      font-style:italic;
      margin:0px;
      }

</style>
</head>

<body>
      
      <div id=myMapContainer class="box">
            <h1>myGME - GSAK Google Maps Export</h1>
            <div id=myMap></div>
      </div>

      <div id=myRadius class="box">
            <h1>Search Radius</h1>
            The search radius is defined here...
      </div>

      <div id=myResult class="box">
            <h1>Geocaches</h1>
            The result list goes here...
</div>

      <div id=coords>
            Mouse & marker coordinates go here...
      </div>

<script type=text/javascript>

<!-----create the map----->

var map = new GMap2(document.getElementById("myMap"));
      map.setCenter(new GLatLng(42.50,-71.00), 9);
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.addControl(new GScaleControl(300));
      map.enableContinuousZoom();
      map.enableDoubleClickZoom();

<!-----minimap inset----->

      var ovSize=new GSize(200, 150)
      var ovMap=new GOverviewMapControl(ovSize);
      map.addControl(ovMap);
      var mini=ovMap.getOverviewMap();
      ovMap.hide();    //hide by default

<!-----hide controls----->

      map.hideControls();    //hide controls by default
            GEvent.addListener(map, "mouseover", function(){map.showControls();  });
            GEvent.addListener(map, "mouseout", function(){map.hideControls();  });

<!-----draggable marker----->

      var initialCenter = new GLatLng(42.50,-71.00);  //Starting point
      var centerPoint = new GMarker(initialCenter, {icon:G_DEFAULT_ICON, draggable: true});
      map.addOverlay(centerPoint);

</script>

</body></html>
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
Suggested Courses
Course of the Month12 days, 2 hours left to enroll

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question