Jump to content

Two Problems

Guest Django1200

By Guest Django1200
in HTML/XHTML

Recommended Posts

Guest Django1200

Guest Django1200

Posted
Posted

I am developing a page for my local Elks and am having two problems

<!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" /><link rel="shortcut icon" href="/elks.ico"><title>Welcome to the Mansfield Elks #56!</title><style type="text/css"><!--body,td,th {	color: #FFF;	font-size: 24px;	padding:0;	border-collapse:collapse;}--></style></head><body bgcolor="F8F8F8"><table width="100%" height="844" border="0" cellpadding="0">  <tr>	<th width="13%" height="149" bgcolor="#003399" scope="col"><img src="images/Elk emb.jpg" width="160" height="158" alt="Elks Logo" /></th>	<th width="87%" bgcolor="#003399" scope="col"><b><font size="36">Welcome to the Mansfield Elks #56 Website</font></b></th>  </tr>  <tr>	<th height="586" bgcolor="#003399" scope="row" valign="top"><p> </p>	  <p><a href="comingsoon.html" style="text-decoration:none"><font color="white">About the Elks</font></a></p>	  <p><a href="comingsoon.html" style="text-decoration:none"><font color="white">Banquet Hall</font></a></p>	  <p><a href="people.html" style="text-decoration:none"><font color="white">People</font></a></p>	  <p><a href="comingsoon.html" style="text-decoration:none"><font color="white">Contact Us</font></a></p>	  <p><br />	  </p></th>	<td bgcolor="#F8F8F8" align="center" valign="top" height="586px"><p><font color="#000000"><br />	  Events and News</font></p>	  <div style="overflow:auto; height:560px; width:100%">		<p><br />		</p>		<p><img src="images/Lex Park Board.jpg" width="525" height="324" alt="Elks with Lex Park Board" /></p>		<p><font size="+1" color="#000000"><i>On April 23, 2009, the Lexington Park Board was presented a grant check for $750 from the Ohio Elks Association towards the purchase of new park equipment in Lexington’s Community Parks. Shown are Jeff Price, Village Council; Stephanie Swigart, Lodge Esquire; Bill Koontz, Exalted Ruler; Earl Swigart, Park Board Chairman; and Mark Cullen, Park Vice-Chairman.</i></font></p>		</div></td>  </tr>  <tr>	<th height="83" bgcolor="#003399" scope="row"><font size="-1">499 Park Avenue WestMansfield, OH44903Phone:419-524-0901</font></th>	<td bgcolor="#003399"><font align ="center">   Copyright 2009 Mansfield Elks #56 </font>	<font size="-4">Best Viewed With Mozilla Firefox (As of Now)</font></td>  </tr></table></body></html>

1) No matter what I try, I cannot get rid of the "seams" between my cells. This really stands out against the blue and is driving me crazy.2) I am working on a "People" page has the same layout (a large white space surrounded on 3 sides with blue) but I want the links on the left to preform a div swap on the large area to the right with a photo and a little info. I found a tutorial online but my ignorance reared its ugly head and I can't figure out how to make the links on the right control the div space.Any help would be appreciated

Link to comment
Share on other sites
sckewi Newbie

sckewi

Posted
Posted

Since you're using tables anyway, try <table width="100%" height="844" border="0" cellpadding="0" cellspacing="0">You're second question would involve ether DHTML or AJAX. DHTML is not ideal because it would mean storing all of the pages in the HTML for one page. If you add several pages this could become pretty innefficient. AJAX would work if you load the HTML for the div off the server, but keep in mind this would break back button functionality. Ether way I personally think it would be better to take another gander at some tutorials on this one, unless someone kinder than me is willing to post a full example :)

Link to comment
Share on other sites
roundcorners Member

roundcorners

Posted
Posted

you could use a server-side script to load different includes i.e. an image based on a variable sent via the link or you could use javascript to update the dom onclick.I would go with javascript because each click would not mean another call to the server, however, you might want a non-javascript option for users without js-enabled browsers.Try the script below, this shoulld (untested), get the value of the <a href="">, which you should point to your larger image, create a <img> element, pass the value of the <a href=""> to the the variable source and assign that value to the src attribute of the <img> element. Finally, return false should prevent the default behaviour, which would open a new page with your larger image. Like I said, this is untested, please let me know how it goes.function imgGallery() { var placeholder = document.getElementById("placeholder"); var img = createElement("img"); var gallery = document.getElementById("gallery"); var thumbs = gallery.getElementsByTagName("a"); for (var i=0;i<thumbs.length;i++) { thumbs.onclick = function() { var source = this.getAttribute("href"); img.setAttribute("src","source"); placeholder.appendChild("img"); } return false; }}<ul id="gallery"><li><a href=""><img src="" /></a></li><li><a href=""><img src="" /></a></li><li><a href=""><img src="" /></a></li><li><a href=""><img src="" /></a></li></ul><div id="placeholder"></div>

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

here's my solutionadded ids for image, plus added span in description.put onmouseover="swapthis(arrayref) within link which relates to details in that specific array record (1)hope this helps<!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" /><link rel="shortcut icon" href="/elks.ico"><title>Welcome to the Mansfield Elks #56!</title><script type="text/javascript">function swapthis(thisvalue){imageref=new Array()descripref=new Array()//if you which to use apostrophe within description use character code or escape it by \'imageref[1]= "image1.png"descripref[1]= "Engineering Technician Brett is responsible for making repairs to the Nostromo. And once the alien is loose on the Nostromo Brett is responsible for creating the weapons the crew uses when they try to track and kill it."imageref[2]= "image2.jpg"descripref[2]= "Science Officer Ash is the only one who knows the company's motives in sending the crew of the Nostromo to investigate the derelict spacecraft. He studies the alien for the Company's Bio-Weapons Division and is ordered to keep it alive for return to Earth, no matter what the cost to the other crew members."document.getElementById("swapthisimg").src=imageref[thisvalue];document.getElementById("swapthistext").innerHTML=descripref[thisvalue];}</script><style type="text/css"><!--body,td,th { color: #FFF; font-size: 24px; padding:0; border-collapse:collapse;}--></style></head><body bgcolor="F8F8F8"><table width="100%" height="844" border="0" cellpadding="0" cellspacing="0"> <tr> <th width="13%" height="149" bgcolor="#003399" scope="col"><img src="images/Elk emb.jpg" width="160" height="158" alt="Elks Logo" /></th> <th width="87%" bgcolor="#003399" scope="col"><b><font size="36">Welcome to the Mansfield Elks #56 Website</font></b></th> </tr> <tr> <th height="586" bgcolor="#003399" scope="row" valign="top"><p> </p> <p><a href="comingsoon.html" style="text-decoration:none"><font color="white">About the Elks</font></a></p> <p><a href="comingsoon.html" onmouseover="swapthis(1)" style="text-decoration:none"><font color="white">Banquet Hall</font></a></p> <p><a href="people.html" onmouseover="swapthis(2)" style="text-decoration:none"><font color="white">People</font></a></p> <p><a href="comingsoon.html" style="text-decoration:none"><font color="white">Contact Us</font></a></p> <p><br /> </p></th> <td bgcolor="#F8F8F8" align="center" valign="top" height="586px"><p><font color="#000000"><br /> Events and News</font></p> <div style="overflow:auto; height:560px; width:100%"> <p><br /> </p> <p><img id="swapthisimg" src="images/Lex Park Board.jpg" width="525" height="324" alt="Elks with Lex Park Board" /></p> <p><font size="+1" color="#000000"><i><span id="swapthistext">On April 23, 2009, the Lexington Park Board was presented a grant check for $750 from the Ohio Elks Association towards the purchase of new park equipment in Lexington’s Community Parks. Shown are Jeff Price, Village Council; Stephanie Swigart, Lodge Esquire; Bill Koontz, Exalted Ruler; Earl Swigart, Park Board Chairman; and Mark Cullen, Park Vice-Chairman.</span></i></font></p> </div></td> </tr> <tr> <th height="83" bgcolor="#003399" scope="row"><font size="-1">499 Park Avenue WestMansfield, OH44903Phone:419-524-0901</font></th> <td bgcolor="#003399"><font align ="center">   Copyright 2009 Mansfield Elks #56 </font> <font size="-4">Best Viewed With Mozilla Firefox (As of Now)</font></td> </tr></table></body></html>

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...