Jump to content

Total newbie needs some help


magicstuff
 Share

Recommended Posts

Hello, i am new to HTML and CSS, i am trying to create my own website and i ran into a problem.My site currently has 2 divs, one with links, one where the content should be. I would like the site to work like this: i will open the link „url1“ and it will display content on the same page. Is there any way i could do this with just HTML and Css?Very simple version of the code:

<body><div class="links" ><a href="url1">Text1</a> <br><a href="url2">Text2</a> <br><a href="url3">Text3</a> <br><a href="url4">Text4</a> <br><a href="url5">Text5</a></div><div class="content">Content to display</div></body>

I would really appreciate for your help

Link to comment
Share on other sites

Hi,Yes it's possible. Try this:

<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr"><head>     <title>Première page web</title>     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />    <style type="text/css">        .links ul {            list-style: none;            padding-bottom: 15px;        }            #content {            display: none;                    }                #content:target {            display: inline;        }    </style> </head><body><div class="links" >    <ul>        <li><a href="#content">Text1</a></li>        <li><a href="url2">Text2</a></li>        <li><a href="url3">Text3</a></li>        <li><a href="url4">Text4</a></li>        <l><a href="url5">Text5</a></l>    </ul></div><div id="content">    <p>Content to display</p></div></body></html>

Edit: Cleaner htmlNico, :)

Edited by Nico03
Link to comment
Share on other sites

Two things about the target technique.1. Only one :target element will be displayed at a time. So if a user clicks one, your hidden element will appear. Click another one that works the same way, and the first will disappear. That may or may not be what you want. It could be useful for some kinds of menus, for instance.2. It is not yet supported by Explorer.3. The targeted elements are appended to the URL in your address bar, and also added to your history. A user might not expect this when using the forward and back buttons.

Edited by Deirdre's Dad
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...