Přidat otázku mezi oblíbenéZasílat nové odpovědi e-mailem Chyba v CSS

Zdravím,
Mám takový pro někoho banální problém, ale nějak si nevím rady. Přiložený screen vše vysvětluje. Zkrátka, zelená dlaždice se sliderem (gallery tile) se mi propadá o 60px níž než sousední. V kódu se moc nevyznám, stáhl jsem si hotovou šablonu pro Wordpress. Nevěděl byste někdo, kde ten prvek ve stylech přesně najít? Nerad bych to celé rozkopal. Přikládám i kus CSS kodu přímo pro dlaždice na homepage. V případě, že to nebude stačit, dodám celý styles.css. Děkuji

HOME TILES
*************************************************************************************/
.tile-wrapper {
	margin-left: -10px;
	overflow: visible !important;
}
.tile {
	font-size: .95em;
	position: relative;
	float: left;
	margin: 0 0 10px 10px;
	overflow: hidden;
}
.tile.default {
	background-color: #f26522; /* default color */
}
.tile .tile-title {
	font-size: 1.5em;
	margin: 0 0 10px;
	font-weight: 700;
}
.tile .tile-inner {
	padding: 15px 20px;
}

.tile.gallery {
	margin: 0 0 10px 10px !important;
	background: none !important;
}

/* single tile */
.tile-single {
	overflow: hidden;
}
.tile-single .tile-post:first-child {
	margin-left: 0;
}

/* tile sizes */
.tile.small {
	width: 158px;
	height: 158px;
}
.tile.medium {
	width: 326px;
	height: 158px;
}
.tile.large {
	width: 326px;
	height: 326px;
}

/* tile image */
.tile.image {
	overflow: visible; /* for flip animation */
}
.tile.image .tile-overlay a {
	display: block;
	width: 100%;
	height: 100%;
	margin-left: -20px;
	margin-top: -15px;
	padding: 15px 20px;
	text-decoration: none;
}
.tile.image .tile-overlay a:hover {
	text-decoration: none;
}
.tile.image .tile-inner {
	height: 100%;
}

/* tile button */
.tile.button a {
	display: block;
	height: 100%;
	width: 100%;
	text-decoration: none;
}
.tile.button .button-icon {
	text-align: center;
	line-height: 158px; /* same height as tile height to center image */
}
.tile.button.large .button-icon {
	text-align: center;
	line-height: 326px; /* same height as tile height to center image */
}
.tile.button .button-icon img {
	vertical-align: middle;
	padding-bottom: 10px;
}
.tile.button .button-title {
	position: absolute;
	bottom: 10px;
	left: 15px;
	line-height: 1.3em;
	font-size: 1.2em;
	padding-right: 5px;
}

/* map tile */
.tile.map {
	overflow: visible; /* for flip animation */
}
.tile .map-container {
	margin: 0;
	border: none !important;
}

/* tile overlay */
.tile-overlay {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: #f26522; /* default color */
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	/*opacity: 0;*/

	-webkit-transition: opacity .5s ease-in-out;
	-moz-transition: opacity .5s ease-in-out;
	transition: opacity .5s ease-in-out;
}
.portfolio-post .tile-overlay {
	/*opacity: 0;*/
}
.tile-overlay:hover {
	opacity: 1;
}

/* tile [list_posts] shortcode */
.tile .shortcode.list-posts .post {
	margin-bottom: 15px;
}
.tile .shortcode.list-posts .post-title {
	font-size: 120%;
}
.tile .shortcode.list-posts .post-image {
	margin: 2px 12px 0 0;
}

/* tile [twitter] shortcode */
.tile .shortcode.twitter-list .twitter-timestamp a {
	color: rgba(255,255,255,.7);
	text-decoration: none;
}
.tile .shortcode.twitter-list .follow-user a {
	text-decoration: none;
}

/* tile [flickr] shortcode */
.tile .shortcode.flickr .flickr_badge_image img {
	margin-right: 10px;
	margin-bottom: 10px;
	float: left;
}
.tile.medium .shortcode.flickr .flickr_badge_image img {
	margin-right: 8px;
	margin-bottom: 3px;
	width: 48px;
	height: 48px;
}
.tile.small .shortcode.flickr .flickr_badge_image img {
	margin-right: 3px;
	margin-bottom: 3px;
	width: 36px;
	height: 36px;
}

/* tile-overlay flip transition */
.tile-post.image .tile-flip-wrapper,
.tile-post.map .tile-flip-wrapper,
.portfolio-post .tile-flip-wrapper {	
	-webkit-perspective: 500;
	-webkit-transform-style: preserve-3d;
	perspective: 600px;
	transform-style: preserve-3d;
}
.tile-post.image .tile-flip,
.tile-post.map .tile-flip,
.portfolio-post .tile-flip {
	-webkit-transform-style: preserve-3d;
	-webkit-transition: -webkit-transform 1s;
	transform-style: preserve-3d;
	transition: -webkit-transform 1s;
	transition: transform 1s;
}
.tile-post.image .tile-flip,
.tile-post.map .tile-flip {
	position: absolute;
	height: 158px;
	width: 326px; /* tile large and medium */
}
.tile-post.small .tile-flip {
	width: 158px;
}
.tile-post.large .tile-flip {
	height: 326px;
}
.tile-post.image .side,
.tile-post.map .side,
.portfolio-post .side{
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
}

.tile-post.image .front,
.tile-post.map .front,
.portfolio-post .front{
	position: relative;
	z-index: 50;
}
.tile-post.image .back,
.tile-post.map .back,
.portfolio-post .back{
	position: absolute;
	z-index: 10;
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
}
.tile-flipped {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
}
.tile-flipped .back {
	z-index: 999 !important;
}

/* Portfolio Flip Animation */
.portfolio-post {
	overflow: visible; /* for flip animation */
}

body.sidebar1 .grid3 .portfolio-post .tile-flip {
	height: 158px;
	width: 214px;
}

body.sidebar-none .grid3 .portfolio-post .tile-flip,
body.sidebar1 .grid2 .portfolio-post .tile-flip {
	height: 158px;
	width: 326px;
}

body.sidebar-none .grid3 .portfolio-post,
body.sidebar-none .grid3 .portfolio-post .slideshow-wrap,
body.sidebar1 .grid2 .portfolio-post,
body.sidebar1 .grid2 .portfolio-post .slideshow-wrap {
	width: 326px;
}

body.sidebar-none .grid2 .portfolio-post .slideshow-wrap,
body.sidebar-none .grid2 .portfolio-post,
body.sidebar-none .grid2 .portfolio-post .tile-flip {
	width: 494px;
}

body.sidebar1 .grid3 .portfolio-post,
body.sidebar1 .grid3 .portfolio-post .slideshow-wrap {
	width: 214px;
}

body.sidebar1.archive .list-post .portfolio-post,
body.sidebar1.archive .list-post .portfolio-post .slideshow-wrap {
	width: 662px;
}
Předmět Autor Datum
Samotný .css nestačí. Bude zapotřebí nastavit nějaký margin, anebo prostě ten prostřední prvek zvětš…
IQ37 18.03.2013 16:17
IQ37
Jediná věc, ve které jsem se v tom css bezpečně vyznal bylo jednotlivý rozlišení dlaždic. Ostatní už…
Layoutman 18.03.2013 17:18
Layoutman
Takéto veci sa riešia trochu iným postupom. Každý moderný prehliadač má dnes v sebe nástroj minimáln…
los 18.03.2013 17:44
los
Firefox to má taky zabudované - Nástroje - Vývoj webu.
IQ37 18.03.2013 17:48
IQ37
Aj som si myslel, ale Firefox bez Firebugu je pre mňa polotovar. :-)
los 18.03.2013 17:50
los
Tiez som si to doteraz myslel, ale aj vstavany inspector je celkom fajn. Btw, skus vo firebugu menit…
wam_Spider007 18.03.2013 23:17
wam_Spider007
Vo Firebugu to ide samozrejme normálne, viď priložený screenshot.
los 18.03.2013 23:29
los
Doplním jen klávesovou zkratku pro vyvolání a to ctrl shift I. Stejné pro firefox i operu.
Redsnake 18.03.2013 17:50
Redsnake
Díky moc, zkusím to :-)
Layoutman 18.03.2013 20:09
Layoutman
Tak bez úspěchu. Sice mi to přesně označí řádky patřící tomu prvku, ale z nich nevyčtu nic, co by zń…
Layoutman 20.03.2013 19:13
Layoutman
Tak zaves tú stránku niekde na web, nech sa na to dá pozrieť. Zo samotného CSS chybu nezistíme. poslední
los 20.03.2013 21:38
los

Samotný .css nestačí. Bude zapotřebí nastavit nějaký margin, anebo prostě ten prostřední prvek zvětšit na výšku těch ostatních. /* tile sizes */ nebo /* tile image */ (jenom odhad).
Jak tak koukám, tak ten, kdo tohle dělal, nikdy neslyšel o tom, že v jednoduchosti je krása.

Jediná věc, ve které jsem se v tom css bezpečně vyznal bylo jednotlivý rozlišení dlaždic. Ostatní už je pro mě trošku chaos. Kdybych to uměl, tak bych tam dal více poznámek ke každému prvku pro případ, že by měl problém laik, jako já. :-) Takhle je to beznadějná situace a přitom jde jen o "blbé" posunutí dlaždice. Jinak k tomu roztáhnutí do výšky: Obávám se, že by to mělo neblahý vliv na slider. Kdoví, jak by se srovnaly šipky s buttony obrázků atd. Fakt už nevím, co s tím.:-/ (možná si to zálohovat a pak zkoušet měnit hodnoty a koukat, co to dělá :-)

Takéto veci sa riešia trochu iným postupom. Každý moderný prehliadač má dnes v sebe nástroj minimálne vo forme pluginu, pomocou ktorého ľahko zistíš všetky CSS pravidlá, ktoré sa použili na vybraný HTML element. Tie CSS pravidlá môžeš hneď aj upravovať, pričom každá zmena sa okamžite prejaví v zobrazení stránky.

Napríklad ak používaš Firefox, tak si stiahni Firebug a potom klikni pravým tlačidlom myši na tú dlaždicu a z kontextového menu si vyber Inspect Element with Firebug. Ak používaš Chrome, tak nemusíš nič inštalovať a postup je rovnaký, len v kontextovom menu vyberieš Preskúmať prvok.

Tak bez úspěchu. Sice mi to přesně označí řádky patřící tomu prvku, ale z nich nevyčtu nic, co by zńamenalo onu chybu. Teda pánové, já css neumím, ale proč se to sakra nepíše přehledně a jasně? Kdyby tam byla udána nějaká pozice po ose "y", kde bych viděl, že se to změnilo o 60px a hned bych to opravil. Hrůza! Omlouvám se, mým oborem je grafika, kódy jsou pro mě španělská vesnice.

Zpět do poradny Odpovědět na původní otázku Nahoru