fsiebert Posted June 15, 2011 Share Posted June 15, 2011 Hi,I need help with a couple of things. First, and easiest, how do I change space between rows in a table? If you click on Hébergement, I want to change only the space between the rows (for example, between "(888) 468-9888 ou (705) 362-4304" and "Howard Johnson."My second question is that I want to make it so the other pop ups close when I open a new link. Right now, when I click, say Activité and then Attractions, the Activité pop up remains open. I want to make it so that when I click Attractions after Activité, that the Activité pop up closes.Thank you in advance.Here is my index file, <!DOCTYPE HTML><html><head><title>Bienvenue à Hearst</title><link href="style.css" media="screen" rel="stylesheet" type="text/css"/></head><body><div id="welcomebar">Bienvenue à Hearst!</div><div id="navbar"> <ul> <li><a onmouseover='this.style.cursor="pointer" ' onfocus='this.blur();' onclick="document.getElementById('PopUpAct').style.display = 'block' " ><span style="text-decoration: none;">activités</span></a></li> <li><a onmouseover='this.style.cursor="pointer" ' onfocus='this.blur();' onclick="document.getElementById('PopUpAtt').style.display = 'block' " ><span style="text-decoration: none;">attractions</span></a></li> <li><a onmouseover='this.style.cursor="pointer" ' onfocus='this.blur();' onclick="document.getElementById('PopUpCamp').style.display = 'block' " ><span style="text-decoration: none;">camping et pourvoiries</span></a></li> <li><a onmouseover='this.style.cursor="pointer" ' onfocus='this.blur();' onclick="document.getElementById('PopUpHeb').style.display = 'block' " ><span style="text-decoration: none;">hébergements</span></a></li> <li><a onmouseover='this.style.cursor="pointer" ' onfocus='this.blur();' onclick="document.getElementById('PopUpRest').style.display = 'block' " ><span style="text-decoration: none;">restaurants</span></a></li> </ul> </div><div id='PopUpAct' style='display: none; position: absolute; left: 10px; top: 145px; border: solid black 0.5px; padding: 10px; background-color:#75ca95; width:500px; opacity:0.9;'><h3>activités</h3><p></p></div><div id='PopUpAtt' style='display: none; position: absolute; left: 310px; top: 145px; border: solid black 0.5px; padding: 10px; background-color:#2d9a71; width:500px; opacity:0.9;'><h3>activités</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor ###### soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p></div><div id='PopUpCamp' style='display: none; position: absolute; left: 630px; top: 145px; border: solid black 0.5px; padding: 10px; background-color:#669045; width:500px; opacity:0.9;'><h3>activités</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor ###### soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor ###### soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p></div><div id='PopUpHeb' style='display: none; position: absolute; left: 1090px; top: 145px; border: solid black 0.5px; padding: 10px; background-color:#8ca540; width:500px; opacity:0.9;'><h3>Hébergment</h3><table><tr> <td> <p> <b><a href="http://www.companion-hotel-motel.ca" target="_blank">Companion Hotel-Motel</a></b><br> 930, rue Front<br> (888) 468-9888 ou (705) 362-4304 </p> </td> <td> <p> <b><a href="http://www.queensmotel.ca" target="_blank">Queen's Motel</a></b><br> 1004, rue Front<br> (705) 362-4361 </p> </td></tr><tr> <td> <p> <b><a href="http://www.hojohearst.com" target="_blank">Howard Johnson</a></b><br> 915, rue Georges<br> (877) 362-4282 ou (705) 362-4281 </p> </td> <td> <p> <b><a href="http://www.hearstvilla.ca" target="_blank">Villa Motel</a></b><br> 1605, route 11 Ouest<br> (888) 838-6129 ou (705) 362-4331 </p> </td></tr></table></div><div id='PopUpRest' style='display: none; position: absolute; left: 1390px; top: 145px; border: solid black 0.5px; padding: 10px; background-color:#cab631; width:500px; opacity:0.9;'><h3>Restaurants</h3></div></div></body></html> and here is my CSS file (style.css) body{ background-image:url('images/moosewp.gif'); }h3 { font-family:calibri; }p { font-family:calibri; font-size:12pt; }a:link {text-decoration:none; color:#000}a:visited {text-decoration:none; color:#000}a:hover {text-decoration:underline; color:#000}a:active {text-decoration:underline; color:#000}table { border:0; width:100%; } td{height:25px;vertical-align:bottom;} #col1 { float:left; } #col2 { float:right; } #welcomebar{ width:100%; margin:0; background-color:#f9aa1f; border:0; opacity:0.9; box-shadow: 2px 2px 50px #000; font-family:Segoe UI; font-size:24pt; font-weight:bold; text-align: center; } #navbar{ width:100%; margin-top:5px; background-color:#f9aa1f; border:0; opacity:0.9; box-shadow: 2px 2px 50px #000; } #navbar ul li { display: inline; }#navbar ul { margin: 0; padding: 10px; list-style-type: none; text-align: center; } #navbar ul li a { text-decoration: none; font-family:Segoe UI; font-size:32pt; padding: .2em 1em; color: #000; } #PopUpAct { box-shadow: 2px 2px 50px #000; } Link to comment Share on other sites More sharing options...
Ingolme Posted June 15, 2011 Share Posted June 15, 2011 Have you tried adding top or bottom margins to the table rows?As for closing the popups, when you click on the links, loop through all the popup elements and set them all to closed before opening a new one. Link to comment Share on other sites More sharing options...
fsiebert Posted June 15, 2011 Author Share Posted June 15, 2011 I've tried adding top and bottom margins to table, tr, and td, but none of them worked. I've also tried cellspacing and cellpadding.As for the loop-linking, I don't know how to do this. Do you mind elaborating?Thank you for your time and help, I appreciate it. Link to comment Share on other sites More sharing options...
Ingolme Posted June 15, 2011 Share Posted June 15, 2011 How exactly are you opening the popup windows? Link to comment Share on other sites More sharing options...
fsiebert Posted June 15, 2011 Author Share Posted June 15, 2011 <li><a onmouseover='this.style.cursor="pointer" ' onfocus='this.blur();' onclick="document.getElementById('PopUpAct').style.display = 'block' " ><span style="text-decoration: none;">activités</span></a></li> Link to comment Share on other sites More sharing options...
Ingolme Posted June 15, 2011 Share Posted June 15, 2011 You're going to have to run a Javascript function when the link is clicked. Given your code, the simplest way to bind the event to your link is this: onclick="openPopup('PopUpAct');"Then in the function, you go through all the popups and hide them before displaying the one you want: function openPopup(id) { document.getElementById('Popup1').style.display = 'none'; document.getElementById('Popup2').style.display = 'none'; document.getElementById('Popup3').style.display = 'none'; document.getElementById('Popup4').style.display = 'none'; document.getElementById(id).style.display = 'block';} Link to comment Share on other sites More sharing options...
fsiebert Posted June 15, 2011 Author Share Posted June 15, 2011 It doesn't seem to work...I've changed the index.html file to <li><a onmouseover='this.style.cursor="pointer" ' onfocus='this.blur();' onclick="openPopup('PopUpAct');".style.display = 'block' " ><span style="text-decoration: none;">activités</span></a></li> and then added to the style sheet function openPopup(id) { document.getElementById('PopupAct').style.display = 'none'; document.getElementById('PopupAtt').style.display = 'none'; document.getElementById('PopupCamp').style.display = 'none'; document.getElementById('PopupHeb').style.display = 'none'; document.getElementById('PopupRest').style.display = 'none'; document.getElementById(id).style.display = 'block';} What am I doing wrong?Thanks again, I appreciate it. Link to comment Share on other sites More sharing options...
Ingolme Posted June 15, 2011 Share Posted June 15, 2011 You seem to have added some extra content that doesn't belong here which is probably interfering:onclick="openPopup('PopUpAct');".style.display = 'block' " Link to comment Share on other sites More sharing options...
fsiebert Posted June 15, 2011 Author Share Posted June 15, 2011 This is what I have, no? I tried removing the .style.display = 'block' " , but it doesn't work either... Link to comment Share on other sites More sharing options...
Ingolme Posted June 15, 2011 Share Posted June 15, 2011 So what happens when you click on the link? Link to comment Share on other sites More sharing options...
fsiebert Posted June 15, 2011 Author Share Posted June 15, 2011 the pop up doesn't appear Link to comment Share on other sites More sharing options...
Ingolme Posted June 15, 2011 Share Posted June 15, 2011 You seem to have one of the IDs wrong. Is it "PopUpAct" or "PopupAct"? Link to comment Share on other sites More sharing options...
fsiebert Posted June 16, 2011 Author Share Posted June 16, 2011 I've changed them all, yet no luck. Link to comment Share on other sites More sharing options...
Ingolme Posted June 16, 2011 Share Posted June 16, 2011 What does your code look like?You probably are not using the right IDs in the getElementById() function. The IDs have to be exactly the same as the element on the page, and they are case sensitive. Link to comment Share on other sites More sharing options...
fsiebert Posted June 22, 2011 Author Share Posted June 22, 2011 Here is the Index.html file: <!DOCTYPE HTML><html><head><title>Bienvenue à Hearst</title><link href="style.css" media="screen" rel="stylesheet" type="text/css"/></head><body><div id="welcomebar">Bienvenue à Hearst!</div><div id="navbar"> <ul> <li><a onmouseover='this.style.cursor="pointer" ' onfocus='this.blur();' onclick="openPopUp('PopUpAct');" .style.display = 'block' "><span style="text-decoration: none;">activités</span></a></li> <li><a onmouseover='this.style.cursor="pointer" ' onfocus='this.blur();' onclick="openPopUp('PopUpAtt');".style.display = 'block' " ><span style="text-decoration: none;">attractions</span></a></li> <li><a onmouseover='this.style.cursor="pointer" ' onfocus='this.blur();' onclick="openPopUp('PopUpCamp');".style.display = 'block' " ><span style="text-decoration: none;">camping et pourvoiries</span></a></li> <li><a onmouseover='this.style.cursor="pointer" ' onfocus='this.blur();' onclick="openPopUp('PopUpHeb');".style.display = 'block' " ><span style="text-decoration: none;">hébergements</span></a></li> <li><a onmouseover='this.style.cursor="pointer" ' onfocus='this.blur();' onclick="openPopUp('PopUpRest');".style.display = 'block' " ><span style="text-decoration: none;">restaurants</span></a></li> </ul> </div><div id='PopUpAct' style='display: none; position: absolute; left: 10px; top: 145px; border: solid black 0.5px; padding: 10px; background-color:#75ca95; width:500px; opacity:0.9;'><h3>activités</h3><p></p></div><div id='PopUpAtt' style='display: none; position: absolute; left: 310px; top: 145px; border: solid black 0.5px; padding: 10px; background-color:#2d9a71; width:500px; opacity:0.9;'><h3>activités</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor ###### soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p></div><div id='PopUpCamp' style='display: none; position: absolute; left: 630px; top: 145px; border: solid black 0.5px; padding: 10px; background-color:#669045; width:500px; opacity:0.9;'><h3>activités</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor ###### soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor ###### soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p></div><div id='PopUpHeb' style='display: none; position: absolute; left: 1090px; top: 145px; border: solid black 0.5px; padding: 10px; background-color:#8ca540; width:500px; opacity:0.9;'><h3>Hébergment</h3><table><tr> <td> <p> <b><a href="http://www.companion-hotel-motel.ca" target="_blank">Companion Hotel-Motel</a></b><br> 930, rue Front<br> (888) 468-9888 ou (705) 362-4304 </p> </td> <td> <p> <b><a href="http://www.queensmotel.ca" target="_blank">Queen's Motel</a></b><br> 1004, rue Front<br> (705) 362-4361 </p> </td></tr><tr> <td> <p> <b><a href="http://www.hojohearst.com" target="_blank">Howard Johnson</a></b><br> 915, rue Georges<br> (877) 362-4282 ou (705) 362-4281 </p> </td> <td> <p> <b><a href="http://www.hearstvilla.ca" target="_blank">Villa Motel</a></b><br> 1605, route 11 Ouest<br> (888) 838-6129 ou (705) 362-4331 </p> </td></tr></table></div><div id='PopUpRest' style='display: none; position: absolute; left: 1390px; top: 145px; border: solid black 0.5px; padding: 10px; background-color:#cab631; width:500px; opacity:0.9;'><h3>Restaurants</h3></div></div></body></html> and here is the Style.css file body{ background-image:url('images/moosewp.gif'); }h3 { font-family:calibri; }p { font-family:calibri; font-size:12pt; }a:link {text-decoration:none; color:#000}a:visited {text-decoration:none; color:#000}a:hover {text-decoration:underline; color:#000}a:active {text-decoration:underline; color:#000}function openPopup(id) { document.getElementById('PopUpAct').style.display = 'none'; document.getElementById('PopUpAtt').style.display = 'none'; document.getElementById('PopUpCamp').style.display = 'none'; document.getElementById('PopUpHeb').style.display = 'none'; document.getElementById('PopUpRest').style.display = 'none'; document.getElementById(id).style.display = 'block';} table { border:0; width:100%; } td { margin-bottom:5px; margin-top:5px; } #col1 { float:left; } #col2 { float:right; } #welcomebar{ width:100%; margin:0; background-color:#f9aa1f; border:0; opacity:0.9; box-shadow: 2px 2px 50px #000; font-family:Segoe UI; font-size:24pt; font-weight:bold; text-align: center; } #navbar{ width:100%; margin-top:5px; background-color:#f9aa1f; border:0; opacity:0.9; box-shadow: 2px 2px 50px #000; } #navbar ul li { display: inline; }#navbar ul { margin: 0; padding: 10px; list-style-type: none; text-align: center; } #navbar ul li a { text-decoration: none; font-family:Segoe UI; font-size:32pt; padding: .2em 1em; color: #000; } #PopUpAct { box-shadow: 2px 2px 50px #000; } thank you Link to comment Share on other sites More sharing options...
Ingolme Posted June 22, 2011 Share Posted June 22, 2011 Your big problem is that you have a Javascript function in a CSS stylesheet. Javascript and CSS are two different languages that aren't related to eachother. The Javascript should go withint <script> tags: <script type="text/javascript">// Some code</script> Link to comment Share on other sites More sharing options...
ShadowMage Posted June 22, 2011 Share Posted June 22, 2011 You also still have the same "extras" in your anchor tags that Ingolme referred to in post 8:<a onmouseover='this.style.cursor="pointer" ' onfocus='this.blur();' onclick="openPopUp('PopUpAct');" .style.display = 'block' ">Remove the bolded part so you're left with just:<a onmouseover='this.style.cursor="pointer" ' onfocus='this.blur();' onclick="openPopUp('PopUpAct');">You've got the same thing going on for each of your anchors. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.