úprava kodu - estetika stranky

[x-rated]

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

[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šíš