Visualizzazione dei risultati da 1 a 4 su 4

Discussione: Problema div footer

  1. #1
    Utente di HTML.it
    Registrato dal
    Feb 2020
    Messaggi
    3

    Problema div footer

    Salve, scrivo per un problema relativo al footer del mio sito in progettazione, ovvero non riesco a posizionare i div uno accanto all'altro nel css.
    Questo è il css:

    codice:
    .single-footer p {
        color:#999;
        line-height: 25px;
    }
    
    
    h3 {
        font-size:18px;
    }
    
    
    .footer-top {
        background: #111;
        padding: 30px 0;
    }
    
    
    .single-footer h3 {
        font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
        color: #fff;
        letter-spacing: 3px;
        margin: 10px 0;    
    }
    
    
    .single-footer h3:before {
        content: '|';
        color: #3D9FC8;
        padding-right: 10px;
    }
    
    
    .single-footer ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
    
    .single-footer ul li {
        border-bottom: 1px solid rgba(255,255,255,0.3);
        line-height: 40px;
    }
    
    
    .single-footer ul li a {
        color: #999;
        text-decoration: none;
    }
    
    
    .single-footer ul a:hover{
        color: white;
    }
    
    
    .double-footer h3 {
        color: #fff;
        font-family: Poppins;
        text-transform: uppercase;
        margin: 10px 0;
        letter-spacing: 3px;
    }
    
    
    .double-footer h3:before {
        content: '|';
        color: #3D9FC8;
        padding-right:10px;
    }
    
    
    .double-footer a {
        background: #494848;
        width: 40px;
        height: 40px;
        display: inline-block;
        border-radius: 50px;
    }
    
    
    .double-footer a i {
        font-size: 20px;
        color: #fff;
        padding: 10px 12px;    
    }
    
    
    .double-footer a:hover {
        color: white;
    }
    
    
    @media only screen and (min-width: 768px) and (max-width: 991px) {
        .md-mb-30 {
            margin-bottom: 30px;
        }
    }
    
    
    @media only screen and (max-width:767px) {
        .sm-mb-30{
            margin-bottom: 30px;
        }
        .footer-top{
            padding: 50px;
        }
    }
    Ultima modifica di carlomarangoni; 05-02-2020 a 18:29

  2. #2
    Quando posti del codice devi usare il tag CODE

    Posta anche il codice HTML!
    “Che le cose siano cosi, non vuol dire che debbano andare così. Solo che quando si tratta di rimboccarsi le maniche e incominciare a cambiare, vi è un prezzo da pagare. Ed è allora che la stragrande maggioranza preferisce lamentarsi più che fare”.

    Giovanni Falcone

  3. #3
    Utente di HTML.it
    Registrato dal
    Feb 2020
    Messaggi
    3
    Aggiungo il codice html del footer:
    codice:
    <footer>
      <div class="footer-top">							   <div class="container">		
          <div class="row">
    	     <div class="single-footer md-mb-30 sm-mb-30 ">
    	 <h3>Università degli studi di Torino.</h3>
    	  <p> 
            Via Verdi, 8 - 10124 Torino<br>
            P.I. 02099550010<br>
            C.F. 80088230018
          </p>
             </div>							 
              <div class="single-footer md-mb-30 sm-mb-30 ">
    	   <h3>Dipartimenti:</h3>
    		<ul>
    		 <li><a href="https://www.dcps.unito.it/do/home.pl">Dipartimento di Cultura,Politica e Societ&aacute</a></li>
    		 <li><a href="http://beta.di.unito.it/index.php/italiano">Dipartimento di Informatica</a></li>
    		 <li><a href="https://www.giurisprudenza.unito.it/do/home.pl">Dipartimento di Giurisprudenza</a></li>
    		 <li><a href="https://www.didattica-est.unito.it/do/home.pl">Dipartimento di Economia e Statistica</a></li>
    	    </ul>	
            </div>															   
    		<div class="single-footer md-mb-30 sm-mb-30">
    			<h3>Altro:</h3>
    		  <ul>
    		   <li><a href="https://www.ict.unito.it/index.php/accessibilita">Accessibilit&aacute</a></li>
    		   <li><a href="https://www.unito.it/ateneo/amministrazione-trasparente">Amministrazione trasparente</a></li>
    		   <li><a href="">Cerca nel sito</a></li>
    		   <li><a href="">Mappa del Sito</a></li>
    		   <li><a href="https://www.unito.it/note-legali">Note Legali</a></li>	
    		   <li><a href="https://www.unito.it/privacy">Privacy</a></li>	
    	      </ul>
    		</div>
    		<div class="double-footer">
    			<h3>Social</h3>
    		<a href=""><i class="fa-fa-facebook" aria-hidden="true"></i></a>
    		<a href=""><i class="fa-fa-twitter" aria-hidden="true"></i></a><a href=""><i class="fa fa-instagram" aria-hidden="true"></i></a>	
    		<a href=""><i class="fa fa-linkedin" aria-hidden="true"></i></a></div>
    	  </div>	
    	</div>
       </div> 										
    </footer>						
    </body>
    </html>

  4. #4
    Ciao Grinko, ecco la soluzione che cerchi, naturalmente da personalizzare in base alle tue esigenze:

    codice:
    @media only screen and (min-width:992px) {
        .footer-top .row { align-items: flex-start; display: flex; flex: 0 1 auto; justify-content: space-between; }
        
        .md-mb-30 { box-sizing: border-box; flex: 0 1 25%; max-width: 25%; padding: 15px; }
        
        .double-footer { flex: 0 1 25%; max-width: 25%; padding: 15px; }
    }

    Questa porzione di codice CSS l'ho aggiunta alla fine del tuo foglio di stile e posiziona le tue colonne una di fianco all'altra occupando il 25% di spazio con un padding di 15px.

Tag per questa discussione

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 © 2020 vBulletin Solutions, Inc. All rights reserved.