Visualizzazione dei risultati da 1 a 3 su 3

Discussione: testo oltre il div

  1. #1
    Utente di HTML.it
    Registrato dal
    Mar 2002
    Messaggi
    48

    testo oltre il div

    Salve ragazzi, come posso fare per far andare a capo il testo della mia pagina?
    questo è l'url della pagina in modo che potete vedere cosa intendo dire:

    http://bleuvisual.altervista.org/prova2.html

    Questo è il codice html:



    <!doctype html>
    <html lang="en">
    <link href="Style.css" rel="stylesheet" type="text/css">
    <head>
    <meta charset="utf-8" />
    </head>
    <body>
    <div id="menu">


    [img]open.gif[/img]</p>
    <ul>[*]Link
    [*]Link[*]Link[*]Link[*]Link[/list]
    </div>
    <div class="container">
    <h1>titolo sito.com</h1>


    slogan sito</p>
    <pre><code>column long long column very long fill fill fill long text text column text silly very make long very fill silly make make long make text fill very long text column silly silly very column long very column filler fill long make filler long silly very long silly silly silly long filler make column filler make silly long long fill very.

    very make make fill silly long long filler column long make silly silly column filler fill fill very filler text fill filler column make fill make text very make make very fill fill long make very filler column very long very filler silly very make filler silly make make column column

    fill long make long text very make long fill column make text very silly column filler silly text fill text filler filler filler make make make make text filler fill column filler make silly make text text fill make very filler column very

    column text long column make silly long text filler silly very very very long filler fill very fill silly very make make filler text filler text make silly text text long fill fill make text fill long text very silly long long filler filler fill silly long make column make silly long column long make very </code></pre>
    </div>
    <script src="lib/jquery-1.6.2.min.js"></script>
    <script src="jquery.backstretch.min.js"></script>
    <script>
    // Create an array of images that you'd like to use
    var images = [
    "Immagine31.jpg",
    "Immagine2.png"

    ];
    // The index variable will keep track of which image is currently showing
    var index = 0;

    // Call backstretch for the first time,
    // In this case, I'm settings speed of 500ms for a fadeIn effect between images.
    $.backstretch(images[index], {speed: 500});

    // Set an interval that increments the index and sets the new image
    // Note: The fadeIn speed set above will be inherited
    setInterval(function() {
    index = (index >= images.length - 1) ? 0 : index + 1;
    $.backstretch(images[index]);
    }, 5000);
    </script>
    </body>
    </html>

    Questo il css:

    @charset "utf-8";
    /* CSS Document */

    body { font-family: Helvetica, Arial, sans-serif; }

    .container {
    width: 90%;
    background-color: #FFF;
    padding: 20px;
    height: 90%;
    margin-top: 20px;
    margin-right: auto;
    margin-bottom: 20px;
    margin-left: auto;
    }
    pre {
    border: 1px solid #CCC;
    background-color: #EEE;
    color: #333;
    padding: 10px;

    }
    #menu {
    font-size: 76%;
    margin: 0;
    padding: 0;
    width: 22px;
    position: absolute;
    top: 20%;
    left: 0;
    background: #f1f1f1;
    color: #000;
    border-width: 1px;
    border-style: solid;
    }

    #menu ul {
    margin: 0.5em 0 0.5em 2.5em;
    padding: 0;
    list-style: none;
    display: none;
    }

    #menu ul li a:link,
    #menu ul li a:visited {
    display: block;
    margin: 0;
    padding: 0.2em;
    color: #329;
    text-decoration: none;
    width: 5em;
    }
    #menu ul li a:hover {
    background: #fff url("dar.gif") no-repeat 100% 50%;
    color: #000;
    }

    #menu p {margin: 0; text-align: right; padding: 0;}
    #menu p img {border: none; vertical-align: middle; cursor: pointer;}

    #menu:hover {width: 10em;}
    #menu:hover ul {display: block;}

    Grazie a tutti!

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,780
    Ciao.

    Premessa: giusto un consiglio; quando posti del codice sul forum sarebbe opportuno utilizzare gli appositi tag di formattazione [ CODE ] o [ PHP ]. Questo in genere serve per rendere più facile la lettura e, di conseguenza, per rendere la tua richiesta più comprensibile.

    Il problema sta nell'elemento <PRE>.
    Così come esistono i tag di formattazione sul forum, anche per le nostre pagine HTML ci sono tanti tipi di tag. Ognuno ha delle caratteristiche particolari e ognuno ha una mansione specifica così da creare una struttura logica alla pagina oltre che impostarne l'aspetto.

    Questo mio preambolo è giusto per mettere in chiaro che nel tuo codice stai utilizzando l'elemento PRE. Questo, nello specifico, serve per inserire del testo che vogliamo sia preformattato. Cioè sarà visualizzato così come è scritto dentro tale tag, con ogni spazio o interruzione di linea che è presente nel testo stesso, senza che venga quindi formattato automaticamente dal browser (come avviene normalmente per altri tipi di tag).

    Ora, non ho idea se tu abbia utilizzato quel tag in modo logico, per ciò che effettivamente serve, o solo per una questione di "style", oppure giusto perché stava già lì. Stesso discorso, ovviamente, vale per il tag CODE che è dentro il PRE.

    Se non ti serve un testo preformattato (perché questo è l'unico motivo per utilizzare un tag <PRE>) puoi semplicemente eliminare il PRE ed impostare le regole di stile direttamente sul CODE (per crearti quella sorta di frame che ora hai sul PRE), oppure usare semplicemente dei DIV o SPAN e attribuirgli un id o una classe a cui applicare le regole di stile desiderate.

    Ad ogni modo, se intendi utilizzare comunque il PRE, puoi impostare il ritorno a capo attraverso l'attributo white-space, in questo modo:
    codice:
    white-space:normal;
    Così il testo andrà a capo in automatico.
    In questo caso però l'elemento PRE sarebbe totalmente inutile rispetto allo scopo per cui è stato creato.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  3. #3
    Utente di HTML.it
    Registrato dal
    Mar 2002
    Messaggi
    48
    Ciao, innanzitutto chiedo scusa per il codice scritto senza i tag consigliati, ho provato semplicemente a togliere sia pre che code e adesso funziona tutto benissimo.
    Finalmente sto iniziando piano piano a capirci qualcosa.
    Ti ringrazio tantissimo e complimenti, mi hai risolto un problema enorme!

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