Jump to content

Need help with a couple of things


fsiebert
 Share

Recommended Posts

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

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

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

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

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.

Edited by fsiebert
Link to comment
Share on other sites

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

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

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

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

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...