|
HTML - Problem With Map
I am trying to work on this tutorial website and I can't figure out why it is placing the map on top when I am placing in the code for the map to go below the text. I am very new to HTML. Please help! Here is the code below
Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<title>Longs Peak Online Map</title>
<style type="text/css" media="screen, tv, tty">
body {font-family: sans-serif}
a {text-decoration: none}
img {border-width: 0px}
#summary {position: absolute; top: 350px; width: 600px}
#online_map {position: absolute; top: 5px; left: 5px}
#lpmap {position: absolute; top: 0px; left: 0px; width: 600px; height: 294px; z-index: 1}
#instruction {position: relative; top: 300px; width: 600px}
.notes p {margin: 5px; font-size: 8pt}
.notes p span {color: yellow}
.notes a {width: 20px; height: 20px; overflow: hidden; background-color: blue; color: white; z-index: 2}
.notes a:hover {width: 150px; height: 170px; overflow: visible; z-index: 3}
#point0 a {position: absolute; top: 60px; left: 560px}
#point1 a {position: absolute; top: 90px; left: 277px}
#point2 a {position: absolute; top: 0px; left: 175px}
#point3 a {position: absolute; top: 115px; left: 110px}
#point4 a {position: absolute; top: 165px; left: 55px}
#point5 a {position: absolute; top: 180px; left: 5px}
#point6 a {position: absolute; top: 222px; left: 15px}
#point7 a {position: absolute; top: 245px; left: 50px}
#point8 a {position: absolute; top: 245px; left: 100px}
#point9 a {position: absolute; top: 220px; left: 90px}
</style>
<style type="text/css" media="print">
body {font-family: sans-serif}
a {text-decoration: none}
img {border-width: 0px}
a:link, a:visited {color: black}
#instruction, #hideprint {display: none}
#lpmap {page-break-after: always}
.notes {page-break-inside: avoid; margin: 30px}
</style>
</head>
<body>
<div id="summary">
<h2>Longs Peak <span id="hideprint">Online</span> Trail Map</h2>
<p>At 14,255 feet, Longs Peak towers above all other summits in Rocky Mountain National
Park. The summer is the only season in which the peak can be climbed by a non-technical
route. Early mornings break calm, clouds build in the afternoon sky, often exploding in
storms of brief, heavy rain, thunder and dangerous lightning. Begin your hike early,
way before dawn, to be back below timberline before the weather turns for the
worse.</p>
<p>The Keyhole Route, Longs Peak's only non-technical hiking pathway, is a 16 mile
round trip with an elevation gain of 4,850 feet. Though non-technical, the Keyhole
Route is still challenging and is not recommended for those who are afraid of heights
or exposed ledges. Hikers should be properly outfitted with clothing, food and water.
Use caution when ascending or descending steep areas. Don't be afraid to back down when bad
weather threatens.</p>
</div>
<div id="online_map">
<div id="instruction">Move your mouse pointer over the numbered landmarks
in the map to preview the hike.
</div>
<div id="lpmap"><img src="images/lpmap.jpg" alt="" ? /></div>
<div class="notes" id="point0">
<a href="#">
<img src="images/image0.jpg" alt="" /><br />
<p>
<span>3:30 a.m.</span> Start from the Longs Peak Ranger Station,
nine miles south of Estes Park. Be sure to pack food, extra water, sunblock,
and warm clothes, gloves, and caps.
</p>
</a>
</div>
<div class="notes" id="point1">
<a href="#">
<img src="images/image1.jpg" alt="" /><br />
<p>
<span>5:30 a.m.</span> Stop at Mills Moraine for a view of the
sunrise.
</p>
</a>
</div>
<div class="notes" id="point2">
<a href="#">
<img src="images/image2.jpg" alt="" /><br />
<p>
<span>7:30 a.m.</span> Time for break at Granite Pass.
</p>
</a>
</div>
<div class="notes" id="point3">
<a href="#">
<img src="images/image3.jpg" alt="" /><br />
<p>
<span>8:30 a.m.</span> Climb through the Boulder Field on the
way to the Keyhole.
</p>
</a>
</div>
<div class="notes" id="point4">
<a href="#">
<img src="images/image4.jpg" alt="" /><br />
<p>
<span>9:00 a.m.</span> Stop at the
Agnes Vaille shelter for a well-deserved breakfast.
</p>
</a>
</div>
<div class="notes" id="point5">
<a href="#">
<img src="images/image5.jpg" alt="" /><br />
<p>
<span>9:30 a.m.</span> It's time to go through
the Keyhole. Be prepared for heavy winds.
</p>
</a>
</div>
<div class="notes" id="point6">
<a href="#">
<img src="images/image6.jpg" alt="" /><br />
<p>
<span>10:00 a.m.</span> Follow the painted targets along the Ledges.
</p>
</a>
</div>
<div class="notes" id="point7">
<a href="#">
<img src="images/image7.jpg" alt="" /><br />
<p>
<span>11:00 a.m.</span> Take special care when crossing the Narrows.
</p>
</a>
</div>
<div class="notes" id="point8">
<a href="#">
<img src="images/image8.jpg" alt="" /><br />
<p>
<span>11:15 a.m.</span> You're almost there! Climb the Homestretch
to reach the summit.
</p>
</a>
</div>
<div class="notes" id="point9">
<a href="#">
<img src="images/image9.jpg" alt="" /><br />
<p>
<span>11:45 a.m.</span> Congratulations, you've reached the top!
Time for lunch and a few photos.
</p>
</a>
</div>
</div>
</body>
</html>
Similar TutorialsI would like to have an image that takes 2 url like the following image... is it possible? if so, can someone please tell me how this could be done? Thank you very much.. NOTE: I tried doing this... <map name= 'url1' > <area shape= 'poly' coords= ' 0 , 0 , 50 , 0 , 0 , 50 ' href= 'url1.html' > </map> <a href= 'url2.html' > <img src= 'img.jpg' width= 50 height= 50 usemap= '#url1' > </a> but this only get 'url1' woring... Okay, I know that this problem is going to be really really easy, but I forgot how to do it. I use to own an older website and forgot the code. Anyways, I only know how to describe it. When I minimize the screen, it is minimizing the whole thing and collapsing it making the iframes smaller and the text fit into a smaller space. Most websites have a code (i don't know what it is) so that when someone minimizes their browser, it just makes the browser smaller and not the actual page. Here's what it looks like: http://www.freewebs.com/noeylani94/index.htm Try minimizing that and see how it looks. It collapses the whole page right? Can someone tell me the code how to fix it? Thanks =D i have a problem with my img tag i made a menubar (which is probably to big) and one of my images isn't showing i don't know where i messesed up you can veiw my site http://www.pokebomb.co.cc and try to find the problem or download it as an attachment it would help alot if you can figure out what is wrong and the site isn't 100% done (obviously) Website Website Files (if needed) I'm making a website for my web design class. I've run into an annoying problem. It seems this div container "blocks" me from typing any text under the image. How do I fix this? Whenever I try to send a PM it is telling me I need to wait over a million seconds, and it never goes away.. Help? I just registered my .com domain and it works but it only works if i use rsessmines.com if i use www.rsessmines.com it takes me to the site that i bought the domain from???? I know their is a way to fix this i saw it like 2 weeks ago if any one can help i will really appreciate it! www.esseveeforum.be/sv/ i tought this site was looking good until i tested it in IE6 :s -> there's no background in the iframe -> there are scrollbars -> the spacer appears twice + the content doesn't stretch with the inserted text, i have an iframe which leads to 'home.htm', when there's much content in that file the site doesn't stretch with it Can anyone plz help me? and it once again has been proven IE SUCKS! Edit: i also placed it under CSS cos it could be a CSS problem aswell. Reference: http://jlmechanicals.com/index.php So if you use IE 8 or FF, page loads as it should. Now, in IE 7: If you look in between the red and gray boxes, you will notice that there is a horizontal double gradient (that gradient is absent above and below the red boxes). The horizontal double gradient is set as the background for the <body> tag with repeat-y. Now, you need to look REALLY CLOSELY, in IE 7 only, at the very very bottom of the page, you will notice that the horizontal gradient produced by the background image for <body> is there (if you don't see it look closely, it can blend in really well with the bottom toolbar of internet explorer depending on what your color scheme is). Bottom margin for <body> is set to 0, and all other browsers obey except IE 7. So how do I fix this in IE 7? Thanks! I'm designing this site http://www.vom.com/graphico the opening page looks just fine in Safari, Mozzilla, Internet Explorer for OS 9 in Mac Internet Explorer in OSX Mac, Firefox on both Mac and PC but the table in the bottom frame will not line up with the table in the top frame using Internet Explorer for PC. There have been numerous other problems also such as paragraphs turning into 2 word colums etc, but only when viewing in Internet Explorer on the PC. It just drives me nuts. This is very simple html coding. I'd love to get the opening page right as it will be the template for all other pages. HELP! Hello! I'm having a <table><th>... problem. The font is always bold even thow i'm using a CSS style and i don't set it to bold. How can i avoid this? Thank you! I am working on a website for work and thought it was all kosher and ready to go. I sent it to our VP and he came back and said that things looked a little wonky. Having tested it in both IE and FF, I was shocked. However, he has IE 7.0 and for some reason it's all over the place when using that version. Here is the website: http://www.mtesc.org Any help would be greatly appreciated as the problem needs to be fixed and I cannot figure out what to do to fix it! I just started learning Dreamweaver, (which is what I used to create this site) and I am familiar with some html/css but not enough at this point to fix this problem. Thanks in advance for any help!!!! So I have this code: Code: <link rel="stylesheet" type="text/css" href="http://dl.dropbox.com/u/24741033/css3menu1.css" />
<DIV align="center">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav
$("ul.topnav li span").click(function() { //When trigger is clicked...
//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click
$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
});
//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
$(this).addClass("subhover"); //On hover over, add class "subhover"
}, function(){ //On Hover Out
$(this).removeClass("subhover"); //On hover out, remove class "subhover"
});
});
</script>
<div align="center">
<div class="container">
<div id="header">
<ul class="topnav">
<li><a href="http://www.desporto-em-directo.forumeiros.net">Homepage</a></li>
<li>
<a href="#">Live</a>
<ul class="subnav">
<li><a href="/h50-live-1" target=player>Live 1</a></li>
<li><a href="/h51-live-2" target=player>Live 2</a></li>
<li><a href="/h52-live-3" target=player>Live 3</a></li>
<li><a href="/h53-live-4" target=player>Live 4</a></li>
<li><a href="/h54-live-5" target=player>Live 5</a></li>
</ul>
</li>
<li>
<a href="#">Notícias</a>
<ul class="subnav">
<li><a href="/h34-sic-noticias" target=player>Sic Notícias</a></li>
<li><a href="/h31-rtpn" target=player>Rtp N</a></li>
</ul>
</li>
<li>
<a href="#">Musica</a>
<ul class="subnav">
<li><a href="/h44-nrj-pop" target=player>NRJ Pop</a></li>
<li><a href="/h42-nrj-dance" target=player>NRJ Dance</a></li>
<li><a href="/h43-nrj-pure" target=player>NRJ Pure</a></li>
<li><a href="/h45-nrj-urban" target=player>NRJ Urban</a></li>
</ul>
</li>
</li>
<li>
<a href="#">Desporto</a>
<ul class="subnav">
<li><a href="/h39-sportv-brasil" target=player>Sportv1 BR</a></li>
<li><a href="/h46-sportv2-brasil" target=player>Sportv2 BR</a></li>
<li><a href="/h48-nba-tv" target=player>NBA TV</a></li>
<li><a href="/h47-super-tennis" target=player>Super Tennis</a></li>
</ul>
</li>
</li>
<li><a href="/h1-guia-tv" target=blank>Programação</a></li>
<li><a href="/h49-radios" target=player>Rádios</a></li>
<li><a href="http://www.google.com/chrome" target=blank>Browser Recomendado</a></li>
<li><a href="http://www.games-and-stuffs.blogspot.com" target=blank>Download de Jogos</a></li>
</ul>
</div>
</div>
</div>
but if I put on my webhoster (which is free) it doesn't support css or jquery in html code, so whats the html to host the css part in dropbox and instead of css code it understands the code wrote in css file on dropbox... Same thing to jquery EDIT: I worked out the css, but still need with the jquery Dear members, I am not very good in HTML programming so please accept my apologizes if my question is very simple. I have a website called loonu.com. In IE7,IE8,Chrome,Firefox,Safari etc.. its mainpage (www.loonu.com) is shown exactly how i want to, whereas in IE6 it looks terrible. My question is, according to your experience is my mistake so obvious because i can not see it. Thanks for your help. I have some text which I want highlighting when hovered on. I've got that working but I need the text to change colour when I hover on it; White text and black background --> Black text and white background. I only want to know how to make the text colour opposite on hover. Ok, here's my website. http://wantedfraternity.webs.com/ Now my problem is...the image at the top and the chat room is center for me on Firefox...but on another user on my computer it isn't. And everyone else that comes to my chat site the image at the top isn't center'd and the chat is way off from being center'd. Can anyone help me plz? Hello every1! I have a noob question (I guess). Just starting to build my first site Code: <table>
<tr>
<td></td>
<td></td>
</tr>
<table>
The thing is, both elements height <td></td> is depending on the content, which may vary, I cannot specify height in the code. how to make the second element <td> display at the same height as the first one. If the content of the first has 100px and the second only 50px i want them to be both 100. Hope U understand sorry 4 my english. Hi guys Espescially to those that are Pro or Experienced user in imageready slices, image mapping, and HTML. I really need a serious help on this. Hope you'll help me with this. Well... I created my site using Microsoft Frontpage at home and its almost finished (only the contents that I will put, the flash banner and this problem) I made an image sliced (dunno if thats the term you are using) navigation bar using Photoshop with imageready. Its hover effect is changing the image button when you place your mouse on top of it . I made it and it works! I've put it in my webpage by uploading it in MS Frontpage. I saved it and test it and it works. Seems like I don't have any problems right? but too bad because my real problem is this: 1. The navigation bar works but it is Client sided 2. I tried changing the directory of the images folder. changed the code, for example images/home_over.gif to the directory of the file C:\Documents and settings\user\desktop\mysite\images\home_over.gif and guess what? It didn't worked!!! I havent uploaded my site on the net cause I know it will still have the same problem. 3. I tried erasing the java script code and do what I've done above and it also didn't work 4. I've placed both the html file and the image folder in the same folder and it works thats why I came to a conclusion that they both need to be in the same folder. BUT!!! how if I upload it in the site manager of a free web hosting? I think it wont work... Those are the things I tried. I will try to upload the webpage and the image folder in the freehosting site both on the same directory or folder and see if it works (I dont think it will work because what I've done in #2 and is similar to this) I would also ask how to upload a flash movie in a webpage... I have uploaded the webpage on the net and the image files for you guys to see it and test it: try downloading those and save in the same folder in your computer and i think it will work. the webpage is: http://rapidshare.de/files/36048595/index.html index2 (it has some CSS cause I changed the save type to this one inimageready): http://rapidshare.de/files/36048641/index2.html the image folder is: http://rapidshare.de/files/36048429/images.rar.html the buttonimage folder is (for index2): http://rapidshare.de/files/36048531/buttonimage.rar.html I haven't change anything in the code. If you managed to solve my problem, please change the color of the codes that i need to change. Thanks for reading this and I hope you will help me... index (html the deafault save type in imageready) index2 (it has some CSS, I changed the save type for this) My daughter is building a website for some kind of school competition and is having a problem with how a table is displaying in IE 9. It displays properly in Chrome and FF though so I'm not sure what the problem is. Keep in mind, she's just a junior in HS and used, by all accounts, some antiquated methods in constructing the page. That said, I'm hoping someone could offer some insight into the issue. The table should be centered and the same the width of the banner and menu. For Chrome and FF, the table is centered on the page when the viewing resolution allows all the content to fit without the need for a scroll bar. On the pages where a scroll bar is needed, the table is shifted to the left to accommodate the scroll bar and thus becomes off-centered. I was thinking that an i-frame could take care of this since the scroll bar would then be located on the inside of the i-frame. In Chrome and FF, maybe it would. However, in IE, the table is displaced to the left on all pages. Interestingly enough, the displacement is the same with and without a scroll bar. Sooooo, I would humbly ask those with knowledge of such things to offer advice or a solution to this problem. Much appreciation is extended in advance. Here is the link to the site: http://www.newtonyouth.zxq.net Ok, I'm at wits end here. I have a page that is using two <ul> elements, with a few <li> elements in each. The layout works great in IE6, FireFox, and Safari. IE7 on the other hand is NOT cooperating. The problem is that IE7 seems to be "clipping off" the bottom of the <li> elements. It's hard to explain so here is a link: http://www.stovenet.com/index.php Look at the part of the page that is in the top-right corner. You will see the following: "Login Register Search Help" "Login" and "Register" each have an image to the left of them, which is placed there using css. The images will have he bottoms cut off. Also, there is css code that creates an orange bottom border when you hover over each of these elements, it does not show in IE7. Look at the same page in FF or Safari and it is perfect. IE6 looks ok but the images "bounce" when hovered over. If anybody can lend a hand I'd really appreciate it. I tried for hours to fix this and I am just coming up short. I we see its result we get so much top and bottom space just this code: code: <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td bgcolor="#00FFFF"><h1>Hello</h1></td> </tr> </table> I want to remove top and bottom space. any help |
|||||||