ú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

Zamčeno
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 » 04 úno 2015 12:13

stranku reference a produkty dat do nějakeho pěknějsiho stavu - třeba jako zarovnat do tabulky ....
Nahoru
Reklama
Top
Uživatelský avatar
LuCaCZ
Level 3.5
Level 3.5
Příspěvky: 929
Registrován: březen 11
Pohlaví: Muž
Stav:
Offline

Re: úprava kodu - estetika stranky

Příspěvekod LuCaCZ » 04 úno 2015 13:11

OK

http://seadon.cz/reference.php

v první řadě smazat ten volně vložený CSS, pryč s ním

Kód: Vybrat vše

    body {
width: 960px;
background: #f1f1f1;
margin: 50px auto;
padding: 0;
font-family: arial;
}

#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;
}


u boxů smazat třídu last a right

<div class="float box last">
<div class="float right box">

dál promaž tyhle prvky mezi boxy

Kód: Vybrat vše

<div class="clear"></div>

nech jen jeden před nadpisem <h2>
pak to bude vypadat takto

Kód: Vybrat vše

...boxy...
<div class="clear"></div>
<div class="blank"></div>
<div class="blank"></div>
<h2>Střechy a světlíky</h2>
<div class="blank"></div>
...boxy...

Kód: Vybrat vše

...boxy...
<div class="clear"></div>
<div class="blank"></div>
<div class="blank"></div>
<h2>SDK</h2>
<div class="blank"></div>
...boxy...


--- Doplnění předchozího příspěvku (04 Úno 2015 13:14) ---

no a pak by mělo stačit vložit do subpage.css

Kód: Vybrat vše

#data>.box:nth-of-type(3n) {
margin-right: 0;
}
Nahoru
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 » 04 úno 2015 13:42

¨ta první tabulka code má patřit do style.css???
Nahoru
Uživatelský avatar
LuCaCZ
Level 3.5
Level 3.5
Příspěvky: 929
Registrován: březen 11
Pohlaví: Muž
Stav:
Offline

Re: úprava kodu - estetika stranky

Příspěvekod LuCaCZ » 04 úno 2015 14:01

Ale tu nemáš nikam vložit ale smazat! Máš to vložené asi přímo v reference.php
Přílohy
f7z1.png
Nahoru
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 » 04 úno 2015 14:10

To bude asi vlozene jeste jinde

reference.php

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="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">
           <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="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="float box">
           <div class="image">
          <a href="/reference/werk.php" class="spanHide"><span>SYNER Třinec</span></a>
          <img class="reference" src="/_images/reference/werk/werk1.jpg" alt="opláštění" />
          </div>
          <div class="tit"><a href="/reference/werk.php" class="cufon">WERK aréna Třinec</a></div>
          <div class="desc"><p class="justify textSmall textBlack"></p></div>
          </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="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="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="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="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="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="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="float box">
        <div class="image">
        <a href="/reference/valdek.php" class="spanHide"><span>VALDEK PRAHA, spol. s.r.o.</span></a>
        <img class="reference" src="/_images/reference/valdek/valdek1.jpg" alt="střecha" />
        </div>
        <div class="tit"><a href="/reference/valdek.php" class="cufon">VALDEK PRAHA, spol. s.r.o.</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>
    <!-- END data -->
     <!-- START footer -->
   
    <? include "include/footer.php"; ?>
   
    <!-- END footer -->
</body>
</html>

 


style.css

Kód: Vybrat vše

body{
   font-size: 12px;
   font-family: Arial;
   margin:0px;
   color:#7a7a7a;
   line-height:16px;
   background-color:#f1f1f1;
}
/* START global options */
img{
   border:none;   

}

img.produkt{
   border:none;   
   height: 135px;
    width: 186px;
}
img.produkt2{
   border:none;   
   height: 139px;

}
img.produkt3{
   border:none;   
   height: 131px;
    width: 186px;
}
img.reference{
   border:none;   
   height: 139px;
    width: 309px;
}
.blankMin{
   height:2px;
   width:100%;
   font-size:2px;
}
.nonMarg{
   margin-right:0px !important;   
}
.floatImage{
   float:right;
   margin-left:10px;
   margin-bottom:5px;
}
.floatImage2{
   float:left;
   margin-right:10px;
   margin-bottom:5px;
}
h1,h2,h3,h4{
   margin:0px;
   padding:0px;
   font-weight:normal;
   font-size:14px;
   color:#666666;
}
h1,h2{
   margin-bottom:10px;   
}
h1 span,h2 span,h3 span,h4 span{
   color:#0383af;
}
a{   
   color:#00314b;
}
a.underLine{
   text-decoration:underline;   
}
.bg{
   width:100%;
   min-height:762px;
   background-image:url(../_images/bgs/pageWholeBg.png);
   background-repeat:no-repeat;
   background-position:center top;
   background-color:white;
}
.global{
   width:960px;
   margin-left:auto;
   margin-right:auto;
}
.topLine{
   width:100%;
   height:10px;
   background-image:url(../_images/bgs/topLine.png);
   background-repeat:repeat-x;
}
.float{
   float:left;   
}
.clear{
   clear:both;   
}
ul.defaultUl,ul.defaultUl li{
   margin:0px;
   padding:0px;
   list-style:none;
}
.hrs{
   width:100%;
   background-image:url(../_images/bgs/hrBg.png);
   background-repeat:repeat-x;
   background-position:bottom;
   min-height:1px;
}
.hrs-hor{
   min-width:1px;
   background-image:url(../_images/bgs/hrBg-hor.png);
   background-repeat:repeat-y;
   background-position:top center;
   min-height:5px;
}
p{
   margin:0px;
   padding:0px;
   
}
.justify{
   text-align:justify;   
}
.bold{
   font-weight:bold;   
}
.italic{
   font-style:italic;   
}
.textBlue{
   color:#0383af;   
}
.textBlack{
   color:black;   
}
.textSilver{
   color:#a1a1a1;   
}
.textSmall{
   font-size:11px;   
}
.textBig{
   font-size:12px;
   font-weight:bold;   
}
.blank{
   width:100%;
   height:10px;
}
a.spanHide span{
   display:none;   
}
h1,h2{
   font-size:18px;
   color:#003657;
   margin-bottom:13px;
   text-transform:uppercase;
}
p a{
   color:#0b4e6b   
}
.fifty{
   width:50%;   
}
/* START head options */
#head{
   width:100%;
   height:520px;
   background-image:url(../_images/bgs/headBg.png);
   background-repeat:no-repeat;
   background-position:bottom center;
}
#head .contact{
   height:34px;
   padding-left:47px;
   background-image:url(../_images/bgs/contactBg.png);
   background-repeat:no-repeat;
   background-position:top left;
   width:133px;
   font-size:11px;
   color:#7e7e7e;
   padding-top:2px;
   margin-top:30px;
}
#head .contact .cufon3{
   color:#656a6a !important;
   font-size:17px;
}
#head .contact.last{
   background-position:bottom left;   
   width:100px;
}
#head .logo{
   width:605px;
   height:104px;   
}
#head #menu{
   width:994px;
   margin-left:auto;
   margin-right:auto;
   height:74px;
   background-image:url(../_images/bgs/menuBg.png);
   background-repeat:no-repeat;
}
#head #menu ul{
   width:960px;
   margin-left:auto;
   margin-right:auto;
}
#head #menu ul li{
   float:left;   
   font-size:12px;
   color:#d4d4d4;
   line-height:67px;
}
#head #menu ul li a{
   text-transform:uppercase;
   color:#8a8a8a;
   font-size:12px;
   text-decoration:none;
   display:block;
   padding-left:15px;
   padding-right:15px;
  padding-top:27px;
   height:40px;
}
/* END head options */
/* START slider options uprava */
.sliderBg{
   width:994px;
   margin-left:auto;
   margin-right:auto;
   background-image:url(../_images/bgs/sliderBg.png);
   background-repeat:no-repeat;
   height:280px;
}
.sliderBg #slider{
   width:960px;
   margin-left:auto;
   margin-right:auto;
   position:relative;
   overflow:hidden;   
   height:340px;
}
.sliderBg #slider .items{
   /* this cannot be too large */
   width:20000em;
   position:absolute;
}
.sliderBg #slider  .items div.row {
   float:left;
}
.sliderBg #slider .description{
   width:943px;
   height:47px;
   margin-left:auto;
   margin-right:auto;
   padding-left:17px;
   background-color:#e5e5e5;
   margin-top:5px;
   padding-top:10px;
   padding-bottom:10px;
}
.sliderBg #slider .description  h3{
   margin:0px;
   padding:0px;
}
.sliderBg #slider .description  h3 a{
   display:block;
   font-size:13px;
   color:#575450;
   height:32px;
   line-height:13px;
   height:13px;
   text-transform:uppercase;
   margin-bottom:5px;
   text-decoration:none;
}
.sliderBg #slider .description  p.justify{
   display:block;
   overflow:hidden;
   color:white;
   font-size:11px;
   color:#9a9a9a;
}

/* END slider options */
/* START data options */
#data{
   padding-top:30px;   
}
#data .left{
   width:559px;
   margin-right:71px;
}
#data .left p{
   padding-bottom:15px;
}
#perex p{
   padding-bottom:15px;
}
#data .right{
   width:328px;   
}
#data .right.contact .tit{
   width:50px;   
}
#data .right.contact .val{
   width:150px;   
}
#data .calculator{
   width:960px;
   height:58px;
   color:#505050;
   background-color:#e1e1e1;
   font-size:18px;
   margin-top:20px;
}
#data .calculator .icon{
   width:126px;
   height:86px;
   background-image:url(../_images/bgs/cal.png);
   background-repeat:no-repeat;
   position:absolute;
   margin-left:-60px;
   margin-top:-10px;
}
#data .calculator .tit{
   padding-top:19px;   
   padding-left:82px;
   width:691px;
}
#data .calculator span{
   
   color:#097094;
}
#data .calculator .btn{
   width:178px;
   height:38px;
   margin-top:9px;
}
#data .calculator .btn a{
   display:block;
   width:178px;
   height:38px;
   background-image:url(../_images/buttons/zobrazit-formular.png);
   background-repeat:no-repeat;
}   
#data .products h2{
   margin-left:auto;
   margin-right:auto;
   font-size:18px;
   color:white;
   background-image:url(../_images/bgs/productTitleBg.png);
   background-repeat:no-repeat;
   width:258px;
   height:26px;
   text-align:center;
   padding-top:10px;
   text-transform:none;
   margin-bottom:0px;
}
#data .productBg{
   height:217px;
   padding-top:26px;
   background-color:white;
   width:930px;
   padding-right:30px;
}
#data .productBg .r{
   width:930px;   
   margin-left:32px;
}
#data .productBg .col{
   padding-right:24px;
   margin-right:26px;
   background-image:url(../_images/bgs/colBg.png);
   background-repeat:no-repeat;
   background-position:right center;
}
#data .productBg .col.last{
   padding-right:0px;
   margin-right:0px;
}
#data .productBg .col,#data .productBg .col .tit,#data .productBg .col .tit a{
   width:186px;   
}
#data .productBg .col .img,#data .productBg .col .img a{
   width:186px;
   height:131px;
}
#data .productBg .col .img a{
   position:absolute;
   background-image:url(../_images/bgs/catBg.png);
   background-repeat:no-repeat;
}
#data .productBg .col .tit a{
   display:block;
   text-align:center;
   font-size:16px;
   color:#3399bc;
   padding-top:5px;
   padding-bottom:5px;
}
#data .productBg .col .tit .desc p{

   color:#7a7a7a;
}
.scrollable {
  /* required settings */
  position:relative;
  overflow:hidden;
  width: 900px;
  height:217px;
}
.scrollable .items {
  /* this cannot be too large */
  width:20000em;
  position:absolute;
}
#data .products a.browse{
   position:absolute;
   width:54px;
   height:54px;
   background-image:url(../_images/bgs/scrollA.png);
   background-repeat:no-repeat;
   background-position:top;
   z-index:999;
   margin-top:90px;
   margin-left:-30px;
}
#data .products a.browse.right{
   margin-left:935px;
   background-position:bottom;
}

#tab-videa td a{
   color:#7A7A7A;
   text-align:center;
   float:left;
}

.zoomSp{display:block; position:absolute; left:0; top:0; width: 224px; height: 232px; z-index:3; background: #000 url(/_images/image/magnify.png) 50% 50% no-repeat;}

 
/* END data options */

/* START footer */
#footer{
   padding-bottom:20px;   
   margin-top:20px;
}
#footer .hrs{
   height:10px;   
}
#footer .nav{
   padding-left:170px;   
   padding-top:10px;
}
#footer ul li.slice{
   width:20px;
   text-align:center;
}
#footer ul li{
   float:left;   
   color:#b7b7b7;
   padding-top:22px;
}
#footer ul li a{
   font-size:12px;   
   color:#58585b;
}
/* END footer */

¨
subpage.php

Kód: Vybrat vše

/* START data options */
h2,h3,h4{
   color:#0383af;   
}
h2{
   font-size:17px;   
   margin-bottom:0px;
   padding-bottom:5px;
   text-transform:none;
}
h3{
   font-size:15px;   
}
h4{
   font-size:14px;   
}
#data ul,#data ol{
   margin:0px;
   padding:0px;
   /*color:#86c1e1;*/
   list-style-position:inside;
}
#data ul.noo{
   
   list-style-position:outside;
   margin-left:350px;
}
#data ul li,#data ol li{
   line-height:24px;   
}
#data ul span,#data ol span{
   color:#848484;
}
#data .box,#data .box .image,#data .box .image a,#data .box .tit a,#data .box .desc{
   width:309px;   
}
#data .box{
   margin-right:16px;
   margin-bottom:20px;
}
#data .box.last{
   margin-right:0px;   
}
#data .box .image,#data .box .image a{
   height:139px;   
}
#data .box .tit a{
   display:block;
   text-align:center;
   font-size:16px;
   color:#3399bc;
   padding-top:5px;
   padding-bottom:5px;   
}
#data .box .image a{
   display:block;
   position:absolute;
   background-image:url(../_images/bgs/prodBg.png);
   background-repeat:no-repeat;
}
#data .foto{
   width:184px;
   height:138px;
   border:1px solid #d0d0d0;
   margin-right:72px;
   margin-top:10px;
   margin-bottom:10px;
   text-align: center;
}
#data  .last{
   width:184px;
   height:138px;
   border:1px solid #d0d0d0;
   margin-right:0px;
   margin-top:10px;
   margin-bottom:10px;
   text-align: center;
}
#data .foto .zoom{
   display:block;
   position:absolute;
   background-image:url(../_images/bgs/magnify.png);
   background-repeat:no-repeat;
   background-color: #000000;
   background-position:center;
   opacity:0.6;
   filter:alpha(opacity=60); /* For IE8 and earlier */
   display:block;
   width:182px;
   height:136px;
   display:none;
}
#data .foto a{
   display:block;
   overflow:hidden;
   width:182px;
   height:136px;
   border:1px solid white;
}
#data .left h3{
   font-size:15px;   
   color:#003657;
   padding-bottom:10px;
}
#data .left h4{
   font-size:14px;
   padding-bottom:5px;
   color:#003657;
}
#data table{
   border-collapse:collapse;
   border:none;
   width:100%;
   font-size:12px;
   color:#7A7A7A;
}
#data table th{
   font-size:12px;
   color:white;
   font-weight:normal;
   height:30px;
   line-height:30px;
   background-image:url(../_images/bgs/tableBg.png);
   background-repeat:repeat-x;
   text-align:left;
   padding-left:3px;
   padding-right:3px;
}
#data table td{
   padding-left:3px;
   padding-right:3px;
   line-height:20px;
   height:20px;
}
#data table tr.nadpis{
   font-weight:bold;
}
#data table .dark td{
   background-color:#ffffff;   
}
/* END data options */
Nahoru
Uživatelský avatar
LuCaCZ
Level 3.5
Level 3.5
Příspěvky: 929
Registrován: březen 11
Pohlaví: Muž
Stav:
Offline

Re: úprava kodu - estetika stranky

Příspěvekod LuCaCZ » 04 úno 2015 15:22

určitě je tohle kód co máš i na ftp?
Nahoru
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 » 04 úno 2015 15:25

ano ... style.css a dalsi zminene dokumenty
Nahoru
Uživatelský avatar
LuCaCZ
Level 3.5
Level 3.5
Příspěvky: 929
Registrován: březen 11
Pohlaví: Muž
Stav:
Offline

Re: úprava kodu - estetika stranky

Příspěvekod LuCaCZ » 04 úno 2015 15:53

tak schválně tyto reference.php zkus znovu nahrát na http://www.seadon.cz
Nahoru
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 » 04 úno 2015 16:31

reference nahrany
Nahoru
Uživatelský avatar
LuCaCZ
Level 3.5
Level 3.5
Příspěvky: 929
Registrován: březen 11
Pohlaví: Muž
Stav:
Offline

Re: úprava kodu - estetika stranky

Příspěvekod LuCaCZ » 04 úno 2015 18:46

Pořád tam CSS je, pořád tam jsou třídy right a last .. přitom co si tu dával reference.php tak v něm nejsou, tak kde je chyba?

Nemáš na serveru nějaký cacheovací nástroj, který by pořád ukazoval starou verzi?
Nahoru
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 » 05 úno 2015 13:14

na http://www.seadon.cz/reference.php uz to je pěkně serazene do dvojic ;-) děkuji - uz to aspon nějak vypada

ted jen drobnější problém

ze ta spodni lišta je na zacatku SDK

--- Doplnění předchozího příspěvku (05 Úno 2015 13:17) ---

a jeste mi se nějak rozkočilo ze to neni v hezke uprave produkty ...
Nahoru
Uživatelský avatar
LuCaCZ
Level 3.5
Level 3.5
Příspěvky: 929
Registrován: březen 11
Pohlaví: Muž
Stav:
Offline

Re: úprava kodu - estetika stranky

Příspěvekod LuCaCZ » 06 úno 2015 23:45

On se ti tam nevejde ten třetí. Tak by bylo dobrý každýmu třetímu nastavit margin-right:0 .. třeba třídou .lastbox ať se ti to nepere.

Taky by se to dalo vyřešit tím :nth-of-type(3n+3), což by bylo nejlepší, ale u Střechy a světlíky se to rozhodí.

Nebo můžeš upravit #data .box ve subpage.css (řádek 37) na

Kód: Vybrat vše

#data .box {
  margin: 0 5px 20px 5px;
  text-align: center
}


sice bys obrázky neměl úplně od kraje, ale je to asi nejuniverzálnejší v tomhle případě... text-align: center ti zas vyřeší rozhození v Produktech
Nahoru
Zamčeno
  • 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 8 hostů