Grow your CSS skills. Land your dream job.

Navigation and display content

  • # September 13, 2008 at 4:51 pm

    Hi all,

    Having spent most of the day trying to get wise I have given up and turn to you for help, feeling very stupid, as I am stuck between the utmost basic and the slightly more advanced. I am guessing I am also stuck in the frames-mindset, but can’t find my way out.

    Over the years I have practised the art of "copy-paste and adapt" to my websites, but this does not lwork particularly well any more, thanks to php. So I realise I need to do some learning on my own, but having scanned all sites I have found for an answer, I am getting tired.

    I have downloaded a nice, simple template containing one global.css and one index.html plus some images. It’s a two column layout. My problem is I can’t even make the template display some mock-up content sitting in a separate file when I click a navigation link. How does that work for XHTML 1.0 Transitional and CSS2?

    Help is strongly appreciated, and please do not refer me to W3 Schools, I have spent some time there learning other neat stuff, but not this.

    Any hints on what to put in my code when the template holds something like:
    <div id="side">
    <div id="menu">
    <ul>
    <li><a href="#">Page four</a></li>
    <li><a href="#">Page five</a></li>
    </ul>
    </div>

    What do I put in addition / instead for # ?
    In it’s plaines form – I would like the text sitting in the file historie.htm be displayed within the <div id="content">.

    Thanks.

    # September 13, 2008 at 6:41 pm

    after reading your post. I am not sure I understand what you are asking. Are you saying that you don’t know how to make a link?

    The # sign in your link is there so that the link will work but it doesn’t go anywhere. You can add the text into the content div. Then rename the page to about.html or content.html or whatever you need then change the link to match.
    <div id="side">
    <div id="menu">
    <ul>
    <li><a href="content.html">content</a></li>
    <li><a href="#">Page five</a></li>
    </ul>
    </div>

    if you need more. maybe try posting a link to your site and show exactly what you are wanting.

    # September 14, 2008 at 5:22 am

    Sorry about being unclear. I will try to rephrase:

    I know how to make links, but the page I link to appear in a separate window. With frames I have pointed the content to the target fram, but I don’t understand how to make the same thing happen using CSS. It probably requires a different way of thinking.

    I have uploaded the template with my small alterations to my server for illustration: http://www.doowop.dk/index2.html#
    I would like the content in the link Test to appear in the red square…

    # September 14, 2008 at 6:20 am

    I think I understand what you mean.
    It can’t be done in CSS without frames.
    You need to create a new page using the template for every content page, and link to it.

    # September 14, 2008 at 10:21 am

    What you are looking for, is best handled using Javascript to replace the content on click. Using JQuery Tabs you can create a page that doesn’t require a refresh when a user clicks the navigation.

    If you are using PHP and your issue is that you don’t want each and every page to have the header, menu, and footer code blocks then you would use includes to manage this content in one file and only change the content body from page to page. This way when changing menu items you would edit the header include file and your changes would happen site wide.

    If this is as far as you got… I would suggest finding a developer/designer to assist you with building a web site.

    Michael Plant

    # September 14, 2008 at 11:09 am

    Thanks – you gave me the answers I suspected – there’s no easy way but to spend some more time.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".