Linking to a New Page in CSS (New to it)

HTML & CSS
1

Hi, Im just learning/teaching myself to do CSS, and am setting up a small website as practice, to learn how to do a three column page with header, nav, and footer, but am having trouble with links.

I want to open a link from the nav bar, and have it open in the center column, but instead, all I get is a brand new page with the gibberish I put in the HTML to make it for practice. How would i do this. in HTML all you had to do was set the name of the frame and then target it, is it similar in CSS? i can post code if needed. Thank you

2

I want to open a link from the nav bar, and have it open in the center column, but instead, all I get is a brand new page with the gibberish I put in the HTML to make it for practice. How would i do this.

in HTML all you had to do was set the name of the frame and then target it, is it similar in CSS?
Hi Elrebrin, Welcome to SitePoint! :slight_smile:

To clear things up a little bit, you are still dealing with an html document. The css is just styling the html from an external file. You still have the option of using iframes to open a new page within the document.

You can also use named anchors (aka - Fragment Identifiers) within the page to jump to certain potions of the page. You will find examples of that all over the W3C site.

http://www.w3.org/TR/REC-html40/intro/intro.html

If you go to that link and then click on 1.(2) “Fragment Identifiers” it will jump you down to that section of the page.

You could also toggle on/off divs within the page with a small bit of js as seen in the link below.

http://www.pmob.co.uk/temp/3col-toggle-content2.htm

The links in the left column of that demo are working as Fragment Identifiers to target the divs in that page. It is the js that is hiding/showing the divs, if you view the page source you should be able to see what is going on.

With css you are just dealing with anchors and when they are clicked they simply redirect you to the referring URI.

Hope that helps :slight_smile:

3

Ah okay! Thank you!!

4

sorry for the double post, but in looking at those sites, i didnt exactly see what you were talking about. maybe i missed it.

5

sorry for the double post, but in looking at those sites, i didnt exactly see what you were talking about
Hi,
It’s your thread, you can post as many times as you need to. :slight_smile:

I want to open a link from the nav bar, and have it open in the center column, but instead, all I get is a brand new page
What I was trying to explain with the links I posted was how “Named Anchors” within a page work. That allows you to jump to a specific spot in the page. As I understood your original post you did not want the link to open a new page.

See the second link I posted above for details on how to hide/show the divs with js.

Without the js it would just be showing the divs at all times like shown below, but it would still link to each div within the page.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Named Anchors within the page "Fragment Identifiers"</title>

<style type="text/css">
* {margin:0;padding:0;}
body {
    background: #fff;
    font-size:100&#37;;
}
#wrapper {
width:800px;
margin:0 auto;
background:#333;
overflow:hidden;
}
#nav{
float:left;
width:800px;
list-style:none;
background:yellow;
}
#nav li{float:left}
#nav li a{float:left; padding:5px 10px;}
a {text-decoration:none;font-weight:bold;}

#blk-1{
height:400px;
margin:100px 0;
background:red;
}
#blk-2{
height:600px;
margin:200px 0;
background:cyan;
}
#blk-3{
height:400px;
margin:100px 0;
background:lime;
}
#blk-4{
height:600px;
margin:100px 0;
background:yellow;
}
</style>
</head>
<body>

<div id="wrapper">
    <ul id="nav">
        <li><a href="#blk-1">One</a></li>
        <li><a href="#blk-2">Two</a></li>
        <li><a href="#blk-3">Three</a></li>
        <li><a href="#blk-4">Four</a></li>
    </ul>
    <div id="blk-1">
        <h3>Block One</h3>
        <a href="#nav">Return to Navbar</a>
    </div>
    <div id="blk-2">
        <h3>Block Two</h3>
        <a href="#nav">Return to Navbar</a>
    </div>
    <div id="blk-3">
        <h3>Block Three</h3>
        <a href="#nav">Return to Navbar</a>
    </div>
    <div id="blk-4">
        <h3>Block Four</h3>
        <a href="#nav">Return to Navbar</a>
    </div>
</div>

</body>
</html>
6

If you don’t want to use Jump Links/Named Anchors then you would use an iframe to open a new page within your existing page.

Iframes are not deprecated yet but honestly I don’t know why you wouldn’t want your links to open a new page.

Once your main template gets cached in the browser the only thing that has to load fresh on each page is the content.

7

well, im trying to do like an about us, services, etc, that will open in the main center column and have the same content on the left and right side, such as like pictures or something. theyre all internal links.

8

Yeah, that is what I was saying about setting up the main page template.

Once your main template gets cached in the browser the only thing that has to load fresh on each page is the content.
For lack of a better example at the moment This Demo shows four pages that share the same basic template.

The purpose of that example is to show how to change Background colors for different pages, Pay no attention to the colors changing.

Rather, notice how the text is changing in the header. Now just imagine that the header is your main center column. Everything else stays the same from page to page which would resemble your left and right columns, images etc. staying the same.

9

ah, okay, Im looking at it now, and mainly just figuring out what needs to be put into my current CSS file to make it work. I see how it works, but as im new to CSS im learning :slight_smile:

10

but instead, all I get is a brand new page with the gibberish I put in the HTML to make it for practice.

I think you were still stuck in the iframe mentality where all you do is add different content for each frame (html page). :wink:

When linking to different pages within a site using css you will be using the same html template for each page. Then just change the content in your main column for each different page.

If you view the source code on each of the pages on my last link I gave you will see that it is the same basic template used for each page.

11

okay, so yeah I see exactly what you are talking about, and have implemented it, but nothing changes, so im just gunna link my code/CSS/Jscript, and maybe you can help me see what im missing. by the way, im using http://www.pmob.co.uk/temp/3col-toggle-content2.htm as my reference.
I just attached everything. Thanks so much.

12

There is another option (sorry to jump in mid assistance Rayzur, just following up with something else you could give as a workaround!), you could always have everything on the one page and use some clever usage of the overflow property to (onclick) swap out one piece of content with another (either with JavaScript or using pure CSS and the :target pseudo class). That way you wouldn’t need to deal with lots of different pages, you could literally have one page which has all of your information (as long as there’s not loads and loads of it!). It might be a better solution to avoid the issues and avoid the frames. :slight_smile:

13

have everything on the one page and use some clever usage of the overflow property to (onclick) swap out one piece of content with another (either with JavaScript or using pure CSS and the :target pseudo class)
Hi Alex,
I really need to keep up with more of the CSS3 additions. Target is a pretty nifty new pseudo class. :slight_smile:

Working from This Example at HTML DOG I came up with the following.

I really don’t like using display:none; to hide divs with but this allows them to expand the parent div when they are revealed.
Block divs hidden with display:none;

Using absolute positioning I can also keep the div space removed from the parent but it won’t expand the parent.
AP divs hidden with margin-left:-999em;

We’ll have to play around with this some more, thanks for bringing it to my attention. :wink:

14

I’ve been playing with it on my new look site, however IE doesn’t support :target so I had to write an IE explicit script to deal with it… luckily it’s not too hard to do.

In JavaScript all you need (to get the current value) is location.hash.substr(1); (I attached it to the onclick as onload isn’t triggered on an anchor fragment). Basically onload you get it to build an array of all the ID’s in the document, then you would get it onclick to cycle the arrays, find the current ID and apply the style via scripting in it’s place. Alas poor IE, even IE8 doesn’t enjoy targets… but I love them, lightboxes you can bookmark and use the back button on, much more accessible! :slight_smile: