[CSS] nie działa padding-bottom


(Lukpio3) #1

Witam.

element {
    left: 1162.34px;
}
.dd-tabelka { //klasa główna gdzie dokonuję zmian
    display: block;
    left: 99.78%;
    ;
    position: relative;
    top: 188px;
    width: 332px;
    height: 288px;
    background-image: url("../images/gradient.png");
    background-repeat: no-repeat;
    z-index: 9;
}
#dd-main { // te elementy są dziedziczone przez klasę .dd-tabelka z klasy #dd-main
    font-size: 13px;
    font-family: Arial,'Arial Unicode MS',Helvetica,Sans-Serif;
    cursor: default;
}
body { // te elementy są dziedziczone przez klasę .dd-tabelka z klasy body 
    color: rgb(41, 37, 30);
}

Czy mogę Was prosić o pomoc w rozwiązaniu tego problemu? Jeśli potrzebny będzie adres strony, tak jak wspomniałem, napiszę na PW. Z góry dziękuję.

 

Pozdrawiam.


(jacko1998) #2

Najlepiej, niech poda Pan adres strony bo z takiego kawałeczka CSS raczej mało można wywnioskować ;/


(Lukpio3) #3

Chodzi o ten kwadracik który jest po prawej stronie slidera (tam gdzie jest ten taki orzełek). W tym miejscu docelowo będzie znajdowało się co innego i muszę zrobić ograniczenia marginesami bo w chwili obecnej marginesem są krawędzie tego szarego kwadratu co wygląda beznadziejnie. I tak jak mówię, górny prawy i lewy działają, jest reakcja i marginesy się robią a dolny za cholere nie chce się zrobić. Z góry dziękuję za pomoc.


(manieKMP) #4

Jeśli chodzi o zmniejszenie/zwiększenie obramowania tego "kwadratu", to zrobisz to przez:

.dd-tabelka td {
  padding: 4px;
}

Gdzie taki zapis obramowania jest ogólny (4px dla wszystkich "kierunków", top, right, bottom, left - identyczne działanie ma zapis: padding: 4px 4px 4px 4px;)

Jeśli zaś chcesz zmienić wymiary tego elementu, będziesz musiał zmienić grafikę, wysokość, szerokość dla .dd-tabelka. Zamiast grafiki można by skorzystać z gradientu liniowego o wybranych kolorach (plus border-radius dla zaokrągleń rogów), wtedy element dałoby się łatwiej skalować, ale niestety w starszych przeglądarkach (szczególnie IE) gradienty nie działają...


(Lukpio3) #5

Tak, ten selektor też patrzyłem i można nawet sprawdzić w inspektorze, że po wstawieniu padding robi się margines górny i lewy. Dla przykładu, daję padding:20px i treść od góry spada mi 20px w dół a po lewej 20px na prawo a mi chodzi o to żeby każdy kierunek zawięzić. Po prostu zrobić taką ramkę w tym kwadracie żeby tekst nie zaczynał mi się od samej jego krawędzi ale nieco dalej. Coś tu się z czymś gryzie albo ja coś źle robie. Już na wszystkie możliwe sposoby próbowałem i nie mogę dojść. Pierwszy raz się z czymś takim spotykam.


(manieKMP) #6

Chyba gdzieś się rozmijamy ze zrozumieniem... :wink:

Podany kod oddziałuje na każde z obramowań/dopełnień elementu "td" (górne, prawe, dolne i lewe), który domyślnie ma 17px (sprawdzałem na Fx, jak i starej i nowej Operze, na wszystkich kod robi to co ma robić). Jeśli u Ciebie treść tego obiektu jest "na styk" z krawędziami, to nie wiem co się dzieje, może przeglądarka zapamiętała jakieś wcześniejsze zmiany na stronie i teraz wprowadzanie nowych nie skutkuje.

Chyba że zmieniałeś wysokość i/lub szerokość dla ".dd-tabelka" (u mnie ma on height: 288px; i width: 332px;), w takim wypadku będziesz musiał dostosować grafikę dla tego obiektu.

 

PS. Margines i padding to nie to samo... swoją drogą też popełniłem błąd: padding=dopełnienie, margin=margines, border=obramowanie (często zwane ramką) :wink:

PPS. Efektu zmiany dopełnienia dolnego nie zobaczysz na tak wykonanym elemencie (firebug padding wyświetla w postaci fioletowej ramki, margines ma żółty kolor - po najechaniu na dany tag html).


(Lukpio3) #7

Już teraz wiem o czym mówisz ale się nie zrozumieliśmy. To co jest teraz jest ok, faktycznie marginesy są na 17px a to dlatego że podpiąty jest tam moduł html, zrobiona jest tabla z marginesami i tam wpisana jest treść. Ale spójrz teraz, usunąłem tą tabelkę i wpisałem jakiś tekst bez niej. Jak widzisz jest od brzegu do brzegu i od samej góry do samego dołu. I chodzi mi o to aby tam ustawić marginesy na stałe w CSS-ie bo docelowo będzie podpięty tam moduł przewijający informacje i treść tych informacji jest właśnie od brzegu do brzegu a nie będę teraz za każdym razem robił tabelki i ustawiał marginesów dla każdej przewijającej się wiadomości bo to nie o to chodzi. Chcę to ustawić na sztywno.


(manieKMP) #8

W tej sytuacji nadajesz padding dla .custom lub .dd-tabelka, ale chyba lepszy efekt będzie po tym:

.custom {
  height: 276px;
  left: 6px;
  overflow-y: auto;
  position: absolute;
  top: 5px;
  width: 322px;
}

Jak będzie z docelowym obiektem, tego nie wiem, być może do niego trzeba będzie coś nieco odmiennego pisać.


(Lukpio3) #9

Dodałem do custom i zmienia mi się wielkość całej strony ale ta ramka nawet nie drgnie.


(manieKMP) #10

To co teraz tam siedzi to "docelowa" treść, czy czego jeszcze brakuje?


(Lukpio3) #11

Wiesz co, docelowo tam nie będzie zdjęcie. Ze zdjęciem nie było by problemu. Tam będzie docelowo slider który będzie mi przewijał tekst od dołu do góry. Slider działa pięknie (sam go robiłem :slight_smile: ) tylko że ten tekst zaczyna mi wyjeżdżać już od samego dołu tego szarego pola, od samej jego dolnej krawędzi i chowa się przy samej krawędzi gónej co wygląda brzydko. Może pokażę o co chodzi na przykładzie. Obecnie po dodaniu tam jakiegoś tekstu mam tak:

 

http://www.fotosik.pl/showFullSize.php?id=1ace7d2b1e4f44be

 

Czyli tekst w tej ramce jest od samej skrajnej lewej krawędzi do skrajnej prawej i od samej góry do samego dołu, nie ma żadnych marginesów.


(manieKMP) #12

Czysty .custom z wstawioną jedynie treścią "...text..." (treść jest ścinana, nie widać 5 słów... dzięki ustawieniu odpowiedniej wysokości i overflow: hidden;):

wyxifo.png

.custom {
  color: #fff;
  height: 257px;
  overflow: hidden;
  padding: 15px 17px 0;
}

Jak będzie ze sliderem, tego nie wiem, być może dla niego będzie trzeba coś innego zrobić...


(Lukpio3) #13

Żebym dobrze zrozumiał, muszę dodać czystą klasę custom (czy oczyścić tą która jest?)? Następnie wstawić tą klasę w pliku gdzie deklarowane są pozycje szablonu? Chodzi mi o ten fragment kodu:

<?php if ($view->containsModules('position-32')) : ?>
<div class="dd-tabelka" data-left="99.78%"><?php echo $view->position('position-32'); ?></div>
<?php endif; ?>

Dodać po "...."dd-tabelka" ...." klasę custom?

PS. Dziękuję za pomoc.

A możesz teraz zerknąć? Jednak dla slidera to nie chce działać. Tam jest inna klasa. Co prawda podstawiłem w jej zawartość to co wkleiłeś ale nie działa. Teraz możesz zobaczyć jak to wygląda i skąd mi ten tekst wyjeżdża i gdzie wjeżdża. Wygląda fatalnie dlatego chcę to ogaraniczyć marginesami dolnym i górnym.

Korzystaj z opcji Edytuj , zamiast pisać post pod postem.

rgabrysiak


(manieKMP) #14

Wsio robisz w css'ie, usuwasz, dodajesz lub zmieniasz:

  1. Dodajesz poniższe

    .mod_simple_marquee {
    height: 262px;
    overflow: hidden;
    position: relative;
    top: 12px;
    }

  2. Zmieniasz na poniższe

    .mooquee-text {
    padding: 0 12px;
    position: absolute;
    }

  3. Pozostawiasz kolor treści (w kodzie strony są jeszcze określone "width: 332px;" i "height: 288px;", znajdź i je również usuń, są niepotrzebne)

    .mod_simple_marquee_content {
    color: #FFFFFF;
    }