Visualizzazione dei risultati da 1 a 7 su 7

Discussione: Scroll Su Div

  1. #1
    Utente di HTML.it
    Registrato dal
    Jan 2016
    Messaggi
    86

    Scroll Su Div

    Ciao a tutti ho questa pagina:

    codice:
    <!doctype html><html lang="it">
       <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Futura Logisca e Trasporti Tomao</title>
          <link rel="icon" href="favicon.ico" />
          <style>
    
    
             /* ------------------------------- */
             /*                                 */
             /*         Regole generali         */
             /*                                 */
             /* ------------------------------- */
    
    
             *, *:before, *:after {
                box-sizing: border-box;
             }
             body {
                display: flex;
                flex-direction: column;
                min-height: 100vh;
                margin: 0;
                font: 14px/1.3 tahoma, sans-serif;
             }
             a {
                color: #7e9faa;
                text-decoration: none;
             }
    		  h1 {
    			font-size: 23px;
                color: #1f6383;
                text-decoration: underline;
    
    
             }
    		   h2 {
    			font-size: 23px;
                color: #1f6383;
                text-decoration: none;
    	
             }
    		  p1 {
    			font-size: 10px;
                color: #9c9c9c;
                text-decoration: none;
             }
    		  p {
    			font-size: 16px;
                color: #221E1E;
                text-decoration: none;
             }
    		  p2 {
    			font-size: 16px;
                color: #221E1E;
                text-decoration: underline;
             }
    
    
             /* ------------------------------- */
             /*                                 */
             /*             Header              */
             /*                                 */
             /* ------------------------------- */
    
    
             #header {
                position: relative;
             }
             .logo {
                position: absolute;
                top: 4px;
                left: 0px;
                width: 413px;
    			height: 103px;
             }
             .contacts {
                display: inline-block;
                position: relative;
                left: 620px;
                right: 0;
                padding: 10px;
                color: #1f6383;
             }
             .contacts > span {
                margin: 0 10px;
                
             }
             .banner {
                height: 370px;
                background-image: url("immagini/immagini/3.jpeg"); 
    			background-position: center;
    			background-size: cover;
      			background-repeat: no-repeat;
    			background-color: #fff;
    		    filter: opacity(60%) blur(0px);
    			 }
             /* ------------------------------- */
             /*                                 */
             /*              Menu               */
             /*                                 */
             /* ------------------------------- */
    
    
             ul.nav {
                list-style-type: none;
                margin: 0;
                padding: 0;
             }
             ul.nav a {
                display: inline-flex;
                justify-content: center;
                align-items: center;
                color: #fff;
                background: #2e9bac;
             }
             ul.nav a.active {
                background: #1f6383;
             }
             ul.nav a:hover:not(.active) {
                background: #7e9faa;
             }
             #menu-top{
                position: absolute;
                top: 0;
                left: 552px;
                height: 100%;
             }
             #menu-top > li{
                float: left;
                height: inherit;
             }
             #menu-top > li > a{
                height: inherit;
                margin-left: -2px;
                padding: 0 10px;
                border: solid #fff;
                border-width: 0 2px;
             }
             #menu-lat {
                width: 100%;
    			margin-top: 2px;
             }
             #menu-lat > li{
                width: inherit;
                margin-bottom: 2px;
             }
             #menu-lat > li > a{
                padding: 8px;
                width: inherit;
             }
             /* ------------------------------- */
             /*                                 */
             /*               Bar               */
             /*                                 */
             /* ------------------------------- */
    
    
             .bar-block {
                overflow: hidden;
             }
             .bar-item {
                position: relative;
             }
             .bar-item:before {
                content: "";
                display: block;
                position: relative;
                height: 25px;
                right: -25px;
                transform: skew(-30deg);
             }
             #header .bar-item {
                margin: 2px 0;
             }
             #header .bar-item-1:before { left: 559px; background: #1f6383; }
             #header .bar-item-2:before { left: 411px; background: #2e9bac; }
             #header .bar-item-3:before { left: 120px; background: #7e9faa; }
             #footer .bar-item {
                filter: drop-shadow(-1.5px -2px 0 #fff);
             }
             #footer .bar-item-1 { height: 40px; background: #7e9faa; }
             #footer .bar-item-2 { height: 70px; background: #2e9bac; }
             #footer .bar-item-3 { height: 10px; background: #1f6383; }
             #footer .bar-item:before {
                background: inherit;
                top: -24px;
             }
             #footer .bar-item-1:before { display: none; }
             #footer .bar-item-2:before { left: 70vw; }
             #footer .bar-item-3:before { left: 30vw; }
    
    
             /* ------------------------------- */
             /*                                 */
             /*             Content             */
             /*                                 */
             /* ------------------------------- */
    
    
              #content {
                display: flex;
             }
             #content > .sidebar {
                flex: 0 0 210px;
             }
             #main {
    			margin-top: 2px;
    			margin-left: 2px;
                flex: 1;
                padding-left: 10px;
    			padding-right: 40px;
    			border-left: 2px solid #7e9faa;
    			min-height: 250px;
    			 
    	
             }
    		  div.text {
      		  text-align: justify;
    		 } 
    		
    
    
             /* ------------------------------- */
             /*                                 */
             /*             Footer              */
             /*                                 */
             /* ------------------------------- */
    
    
             #footer {
                margin-top: auto;
             }
    		        
    		  #footer .credits {
                position: absolute;
                top: -14px;
                right: 10px;
                color: #fff;
                font-size: 9px;
             }
          </style>
       </head>
       <body>
       
          <div id="header">
             <img class="logo" src="immagini/loghi/logoweb.jpg" alt=""/>
             <div class="contacts">
                <span>WhatsApp: <a href="https://wa.me/xxxxxxxxxx" target="_blank">xxxxxxxx</a></span>
                <span>Scrivici: <a href="mailto:xxxxxxxxxxx">xxxxxxxx</a></span>
             </div>
             <div class="bar-block">
                <div class="bar-item bar-item-1"></div>
                <div class="bar-item bar-item-2">
                   <ul id="menu-top" class="nav">
                      <li><a class="active" href="index.html">Home</a></li>
                      <li><a href="tl.html">Trasporti e Logistica</a></li>
                      <li><a href="contatti.html">Contatti</a></li>
                      <li><a href="news.html">News</a></li>
                   </ul>
    			 </div>
    			 <div class="bar-item bar-item-3"></div>
    			 </div>
                </div>
             <div class="banner"></div>
          <div id="content">
             <div class="sidebar">
                <ul id="menu-lat" class="nav">
                   <li><a class="active" href="index.html">Home</a></li>
                   <li><a href="tl.html">Trasporti e Logistica</a></li>
                   <li><a href="contatti.html">Contatti</a></li>
                   <li><a href="news.html">News</a></li>
                </ul>
             </div>
             <div id="main">
                <div class="text">
    			<h2>News</h2>
    			<br />
    			<p1>29-12-2021</p1>
    			<br />
    			<br />
                <p2>"Obblighi informativi per le erogazioni pubbliche: gli aiuti di Stato e gli aiuti de minimis ricevuti dalla nostra impresa sono contenuti nel Registro nazionale degli aiuti di Stato di cui all'art. 52 della L.234/2012".</p2>
    			<br />
    			<br />
    			<p1>01-12-2021</p1>
                <p>E' Online il nostro nuovo sito web, sul quale potrete trovare i nostri contatti e tutte le news aggiornate sul nostro mondo.</p>
    			<br />
    			<br />
    			 </div>
             </div>
          </div>
          <div id="footer">
             <div class="bar-block">
                <div class="bar-item bar-item-1"></div>
                <div class="bar-item bar-item-2"></div>
    			<div class="bar-item bar-item-3">
                <div class="credits">xxxxxx</div>
                </div>
             </div>
          </div>
          
       </body>
    </html>
    vorrei semplicemente inserire uno scroll nel div main, in modo da poter leggere sempre le news che inserisco, perché nel modo attuale più righe vado a scrivere e più si allunga il div, invece vorrei tenere il div con le sue misure fisse, ed inserire uno scroll...
    potreste darmi una mano? grazie mille in anticipo

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,311
    Ciao, puoi fissare l'altezza con height o con max-height al valore che preferisci, quindi impostare overflow:auto; per fare in modo che appaia la scrollbar quando il contenuto oltrepassa quell'altezza.

    Tieni presente che a quell'elemento hai già applicato un valore minimo dell'altezza con min-height, per cui l'altezza finale non sarà inferiore a questo valore.
    Hai già provato Forum HTML.it Toolset?
    uno script che ottimizza il layout e le funzionalità del Forum

  3. #3
    Utente di HTML.it
    Registrato dal
    Jan 2016
    Messaggi
    86
    Quote Originariamente inviata da KillerWorm Visualizza il messaggio
    Ciao, puoi fissare l'altezza con height o con max-height al valore che preferisci, quindi impostare overflow:auto; per fare in modo che appaia la scrollbar quando il contenuto oltrepassa quell'altezza.

    Tieni presente che a quell'elemento hai già applicato un valore minimo dell'altezza con min-height, per cui l'altezza finale non sarà inferiore a questo valore.
    non funziona, ho aggiunto
    codice:
    overflow: scroll;
    perché vorrei che la barra scroll sia sempre visibile.
    ho provato ad inserirlo nel div main e non va, nel div text e non va...
    non capisco dove sia l'inceppo

    codice:
    #main {            margin-top:2px;
                margin-left:2px;
                flex:1;
                padding-left:10px;
                padding-right:40px;
                border-left:2px solid #7e9faa;
                min-height:250px;
                 
        
             }
              div.text {
              text-align: justify;
              overflow: scroll;
             } 
            
    
    
    Ultima modifica di merovese; 11-08-2022 a 00:40

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,311
    Non vedo dove hai fissato l'altezza... consiglio di rileggere attentamente ciò che ho scritto, se qualcosa non ti è chiaro puoi chiedere ma cerca di seguire esattamente le indicazioni suggerite.
    Hai già provato Forum HTML.it Toolset?
    uno script che ottimizza il layout e le funzionalità del Forum

  5. #5
    Utente di HTML.it
    Registrato dal
    Jan 2016
    Messaggi
    86
    Quote Originariamente inviata da KillerWorm Visualizza il messaggio
    Non vedo dove hai fissato l'altezza... consiglio di rileggere attentamente ciò che ho scritto, se qualcosa non ti è chiaro puoi chiedere ma cerca di seguire esattamente le indicazioni suggerite.
    codice:
    }		  div.text {
      		  text-align: justify;
    		  overflow-y: scroll;
    		  height: 251px;
    		 }
    perdonami, non avevo letto con attenzione, ora ho lo scroll, però la Barra di scroll non si trova al lato estremo del browser ma rimane più spostata verso l'interno, credo sia al lato del div

    Senza nome.jpg

  6. #6
    Utente di HTML.it
    Registrato dal
    Jan 2016
    Messaggi
    86
    risolto! grazie della pazienza

  7. #7
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,311
    risolto! grazie della pazienza
    no problem, mi fa comunque piacere che si sia risolto.
    Hai già provato Forum HTML.it Toolset?
    uno script che ottimizza il layout e le funzionalità 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 © 2022 vBulletin Solutions, Inc. All rights reserved.