Tematy dotyczące systemu WinduCMS, jego obsługi zarządzania oraz konfiguracji.

Moderator: Moderatorzy

[Pytanie] Kafelki na stronie głównej

Postprzez jglapinski » 04 Kwi 2013, 19:40

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.
jglapinski
 
Posty: 2
Rejestracja: 04 Kwi 2013, 19:35
Podziękował: 0 raz(y)
Pomagał(a): 0 raz(y)

Re: Kafelki na stronie głównej

Postprzez Wojtas.fdsl » 04 Kwi 2013, 20:21

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
Wojtas.fdsl
Wyjadacz
 
Posty: 104
Rejestracja: 25 Sty 2013, 10:49
Miejscowość: Warszawa
Podziękował: 8 razy
Pomagał(a): 48 razy

Re: Kafelki na stronie głównej

Postprzez jglapinski » 04 Kwi 2013, 20:30

Oto przykład o co mi chodzi: http://www.przychodnia-zabobrze.pl/
jglapinski
 
Posty: 2
Rejestracja: 04 Kwi 2013, 19:35
Podziękował: 0 raz(y)
Pomagał(a): 0 raz(y)

Re: Kafelki na stronie głównej

Postprzez Wojtas.fdsl » 05 Kwi 2013, 11:27

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;
}
Wojtas.fdsl
Wyjadacz
 
Posty: 104
Rejestracja: 25 Sty 2013, 10:49
Miejscowość: Warszawa
Podziękował: 8 razy
Pomagał(a): 48 razy


Kto jest na forum

Użytkownicy przeglądający to forum: Brak zarejestrowanych użytkowników oraz 2 gości

cron