Divy - linki i wyśrodkowanie

Question

Witam wszystkich forumowiczów. Mam pewien problem, a w zasadzie dwa. Aktualnie robię stronę na informatykę, tworzę projekt na podstawię filmików pana Mirosława (głównie 2 filmik o css'ie). Strona opiera się na divach. Na górze strony mam menu. Jak zrobić aby div (łącznie z tłem) był odnośnikiem do podstrony? W html wygląda u mnie to mniej więcej tak:

 <div id="menu">
         <div class="option">Strona główna</div>
         <div class="option">Spis treści</div>
         <div class="option">Kontakt</div>
 </div>

        Druga sprawa, to jak wyśrodkować te wszystkie "mniejsze" divy w menu, ponieważ przyklejają mi się do lewej strony? - Kombinowałem, ale nic nie wyszło z tego.

Answer 1

Cześć, proponuje ci przebudowanie swojego menu w taki sposób

<ul>
  <li><a href="index.html">Strona główna</a></li>
  <li><a href="podstrona.html">Spis treści</a></li>
  <li><a href="podstrona.html">Kontakt</a></li>
</ul>

a w css (domyślam się że chcesz mieć pionowe menu)

ul {
 margin: 0;   /* usuniecie marginesów */
 padding: 0;
 width: 200px;  /* ustaw tutaj szerokość menu jaka chcesz */
}

ul li {
 list-style: none;    /* usuniecie stylowania elementów listy (kropek) */
}

ul li a {
 display: block;    /* link bedzie wtedy na całą szerokość ul w tym przypadku 200px */
 text-align: center;  /* wyśrodkowanie tekstu w a */
}

Mam nadzieje, że wytłumaczyłem to w najprostrzy sposób.

Pozdrawiam

Answer 2

To zacznij od czytania jak sie menu robi... Bo na pewno nie na divach tylko na liście ul li, odpowiednie bloki li przesuwasz za pomocą margin.

Comments

Robiłem identycznie jak w filmiku instruktażowym https://www.youtube.com/watch?v=clRo9ISlKKw

---

tyle, że pokazane tam jest statyczne menu bez linków. Normalne menu złożone jest z listy ul i podpunktów li. A stylizuje się odpowiednio li jako pudełka, oraz same linki <a> bo nie mam pojęcia jak chciałbyś potem np dorobić submenu

Answer 3

Pan Mirosław tłumaczył to w 2 odc kursu HTML polecam :) 

więc tak jeżeli chcesz zrobić hiperłącze musisz dać takie coś 

<a href="kontakt.html"></a>

z twoim kodem wyglądało by tak 

 <div id="menu"> 
         <div class="option"><a href="kontakt.html">Kontakt</a></div> 
         <div class="option"><a href="strona.html">Strona główna</a></div> 
         <div class="option"><a href="spis.html">Spis treści</a></div> 
 </div>

pomiędzy <a> tu </a> dajemy nazwę czyli np strona główna itp 

Pozdrawiam :) 

Answer 4

Powinieneś zbudowac menu na liście ale skoro chcesz to zrobić na divach to nikt nie broni :P

#menu .option {
    border: 1px solid red;
    display: block;
    margin-left:  40%;
    width: 30%;
  }