úprava kodu - estetika stranky Vyřešeno

Místo pro dotazy a rady ohledně programovacích jazyků (C++, C#, PHP, ASP, Javascript, VBS..) a tvorby webových stránek

Moderátor: Mods_senior

teichmann.ondrej
Level 3.5
Level 3.5
Příspěvky: 833
Registrován: leden 14
Pohlaví: Nespecifikováno
Stav:
Offline

Re: úprava kodu - estetika stranky

Příspěvekod teichmann.ondrej » 21 lis 2014 13:37

uz jsem to našel a ted jak upravit ty reference???

prepsat ty kody s jednotlivymi referencemi temi cca tremi radyky kodu figure??

Reklama
Uživatelský avatar
x-rated
Level 5
Level 5
Příspěvky: 2124
Registrován: říjen 14
Bydliště: Praha
Pohlaví: Muž
Stav:
Offline
Kontakt:

Re: úprava kodu - estetika stranky

Příspěvekod x-rated » 21 lis 2014 14:27

jasný, nahraď v tom novym kódu obrázky a odkazy, celý původní reference smázni a dej tam tohle :smile: a nezapomeň na css (kromě body, to tam nedávej)
figure spolu s figcaption označuje vloženej obsah (třeba obrázek) a k němu odpovídající popisek
9900K / G.Skill 32GB@4 GHz / MXI Formula / RTX 2080 Ti / Sabrent 4 TB NVMe / X-Fi THD / HD660S / G403 / G815 / UP2715K 5K IPS / HX1000i / Define R6 / EKWB full

teichmann.ondrej
Level 3.5
Level 3.5
Příspěvky: 833
Registrován: leden 14
Pohlaví: Nespecifikováno
Stav:
Offline

Re: úprava kodu - estetika stranky

Příspěvekod teichmann.ondrej » 21 lis 2014 21:39

Kód: Vybrat vše

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <meta http-equiv="Cache-Control" content="no-cache"/>
    <meta http-equiv="content-language" content="cz" />
   
   <title>SEADON Reference | střechy, světlíky, fasády, opláštění, výrobky ze sádrokartonu </title>
   <meta name="description" content="Výroba světlíků, střech, světlovodů, montáž ventilátorů, ventilačních turbín, prosklívání stěn, zastřešení dveří, vstupů, průchodů a zateplování budov" />
   <meta name="keywords" content="střechy, světlíky, fasády, opláštění, výrobky ze sádrokartonu" />
   <meta name="robots" content="allow, index" />
   
   <link href="css/style.css" rel="stylesheet" type="text/css" />
    <link href="_js/nivio/nivo-slider.css" rel="stylesheet"  type="text/css" charset="utf-8" />
    <link href="_js/jquery-lightbox/css/prettyPhoto.css" rel="stylesheet"  type="text/css" charset="utf-8" />
    <link href="css/subpage.css" rel="stylesheet" type="text/css" />
    <!--[if IE 7]><link rel="StyleSheet" media="Screen" href="css/styleForIE7.css" type="text/css" /><![endif]--> 
    <link rel="shortcut icon" href="/_images/favicon.ico" >
</head>

<body>
    <!-- START TOP -->
   <?  include "include/top-menu.php"; ?>
    <!-- END TOP -->
   
        <!-- START slider -->
        <? include "include/slider.php"; ?>
        <!-- END slider -->
    </div>
   <!-- END head -->
    <!-- START data -->
    <div id="data" class="global">
       <h1 class="cufon">Naše <span>reference</span></h1>
       <div class="blank"></div><div class="blank"></div>
      <h2>Fasády</h2>
     
        <div class="blank"></div>
         <div class="float box">
           <div class="image">
               <a href="/reference/strojfer.php" class="spanHide"><span>STROJFERR, s. r. o.</span></a>
                <img class="reference" src="/_images/reference/strojfer/strojfer1.jpg" alt="světliky" />
            </div>
            <div class="tit"><a href="/reference/strojfer.php" class="cufon">STROJFERR, s. r. o.</a></div>
            <div class="desc"><p class="justify textSmall textBlack"></p></div>
        </div>
        <div class="float box">
           <div class="image">
               <a href="/reference/koma.php" class="spanHide"><span>KOMA – Industry  s. r.o.</span></a>
                <img class="reference" src="/_images/reference/koma/koma1.jpg" alt="světliky" />
            </div>
            <div class="tit"><a href="/reference/koma.php" class="cufon">KOMA – Industry  s. r.o.</a></div>
            <div class="desc"><p class="justify textSmall textBlack"></p></div>
        </div>
          <div class="float box">
           <div class="image">
               <a href="/reference/vsb-tuo.php" class="spanHide"><span>VŠB - TUO</span></a>
                <img class="reference" src="/_images/reference/vsb-tuo/vsb-tuo.jpg" alt="světliky" />
            </div>
            <div class="tit"><a href="/reference/vsb-tuo.php" class="cufon">VŠB - TUO</a></div>
            <div class="desc"><p class="justify textSmall textBlack"></p></div>
        </div>
         <div class="clear"></div>
         
         
         <div class="float box">
           <div class="image">
               <a href="/reference/golf-kravare.php" class="spanHide"><span>Golf klub Kravaře</span></a>
                <img class="reference" src="/_images/reference/kravare/kravare1.jpg" alt="světliky" />
            </div>
            <div class="tit"><a href="/reference/golf-kravare.php" class="cufon">Golf klub Kravaře</a></div>
            <div class="desc"><p class="justify textSmall textBlack"></p></div>
        </div>
        <div class="float box">
           <div class="image">
               <a href="/reference/havirov.php" class="spanHide"><span>MSH Havířov</span></a>
                <img class="reference" src="/_images/reference/havirov/havirov1.jpg" alt="světliky" />
            </div>
            <div class="tit"><a href="/reference/havirov.php" class="cufon">MSH Havířov</a></div>
            <div class="desc"><p class="justify textSmall textBlack"></p></div>
        </div>
         <div class="float box last">
           <div class="image">
               <a href="/reference/stk.php" class="spanHide"><span>STK Ostrava s.r.o.</span></a>
                <img class="reference" src="/_images/reference/stk/stk1.jpg" alt="světliky" />
            </div>
            <div class="tit"><a href="/reference/stk.php" class="cufon">STK Ostrava s.r.o.</a></div>
            <div class="desc"><p class="justify textSmall textBlack"></p></div>
        </div>
         <div class="clear"></div>
         
                  <div class="float box">
           <div class="image">
               <a href="/reference/ctp.php" class="spanHide"><span>CT Park</span></a>
                <img class="reference" src="/_images/reference/ctp/ctp2.jpg" alt="opláštění" />
            </div>
            <div class="tit"><a href="/reference/ctp.php" class="cufon">CTP Park</a></div>
            <div class="desc"><p class="justify textSmall textBlack"></p></div>
        </div>
         <div class="clear"></div>
         
         
         <div class="float box ">
           <div class="image">
               <a href="/reference/ps-brno.php" class="spanHide"><span>Viena Point 2</span></a>
                <img class="reference" src="/_images/reference/ps-brno/ps-brno.jpg" alt="světliky" />
            </div>
            <div class="tit"><a href="/reference/ps-brno.php" class="cufon">Viena Point 2</a></div>
            <div class="desc"><p class="justify textSmall textBlack"></p></div>
        </div>
          <div class="float box ">
           <div class="image">
               <a href="/reference/ohl-zs.php" class="spanHide"><span>Hlavní nádraží Ostrava</span></a>
                <img class="reference" src="/_images/reference/ohl-zs/ohl-zs.jpg" alt="světliky" />
            </div>
            <div class="tit"><a href="/reference/ohl-zs.php" class="cufon">Hlavní nádraží Ostrava.</a></div>
            <div class="desc"><p class="justify textSmall textBlack"></p></div>
        </div>
          <div class="float box ">
           <div class="image">
               <a href="/reference/zevos.php" class="spanHide"><span>EGP Invest a.s.</span></a>
                <img class="reference" src="/_images/reference/zevos/zevos.jpg" alt="světliky" />
            </div>
            <div class="tit"><a href="/reference/zevos.php" class="cufon">EGP Invest a.s.</a></div>
            <div class="desc"><p class="justify textSmall textBlack"></p></div>
        </div>
         <div class="clear"></div>
         
         
        <div class="float box">
           <div class="image">
               <a href="/reference/doas.php" class="spanHide"><span>Rezidenční park Viktoria</span></a>
                <img class="reference" src="/_images/reference/doas/doas1.jpg" alt="světliky" />
            </div>
            <div class="tit"><a href="/reference/doas.php" class="cufon">Rezidenční park Viktoria</a></div>
            <div class="desc"><p class="justify textSmall textBlack"></p></div>
        </div>
        <div class="float box">
           <div class="image">
               <a href="/reference/ferrcomp.php" class="spanHide"><span>FERRCOMP, a. s.</span></a>
                <img class="reference" src="/_images/reference/ferrcomp/ferrcomp1.jpg" alt="světliky" />
            </div>
            <div class="tit"><a href="/reference/ferrcomp.php" class="cufon">FERRCOMP, a. s.</a></div>
            <div class="desc"><p class="justify textSmall textBlack"></p></div>
        </div>
        <div class="float box ">
           <div class="image">
               <a href="/reference/aupark.php" class="spanHide"><span>Aupark Žilina</span></a>
                <img class="reference" src="/_images/reference/aupark/aupark.jpg" alt="světliky" />
            </div>
            <div class="tit"><a href="/reference/aupark.php" class="cufon">Aupark Žilina</a></div>
            <div class="desc"><p class="justify textSmall textBlack"></p></div>
        </div>
        <div class="clear"></div>
         
       
         <div class="float box">
           <div class="image">
               <a href="/reference/rezidence-jeseniova.php" class="spanHide"><span>Rezidence Jeseniova</span></a>
                <img class="reference" src="/_images/reference/jeseniova/jeseniova1.jpg" alt="světliky" />
            </div>
            <div class="tit"><a href="/reference/rezidence-jeseniova.php" class="cufon">Rezidence Jeseniova</a></div>
            <div class="desc"><p class="justify textSmall textBlack"></p></div>
        </div>
         <div class="float box">
           <div class="image">
               <a href="/reference/ingeteam.php" class="spanHide"><span>Ingeteam</span></a>
                <img class="reference" src="/_images/reference/ingeteam/ingeteam1.jpg" alt="světliky" />
            </div>
            <div class="tit"><a href="/reference/ingeteam.php" class="cufon">Ingeteam</a></div>
            <div class="desc"><p class="justify textSmall textBlack"></p></div>
        </div>
       <div class="float box ">
           <div class="image">
               <a href="/reference/skoda.php" class="spanHide"><span>Škoda Mladá Boleslav</span></a>
                <img class="reference" src="/_images/reference/skoda/skoda1.jpg" alt="světliky" />
            </div>
            <div class="tit"><a href="/reference/skoda.php" class="cufon">Škoda Mladá Boleslav </a></div>
            <div class="desc"><p class="justify textSmall textBlack"></p></div>
        </div>
        <div class="clear"></div>
       
       
       
         <div class="float box">
           <div class="image">
               <a href="/reference/vw-liberec.php" class="spanHide"><span>VW Liberec</span></a>
                <img class="reference" src="/_images/reference/vw/vw1.jpg" alt="světliky" />
            </div>
            <div class="tit"><a href="/reference/vw-liberec.php" class="cufon">VW Liberec </a></div>
            <div class="desc"><p class="justify textSmall textBlack"></p></div>
        </div>
         <div class="float box">
           <div class="image">
               <a href="/reference/vetruse.php" class="spanHide"><span>Větruše - Ústí nad Labem</span></a>
                <img class="reference" src="/_images/reference/vetruse/vetruse1.jpg" alt="světliky" />
            </div>
            <div class="tit"><a href="/reference/vetruse.php" class="cufon">Větruše - Ústí nad Labem</a></div>
            <div class="desc"><p class="justify textSmall textBlack"></p></div>
        </div>
       <div class="float box ">
           <div class="image">
               <a href="/reference/vut.php" class="spanHide"><span>VUT  Brno  </span></a>
                <img class="reference" src="/_images/reference/vut/vut1.jpg" alt="světliky" />
            </div>
            <div class="tit"><a href="/reference/vut.php" class="cufon">VUT  Brno   </a></div>
            <div class="desc"><p class="justify textSmall textBlack"></p></div>
        </div>
        <div class="clear"></div>
       
       
       
         <div class="float box">
           <div class="image">
               <a href="/reference/ibc.php" class="spanHide"><span>IBC Ostrava</span></a>
                <img class="reference" src="/_images/reference/ibc/ibc1.jpg" alt="světliky" />
            </div>
            <div class="tit"><a href="/reference/ibc.php" class="cufon">IBC Ostrava</a></div>
            <div class="desc"><p class="justify textSmall textBlack"></p></div>
        </div>
     
         <div class="float box">
           <div class="image">
               <a href="/reference/koruni.php" class="spanHide"><span>Rezidence Koruní</span></a>
                <img class="reference" src="/_images/reference/koruni/koruni1.jpg" alt="světliky" />
            </div>
            <div class="tit"><a href="/reference/koruni.php" class="cufon">Rezidence Koruní</a></div>
            <div class="desc"><p class="justify textSmall textBlack"></p></div>
        </div>
       <div class="float box ">
           <div class="image">
               <a href="/reference/porsche.php" class="spanHide"><span>Porsche Praha Prosek-Bond</span></a>
                <img class="reference" src="/_images/reference/porsche/porsche1.jpg" alt="světliky" />
            </div>
            <div class="tit"><a href="/reference/porsche.php" class="cufon">Porsche Praha Prosek-Bond </a></div>
            <div class="desc"><p class="justify textSmall textBlack"></p></div>
        </div>
        <div class="clear"></div>
               
       
         <div class="float box">
           <div class="image">
               <a href="/reference/omnipolis.php" class="spanHide"><span>Omnipolis Bratislava-Bond</span></a>
                <img class="reference" src="/_images/reference/omnipolis/omnipolis1.jpg" alt="světliky" />
            </div>
            <div class="tit"><a href="/reference/omnipolis.php" class="cufon">Omnipolis Bratislava-Bond</a></div>
            <div class="desc"><p class="justify textSmall textBlack"></p></div>
        </div>
       
         <div class="float box">
           <div class="image">
               <a href="/reference/nutrend.php" class="spanHide"><span>NUTREND D.S., a.s.</span></a>
                <img class="reference" src="/_images/reference/nutrend/nutrend.jpg" alt="světliky" />
            </div>
            <div class="tit"><a href="/reference/nutrend.php" class="cufon">NUTREND D.S., a.s.</a></div>
            <div class="desc"><p class="justify textSmall textBlack"></p></div>
        </div>
       
          <div class="float box">
           <div class="image">
          <a href="/reference/bychl.php" class="spanHide"><span>Bychl Vestec</span></a>
          <img class="reference" src="/_images/reference/sos/sos2.jpg" alt="světliky" />
          </div>
          <div class="tit"><a href="/reference/bychl.php" class="cufon">Bychl Vestec</a></div>
          <div class="desc"><p class="justify textSmall textBlack"></p></div>
          </div>
         
         <div class="float box">
        <div class="image">
        <a href="/reference/dratovny.php" class="spanHide"><span>Moravskoslezske dratovny, a.s.</span></a>
        <img class="reference" src="/_images/reference/dratovny/dratovny1.jpg" alt="opláštění" />
        </div>
        <div class="tit"><a href="/reference/dratovny.php" class="cufon">Moravskoslezske dratovny, a.s.</a></div>
        <div class="desc"><p class="justify textSmall textBlack"></p></div>
        </div>
       
         <div class="float box ">
         <div class="image">
         <a href="/reference/berlin.php" class="spanHide"><span>Kaufland Berlín</span></a>
         <img class="reference" src="/_images/reference/berlin/berlin2.jpg" alt="fasady" />
         </div>
         <div class="tit"><a href="/reference/berlin.php" class="cufon">Kaufland Berlín</a></div>
         <div class="desc"><p class="justify textSmall textBlack"></p></div>
         </div>
         
         <div class="float box ">
         <div class="image">
         <a href="/reference/stk_ostrava.php" class="spanHide"><span>STK Ostrava-Třebovice</span></a>
         <img class="reference" src="/_images/reference/stk_ostrava/IMG_2628.jpg" alt="fasady" />
         </div>
         <div class="tit"><a href="/reference/stk_ostrava.php" class="cufon">STK Ostrava-Třebovice</a></div>
         <div class="desc"><p class="justify textSmall textBlack"></p></div>
         </div>
                  <div class="float box ">
           <div class="image">
               <a href="/reference/karolina.php" class="spanHide"><span>FORUM NOVÁ KAROLINA</span></a>
                <img class="reference" src="/_images/reference/karolina/karolina1.jpg" alt="fasáda" />
            </div>
            <div class="tit"><a href="/reference/karolina.php" class="cufon">FORUM NOVÁ KAROLINA</a></div>
            <div class="desc"><p class="justify textSmall textBlack"></p></div>
        </div>
       
        <div class="clear"></div>
       
       
       
         <div class="clear"></div>
         <div class="blank"></div><div class="blank"></div>
          <h2>Střechy a světlíky</h2>
        <div class="blank"></div>
       
         <div class="float box">
           <div class="image">
               <a href="/reference/r-fin.php" class="spanHide"><span>R-FIN s. r. o.</span></a>
                <img class="reference" src="/_images/reference/rfin/rfin1.jpg" alt="světliky" />
            </div>
            <div class="tit"><a href="/reference/r-fin.php" class="cufon">R-FIN s. r. o.</a></div>
            <div class="desc"><p class="justify textSmall textBlack"></p></div>
        </div>
         <div class="float box ">
           <div class="image">
               <a href="/reference/bike-fun.php" class="spanHide"><span>BIKE FUN International s. r. o.</span></a>
                <img class="reference" src="/_images/reference/bike/bike2.jpg" alt="světliky" />
            </div>
            <div class="tit"><a href="/reference/bike-fun.php" class="cufon">BIKE FUN International s. r. o. </a></div>
            <div class="desc"><p class="justify textSmall textBlack"></p></div>
        </div>
       
       
       <div class="float box ">
           <div class="image">
               <a href="/reference/uniron.php" class="spanHide"><span>UNIRON, s. r.o.</span></a>
                <img class="reference" src="/_images/reference/uniron/uniron.jpg" alt="světliky" />
            </div>
            <div class="tit"><a href="/reference/uniron.php" class="cufon">UNIRON, s. r.o.</a></div>
            <div class="desc"><p class="justify textSmall textBlack"></p></div>
        </div>
       
        <div class="float box ">
           <div class="image">
               <a href="/reference/ferrit.php" class="spanHide"><span>FERRIT s. r. o.</span></a>
                <img class="reference" src="/_images/reference/ferrit/ferrit.jpg" alt="světliky" />
            </div>
            <div class="tit"><a href="/reference/ferrit.php" class="cufon">FERRIT s. r. o.</a></div>
            <div class="desc"><p class="justify textSmall textBlack"></p></div>
        </div>
       
        <div class="float box ">
           <div class="image">
               <a href="/reference/filinger.php" class="spanHide"><span>FILINGER a. s.</span></a>
                <img class="reference" src="/_images/reference/filinger/filinger.jpg" alt="světliky" />
            </div>
            <div class="tit"><a href="/reference/filinger.php" class="cufon">FILINGER a. s.</a></div>
            <div class="desc"><p class="justify textSmall textBlack"></p></div>
        </div>
       
        <div class="float box ">
           <div class="image">
               <a href="/reference/elektrovod.php" class="spanHide"><span>Elektrovod Žilina, a.s.</span></a>
                <img class="reference" src="/_images/reference/elektrovod/5.jpg" alt="světliky" />
            </div>
            <div class="tit"><a href="/reference/elektrovod.php" class="cufon">Elektrovod Žilina, a.s.</a></div>
            <div class="desc"><p class="justify textSmall textBlack"></p></div>
        </div>
       
        <div class="float box">
        <div class="image">
        <a href="/reference/kofola.php" class="spanHide"><span>KOFOLA, a.s.</span></a>
        <img class="reference" src="/_images/reference/kofola/Fotografie0135.jpg" alt="světliky" />
        </div>
        <div class="tit"><a href="/reference/kofola.php" class="cufon">Kofola, a.s.</a></div>
        <div class="desc"><p class="justify textSmall textBlack"></p></div>
        </div>
       
        <div class="float box">
        <div class="image">
        <a href="/reference/cembrit.php" class="spanHide"><span>Cembrit Šumperk</span></a>
        <img class="reference" src="/_images/reference/fortex/fortex1.jpg" alt="světliky" />
        </div>
        <div class="tit"><a href="/reference/cembrit.php" class="cufon">Cembrit Šumperk</a></div>
        <div class="desc"><p class="justify textSmall textBlack"></p></div>
        </div>
       
        <div class="float box">
        <div class="image">
        <a href="/reference/dratovny.php" class="spanHide"><span>Moravskoslezske dratovny, a.s.</span></a>
        <img class="reference" src="/_images/reference/dratovny/dratovny2.jpg" alt="světliky" />
        </div>
        <div class="tit"><a href="/reference/dratovny.php" class="cufon">Moravskoslezske dratovny, a.s.</a></div>
        <div class="desc"><p class="justify textSmall textBlack"></p></div>
        </div>
           
       
        <div class="clear"></div>
         <div class="blank"></div><div class="blank"></div>
          <h2>SDK</h2>
        <div class="blank"></div>
       
         <div class="float box">
           <div class="image">
               <a href="/reference/spencer-ostrava.php" class="spanHide"><span>Mark Spencer Ostrava</span></a>
                <img class="reference" src="/_images/reference/spencer-ostrava/ostrava1.jpg" alt="světliky" />
            </div>
            <div class="tit"><a href="/reference/spencer-ostrava.php" class="cufon">Mark Spencer Ostrava</a></div>
            <div class="desc"><p class="justify textSmall textBlack"></p></div>
        </div>
         <div class="float box ">
           <div class="image">
               <a href="/reference/spencer-jihlava.php" class="spanHide"><span>Mark Spencer Jihlava</span></a>
                <img class="reference" src="/_images/reference/spencer-jihlava/jihlava1.jpg" alt="světliky" />
            </div>
            <div class="tit"><a href="/reference/spencer-jihlava.php" class="cufon">Mark Spencer Jihlava</a></div>
            <div class="desc"><p class="justify textSmall textBlack"></p></div>
        </div>
       
       <div class="float box ">
           <div class="image">
               <a href="/reference/spencer-brno.php" class="spanHide"><span>Mark Spencer Brno</span></a>
                <img class="reference" src="/_images/reference/spencer-brno/brno1.jpg" alt="světliky" />
            </div>
            <div class="tit"><a href="/reference/spencer-brno.php" class="cufon">Mark Spencer Brno</a></div>
            <div class="desc"><p class="justify textSmall textBlack"></p></div>
        </div>
       
        <div class="float box ">
           <div class="image">
               <a href="/reference/hyundai.php" class="spanHide"><span>Hyundai Nošovice</span></a>
                <img class="reference" src="/_images/reference/hyundai/hyundai1.jpg" alt="světliky" />
            </div>
            <div class="tit"><a href="/reference/hyundai.php" class="cufon">Hyundai Nošovice</a></div>
            <div class="desc"><p class="justify textSmall textBlack"></p></div>
        </div>
       
        <div class="float box ">
           <div class="image">
               <a href="/reference/oc-liberec.php" class="spanHide"><span>OC Forum Liberec</span></a>
                <img class="reference" src="/_images/reference/oc-liberec/liberec.jpg" alt="světliky" />
            </div>
            <div class="tit"><a href="/reference/oc-liberec.php" class="cufon">OC Forum Liberec</a></div>
            <div class="desc"><p class="justify textSmall textBlack"></p></div>
        </div>
       
       
       
         
       
       
       
        <div class="clear"></div>
    </div>
    <!-- END data -->
     <!-- START footer -->
   
    <? include "include/footer.php"; ?>
   
    <!-- END footer -->
</body>
</html>

 


Muzu poprosit o nějakou ukazku jestli jsem pochopil dobře

Uživatelský avatar
x-rated
Level 5
Level 5
Příspěvky: 2124
Registrován: říjen 14
Bydliště: Praha
Pohlaví: Muž
Stav:
Offline
Kontakt:

Re: úprava kodu - estetika stranky

Příspěvekod x-rated » 21 lis 2014 23:25

do style.css dáš tohle

Kód: Vybrat vše

#reference>figure {
width: 310px;
float: left;
position: relative;
text-align: center;
margin: 0 15px 15px 0;
}

#reference>figure:nth-of-type(3n+3) {
margin-right: 0;
}

#reference>figure>a {
display: block;
width: 300px;
height: 129px;
border: 5px solid rgba(255,255,255,.5);
position: absolute;
top: 0;
transition: .3s ease;
}

#reference>figure>a:hover {
border-color: silver;
}

#reference img {
width: 310px;
height: 139px;
}

#reference figcaption>a {
color: #0383af;
}

#reference figcaption>a:hover {
color: silver;
}


a html bude vypadat takhle, je třeba jenom vyměnit obrázky, popisky a odkazy

Kód: Vybrat vše

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <meta http-equiv="Cache-Control" content="no-cache"/>
    <meta http-equiv="content-language" content="cz" />
   
   <title>SEADON Reference | střechy, světlíky, fasády, opláštění, výrobky ze sádrokartonu </title>
   <meta name="description" content="Výroba světlíků, střech, světlovodů, montáž ventilátorů, ventilačních turbín, prosklívání stěn, zastřešení dveří, vstupů, průchodů a zateplování budov" />
   <meta name="keywords" content="střechy, světlíky, fasády, opláštění, výrobky ze sádrokartonu" />
   <meta name="robots" content="allow, index" />
   
   <link href="css/style.css" rel="stylesheet" type="text/css" />
    <link href="_js/nivio/nivo-slider.css" rel="stylesheet"  type="text/css" charset="utf-8" />
    <link href="_js/jquery-lightbox/css/prettyPhoto.css" rel="stylesheet"  type="text/css" charset="utf-8" />
    <link href="css/subpage.css" rel="stylesheet" type="text/css" />
    <!--[if IE 7]><link rel="StyleSheet" media="Screen" href="css/styleForIE7.css" type="text/css" /><![endif]--> 
    <link rel="shortcut icon" href="/_images/favicon.ico" >
</head>

<body>
    <!-- START TOP -->
   <?  include "include/top-menu.php"; ?>
    <!-- END TOP -->
   
        <!-- START slider -->
        <? include "include/slider.php"; ?>
        <!-- END slider -->
    </div>
   <!-- END head -->
    <!-- START data -->
    <div id="data" class="global">
       <h1 class="cufon">Naše <span>reference</span></h1>
       <div class="blank"></div><div class="blank"></div>
      <h2>Fasády</h2>
     
        <div class="blank"></div>

<div id="reference">

<figure>
<img src="http://seadon.cz/_images/reference/strojfer/strojfer1.jpg" alt="popisek">
<a href="#"></a>
<figcaption><a href="#">Název reference jako odkaz</a></figcaption>
</figure>

<figure>
<img src="http://seadon.cz/_images/reference/strojfer/strojfer1.jpg" alt="popisek">
<a href="#"></a>
<figcaption><a href="#">Název reference jako odkaz</a></figcaption>
</figure>

<figure>
<img src="http://seadon.cz/_images/reference/strojfer/strojfer1.jpg" alt="popisek">
<a href="#"></a>
<figcaption><a href="#">Název reference jako odkaz</a></figcaption>
</figure>

<figure>
<img src="http://seadon.cz/_images/reference/strojfer/strojfer1.jpg" alt="popisek">
<a href="#"></a>
<figcaption><a href="#">Název reference jako odkaz</a></figcaption>
</figure>

<figure>
<img src="http://seadon.cz/_images/reference/strojfer/strojfer1.jpg" alt="popisek">
<a href="#"></a>
<figcaption><a href="#">Název reference jako odkaz</a></figcaption>
</figure>

<figure>
<img src="http://seadon.cz/_images/reference/strojfer/strojfer1.jpg" alt="popisek">
<a href="#"></a>
<figcaption><a href="#">Název reference jako odkaz</a></figcaption>
</figure>

</div>


    </div>
    <!-- END data -->
     <!-- START footer -->
   
    <? include "include/footer.php"; ?>
   
    <!-- END footer -->
</body>
</html>


a kdyby ses nudil, můžeš si rovnou trochu pročistit záhlaví html do aktuálnější podoby (celej vršek až po koncovej </head>)

Kód: Vybrat vše

<!DOCTYPE html>
<html lang="cs">
<head>
   <meta charset="utf-8">
   <title>SEADON Reference | střechy, světlíky, fasády, opláštění, výrobky ze sádrokartonu</title>
   <meta name="description" content="Výroba světlíků, střech, světlovodů, montáž ventilátorů, ventilačních turbín, prosklívání stěn, zastřešení dveří, vstupů, průchodů a zateplování budov">
   <meta name="keywords" content="střechy, světlíky, fasády, opláštění, výrobky ze sádrokartonu">
   <meta name="robots" content="index, follow">
   <link href="css/style.css" rel="stylesheet">
   <link href="_js/nivio/nivo-slider.css" rel="stylesheet">
   <link href="_js/jquery-lightbox/css/prettyPhoto.css" rel="stylesheet">
   <link href="css/subpage.css" rel="stylesheet">
   <link rel="icon" href="/_images/favicon.ico">
</head>
9900K / G.Skill 32GB@4 GHz / MXI Formula / RTX 2080 Ti / Sabrent 4 TB NVMe / X-Fi THD / HD660S / G403 / G815 / UP2715K 5K IPS / HX1000i / Define R6 / EKWB full

teichmann.ondrej
Level 3.5
Level 3.5
Příspěvky: 833
Registrován: leden 14
Pohlaví: Nespecifikováno
Stav:
Offline

Re: úprava kodu - estetika stranky

Příspěvekod teichmann.ondrej » 24 lis 2014 13:01

mam to style.css doplnit o dopsane data jo ???

A pročistit jak?

--- Doplnění předchozího příspěvku (24 Lis 2014 13:31) ---

ta figure dava fotky v plne velikosti coz ja nechci

Uživatelský avatar
x-rated
Level 5
Level 5
Příspěvky: 2124
Registrován: říjen 14
Bydliště: Praha
Pohlaví: Muž
Stav:
Offline
Kontakt:

Re: úprava kodu - estetika stranky

Příspěvekod x-rated » 25 lis 2014 04:41

ježišmarja :roll: prostě dej na konec css souboru ty věci, co přijdou do css, na tý stránce s referencema nahraď html za to, co sem psal, a head radši neřeš :smile:
9900K / G.Skill 32GB@4 GHz / MXI Formula / RTX 2080 Ti / Sabrent 4 TB NVMe / X-Fi THD / HD660S / G403 / G815 / UP2715K 5K IPS / HX1000i / Define R6 / EKWB full

teichmann.ondrej
Level 3.5
Level 3.5
Příspěvky: 833
Registrován: leden 14
Pohlaví: Nespecifikováno
Stav:
Offline

Re: úprava kodu - estetika stranky

Příspěvekod teichmann.ondrej » 27 lis 2014 09:04

ale pokud jsem vyměnil ty kody v reference.php, tak jsem měl obrazky v původní velikosti - coz je samozřejmě gigantická velikost ,,,

Uživatelský avatar
x-rated
Level 5
Level 5
Příspěvky: 2124
Registrován: říjen 14
Bydliště: Praha
Pohlaví: Muž
Stav:
Offline
Kontakt:

Re: úprava kodu - estetika stranky

Příspěvekod x-rated » 27 lis 2014 13:51

tak děláš něco špatně nebo ti do toho zasahuje nějaký další css, mně tady to funguje http://jsfiddle.net/doz84ojv/
cvakni na obrázek pravym myšítkem, dej zkontrolovat prvek a uvidíš, co za css na tom máš
9900K / G.Skill 32GB@4 GHz / MXI Formula / RTX 2080 Ti / Sabrent 4 TB NVMe / X-Fi THD / HD660S / G403 / G815 / UP2715K 5K IPS / HX1000i / Define R6 / EKWB full

teichmann.ondrej
Level 3.5
Level 3.5
Příspěvky: 833
Registrován: leden 14
Pohlaví: Nespecifikováno
Stav:
Offline

Re: úprava kodu - estetika stranky

Příspěvekod teichmann.ondrej » 27 lis 2014 14:26

10329182_361059640726294_1524853745846206145_n.jpg
takhle to vypadá


takhle to vypadá

teichmann.ondrej
Level 3.5
Level 3.5
Příspěvky: 833
Registrován: leden 14
Pohlaví: Nespecifikováno
Stav:
Offline

Re: úprava kodu - estetika stranky

Příspěvekod teichmann.ondrej » 23 led 2015 07:48

ja jsem podle toho JSFiddle to zkoušel, ale je to tady podle te fotky - není to zadne zmenšené, jak bylo kdysi...

Uživatelský avatar
x-rated
Level 5
Level 5
Příspěvky: 2124
Registrován: říjen 14
Bydliště: Praha
Pohlaví: Muž
Stav:
Offline
Kontakt:

Re: úprava kodu - estetika stranky

Příspěvekod x-rated » 23 led 2015 07:53

tak sem dej odkaz na stránku, kde to tak vypadá, ať se v tom dá šťourat
9900K / G.Skill 32GB@4 GHz / MXI Formula / RTX 2080 Ti / Sabrent 4 TB NVMe / X-Fi THD / HD660S / G403 / G815 / UP2715K 5K IPS / HX1000i / Define R6 / EKWB full

teichmann.ondrej
Level 3.5
Level 3.5
Příspěvky: 833
Registrován: leden 14
Pohlaví: Nespecifikováno
Stav:
Offline

Re: úprava kodu - estetika stranky

Příspěvekod teichmann.ondrej » 23 led 2015 08:04

¨ted to vypada tak - http://www.seadon.cz/reference.php
to fugure vypada takhle - http://zavesnefasady.cz/reference.php (ty fotky jsou takhle velke) ...


  • Mohlo by vás zajímat
    Odpovědi
    Zobrazení
    Poslední příspěvek
  • Prosím o úpravu kódu. Děkuji *
    od junis » 09 črc 2024 18:05 » v Kancelářské balíky
    4
    4404
    od junis Zobrazit poslední příspěvek
    22 črc 2024 17:54
  • Uprava vzorce
    od junis » 27 črc 2024 15:43 » v Kancelářské balíky
    6
    5234
    od junis Zobrazit poslední příspěvek
    02 srp 2024 18:02
  • Úprava pc pro Kingdome Come Deliverance 2
    od barryk10cz » 07 led 2025 17:00 » v Rady s výběrem hw a sestavením PC
    13
    3696
    od Hangli Zobrazit poslední příspěvek
    09 led 2025 22:42
  • Raspberry - M2 disk - uprava a zaloha oddilu Příloha(y)
    od L.L » 18 srp 2024 10:32 » v Problémy s hardwarem
    3
    3700
    od L.L Zobrazit poslední příspěvek
    19 srp 2024 14:39
  • bitmapová grafika - úprava fotografií, retuše, filtry.
    od zuzana3 » 10 kvě 2025 11:32 » v Design a grafické editory
    2
    5099
    od zuzana3 Zobrazit poslední příspěvek
    10 kvě 2025 17:31

Zpět na “Programování a tvorba webu”

Kdo je online

Uživatelé prohlížející si toto fórum: Žádní registrovaní uživatelé a 4 hosti