Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 15

Discussione: Come ridurre distanza tra punto elenco e testo ?

  1. #1

    Come ridurre distanza tra punto elenco e testo ?

    Ciao ragazzi,

    Sapete come distanziare da un punto elenco (*) il testo (Item ..) ?:

    Agendo sul valore di "text-indent" di ".txt_dx" che si trova all'interno, riesco a farlo con FF 1.0.4, non invece con IE6.0

    Ecco come si vede con

    --> IE6.0 (i puntini simulano lo spazio)

    *..Item one
    *..Item two
    *..Item three
    ... bla bla bla
    *..Item four
    *..Item five


    --> FF 1.0.4 (i puntini simulano lo spazio)

    *.Item one
    *. Item two
    * Item three
    ... bla bla bla

    *. Item four
    *.Item five


    Inoltre, vorrei che il proseguimento dell'item (bla bla bla) del punto elenco che si trova in una colonna di appena 120px finisse sotto il punto elenco

    * Item three
    bla bla bla


    Le altre 2 cose strane sono
    - con "list-style-type: disc", il punto elenco "disc" si vede con FF ma in IE viene tradotto in "square"

    - mentre in IE l'hover del link disposto all'interno del punto elenco appare sottolineato al passaggio del mouse, con FF no :master:

    CSS

    .menubar_dx {
    width: 120px;
    \width:122px;
    w\idth:120px;
    border: 0px solid #AB6400;
    margin-top: 64px;
    margin-left: -23px;
    padding:0px;
    text-align: left;
    }

    .txt_dx {
    color: #7E4317;
    line-height: 15px;
    text-indent: -4px;
    text-align: left;
    font-size: 11px;
    }

    #navlist li {
    padding: 0px;
    list-style-type: disc;
    }

    li {
    list-style-position : outside
    }



    a.top:link {
    color: #7E4317;
    font-weight:bold;
    text-decoration: none;
    }

    a.top:visited {
    color: #7E4317;
    font-weight:bold;
    text-decoration: none;
    }

    a.top:hover {
    color: #7E4317;
    font-weight:bold;
    text-decoration: underline;
    }

    a.top:active {
    font: normal;
    color: #7E4317;
    }

    /* hack per 3 Pixel Jog di IE */
    * html .menubar_dx {
    margin-left: -16px;
    }


    L' HTML

    <div class="menubar_dx">


    <ul id="navlist">
    [*]<div class="txt_dx">Item one</div>
    [*]<div class="txt_dx">Item two</div>
    [*]<div class="txt_dx">Item three bla bla bla</div>
    [*]<div class="txt_dx">Item four</div>
    [*]<div class="txt_dx">Item five</div>
    [/list]


    </div>

  2. #2
    Utente di HTML.it L'avatar di floyd46
    Registrato dal
    Feb 2002
    residenza
    Apulia
    Messaggi
    2,656

    Re: Come ridurre distanza tra punto elenco e testo ?

    devi semplicemente provare a settare diversi valori sia per il margin che per il padding dell'elemento[*] e trovare un compromesso che ti faccia avere una stessa visualizzazione su + browser.
    Floyd
    "Le persone che realizzano layout con tabelle annidate, spacer gif o che ignorano l'accessibilità non possono più definirsi professionisti." Andy Clarke
    --------------------------------

    www.extrowebsite.com

  3. #3
    Non penso che sia il massimo mettere un div tra due tag[*] .
    Ciao

  4. #4
    Grazie ragazzi

    >> devi semplicemente provare a settare diversi valori sia per il margin che per il padding dell'elemento[*] e trovare un compromesso che ti faccia avere una stessa visualizzazione su + browser.

    farò degli esperimenti qui

    li {
    list-style-position : outside
    margin: valore di compresso da trovare;
    padding valore di compresso da trovare;

    }

    >>Non penso che sia il massimo mettere un div tra due tag[*] .

    Ho provato a metterlo dall'esterno il div ma sembra non avere effetto

    <div class="txt_dx">[*]Item one</div>

  5. #5
    Sto personalizzando un frammento di codice che ho pescato dai link utili qui sul forum e che sto adoperando nella colonna opposta

    la ul della sidebar sx

    ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    mi azzera il li della sidebar dx

    #navlist li {
    padding: 0px;
    list-style-type: disc;
    }
    li {
    list-style-position : outside
    }
    Come posso annullare l'effetto del sx per poter adoperare correttamente quello di dx ?

  6. #6
    lascia perdere, non si può ottenere con metodi ortodossi! la tua soluzione era curiosa, ma non standard e non andava con IE!
    ti ho sistemato un po' il codice, accontentati!


    codice css

    .menubar_dx {
    width: 120px;
    \width:122px;
    w\idth:120px;
    border: 1px solid #AB6400;
    margin: 64px 0 0;
    padding: 0;
    text-align: left;
    background: silver;
    }

    ul#navlist {
    margin: 0;
    padding: 0;
    }

    ul#navlist li {
    color: #7E4317;
    line-height: 15px;
    font-size: 11px;
    margin: 0;
    padding: 0;
    list-style-type: disc;
    list-style-position: inside;
    }

    a.top {
    color: #7E4317;
    font-weight: bold;
    text-decoration: none;
    }
    a.top:hover {
    text-decoration: underline;
    }
    a.top:active {
    font-weight: normal;
    }

    codice html


    <div class="menubar_dx">


    <ul id="navlist"> [*]Item one [*]Item two [*]Item three bla bla bla [*]Item four [*]Item five [/list]


    </div>

  7. #7
    Grandioso
    Riesci sempre a trovare la soluzione giusta

    Certo, riuscire a capire come ridurre questi pallini così grossi in IE che invece in FF sono delle siluette, sarebbe la ciliegina sulla torta , ma mi accontento e anzi te ne sono veramente grato

    Mi devo studiare il codice per capire come hai fatto

    Quando riuscirò a completarlo questo benedetto sito sul mio diario di viaggi... forse tra 2 o 3 mesi, come segno di riconoscenza ti inserirò tra coloro che mi hanno aiutato a renderlo possibile.

    Se avrò successo, (proverò a presentarlo alle trasmissioni televesive delle "falle del Kilimangiaro", Neapolis, ecc) magari anche tu avrai la tua gloria

  8. #8
    Non ha senso mettere un div prima o dopo un li, nella lista <ul> ci dev'essere solo[*] e al massimo [b] o altri tag per i caratteri, qualsiasi altro tag il w3c non te lo valida.
    riguardo i margini e padding FF e IE hanno per predefiniti margini (e padding) diversi, bisogna fare tutto a mano, e cmq difficilmente ti verranno uguali, a meno che non usi qualche trucchetto tipo lo star html

  9. #9
    >> riguardo i margini e padding FF e IE hanno per predefiniti margini (e padding) diversi, bisogna fare tutto a mano, e cmq difficilmente ti verranno uguali, a meno che non usi qualche trucchetto tipo lo star html

    Grazie per l'ulteriore dritta ma anche se non ho ancora avuto modo di sperimentare il codice di AWD, mi sembra che per i punti elenco non sia possibile manovrare lo spazio tra il punto elenco e il testo.
    Nel tentare di variare i valori di margini (e padding), almeno io non ci sono riuscito, per il resto invece è possibile con lo star html come tu stesso hai accennato .)

  10. #10
    Utente di HTML.it L'avatar di bagu
    Registrato dal
    Mar 2003
    Messaggi
    620
    apllica al contenuto del[*] uno span e dai il margine. positivo o negativo a questo.
    Non verrà uguale per tutti i browser, mettici un hack per i margini.
    Non so se Dio esiste ma se non esiste ci fa una figura migliore!
    - S. Benni -

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