magicstuff Posted January 31, 2011 Share Posted January 31, 2011 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 More sharing options...
Nico03 Posted January 31, 2011 Share Posted January 31, 2011 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, Link to comment Share on other sites More sharing options...
jeffman Posted January 31, 2011 Share Posted January 31, 2011 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.