Scegli come target una classe CSS all'interno di un'altra classe CSS


95

Ciao sto avendo problemi con alcune classi CSS in joomla. Ho due div in un modulo, uno è la classe wrapper = "wrapper", l'altro è la classe di contenuto = "contenuto". Il contenuto è all'interno del wrapper. Quello che sto cercando di fare è indirizzare uno stile CSS sulla classe di contenuto. Di solito metterei solo .content {my style info} nel foglio di stile, ma il problema è che questa classe viene utilizzata più volte in tutta la pagina. Quindi nel backend, puoi assegnare a un modulo un nome di classe, quindi ho chiamato questo .testimonials.

Per non alterare tutte le altre classi di contenuto nella pagina, sto cercando di indirizzarlo inserendo questo:

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

ma non funziona, so che puoi farlo con i div, quindi

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

ma la mia domanda è che questo può essere fatto con le classi?, in tal caso qualcosa non va mentre sto cercando di utilizzare quanto segue:

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

poiché per qualche motivo il contenuto non si avvolge e scompare dalla pagina alla fine del paragrafo, quindi sto cercando di assicurarmi che la classe di 1 ° livello su cui si trova il contenuto non si sovrapponga a nulla, la cosa strana è anche se aggiusto la classe div in cui il contenuto si trova a 50px continua a non avvolgere il testo, quindi non sono sicuro di averlo scelto come target giusto?

modifica >>>>>>>>>> ..

L'html che Joomla sta creando è fondamentalmente simile a questo >>

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

poi è racchiuso in un milione di altri div nel buon vecchio stile Joomla.

Ho assegnato al modulo la classe delle testimonianze, quindi finisce per sembrare qualcosa del tipo:

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

EDIT 3 >>>>>>> OK, questo è quello che sta sputando

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

MODIFICA 4 >>>>>>

Questo è quello che sta facendo

inserisci qui la descrizione dell'immagine


Beh, fino a quando si mostra il relativo codice HTML mark-up che non sappiamo cosa ci si rivolge a tutti ...
David dice reinstate Monica

Ciao, non è possibile in quanto l'html è creato da joomla stesso, fa parte del modulo build in news feed che sto cercando di cambiare
Iain Simpson

Così? Lascia che esegua il rendering di una pagina, quindi "visualizza sorgente" e copia / incolla l'estratto pertinente dalla sorgente. Senza qualcosa da vedere, stiamo solo brancolando nel buio, e questo non è costruttivo per le risposte effettive e dovrò votare per chiudere come "non una vera domanda". Cosa che preferirei non fare, se c'è una possibilità di aiutarti davvero.
David dice di reintegrare Monica il

ok, fatto, la classe di contenuto sta fondamentalmente proseguendo, invece di avvolgere, quindi scompare dallo schermo, anche se fisso la larghezza a 300px che è quanto è grande il suo genitore
Iain Simpson

Risposte:


117

Non sono sicuro di come sia l'HTML (che aiuterebbe con le risposte). Se è

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

quindi rimuovi semplicemente lo spazio nel tuo css. A la ...

.testimonials.content { css here }

AGGIORNARE:

Ok, dopo aver visto l'HTML controlla se funziona ...

.testimonials .wrapper .content { css here }

o semplicemente

.testimonials .wrapper { css here }

o

.desc-container .wrapper { css here }

tutti e 3 dovrebbero funzionare.


grazie ci provo, avrei postato un po 'di html, ma è generato da Joomla, quindi ho solo un milione di file php
Iain Simpson

hmm questo è davvero strano, se metto .content solo da solo, e poi metto 300px tutto sulla pagina con il contenuto della classe cambia a 300px, a parte la cosa che voglio cambiare, a un'ulteriore ispezione con Firebug anche la sua classe è contenuto , quindi non ho idea di cosa lo stia causando, penso che potrei dover impacchettare il sito e caricarlo in modo da mostrare a tutti come si trova su un'installazione locale al momento.
Iain Simpson

Per lo meno abbiamo bisogno di vedere effettivamente un po 'di HTML. Forse non l'intera pagina, ma almeno la sezione pertinente.
Scott

Ho provato quanto sopra, ma ancora no, il wrapper è una classe, quindi non dovrebbe essere .wrapper?
Iain Simpson

1
Ho letto male e ho modificato, per favore rivedi. Renditi conto che contentessere uno span non è un elemento di blocco, quindi nessuna quantità di proprietà di larghezza lo altererà. È necessario modificare la larghezza di.wrapper
Scott

24

Uso div invece delle tabelle e sono in grado di indirizzare le classi all'interno della classe principale, come di seguito:

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>

Se vuoi applicare uno stile esclusivo a una particolare "cella" puoi utilizzare un'altra sottoclasse o l'id del div, ad esempio:

.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>
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.