Visualizzazione risultati 1 fino 3 di 3

Discussione: Problema posizionamento elementi div

  1. #1
    Data registrazione
    03-05-2020
    Messaggi
    0

    Predefinito Problema posizionamento elementi div

    Buonasera a tutti, scusatemi se Ŕ la sezione sbagliata ma sono nuovo alle sezioni del vostro forum.
    veniamo al dunque: ho un problema di visualizzazione di div all'interno della mia pagina.
    In pratica il footer va a sovrapporsi al banner, come se il banner non esistesse o non fosse chiuso.
    ho provato a controllare l'html ma sembra tutto in ordine, cosi come il css.

    questo Ŕ il link al sito: http://mugproject.altervista.org/index.html

    questo Ŕ l'html:
    Codice HTML:
    <div class="contenitore clearfix">
        
        <div class="subarts clearfix">   
    		<div class="subart">
    			<img class="subart_image"src="img1.jpg" alt="Nature" />
    			<div class="subart_copy">
    				<h3>Title Card</h3>
    				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis sequi incidunt optio, asperiores dolorum ratione excepturi. </p>
    			</div>
    		</div> <!-- chiusura div subart -->
            
    		<div class="subart">
    			<img class="subart_image"src="img2.jpg" alt="Nature" />
    			<div class="subart_copy">
    				<h3>Title Card</h3>
    				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis sequi incidunt optio, asperiores dolorum ratione excepturi. </p>
    			</div>
    		</div><!-- chiusura div subart -->
            
    		<div class="subart">
    			<img class="subart_image"src="img2.jpg" alt="Nature" />
    			<div class="subart_copy">
    				<h3>Title Card</h3>
    				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis sequi incidunt optio, asperiores dolorum ratione excepturi. </p>
    			</div>
    		</div><!-- chiusura div subart -->
        </div> <!-- chiusura div subarts -->
        
            
        <div class="banner clearfix">
    		<div class="subbnr">
    			<img class="subbnr_img" src="img1.jpg" alt="Nature" />
    			<div class="subbnr_copy">
    				<h3>Title Card</h3>
    				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis sequi incidunt optio, asperiores dolorum ratione excepturi. </p>
    			</div>
    		</div>
            
    	</div>  <!-- chiusura banner -->
          
    
        <div class="footer clearfix">
    	   <p>Copyright - bla bla bla.net</p>
        </div>
        
    </div>   <!-- chiusura div contenitore  --> 
    mentre questo il css:
    Codice HTML:
    /* //////////////////////////////////
    Sub Articoli
    /////////////////////////////////// */
    
    .subarts{width:80%; height:20%;margin: 0 auto; border:3px solid violet; top:5%; position:relative;}
    .subart{width: 30%; margin:0 1.5%; background: #fff;float:left;}
    .subart_image{width:100%; height: auto;}
    .subart_copy{padding:5px 20px;}
    .subart_copy h3{margin-bottom:0}
    
    /* ////////////////////////////////////
    Banner
    /////////////////////////////// */
    
    .banner{
        width:80%; height:20%;margin: 0 auto; border:3px solid aqua; top:10%; position:relative;
    }
    .subbnr{
        width: 100%; margin:0 auto; background: #fff; float:left;
    }
    .subbnr_img{
        width:100%; height: 100%;
    }
    .subbnr_copy{
        padding:5px 20px;
    }
    .subbnr_copy h3, .subbnr_copy p{
        text-align:center;
    }
    
    /* //////////////////////////////////////
    Footer
    //////////////////////////////////////// */
    
    .footer{width:100%; height:2%;background: #333; padding:30px;color:#fff; /* margin-top: 40px; */ position:relative;}
    
    .contenitore{
        width:100%;
        border:10px yellow solid; 
        height:200%;
    }
    
    .clearfix:after {
      visibility: hidden;
      display: block;
      font-size: 0;
      content: "";
      clear: both;
      height: 0;
    }
    * html .clearfix             { zoom: 1; } /* IE6 */
    *:first-child+html .clearfix { zoom: 1; } /* IE7 */
    come posso risolvere? ho provato a mettere position relative a ogni macrosezione ma non so se Ŕ sufficiente. ho provato a togliere e mettere il clearfix ma senza riuscire a vedere cambi. vi ringrazio in anticipo, confido in un vostro aiuto perchŔ sto impazzendo ;)
    Buon proseguimento!!
    Ultima modifica di alemoppo : 04-05-2020 alle ore 21.19.33

  2. #2
    L'avatar di alemoppo
    alemoppo non Ŕ connesso Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    17,604

    Predefinito

    Attualmente vedo che stai modificando l'HTML (Ŕ tutto commentato). Da una prova mi Ŕ parso di riuscire a mostrare il "banner" impostando una z-index molto alta.

    In ogni caso, ti consiglierei sfruttare le nuove tecniche di CSS, come i flexbox.

    Ciao!

  3. #3
    GraphOGLRisorse non Ŕ connesso AlterVistiano
    Data registrazione
    14-02-2015
    Messaggi
    936

    Predefinito

    Salve,
    Provi con questo esempio, le dovrebbe andar bene.

    Il codice css l'ho incluso nel file. Pu˛ scarcarlo e modificarlo tranquillamente come preferisce. Il codice incude anche la parte per il responsive.

    Cordiali saluti.
    Ultima modifica di GraphOGLRisorse : 05-05-2020 alle ore 04.10.11

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •