Visualizzazione dei risultati da 1 a 8 su 8

Discussione: testo troppo stretto

  1. #1

    testo troppo stretto

    Ciao. Ho un layout con un header, una div che contiene nav e section e un footer.
    Nelle righe header e footer tutto ok, la nav ho un menù verticale con dei cerchi e infine nella section ho un testo. Il testo però occupa si e no il 30 % della section. Ho provato di tutto per allargarlo al fine di occupare l'intera area meno il padding, ma nulla accade...Ho anche provato a mettere il testo tra due <p> ma neanche così...
    Non so che fare

  2. #2
    p.s.: Il risultato è simile ai post del forum, taaannntttooo spazio sprecato.

  3. #3
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Per "allargare" il testo l'attributo da usare e` letter-spacing, ma tieni presente che non puoi conoscere la dimensione dei caratteri nel browser dell'utente (cioe` puoi impostarla, ma il browser puo` sempre sovrascriverla), per cui non e` molto sano usarla.
    Proabilmente la cosa andrebbe usata per mezzo di Javascript, che puo` tener conto dello spazio effettivamente presente nel brwoser.

    In alternativa puoi usare un'immagine che contiene lo stesso testo
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  4. #4
    Si possono postare screenshots?

  5. #5
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Si` puoi postare screenshot (credo ci siano limiti alla dimensione in byte), ma piu` intressante sarebbe il link alla pagina, in modo da vedere anche il codice.
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  6. #6
    Posto i codici faccio prima, la pagina è ancora in locale

  7. #7
    Devo postare il codice da casa 'chè col telefonino non riesco a fare copia incolla

  8. #8
    Questo è il file index.html

    codice HTML:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Prima pajina Diçionario</title>
    <link href="css/index.css" rel="stylesheet" type="text/css">
    </head>
    <body>        
    <header>
    <div class="innertube">
    <p>Header...</p>
    </div>
    </header>
    <div>
    <nav>
    <div class="circlemenu">
    <ul> 
    <li><a href="index.html"><span>Caxa</span></a></li>
    <li><a href="entra.php"><span>Vien rento</span></a></li>
    <li><a href="chisemo.html"><span>Chi semo</span></a></li>
    <li><a href="galepin.php"><span>Diçionario</span></a></li>
    <li><a href="contati.html"><span>Çercane</span></a></li>
    <li><a href="altrisiti.html"><span>Gançi utiłi</span></a></li>
    </ul>
    </div>
    </nav>    
    <section class="content">
    <h1>Home page</h1>
    <p>
    Benvegnuda, benvegnudo
    , o come che se dixe da Nialtri, CIAO! </p><p>
    Cuesta paroła xe un esenpio de come ła Nostra Cultura, ła Nostra Łengua łe sipia stade "internaçionałi", come el nome deła Serenisima e de Venexia sipia stade so łe boche de molti.
    Ma xe vero che el Veneto xe soło che parlà, e che a cauxa dełe so variançe no se połe scrivarlo?
    Gnine de pi sbajà! 
    Ła Łengua Veneta, come tute staltre Łengue del Mondo, ga sinonimi, variaçion de pronunçia e, a olte, anca de uxo dei tenpi dei verbi, ma dal ponto de vista łenguistego, xe na Łengua!, riconosuda anca da l'ONU.
    Ma parché ghemo pensà a sto sito chive?  Parchè on Diçionario? E come funćioneło?
    Ała prima domanda rispondemo che, ghemo pensà ad on punto de inconro, ndoe che i Veneti posa catarse, pa metare in forma scrita, ła Sò, ła Nostra, Cultura comune, doparando na grafia che, co on fià de studio, poco no vołemo stravołxare çerte abitudini, posa vixinare el conçeto che se vołe esprimere, ała comunicaçion non verbałe che sipia conprexa da TUTIi Veneti.
    El bisogno de on Diçionario nase parchè in rede o in carta se cata opere meritorie, che perô ga tegnesto pi daconto ła forma scrita che segue cuesta o cuea variança, pitosto che çercare on interlegibiità trans-variança.
    Infine pa doparare sto Diçionario xe façiłe! Te vien chiedesto de iscrivarte, cuesto soło pa conosarTe, e se te vorarè tegnerte ajornà sora Nostre nove iniçiarive. Te gavarè tre livełi de iscriçion, el primo cueo da "consultadore", e liveło baxe, che de darà posibiłità de çercare parołe. 
    Ghe sarà, al momento xe in via de sviłupo, on secondo gradin, cueło del "consułente", stô liveło serverà pa darne na man sora on projeto che vegnarà in futuro.
    In fine ghe xela terçae ultima posibiłità, cueła del "cołaboradore", cueta xe riservà a chi che ne voe jutare ad anpliare el Diçionario, dedicandoghe tenpo ed enerje pa zontare lemmi.
    </p>
    </section>
    </div>
    <footer id="footer">
    <div class="innertube">
    <p>Footer...</p>
    </div>
    </footer>    
    </body>
    </html>
    e questo il file CSS

    codice HTML:
    body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100%; 
    max-height: 100%; 
    font-family:Sans-serif;
    line-height: 1.5em;
    }
    main {
    position: absolute;
    top: 170px; /* Set this to the height of the header */
    bottom: 50px; /* Set this to the height of the footer */
    left: 26% ;
    right: 0;
    height: 80%;
    overflow: auto; 
    background: #fff;
    box-shadow: 0 20px 32px -6px #777; 
    border: 10px solid;
    -webkit-border-radius: 12px; /* Firefox 1-3.6 */ 
    -moz-border-radius: 12px; /* Opera 10.5, IE 9, Safari 5 Chrome, Firefox 4, iOS 4, Android 2.1+ */ 
    border-radius: 12px; 
    }
    header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 150px; 
    overflow: hidden; /* Disables scrollbars on the header frame. To enable scrollbars, change "hidden" to "scroll" */
    background: #BCCE98;
    box-shadow: 0 20px 32px -6px #777; 
    border: 10px solid;
    -webkit-border-radius: 12px; /* Firefox 1-3.6 */
    -moz-border-radius: 12px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */ 
    border-radius: 12px; 
    }
    nav {
    position: absolute; 
    top: 170px; /* Set this to the height of the header */
    bottom: 50px; /* Set this to the height of the footer */
    left: 0; 
    width: 25%;
    height:80%;
    overflow: auto; /* Scrollbars will appear on this frame only when there's enough content to require scrolling. To disable scrollbars, change to "hidden", or use "scroll" to enable permanent scrollbars */
    background: #DAE9BC; 
    box-shadow: 0 20px 32px -6px #777; 
    border: 10px solid;
    -webkit-border-radius: 12px; /* Firefox 1-3.6 */ 
    -moz-border-radius: 12px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
    border-radius: 12px; 
    }
    section.content {
    position: absolute; 
    top: 170px; /* Set this to the height of the header */
    bottom: 50px; /* Set this to the height of the footer */
    left: 265px;
    width: 73%;
    height:80%;
    overflow: auto; /* Scrollbars will appear on this frame only when there's enough content to require scrolling. To disable scrollbars, change to "hidden", or use "scroll" to enable permanent scrollbars */
    box-shadow: 0 20px 32px -6px #777; 
    border: 10px solid;
    -webkit-border-radius: 12px; /* Firefox 1-3.6 */ 
    -moz-border-radius: 12px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
    border-radius: 12px; 
    }
    footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100px; 
    overflow: hidden; /* Disables scrollbars on the footer frame. To enable scrollbars, change "hidden" to "scroll" */
    background: #BCCE98;
    box-shadow: 0 20px 32px -6px #777; 
    border: 10px solid;
    -webkit-border-radius: 12px; /* Firefox 1-3.6 */
    -moz-border-radius: 12px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
    border-radius: 12px; 
    }
    .innertube {
    margin: 15px; /* Provides padding for the content */
    }
    p {
    color: #555;
    width: 110%;
    padding: 5% 5% 5% 5%;
    word-wrap: break-word;
    }
    h1 {
    text-allign: center;
    }
    nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    }
    nav ul a {
    color: darkgreen;
    text-decoration: none;
    }
    /*IE6 fix*/
    * html body{
    padding: 50px 0 50px 230px; /* Set the first value to the height of the header, the third value to the height of the footer, and last value to the width of the nav */
    }
    * html main{ 
    height: 100%; 
    width: 100%; 
    }
    .circlemenu{
     position:absolute;
              float:left;
              left: 0;
             height : 100%;
             overflow:hidden;
    }
    .circlemenu ul{
             margin: 0;
             padding: 0;
             font: bold 10px Verdana;
             list-style-type: none;
             text-align: center; /* "left", "center", or "right" align menu */
    }
    .circlemenu li{
           display: inline;
           margin: 10px;
    }
    .circlemenu li a{
           display:inline-block;
           text-align:center;
           text-decoration: none;
           color: white;
           background:#728eaa; /* #b72d23*/
           margin: 25px;
           margin-right:35px; /*right spacing between each link */
           width:80px;
           height:80px;
           border-radius: 400px; /*really large border radius to create round borders*/
          -moz-border-radius: 400px;
          -webkit-border-radius: 400px;
    }
    .circlemenu a span{
         position:relative;
         top:40%;
    }
    .circlemenu li a:visited{
         color: white;
    }
    .circlemenu a:hover{
         background: #c9d0de;
    }

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