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;
}
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.
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.
Doplním jen klávesovou zkratku pro vyvolání a to ctrl shift I. Stejné pro firefox i operu.
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.