[jglapinski]

Witam. Właśnie testuję serwis windu i potrzebuję na stronie głównej stworzyć kafelki, po którym kliknięciu będzie kierować mnie na poszczególne podstrony gdzie już menu będzie wyglądać normalnie czyli albi na górze albo z lewej strony.
Z góry dzięki za info.

[Wojtas.fdsl]

Jesteś początkujący w tych sprawach ?
Masz może jakiś przykład tego co chcesz osiągnąć, żebyśmy wiedzieli z której strony podejść ?
Można stworzyć każdy kafelek osobno i przypisać do nich linki lub też wykorzystać jakieś menu i odpowiednio przerobić style

[jglapinski]

Oto przykład o co mi chodzi: http://www.przychodnia-zabobrze.pl/

[Wojtas.fdsl]

Chyba najłatwiej(najszybciej) takie coś można osiągnąć na dwóch obrazkach, tak mi wyszło:
http://synergylink.pl/templ/test
HTML:

Kod: Zaznacz wszystko

  <div id="kafelki">
    <div class="kafel">
      <a href="#"><img class="bot" src="./data/files/images/test-bot.jpg" /><img class="top" src="./data/files/images/test-top.jpg" /> </a>
    </div>
   
    <div class="kafel">
      <a href="#"><img class="bot" src="./data/files/images/test-bot.jpg" /><img class="top" src="./data/files/images/test-top.jpg" /> </a>
    </div>
   
    <div class="kafel">
      <a href="#"><img class="bot" src="./data/files/images/test-bot.jpg" /><img class="top" src="./data/files/images/test-top.jpg" /> </a>
    </div>
   
    <div class="kafel">
      <a href="#"><img class="bot" src="./data/files/images/test-bot.jpg" /><img class="top" src="./data/files/images/test-top.jpg" /> </a>
    </div>
   
    <div class="kafel">
      <a href="#"><img class="bot" src="./data/files/images/test-bot.jpg" /><img class="top" src="./data/files/images/test-top.jpg" /> </a>
    </div>
  </div>

CSS:

Kod: Zaznacz wszystko

#kafelki {
  margin:0 auto;
  width:1000px
}
#kafelki .kafel{
  position:relative;
  float:left;
  width:196px;
  height:250px;
  margin-right:5px;
}
#kafelki .kafel:last-child{
  margin-right:0px;
}

#kafelki img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 500ms ease-in-out;
  -moz-transition: opacity 500ms ease-in-out;
  -o-transition: opacity 500ms ease-in-out;
  transition: opacity 500ms ease-in-out;
}

#kafelki img.top:hover {
  opacity:0;
}