Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 14
  1. #1
    Utente di HTML.it
    Registrato dal
    May 2016
    Messaggi
    34

    Conflitto tra le mie row e le row di bootstrap

    Le mie row hanno questo css

    codice:
    .row:after {
      content: "";
      display: table;
      clear: both;
    }
    e sono collegate a questo

    codice:
    <div class="row">
      <div class="column" onclick="openTab('b1');" style="background:green;">Box 1</div>
      <div class="column" onclick="openTab('b2');" style="background:blue;">Box 2</div>
      <div class="column" onclick="openTab('b3');" style="background:red;">Box 3</div>
    </div>
    codice:
    che apre questo
    
    <div id="b1" class="containerTab" style="display:none;background:blue">
      <span onclick="this.parentElement.style.display='none'" class="closebtn">x</span>
     <div class="row">
        <div class="col">immagine</div>
        <div class="col"> <h2>Box 2</h2>
      <p>Lorem ipsum..</p></div>
      </div>
    </div>
    …b2,b3
    Nell'ultima parte di codice ci sono le row di bootstrap, qui mi si genera il conflitto quando ripeto tutto il codice che ho postato per avere varie righe di tab a numero crescente.
    Cioè tra una riga e un'altra mi si genera uno spazio che non voglio avere...
    Potete indicarmi come risolvere? Grazie

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,669
    A livello di CSS puoi intervenire in vari modi. In generale basterebbe comporre un selettore più specifico. Nella parte bootstrap, quantomeno nel codice che hai postato, vedo che il contenitore ha classe containerTab; a questo punto, nel tuo CSS potresti usare un selettore del genere:

    codice:
    div:not(.containerTab) .row:after
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  3. #3
    Utente di HTML.it
    Registrato dal
    May 2016
    Messaggi
    34
    containerTab ha questo css
    codice:
    .containerTab {
     padding: 20px;
      color: red;
      
    }
    Dici di rinominarlo?

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,669
    containerTab ha questo css
    ...
    Dici di rinominarlo?
    Non ho detto questo forse mi sono spiegato male.

    Provo a riformulare. Dai codici da te postai vedo che il div.containerTab è un contenitore in cui è posta la griglia bootstrap. Suppongo che invece le tue row non si trovino dentro un contenitore con quella stessa classe, o mi sbaglio? Purtroppo dal solo codice postato non posso saperlo con esattezza.

    Nel caso in cui la mia supposizione sia corretta, potresti usare una regola del genere per il CSS delle tue row:

    codice:
    div:not(.containerTab) .row:after {
      content: "";
      display: table;
      clear: both;
    }
    Cioè attraverso :not(.containerTab) stai escludendo tutti i casi in cui .row si trovi dentro .containerTab. In tal modo le proprietà di questa regola dovrebbero risultare applicate alle tue sole row e non a quelle di bootstrap. E' questo ciò che stavi chiedendo?

    Se non è ciò che volevi ti invito a fornire maggiori dettagli, magari anche un link della pagina dove poter verificare il problema.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  5. #5
    Utente di HTML.it
    Registrato dal
    May 2016
    Messaggi
    34
    Si, le mie row sono nella parte precedente. Ho provato a modificare nel modo che dici ma lo spazio tra il primo e il secondo blocco di immagini rimane. Posto il codice che ho

    codice:
    <style>
    .grid {
      float: left;
      width: 25%;
      padding: 6px;
      text-align: center;
      font-size: 25px;
      cursor: pointer;
      
    }
    
    
    .containerTab {
     padding: 20px;
      color: #555555;
      
    }
    
    div:not(.containerTab) .row:after {
      content: "";
      display: table;
      clear: both;
    }
    
    
    .closebtn {
       float: right;
      color: #aa1a2f;
      font-size: 35px;
      cursor: pointer;
    }
    .grid-thumbnail{
      width: 100%;
       height: auto;
    }
    
    </style>
    
    
    </head>
    
    <body>
    <div class="row">
      <div class="grid" onclick="openTab('b1');">  
     <img src="img.jpg" alt="..." class="grid-thumbnail"> 
      </div>
    <div class="grid" onclick="openTab('b2');">
        <img src="img2.jpg" alt="..." class="grid-thumbnail">
      </div>
    <div class="grid" onclick="openTab('b3');">
        <img src="img3.jpg" alt="..." class="grid-thumbnail">
      </div>
    
    
    </div>
    
    
    
    <div id="b1" class="containerTab" style="display:none;background:#fff">
      <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
      <div class="row">
        <div class="col"><img src="img.jpg" alt="..." class="img-fluid"></div>
        <div class="col"><h2 style="color:grey;">testo</h2><p>testo testo</p></div>
      </div>
      
    </div>
    
    <div id="b2" class="containerTab" style="display:none;background:#fff">
      <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
      <div class="row">
        <div class="col"><img src="img2.jpg" alt="..." class="img-fluid"></div>
       <div class="col"><h2 style="color:grey;">testo</h2><p>testo testo</p></div>
    </div>
    
    <div id="b3" class="containerTab" style="display:none;background:#fff">
      <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
     <div class="row">
        <div class="col"><img src="img3.jpg" alt="..." class="img-fluid"></div>
        <div class="col"><h2 style="color:grey;">testo</h2><p>testo testo</p></div>
      </div>
    </div>
    
    
    <div class="row">
      <div class="grid" onclick="openTab('b4');">  
     <img src="img4.jpg" alt="..." class="grid-thumbnail"> 
      </div>
    <div class="grid" onclick="openTab('b5');">
        <img src="img5.jpg" alt="..." class="grid-thumbnail">
      </div>
    <div class="grid" onclick="openTab('b6');">
        <img src="img6.jpg" alt="..." class="grid-thumbnail">
      </div>
    
    </div>
    
    
    
    <div id="b4" class="containerTab" style="display:none;background:#fff">
      <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
      <div class="row">
        <div class="col"><img src="img4.jpg" alt="..." class="img-fluid"></div>
        <div class="col"><h2 style="color:grey;">testo</h2><p>testo testo</p></div>
      </div>
      
    </div>
    
    <div id="b5" class="containerTab" style="display:none;background:#fff">
      <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
      <div class="row">
        <div class="col"><img src="img5.jpg" alt="..." class="img-fluid"></div>
       <div class="col"><h2 style="color:grey;">testo</h2><p>testo testo</p></div>
    </div>
    
    <div id="b6" class="containerTab" style="display:none;background:#fff">
      <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
     <div class="row">
        <div class="col"><img src="img6.jpg" alt="..." class="img-fluid"></div>
        <div class="col"><h2 style="color:grey;">testo</h2><p>testo testo</p></div>
      </div>
    </div>
    
    <!---Poi il codice si ripete con numerazione crescente per averne altri uno sotto l'altro--->
    Ultima modifica di he-man; 12-04-2021 a 08:21

  6. #6
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,669
    Ho provato a modificare nel modo che dici ma lo spazio tra il primo e il secondo blocco di immagini rimane
    Hai ragione, errore mio

    Prova a correggere il selettore in questo modo:
    codice:
    :not(.containerTab) > .row:after
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  7. #7
    Utente di HTML.it
    Registrato dal
    May 2016
    Messaggi
    34
    Provato ma credo che il problema non sia lì perchè lo spazio tra una riga e l'altra rimane. Inserisco le due parti di codice tra cui si forma il vuoto
    codice:
    <div id="b1" class="containerTab" style="display:none;background:#fff">
      <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
      <div class="row">
        <div class="col"><img src="img.jpg" alt="..." class="img-fluid"></div>
        <div class="col"><h2 style="color:grey;">testo</h2><p>testo testo</p></div>
      </div>
      
    </div>
    
    <div id="b2" class="containerTab" style="display:none;background:#fff">
      <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
      <div class="row">
        <div class="col"><img src="img2.jpg" alt="..." class="img-fluid"></div>
       <div class="col"><h2 style="color:grey;">testo</h2><p>testo testo</p></div>
    </div>
    
    <div id="b3" class="containerTab" style="display:none;background:#fff">
      <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
     <div class="row">
        <div class="col"><img src="img3.jpg" alt="..." class="img-fluid"></div>
        <div class="col"><h2 style="color:grey;">testo</h2><p>testo testo</p></div>
      </div>
    </div>
    e

    codice:
    <div id="b4" class="containerTab" style="display:none;background:#fff">
      <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
      <div class="row">
        <div class="col"><img src="img4.jpg" alt="..." class="img-fluid"></div>
        <div class="col"><h2 style="color:grey;">testo</h2><p>testo testo</p></div>
      </div>
      
    </div>
    
    <div id="b5" class="containerTab" style="display:none;background:#fff">
      <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
      <div class="row">
        <div class="col"><img src="img5.jpg" alt="..." class="img-fluid"></div>
       <div class="col"><h2 style="color:grey;">testo</h2><p>testo testo</p></div>
    </div>
    
    <div id="b6" class="containerTab" style="display:none;background:#fff">
      <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
     <div class="row">
        <div class="col"><img src="img6.jpg" alt="..." class="img-fluid"></div>
        <div class="col"><h2 style="color:grey;">testo</h2><p>testo testo</p></div>
      </div>
    </div>

  8. #8
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,669
    Alcuni div risultano non chiusi (b2 e b5), è possibile che il problema sia dovuto a questo.

    Controlla sempre la validazione del codice HTML. Può essere utile usare un validatore online, vedi https://validator.w3.org/
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  9. #9
    Utente di HTML.it
    Registrato dal
    May 2016
    Messaggi
    34
    Mi sono accorto solo ora che modificando il codice con l'esclusione che mi hai consigliato il menu generale del sito subiva lo spppostamento del background. Vedo di fare il controllo di validazione con il programma che sto usando perchè sono in locale. Grazie

  10. #10
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,669
    Vedo di fare il controllo di validazione con il programma che sto usando perchè sono in locale
    Bene, comunque puoi usare anche la scheda Validate by Direct Input di validator.w3.org dove puoi copiaincollare il codice per analizzarlo direttamente.

    Riguardo il problema, se puoi modificare il codice HTML, sarebbe forse meglio utilizzare un diverso nome per la tua classe row, oppure, nel caso in cui tu debba comunque sfruttare le regole di bootstrap per la tua classe, potresti aggiungere un'ulteriore classe in modo da poter comporre un selettore più specifico per le tue row.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.