Tabela czy nalezy zrobic to inaczej

pytanie zadane 23 czerwca 2016 w HTML i CSS przez BMarcin Nowicjusz (140 p.)
edycja 23 czerwca 2016 przez BMarcin

Witam, otoz sprawa wyglada tak ze robie sobie moja pierwsza stronke lecz napotkalem sie na wielki problem. Potrzebuje zrobic cos takiego : http://imgur.com/ONlPi1G i zastanawiam sie ja kto zrobic. Czy zrobic to w formie tabeli czy jest jakis inny sposob. Aby mozna bylo u gory dac zdjecie a na dole krotki opis.

Pytanie 2 :

Jak to jest zrobione na glownej stronie p. Miroslawa ze jest powiedzmy przycisk C++ i gdy sie na niego najezdza wyskakuje opis.

Pytanie 3:

Wlasnie zrobilem diva gdzie sa dwa bloki obok siebie zapisane jako divy : http://imgur.com/wcsO8wl bloki te sa nie rowno polozone (z lewej malo miejsca z prawej duzo miejsca wolnego.), Jak moge to wyrownac. Probowalem komend typu position absolute, top bot 50%. I nic mi nie pomoglo lub zle to wpisywalem.

    <div class="main-content container-fluid">
    <div class="row1">
      
    <!--NEWS-->
      <div class="newsy">
        <h3>123</h3>
          <div class="row"></div>
  <div class="col-md-6"><img src="img/nep1.png" class="img-responsive"></div>
  <div class="col-md-6"><img src="img/nep1.png" class="img-responsive"></div>
          </div>

      </div>
    <!--/NEWS-->

    <!--EVENTS-->
    <!--/EVENTS-->
    <!--SOCIALS-->
    <!--/SOCIALS-->
    <!--SPONSORS-->
    <!--/SPONSORS-->
    <!--NAV1-->
    <!--/NAV1-->
    </div>
  </div>

Oraz CSS

Na chwile obecna NIC

Dzieki

1 odpowiedź

odpowiedź 23 czerwca 2016 przez mbabane Szeryf (79,280 p.)

raczej tabele nie sa do tego przeznaczone, najpewniej za pomoca divow i odpowiednio w css, ze tak powiem, opisac. Do wstawiania opisu obrazka nawet jest specjalny tag: http://tutorials.comandeer.pl/html5-blog.html#artykul-obrazki

Co do guzika to np. za pomoca JavaScriptu

komentarz 23 czerwca 2016 przez mitelak Pasjonat (23,330 p.)

Akurat do takich rzeczy javascriptu już nikt chyba nie stosuje tylko odpowiednio ostylowane :after, albo :before :)

komentarz 23 czerwca 2016 przez BMarcin Nowicjusz (140 p.)

Mozesz to opisac ?

komentarz 23 czerwca 2016 przez mitelak Pasjonat (23,330 p.)

http://codepen.io/mitelak/pen/wWgvBy tutaj opisałem kodem :D
Ogólnie można to na różne sposoby zrobić tutaj akurat zrobiłem to tak, że mamy tag figure, w którym znajdują się img i figcaption. W css nadaje wielkość dla figure, pozycje relatywną (tutaj żeby wyśrodkować zrobiłem absolute) no i overflow hidden, czyli to co jest pomiędzy figure, ale wychodzi poza jego obrys jakby jest chowane :) No i później dodaje :after do figure i tak naprawdę to by działało tak jak osobny div, tylko żeby nie zaśmiecać kodu html pustymi divami robisz to przy pomocy :after czyli nadajesz kolor wielkość i pozycje absolutną (będzie ona ustawiona względem tego figure) czyli pozycja top 0 i left 0 będzie zeby zakryć obrazek, później styluje figcaption żeby było na środku i tyle :) Te hover to na różne sposoby już mozna robić ja wymyśliłem jakiś taki jak widać :D