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
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!
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.
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.
sorry for the double post, but in looking at those sites, i didnt exactly see what you were talking about
It’s your thread, you can post as many times as you need to.
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.
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.
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.
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.
I really need to keep up with more of the CSS3 additions. Target is a pretty nifty new pseudo class.
Working from This Example at HTML DOG I came up with the following.
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.