Skieruj na klasę CSS wewnątrz innej klasy CSS

90

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

wprowadź opis obrazu tutaj

Iain Simpson
źródło
Cóż, dopóki nie pokażesz odpowiedniego znacznika HTML , w ogóle nie wiemy, do czego kierujesz reklamy ...
David mówi, że przywróć Monikę
Cześć, nie jest to możliwe, ponieważ kod HTML jest tworzony przez samą joomlę, jego część kompilacji w module kanału wiadomości, którą próbuję zmienić
Iain Simpson
Więc? Pozwól mu renderować stronę, a następnie „wyświetl źródło” i skopiuj / wklej odpowiedni fragment ze źródła. Bez czegoś do zobaczenia po omacku ​​szukamy po omacku, a to nie jest konstruktywne dla rzeczywistych odpowiedzi i będę musiał zagłosować za zamknięciem, ponieważ „nie jest to prawdziwe pytanie”. Czego wolałbym nie robić, jeśli jest szansa, żebym ci rzeczywiście pomógł.
David mówi, że przywróć Monikę
ok, gotowe, klasa treści w zasadzie działa, zamiast zawijać, więc znika z ekranu, nawet jeśli ustawię szerokość na 300 pikseli, czyli jak duży jest jej rodzic
Iain Simpson

Odpowiedzi:

114

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 ...

.testimonials .wrapper .content { css here }

Lub tylko

.testimonials .wrapper { css here }

lub

.desc-container .wrapper { css here }

wszystkie 3 powinny działać.

Scott
źródło
dzięki, dam sobie radę, opublikowałbym trochę html, ale jest generowany przez Joomla, więc mam tylko milion plików php
Iain Simpson
hmm to naprawdę dziwne, jeśli sam wstawię .content, a potem wrzucę 300px wszystko na stronę z klasą zawartość zmienia się na 300px, poza tym co chcę zmienić, to przy dalszej inspekcji z firebugiem jego klasa też jest zadowolona , więc nie mam teraz pojęcia, co to powoduje, myślę, że być może będę musiał spakować witrynę i przesłać ją, aby pokazać wszystkim jako lokalną instalację w mo.
Iain Simpson
Przynajmniej musimy zobaczyć trochę HTML-a. Może nie cała strona, ale przynajmniej odpowiednia sekcja.
Scott,
Wypróbowałem powyższe, ale nadal nie mogę, opakowanie jest klasą, więc czy nie powinno to być .wrapper?
Iain Simpson
1
Źle przeczytałem i zredagowałem, zobacz ponownie. Zrozum, że contentbycie rozpiętością nie jest elementem blokowym, więc żadna ilość właściwości szerokości tego nie zmieni. Musisz zmienić szerokość.wrapper
Scott
22

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>
Jason Ebersey
źródło