Zmiana zawartości div-a podczas działania strony

Witam,

Jestem nowy i dopiero uczę się tworzyć strony internetowe, ale utknąłem w martwym punkcie, ponieważ dostaliśmy za zadanie stworzyć projekt strony, w której jest utworzone menu w CSS . Ten punkt został zrobiony, tylko teraz mam problem z punktem, aby po kliknięciu w któryś element menu pokazywała się na tej samej stronie bez przeładowywania nowa zawartość div-a. To byłoby łatwe, ponieważ użyłem odwołania do danego "id" paragrafu, np:

<a href="#item1" title="">Menu 1</a>

po kliknięciu w ten element zostanie załadowana zawartość paragrafu z id="item1".

Tylko teraz komplikuje się sprawa, ponieważ od początku na stronie w tym div-ie mam mieć postawiony obrazek (zajmie 2/3 miejsca), który zniknie po kliknięciu w dany element listy menu. I tutaj mam teraz problem, ponieważ nie wiem całkowicie jak odnieść się, aby po kliknięciu w wartość z menu (np: "Menu 1") obrazek zniknął.

Mam do dyspozycji tylko XHTML i CSS. Nie mogę wykorzystać żadnej reguły js. Prosiłbym o pomoc albo naprowadzenie mnie na rozwiązanie.

Dziękuję z góry i przepraszam za problem i niezbyt składny opis problemu, ale niestety nie znam jeszcze fachowego języka i nie umiem jeszcze wszystkiego nazwać tak jak powinno.

Pozdrawiam,
Counter

menu na kotwicach, tak jak masz, a wszystkie strony we wnętrzu diva o id="main"

#main{
     width:200px;
     height:100px;
     overflow:hidden;
}

notexist, bardzo dziękuję za naprowadzenie, ale nie wiem do końca jak użyć tego co napisałeś.

Mam takie menu:

<div id="div_menu">
<ul id="menu">
 <li><a href="" title="">Strona Domowa</a></li>
 <li><a href="#">Kategorie</a>
 <ul>
 <li><a href="#item1" title="">1</a></li>
 <li><a href="#item2" title="">2</a></li>
 <li><a href="#item3" title="">3</a></li>
 <li><a href="#item4" title="">4</a></li>
 <li><a href="#item5" title="">5</a></li>
 </ul>
 </li>
</ul>
</div>

I takie odwołanie

<div id="col_center">
  
<div><img src="under.png" alt="" /></div> <!-- to jest jeden z kilku obrazków które mają być wyświetlane na starcie, a które mają 'zniknąć' po kliknięciu w którykolwiek przycisk w menu  -->
  
  <p id="item1">Paraftaf 1</p>
  <p id="item2">Paraftaf 2</p>
  <p id="item3">Paraftaf 3</p>
  <p id="item4">Paraftaf 4</p>
  <p id="item5">Paraftaf 5</p>

</div>

I teraz daje to co napisałeś do styli CSS

#main{
     width:200px;
     height:100px;
     overflow:hidden;
}

I gdzie mam dopisać id="main"? Bo jak zmienię item1,item2 etc. na "main", to nie działa wtedy zmiana zawartości div-a przez menu.

Pozdrawiam i przepraszam za kłopot.

u Ciebie main, to col_center, tylko paragrafy muszą mieć odpowiednio dużo treści, żebyś zauważył efekt

Ok. Dzięki wielkie za pomoc i poświęcony czas ;)