wake-up-neo.net

Richten Sie eine CSS-Klasse auf eine andere CSS-Klasse aus

Hallo, ich habe Probleme mit einigen CSS-Klassen in Joomla. Ich habe zwei Divs in einem Modul, einer ist der Wrapper class = "Wrapper", der andere ist der Content class = "Content". Der Inhalt befindet sich im Wrapper. Ich versuche, einen CSS-Stil für die Inhaltsklasse festzulegen. Normalerweise füge ich einfach .content {my style info} in das Stylesheet ein, aber das Problem ist, dass diese Klasse auf der gesamten Seite mehrmals verwendet wird. Im Backend können Sie einem Modul einen Klassennamen zuweisen. Ich habe diesen Modul als .testimonials bezeichnet.

Damit ich nicht alle anderen Inhaltsklassen auf der Seite ändere, versuche ich, sie so auszurichten:

.testimonials .content {my style info I am trying to apply} 

aber es funktioniert nicht, ich weiß, dass du das mit divs machen kannst, also

#testimonials .content {my style info I am trying to apply} 

aber meine Frage ist, ob dies mit Klassen möglich ist. Wenn etwas schief geht, versuche ich Folgendes zu verwenden:

.testimonials .content {font-size:12px; width:300px !important;}

da der Inhalt aus irgendeinem Grund nicht umbrochen wird und nur am Ende des Absatzes von der Seite verschwindet, versuche ich sicherzustellen, dass die Klasse der ersten Ebene, in der sich der Inhalt befindet, nichts überlappt. Das Seltsame ist, auch wenn ich das behebe der div Klasse, in der der Inhalt auf 50px gesetzt ist, wird der Text immer noch nicht umbrochen.

bearbeiten >>>>>>>>>> ..

Das HTML, das Joomla erstellt, sieht im Grunde so aus >>

<div class="wrapper">
<div class="content">SOME CONTENT</div
</div>

dann wird es in eine Million andere Divs im guten alten Joomla-Stil gewickelt.

Ich habe dem Modul die Klasse von Testimonials gegeben, so dass es ungefähr so ​​aussieht:

<div class="testimonials">
 <div class="wrapper">
<div class="content">SOME CONTENT</div
</div>
</div>

EDIT 3 >>>>>>> OK, das ist es, was es ausspuckt

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

EDIT 4 >>>>>>

Das ist was es tut

enter image description here

69
Iain Simpson

Nicht sicher, wie der HTML-Code aussieht (das würde bei Antworten helfen). Wenn es

<div class="testimonials content">stuff</div>

dann entfernen Sie einfach das Leerzeichen in Ihrem CSS. A la...

.testimonials.content { css here }

PDATE:

Okay, nachdem Sie HTML gesehen haben, sehen Sie, ob dies funktioniert ...

.testimonials .wrapper .content { css here }

oder nur

.testimonials .wrapper { css here }

oder

.desc-container .wrapper { css here }

alle 3 sollten funktionieren.

82
Scott

Ich verwende div anstelle von Tabellen und kann Klassen innerhalb der Hauptklasse wie folgt ausrichten:

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>

Wenn Sie eine bestimmte "Zelle" exklusiv stylen möchten, können Sie eine andere Unterklasse oder die ID des div verwenden, z.

. 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>
20
Jason Ebersey