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

89

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 würde ich einfach .content {my style info} in das Stylesheet einfügen, aber das Problem ist, dass diese Klasse auf der gesamten Seite mehrmals verwendet wird. Im Backend können Sie einem Modul einen Klassennamen zuweisen, daher habe ich dieses als .testimonials bezeichnet.

Damit ich nicht alle anderen Inhaltsklassen auf der Seite ändere, versuche ich, darauf zu zielen, indem ich Folgendes eingebe:

.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 gemacht werden kann. Wenn ja, läuft etwas schief, da ich versuche, 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, selbst wenn ich das Problem behebe In der Div-Klasse, in der sich der Inhalt befindet, wird der Text immer noch nicht umbrochen, sodass ich nicht sicher bin, ob ich ihn als Ziel habe, oder?

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 anderer Divs im guten alten Joomla-Stil eingewickelt.

Ich habe dem Modul die Klasse der 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 es, was es tut

Geben Sie hier die Bildbeschreibung ein

Iain Simpson
quelle
Nun, bis Sie das relevante HTML-
David sagt, Monica am
Hallo, es ist nicht möglich, da das HTML von Joomla selbst erstellt wird. Es ist Teil des eingebauten Newsfeed-Moduls, das ich ändern möchte
Iain Simpson,
Damit? Lassen Sie es eine Seite rendern und dann 'Quelle anzeigen' und kopieren / fügen Sie den relevanten Auszug aus der Quelle ein. Ohne etwas zu sehen, tappen wir nur im Dunkeln, und das ist nicht konstruktiv für tatsächliche Antworten, und ich muss abstimmen, um als "keine echte Frage" zu schließen. Was ich lieber nicht tun würde, wenn es eine Chance gibt, Ihnen tatsächlich zu helfen.
David sagt, Monica am
ok, fertig, die Inhaltsklasse macht im Grunde weiter, anstatt sie zu verpacken, und verschwindet so vom Bildschirm, selbst wenn ich die Breite auf 300px fixiere, was so groß ist wie ihre Eltern
Iain Simpson

Antworten:

113

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 den Platz in Ihrem CSS. A la...

.testimonials.content { css here }

AKTUALISIEREN:

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.

Scott
quelle
danke ich werde es versuchen, ich hätte etwas HTML gepostet, aber es wird von Joomla generiert, also nur eine Million PHP-Dateien
Iain Simpson
hmm das ist wirklich seltsam, wenn ich .content nur alleine setze und dann 300px alles auf der Seite mit dem Klasseninhalt auf 300px ändere, abgesehen von dem, was ich ändern möchte, ist bei weiterer Überprüfung mit firebug auch seine Klasse Inhalt Also, ich habe jetzt keine Ahnung, was es verursacht. Ich denke, ich muss die Site möglicherweise packen und hochladen, also zeige allen, wie es auf einer lokalen Installation am Montag ist.
Iain Simpson
Nun, zumindest müssen wir tatsächlich ein bisschen HTML sehen. Vielleicht nicht die gesamte Seite, aber zumindest der entsprechende Abschnitt.
Scott
Ich habe das oben genannte versucht, aber immer noch nicht, der Wrapper ist eine Klasse, sollte es also nicht .wrapper sein?
Iain Simpson
1
Ich habe falsch gelesen und bearbeitet, bitte noch einmal sehen. Beachten Sie, dass contentes sich bei einem Span nicht um ein Blockelement handelt, sodass dies durch keine Anzahl von Breiteneigenschaften geändert wird. Sie müssen die Breite von.wrapper
Scott
22

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

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" ausschließlich formatieren möchten, können Sie eine andere Unterklasse oder die ID des div verwenden, z.

.main #red {Farbe: rot; }}

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