Ciao a tutti ho questa pagina:
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...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>
potreste darmi una mano? grazie mille in anticipo
Rispondi quotando
Originariamente inviata da KillerWorm
no problem, mi fa comunque piacere che si sia risolto.
