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;
}
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.
Firefox to má taky zabudované - Nástroje - Vývoj webu.
Aj som si myslel, ale Firefox bez Firebugu je pre mňa polotovar.
Tiez som si to doteraz myslel, ale aj vstavany inspector je celkom fajn. Btw, skus vo firebugu menit styly pre hover. Bez sance. Akonahle clovek odide mysou z elementu, tak firebug prestane zobrazovat hover styly.
Vo Firebugu to ide samozrejme normálne, viď priložený screenshot.
Díky moc, zkusím to
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.
Tak zaves tú stránku niekde na web, nech sa na to dá pozrieť. Zo samotného CSS chybu nezistíme.