How to open a hyperlink in a <div> different from the <div> that holds the hyperlink?

Hi,

I am replacing frames with nested <div>s and a CSS.

The relevant parts of the code and the CSS are shown in the code section.

When I click on the hyperlink that is in <div class="top">, the target page, Home1.html, opens in a new window.
I would like it to open in <div class="content">.  How can I achieve this?  I see that the 'target' attribute is not available in this context.

The appearance of my html page is shown in the file MWSnap002.bmp, where:
- the hyperlink is MKC Home Page,
- clicking it should display the Home1.html in the fuchsia coloured area  (the area containing the text 'The content is here').

Help will be appreciated.

Mike King

Part of the html
-------------------
<body>
		<div class="wrapper">
			<div class="leftContainer">
				<div class="top">
					<center> <img src="graphics/LOGO.jpg" alt="" /></center>
					<a href="Home1.html" rel="content">MKC Home Page</a>
				</div>
				<div class="navigate">
					
					<p>
						Test navigate.
					</p>
					<p>
						Test navigate.
					</p>
					<p>
						Test navigate.
					</p>
				</div>
			</div>
			<div class="content">
				The Content is here
				<a href="Home1.html" >press</a>
			</div>
		</div>
 
	</body>
 
Part of the CSS
-------------------
.leftContainer
{float: left;
margin:4%;
margin-bottom:4%;
border: medium;
border-color: black;
border-width: thick;
background: aqua;
width: 25%;
}
 
.top
{background: yellow;
margin:4%;
border: medium;
border-color: black;
border-width: thick;
 
}
 
.leftContainer .navigate 
{background: white;
margin:4%;
}
 
.content
{float: right;
width: 60%;
background: fuchsia;
}

Open in new window

MWSnap002.bmp
MikeCFKingAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Hube02Commented:
My first question would have to be, why are you making this change? Your answer to that will tell me a great deal more and I'll know better how I should answer your question.
0
MikeCFKingAuthor Commented:
I have a web site (MikeKingCourses.com) that has been allowed to stand idle for about 6 years, and am now updating and improving it.

To help me do this, I am reading a book called 'Refactoring HTML: Improving the Design of Existing Web Applications'.  Its an eBook on O'Reilly.
It advises:
'... Replace Frames with CSS Positions ...', and gives reasons for this.

So my intention is first to refactor my site.  i.e. things like using CSS and removing frames, without change the sites appearance and content, and second, to improve the content and organization.

I am at the early stages of this and am carrying out the initial simple steps (baby steps).

Hope this helps.
Thanks,
Mike King
0
Hube02Commented:
Okay,

The main purpose for removing frames is that search engines do not like them. It is hard for the content to be indexed. While search engines are getting better, from what I understand this is not something they are too worried about because frames are not used by most. There are also other reasons, like not being able to bookmark a certain page of the site because all the pages have the same URL. There may be more reasons given in your book, I've never read it.

The only way to duplicate what the frames do, i.e. having a link load content into another div, would be to use AJAX to retrieve the content of the link and insert it into the div. The problem with this is that it is no different than using frames, and could actually be worse than using frames. Search engines will have difficulty indexing the content of your site as well as all the other pitfalls of frames.

However, if you still wish to do this then I would suggest starting here: http://www.w3schools.com/Ajax/Default.Asp
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
badstyleCommented:
It is possible to utilise some javascript that would make a content div visible, whilst turning other content div's invisible. Giving your the effect of loading a separate pages. A problem with this method is two fold:

1) If javascript is disabled it won't work.

2) Every content div will have to reside in the one single web page - potentially making your page very large to load. This could cause problems for slow computers, browsing from mobile phones or tv's etc.

Personally I would recommend that you investigate and work towards understanding Server Side Development. Mainly because you will probably get more out of it both in terms of solving your problem and achieving a better technical understanding which is far more beneficial that trying to implement something that isn't really a good idea.

If you want some more advice give me a shout I'd be more than happy to point you in a more suitable direction.
0
MikeCFKingAuthor Commented:
Thanks for the help.
I will focus on understanding Server Side Development.
regards,
Mike King
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.