hyperlinks and targets

[Kat Bond]

Hello,

Just starting out. I have taken one of Dreamweaver's HTML layouts. I've manged to add a header and underneath I have a row of text (words)for my navigation bar. What I am wanting to do is have the new pages appear underneath the header and navigation (so have the nav and header fixed).
However when I have tried to create an anchor in the space where I want the page to appear and link it to make first page (Photography.html) the new page still appears in a new window. I have created an anchor and called it "photographyimagepage" and put this in the target but it's not working??!!

Please help - getting frustrated !

[ralph.m]

Hi Kat Bond. Welcome to the forums.

Ideally, we need to see your page to understand what's going on here ... although it sounds like this is a fight with Dreamweaver rather than a fight with HTML. Programs like this are not well liked around here, to be honest. The ideal is to learn how HTML, CSS etc. work, so that you can write your own code and not depend on these editors that chuff out a lot of bloated and nonsensical code. This is a problem you don't need to have, as page layout with code is actually quite simple.

[dresden_phoenix]

Can you show all your code? I cant visualize exactly what you are saying... but I think you are saying when you click on your link a NEW window opens displaying the target window (whilst the previous page still open).

If tahst the case make sure that TARGET (in properties window) is not set to anything OR it set to "_self". none of the things you have mention really have any effect on anything.


I could be misinterpreting your wording but It also seems you have the concept of how a web site works all wrong. ( am assuming there at least are two documents involved) . When you click a link, by default, a new html document is loaded into that window. this means if you want the navigation to be there you must code it into BOTH document, it is really not "moving" anything... unless you are trying to do it with frames... but that's an ANTIQUATED AND ABANDONED TECHNIQUE...DONT DO IT!!

The other possibility is that you may have been talking about jumping within the same html doc. in which case what you need to do make sure you DONT have a target set. Now when you click a link the page will jum straight to the element with that ID. You don't even need to make an anchor.
so:

<ul class="mainNav">
<li><a href="#mySegment">My Segment</a></li>
<li><a href="#mySegment">My Segment2</a></li>
</lu>
... content...
<h3 id="mySegment">My Segment</h3>

I you will notice I put the links in a list (and gave it a class name) as it is best practice to do so. But what you wanted was the menu to remain at the top, you say!

That's where you need to use CSS ( in thw WYSIWG you would make a "layer" but... really the WYSIWG is not what you want to learn to use)

Anyway, go to the source code.Find the STYLE tag ( that contains your CSS) add something like
.mainNav {position:fixed; top:0 ; left:0;}
and you will see that your nav links remain at the top left when you click or when you scroll.

I know iut sounds convoluted, but i hope that helps.

[Kat Bond]

Ok.. sorry my msg wasn't so clear.

What I want to do can be seen on this example, however I am wanting the navigation bar running horizontally across the top instead of vertically down the side.
http://ourspanishflat.com/

So when a navigation tab is clicked the new information appears in below the header.

I use to dabble with dreamweaver about 10 years ago when frames and tables were used and so trying to get up to date is learning curve but I'm enjoying it. I've been using dreamweaver in split mode and basically editing the code but finding it useful to see the result.

Anyway back to the question in hand....speaking to others they have said that what to use now is a div with a position attribute set to fixed? As I understand these div's have replaced tables and can be fixed or moveable.
I hope this helps to explain what I'm asking, anymore idea's ?

[dresden_phoenix]

1) forget what i said I really didn't get what you were trying to do

2) Frames and tables ( tho popular in the past were wrong to use than for the same reason they are now)
a) Tables are for tabular data. if you you have a table of info then BY ALL MEANS USE TABLE other wise no.
b) Aside from the new development of mobile devices ( who could have predicted that) frames are disadvantageous because each frame is an individual HTML document. with the advent of search engines, for example, a user could be sent to just your masthead frame but not necessarily your web page. You wouldn't want that. There is also navigation/ browser history issues ( not that no matter what link you click the url still reads index.html)..there screen readers accessiblity issues, etc etc
c) so it's really not that table/frames have been replaced by divs.. is just now it has been realized that the a page should be structured semantic info and not just 'jerry rigged' to look a certain way, after that you can use CSS to style a look.

I understand the appeal of frames ( in a way) . For someone w/o knowledge of php or other server side languages it SEEMS to allow for not having to repeat code . but you really have to rethink your strategy.


Anyway, first get rid of frames.
second understand that that will require you to code the navigation, masthead, footer, etc repeatedly into each document. it's just the way it is.



Continuing the lesson ... navigation is best coded as a LIST of links. Which you can then position with CSS to suit your needs and style.

so your structure would be similar to this:

<div class="mast"> 
	<div class="brand"><span class="logo">Our Spanish Flat<span>.com</span></span></div>
	<div class="date">October 3, 2012</div>
	<ul class="MainNav">
		<li><a href="index.html">Home</a></li>
		<li><a href="location.html">Location</a></li>
		<li><a href="local facilities.html">Local Facilities</a></li>
		<li><a href="accommodation.html">Accommodation</a></li>
		<li><a href="Availability Calendar/flat availability.htm">Availability &amp; Pricing</a></li>
		<li><a href="places of interest.html">Places of Interest</a></li><li><a href="terms.html">Terms &amp; Conditions</a></li>
		<li><a href="contact.html">Contact Us</a></li>
	</ul>
</div>
<div class="content">
	<div class="main">
	   <h1>About Us</h1>
	   your information and effective stuff goes here and it may be divided into columns using divs as necessary
	</div>
	<div class="aside">
	  Side content like your weather widget here
	</div>
</div>
<div class="foot">
	<p class="siteInfo">Domain name registration and web hosting by www.extendnet.co.uk</br>website design © Tim Bond 2008 - 2012</p>
	<ul class="nav">
		<li><a href="index.html">Home</a></li>
		<li><a href="location.html">Location</a></li>
		<li><a href="local facilities.html">Local Facilities</a></li>
		<li><a href="accommodation.html">Accommodation</a></li>
		<li><a href="Availability Calendar/flat availability.htm">Availability &amp; Pricing</a></li>
		<li><a href="places of interest.html">Places of Interest</a></li><li><a href="terms.html">Terms &amp; Conditions</a></li>
		<li><a href="contact.html">Contact Us</a></li>
	</ul>
</div>

[dresden_phoenix]

Ugh.. I was too slow and couldn't add my revised SAMPLE HTML and CSS in time.

anyway here is a proof of concept for what I was saying above. You'll also note how much slimmer the code is and the SEMANTIC POTENTIAL ( as there can be no semantic w/o real content)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<style type="text/css">
 body{font-family: sans-serif; min-width: 960px; }
 h1, h2, body{font-family: sans-serif; padding:0; margin:0}
.mast{position: fixed; width:100%; height: 8em; top:0; left:0; background:aqua; z-index: 100}
.logo { white-space: nowrap ;}
.brand{ background: blue; color:#fff; padding:  1em 0; text-align: center }
.logo span {font-size: 50%}
.logo{ font-size: 200%; line-height: 1; letter-spacing: .25em}
.date{border-bottom: 1px solid #000; border-top: 1px solid #000; color: blue; background: lime; padding: .8em ; line-height:1; font-size: 80%}
.nav{padding:0; margin:0}
.nav li{display:inline-block; padding:0 .5em;}
.nav a {text-decoration: none;}
.mast .nav li{  padding:.5em .25em; font-size: 80%}
.mast .nav {  padding:0 .5em; background: aqua}

.contentFoot {margin-top:8em; background: lightblue;  border-left:15em solid orange; }
.main, .aside {float:right; padding-top:2em}
.main {width:100%}
.aside {width:15em; margin-left: -15em}

.foot{ clear: both; padding:1em}
.foot{font-size: 70%}
.foot .nav, .siteInfo { text-align:  center}
.foot .nav li {   display:inline-block; padding:0 .5em; }
.foot .nav li a:hover { text-decoration:underline}
.foot .nav li + li { border-left:1px solid #000}

.main >* , .aside >*{ padding:0 15px;} /* dont worry abouyt this 0ne.. its jsut to add whitesspace for my sample text*/
		</style>
	</head>
	<body>
<div class="mast"> 
	<div class="brand"><span class="logo">Our Spanish Flat<span>.com</span></span></div>
	<div class="date">October 3, 2012</div>
	<ul class="nav">
		<li><a href="index.html">Home</a></li>
		<li><a href="location.html">Location</a></li>
		<li><a href="local facilities.html">Local Facilities</a></li>
		<li><a href="accommodation.html">Accommodation</a></li>
		<li><a href="Availability Calendar/flat availability.htm">Availability &amp; Pricing</a></li>
		<li><a href="places of interest.html">Places of Interest</a></li><li><a href="terms.html">Terms &amp; Conditions</a></li>
		<li><a href="contact.html">Contact Us</a></li>
	</ul>
</div>
<div class="contentFoot">
	<div class="main">
	   <h1>About Us</h1>
	   <p>your information and effective stuff goes here and it may be divided into columns using divs as necessary</p>
	   <p>Keep in mind that there are limitations to what you are trying to do. Hopefully , you will be able to reverse engineer this and re construct your design </p>
	   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	</div>
	<div class="aside">
	  <p>Side content like your weather widget here</p>
	</div>
	<div class="foot">
		<p class="siteInfo">Domain name registration and web hosting by www.extendnet.co.uk</br>website design © Tim Bond 2008 - 2012</p>
		<ul class="nav">
			<li><a href="index.html">Home</a></li>
			<li><a href="location.html">Location</a></li>
			<li><a href="local facilities.html">Local Facilities</a></li>
			<li><a href="accommodation.html">Accommodation</a></li>
			<li><a href="Availability Calendar/flat availability.htm">Availability &amp; Pricing</a></li>
			<li><a href="places of interest.html">Places of Interest</a></li><li><a href="terms.html">Terms &amp; Conditions</a></li>
			<li><a href="contact.html">Contact Us</a></li>
		</ul>
	</div>
</div>	</body>
</html>