Cześć Mam problemy z niektórymi klasami css w Joomla. Mam dwa elementy div w module, jeden to klasa opakowania = „opakowanie”, a drugi to klasa zawartości = „zawartość”. Treść jest wewnątrz opakowania. To, co próbuję zrobić, to skierować styl CSS na klasę zawartości. Zwykle umieszczałbym po prostu .content {informacje o moim stylu} w arkuszu stylów, ale problem polega na tym, że ta klasa jest używana kilka razy na stronie. Więc w zapleczu możesz przypisać modułowi nazwę klasy, więc nazwałem to .testimonials.
Aby nie zmieniać wszystkich innych klas treści na stronie, próbuję na nią skierować, umieszczając to:
.testimonials .content {my style info I am trying to apply}
ale to nie działa, wiem, że możesz to zrobić z elementami div, więc
#testimonials .content {my style info I am trying to apply}
ale moje pytanie brzmi: czy można to zrobić za pomocą klas?, jeśli tak, coś jest nie tak, ponieważ próbuję użyć następującego:
.testimonials .content {font-size:12px; width:300px !important;}
ponieważ z jakiegoś powodu treść się nie zawija i po prostu znika ze strony na końcu akapitu, więc staram się upewnić, że klasa 1 poziomu, na której znajduje się treść, niczego nie nakłada, dziwne jest nawet jeśli naprawię klasa div, w której zawartość znajduje się w 50px, nadal nie będzie zawijać tekstu, więc nie jestem pewien, czy kieruję ją, prawda?
edytuj >>>>>>>>>> ..
HTML, który tworzy Joomla, zasadniczo wygląda tak >>
<div class="wrapper">
<div class="content">SOME CONTENT</div
</div>
następnie jest opakowany w milion innych elementów div w starym dobrym stylu Joomla.
Dałem modułowi klasę referencji, więc wygląda to mniej więcej tak:
<div class="testimonials">
<div class="wrapper">
<div class="content">SOME CONTENT</div
</div>
</div>
EDYCJA 3 >>>>>>> OK, to właśnie wypluwa
<div class="testimonials">
<div class="key4-block">
<div class="module-title"><h2 class="title">Client Testimonials</h2></div>
<div class="key4-module-inner">
<div class="module-content">
<script type="text/javascript">
RokStoriesImage['rokstories-184'].push('');
RokStoriesImage['rokstories-184'].push('');
RokStoriesImage['rokstories-184'].push('');
</script>
<div id="rokstories-184" class="rokstories-layout6 content-left" >
<div class="feature-block">
<div class="feature-wrapper">
<div class="feature-container">
<div class="feature-story">
<div class="image-full" style="float: right">
<img src="/sos/" alt="image" />
</div>
<div class="desc-container">
<div class="wrapper">
<span class="content"><p>Arrived in under 30 mins and got my pride and joy home in one piece, the day it conked out on me.</p>
<p>- Mr A Another</p></span>
</div>
</div>
</div>
<div class="feature-story">
<div class="image-full" style="float: right">
<img src="/sos/" alt="image" />
</div>
<div class="desc-container">
<div class="description">
<span class="feature-desc">
<p>Great Service ! , SOS came to the rescue me in no time at all and made my day.</p>
<p>- a customer</p>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
EDYCJA 4 >>>>>>
To właśnie robi
Odpowiedzi:
Nie jestem pewien, jak wygląda HTML (to pomogłoby w odpowiedziach). Jeśli to jest
<div class="testimonials content">stuff</div>
następnie po prostu usuń spację w swoim css. A la ...
.testimonials.content { css here }
AKTUALIZACJA:
W porządku, po obejrzeniu HTML sprawdź, czy to działa ...
Lub tylko
lub
wszystkie 3 powinny działać.
źródło
content
bycie rozpiętością nie jest elementem blokowym, więc żadna ilość właściwości szerokości tego nie zmieni. Musisz zmienić szerokość.wrapper
Używam div zamiast tabel i jestem w stanie kierować reklamy na klasy w głównej klasie, jak poniżej:
CSS
.main { .width: 800px; .margin: 0 auto; .text-align: center; } .main .table { width: 80%; } .main .row { / ***something ***/ } .main .column { font-size: 14px; display: inline-block; } .main .left { width: 140px; margin-right: 5px; font-size: 12px; } .main .right { width: auto; margin-right: 20px; color: #fff; font-size: 13px; font-weight: normal; }
HTML
<div class="main"> <div class="table"> <div class="row"> <div class="column left">Swing Over Bed</div> <div class="column right">650mm</div> <div class="column left">Swing In Gap</div> <div class="column right">800mm</div> </div> </div> </div>
Jeśli chcesz nadać styl wyłącznie konkretnej „komórce”, możesz użyć innej podklasy lub identyfikatora elementu div, np:
.main #red {color: red; }
<div class="main"> <div class="table"> <div class="row"> <div id="red" class="column left">Swing Over Bed</div> <div class="column right">650mm</div> <div class="column left">Swing In Gap</div> <div class="column right">800mm</div> </div> </div> </div>
źródło