úprava kodu - estetika stranky Vyřešeno

[x-rated]

očividně tam nemáš css soubor
http://zavesnefasady.cz/css/style.css

[Reklama]

[teichmann.ondrej]

Kdyz tam nahraju ty figure data tak se mi obrazek zobrazi v původní velikosti

A já potřebuji, aby to byl jako ted na www.seadon.cz/reference.php

(Pokud chcete vidět ten kód z obrazku, tak je tam jen zkopirovan odtud http://jsfiddle.net/doz84ojv/ ten levý)

[x-rated]

já chci vidět funkční stránku, ve který bude vloženej ten kód z jsfiddle, aby se to dalo dál upravit na míru, tohle http://zavesnefasady.cz/reference.php je absolutně na nic

[teichmann.ondrej]

http://seadon.cz/reference.php

ja prave nevim, kde ten kod tam napasovat od CSS - ja mam znalosti spise jen z HTML

[x-rated]

css zatim neřeš, udělej jakkoliv funkční nový html včetně nějakýho css souboru, ze kterýho si to veme aspoň něco

[teichmann.ondrej]

Já právě v CSS vubec nic nedělal ... tak prosím proto někoho na pomoc

[LuCaCZ]

u seadon.cz kombinuješ XHMTL (HTML4) se stylem pro HTML5 tagy. Tak je jasný, že to nefunguje. I tak CSS vkládáš špatně přímo do HTML. CSS vkládej a upravuj jen v http://www.seadon.cz/css/style.css

To, že se ti třetí obrázek v řádku zobrazuje na druhým řádku je způsobeno tím, že se ti všechny na jeden řádek nevejdou. Je potřeba u třetího nastavit margin-right: 0 což třeba u STK Ostrava máš (#data .box.last), ale zase ti to koliduje s třídou #data .last

Tady to http://jsfiddle.net/doz84ojv/ ti pěkně funguje ale na seadon.cz bys musel přepsat HTML do HTML5 a vložit správně CSS

[teichmann.ondrej]

takze JSFiddle nepouzivat ... protoze takhle daleko ještě nejsem ...

a přepsat ten margin right .. zkusim diky ...

[teichmann.ondrej]

Dobrý den,

chtěl by jsem se zeptat, zda je chyba někde tady - pokud dam margin left 0px, tak mi to najede na uply zacatek stranky a to zase pak vypada hnusně ze ???

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 */


[LuCaCZ]

čemu dáš margin-left 0px? a co vypadá hnusně?

[teichmann.ondrej]

takhle jsem to pochopil ... nebo kolik mam ... pokud tam je nula, tak text je nalepeny na levem okraji

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 */


[LuCaCZ]

ale pořád nevím co kde měníš a o co se pokoušíš