Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
overlapping DIV tags 2
- Thread starter blues77
- Start date
- Thread starter
- #3
- Thread starter
- #4
-
1
- #5
Show us the complete (html + css) code.
Erik <!-- My sport: Boomerang throwing !!
This year I will participate at the World Championships in Germany. (!! Many Happy Returns !! -->
Erik <!-- My sport: Boomerang throwing !!
This year I will participate at the World Championships in Germany. (!! Many Happy Returns !! -->
- Thread starter
- #6
this is the entire html code. I appologize if it's difficult to read. I actually just modified the page so that everything is positioned using tables and it seems to work fine.
<html>
<head>
<title>Topographic Maps</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="mapStoreStyles.css">
<script src="./javaScript/mapStoreScript.js" language="javascript" type="text/javascript">
</script>
<script language="javascript" type="text/javascript">
entireMap50 = new Image
detailMap50 = new Image
entireMap250 = new Image
detailMap250 = new Image
entireMap50.src = "../assets/mapPics/topographic(50).jpg"
detailMap50.src = "../assets/mapPics/topographic(50)detail.jpg"
entireMap250.src = "../assets/mapPics/topographic(250).jpg"
detailMap250.src = "../assets/mapPics/topographic(250)detail.jpg"
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<div style="position:absolute; border:medium outset black; left:10px; width:95%; background-color: #336699; layer-background-color: #336699; color:#C5DAF1" >
<div align="center"><font face="Arial, Helvetica, sans-serif" size="7"><b>National Topographic System of Canada</b></font></div>
</div>
<br>
<br>
<br>
<br>
<br>
<div style="border:thin solid black; position:absolute; left:10px; width:95%">
<br> A topographic map is a detailed and accurate graphic representation of cultural
and natural features on the ground. They are available in two standard scales,
1:50 000 and 1:250 000. The area covered by a given map sheet is determined
by its latitude and longitude. Because of the standard NTS numbering system,
knowing the map number allows you to quickly identify adjacent maps.
<a href="topoBasics.html"><img align="absmiddle" border="0" src="../assets/clickForMore.jpg"></a><br><br>
</div>
<br>
<!--main div tag to hold page contents-->
<div style="position:absolute; left:10px; width:95%; height:20%px; top:40%">
<b><i>Roll your mouse over the map photos to see a more detailed view</i><b>
<br>
<br>
<table>
<tr>
<td align="right" width="32%"> <img src="../assets/mapPics/topographic(50).jpg" name="topo50" onMouseover="document.topo50.src=detailMap50.src" onMouseout="document.topo50.src=entireMap50.src">
</td>
<td align="left" valign="top" width="44%"> <b>1:50,000 sample</b> <br>
<br>
The 1:250,000 scale maps are divided into sixteen segments<br> (1 to 16) forming blocks used for 1:50,000 scale mapping.
<br>
<br>
<br>
<br>
</td>
<td valign="top" align="center" width="24%" >
<div onMouseover="displayMenu('NTS1')" onMouseout="hideMenu('NTS1')">
<img src="../assets/viewIndex.jpg">
</div>
<div id="NTS1" style="visibility:hidden; border:thin solid black" onMouseover="displayMenu('NTS1')" onMouseout="hideMenu('NTS1')">
<b> Nova Scotia<br>
New Brunswick<br>
PEI<br>
NewfoundLand<br>
Labrador</b> </div>
</td>
</tr>
<tr>
<td align="right" width="32%"><img src="../assets/mapPics/topographic(250).jpg" name="topo250" onMouseover="document.topo250.src=detailMap250.src" onMouseout="document.topo250.src=entireMap250.src"></td>
<td align="left" valign="top" width="44%">
<p><b>1:250,000 sample</b> <br>
<br>
The 1:250 000 scale maps are identified by a combination of numbers
and letters, A through P (e.g. 11D). <br>
<br>
</p>
</td>
<td valign="top" align="center" width="24%" >
<div onMouseover="displayMenu('NTS2')" onMouseout="hideMenu('NTS2')"> <img src="../assets/viewIndex.jpg"></div>
<div id="NTS2" style="visibility:hidden; border:thin solid black" onMouseover="displayMenu('NTS2')" onMouseout="hideMenu('NTS2')">
<b> Nova Scotia<br>
New Brunswick<br>
PEI<br>
NewfoundLand </b><br>
<b> Labrador</b>
</div>
</td>
</tr>
</table>
<pre>
</pre>
</b></b></div>
<p><b><b> <br>
<br>
</b></b></p>
<p> </p>
<p> </p>
</body>
</html>
<html>
<head>
<title>Topographic Maps</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="mapStoreStyles.css">
<script src="./javaScript/mapStoreScript.js" language="javascript" type="text/javascript">
</script>
<script language="javascript" type="text/javascript">
entireMap50 = new Image
detailMap50 = new Image
entireMap250 = new Image
detailMap250 = new Image
entireMap50.src = "../assets/mapPics/topographic(50).jpg"
detailMap50.src = "../assets/mapPics/topographic(50)detail.jpg"
entireMap250.src = "../assets/mapPics/topographic(250).jpg"
detailMap250.src = "../assets/mapPics/topographic(250)detail.jpg"
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<div style="position:absolute; border:medium outset black; left:10px; width:95%; background-color: #336699; layer-background-color: #336699; color:#C5DAF1" >
<div align="center"><font face="Arial, Helvetica, sans-serif" size="7"><b>National Topographic System of Canada</b></font></div>
</div>
<br>
<br>
<br>
<br>
<br>
<div style="border:thin solid black; position:absolute; left:10px; width:95%">
<br> A topographic map is a detailed and accurate graphic representation of cultural
and natural features on the ground. They are available in two standard scales,
1:50 000 and 1:250 000. The area covered by a given map sheet is determined
by its latitude and longitude. Because of the standard NTS numbering system,
knowing the map number allows you to quickly identify adjacent maps.
<a href="topoBasics.html"><img align="absmiddle" border="0" src="../assets/clickForMore.jpg"></a><br><br>
</div>
<br>
<!--main div tag to hold page contents-->
<div style="position:absolute; left:10px; width:95%; height:20%px; top:40%">
<b><i>Roll your mouse over the map photos to see a more detailed view</i><b>
<br>
<br>
<table>
<tr>
<td align="right" width="32%"> <img src="../assets/mapPics/topographic(50).jpg" name="topo50" onMouseover="document.topo50.src=detailMap50.src" onMouseout="document.topo50.src=entireMap50.src">
</td>
<td align="left" valign="top" width="44%"> <b>1:50,000 sample</b> <br>
<br>
The 1:250,000 scale maps are divided into sixteen segments<br> (1 to 16) forming blocks used for 1:50,000 scale mapping.
<br>
<br>
<br>
<br>
</td>
<td valign="top" align="center" width="24%" >
<div onMouseover="displayMenu('NTS1')" onMouseout="hideMenu('NTS1')">
<img src="../assets/viewIndex.jpg">
</div>
<div id="NTS1" style="visibility:hidden; border:thin solid black" onMouseover="displayMenu('NTS1')" onMouseout="hideMenu('NTS1')">
<b> Nova Scotia<br>
New Brunswick<br>
PEI<br>
NewfoundLand<br>
Labrador</b> </div>
</td>
</tr>
<tr>
<td align="right" width="32%"><img src="../assets/mapPics/topographic(250).jpg" name="topo250" onMouseover="document.topo250.src=detailMap250.src" onMouseout="document.topo250.src=entireMap250.src"></td>
<td align="left" valign="top" width="44%">
<p><b>1:250,000 sample</b> <br>
<br>
The 1:250 000 scale maps are identified by a combination of numbers
and letters, A through P (e.g. 11D). <br>
<br>
</p>
</td>
<td valign="top" align="center" width="24%" >
<div onMouseover="displayMenu('NTS2')" onMouseout="hideMenu('NTS2')"> <img src="../assets/viewIndex.jpg"></div>
<div id="NTS2" style="visibility:hidden; border:thin solid black" onMouseover="displayMenu('NTS2')" onMouseout="hideMenu('NTS2')">
<b> Nova Scotia<br>
New Brunswick<br>
PEI<br>
NewfoundLand </b><br>
<b> Labrador</b>
</div>
</td>
</tr>
</table>
<pre>
</pre>
</b></b></div>
<p><b><b> <br>
<br>
</b></b></p>
<p> </p>
<p> </p>
</body>
</html>
-
1
- #7
SashiRaveendran
Programmer
design your page in or for 800*600 res, this is really the lowest res you should support. Once you design for this res you wont get the overlapping problem with higher res screens
Hi Blues77,
The settings of width, top, height in % causes the problem
With the red changes I made in the div settings it should work fine. (as sjravee said when you desigh for 800*600 you won't get any peoblem. A lot of (professional) sites design for 800*600 and have a blank area at the right (or the center the page and have left and right blank area)
The green adds are because I like that more
<div style="position:absolute; border:medium outset black; left:10px; width:750; background-color: #336699; layer-background-color: #336699; color:#C5DAF1">
<div style="border:thin solid black; position:absolute; left:10px; width:750; top:70; padding-left:8px; padding-right:8px;">
<div align="center"><font face="Arial, Helvetica, sans-serif" size="6"><b>National Topographic System of Canada</b></font></div>
<div style="border:thin solid black; position:absolute; left:10px; width:750; top:70">
---------------------------------------------------------
BTW: why not code your style in a style sheet or inline style and give the div's a classname:
<style>
.div1 {
position:absolute;
border:medium outset black;
left:10px;
width:750;
background-color: #336699;
layer-background-color: #336699;
color:#C5DAF1
}
.div2 {
border:thin solid black;
position:absolute;
left:10px;
width:750;
top:70;
padding-left:8px;
padding-right:8px;
}
</style>
<div class=div1"></div>
<div class=div2"></div>
Hope this helps,
Erik <!-- My sport: Boomerang throwing !!
This year I will participate at the World Championships in Germany. (!! Many Happy Returns !! -->
The settings of width, top, height in % causes the problem
With the red changes I made in the div settings it should work fine. (as sjravee said when you desigh for 800*600 you won't get any peoblem. A lot of (professional) sites design for 800*600 and have a blank area at the right (or the center the page and have left and right blank area)
The green adds are because I like that more
<div style="position:absolute; border:medium outset black; left:10px; width:750; background-color: #336699; layer-background-color: #336699; color:#C5DAF1">
<div style="border:thin solid black; position:absolute; left:10px; width:750; top:70; padding-left:8px; padding-right:8px;">
<div align="center"><font face="Arial, Helvetica, sans-serif" size="6"><b>National Topographic System of Canada</b></font></div>
<div style="border:thin solid black; position:absolute; left:10px; width:750; top:70">
---------------------------------------------------------
BTW: why not code your style in a style sheet or inline style and give the div's a classname:
<style>
.div1 {
position:absolute;
border:medium outset black;
left:10px;
width:750;
background-color: #336699;
layer-background-color: #336699;
color:#C5DAF1
}
.div2 {
border:thin solid black;
position:absolute;
left:10px;
width:750;
top:70;
padding-left:8px;
padding-right:8px;
}
</style>
<div class=div1"></div>
<div class=div2"></div>
Hope this helps,
Erik <!-- My sport: Boomerang throwing !!
This year I will participate at the World Championships in Germany. (!! Many Happy Returns !! -->
Hi Blues77,
oops, I made some mistakes.
These should be the right changes:
<div style="position:absolute; border:medium outset black; left:10px; width:750; background-color: #336699; layer-background-color: #336699; color:#C5DAF1">
<div align="center"><font face="Arial, Helvetica, sans-serif" size="6"><b>National Topographic System of Canada</b></font></div>
<br>
<br>
<br>
<br>
<br>
<div style="border:thin solid black; position:absolute; left:10px; width:750; top:70; padding-left:8px; padding-right:8px;">
<!--main div tag to hold page contents-->
<div style="position:absolute; left:10px; width:750; top:200">
Hope this helps,
Erik <!-- My sport: Boomerang throwing !!
This year I will participate at the World Championships in Germany. (!! Many Happy Returns !! -->
oops, I made some mistakes.
These should be the right changes:
<div style="position:absolute; border:medium outset black; left:10px; width:750; background-color: #336699; layer-background-color: #336699; color:#C5DAF1">
<div align="center"><font face="Arial, Helvetica, sans-serif" size="6"><b>National Topographic System of Canada</b></font></div>
<br>
<br>
<br>
<br>
<br>
<div style="border:thin solid black; position:absolute; left:10px; width:750; top:70; padding-left:8px; padding-right:8px;">
<!--main div tag to hold page contents-->
<div style="position:absolute; left:10px; width:750; top:200">
Hope this helps,
Erik <!-- My sport: Boomerang throwing !!
This year I will participate at the World Championships in Germany. (!! Many Happy Returns !! -->
- Status
Similar threads