Visualizzazione dei risultati da 1 a 6 su 6
  1. #1
    Utente di HTML.it L'avatar di goat
    Registrato dal
    Apr 2003
    Messaggi
    1,154

    Consiglio su come gestire pulsanti di questo tipo...

    Agevolo ausilio visivo:



    Come potete vedere la larghezza del pulsante varierà in base alla scritta al suo interno.
    Inoltre questi pulsanti non fungeranno da menù (sarebbe bastata una lista in linea), ma saranno disseminati per le varie sezioni in posizioni sempre differenti.
    Una mezza idea di come gestirli tutti utilizzando meno codice possibile l'avrei, ma un paio di opinioni in più mi farebbero davvero comodo.
    Grazie,
    goat
    "Qualunque impressione faccia su di noi, egli è un servo della legge, quindi appartiene alla legge e sfugge al giudizio umano."

  2. #2
    Frontend samurai L'avatar di fcaldera
    Registrato dal
    Feb 2003
    Messaggi
    12,924

    Re: Consiglio su come gestire pulsanti di questo tipo...

    Originariamente inviato da goat
    Agevolo ausilio visivo:



    Come potete vedere la larghezza del pulsante varierà in base alla scritta al suo interno.
    Inoltre questi pulsanti non fungeranno da menù (sarebbe bastata una lista in linea), ma saranno disseminati per le varie sezioni in posizioni sempre differenti.
    Una mezza idea di come gestirli tutti utilizzando meno codice possibile l'avrei, ma un paio di opinioni in più mi farebbero davvero comodo.
    Grazie,
    goat
    <button type="submit">
    Inoltra
    </button>

    all'elemento button dai come sfondo la parte sinistra del pulsante (larga pochi px)
    all'elemento strong dai come sfondo la parte destra larga 3-400px e ancorata a destra
    Vuoi aiutare la riforestazione responsabile?

    Iscriviti a Ecologi e inizia a rimuovere la tua impronta ecologica (30 alberi extra usando il referral)

  3. #3
    Utente di HTML.it L'avatar di goat
    Registrato dal
    Apr 2003
    Messaggi
    1,154
    Ho seguito il tuo consiglio e la cosa sembrerebbe funzionare, solo che IE e FF mi visualizzano il tag <button> male.
    Ho preparato anche il file d'esempio, con il CSS nel codice sorgente: ecco.
    Il verde che si vede è il colore di background del tag <button>.
    goat
    "Qualunque impressione faccia su di noi, egli è un servo della legge, quindi appartiene alla legge e sfugge al giudizio umano."

  4. #4
    Frontend samurai L'avatar di fcaldera
    Registrato dal
    Feb 2003
    Messaggi
    12,924
    potresti mettere in position relative lo strong e spostarlo verso l'alto e verso sinistra

    ma forse è più facile cambiare il markup così

    <button type="submit">
    <span>Inoltra</span>
    </button>

    ed applicare gli sfondi allo strong ed allo span
    Vuoi aiutare la riforestazione responsabile?

    Iscriviti a Ecologi e inizia a rimuovere la tua impronta ecologica (30 alberi extra usando il referral)

  5. #5
    Utente di HTML.it L'avatar di goat
    Registrato dal
    Apr 2003
    Messaggi
    1,154
    Scusate se insisto ma la cosa mi sta prendendo male.

    Ho messo online un altro esempio: ecco.

    Questo il CSS:
    Codice PHP:
    abuttonspan {
        
    position:relative;
        
    height:26px;
        
    font-family:ArialHelveticasans-serif;
        
    font-size:12px;
        
    font-weight:bold;
        
    line-height:26px;
        
    text-transform:uppercase;
        
    text-decoration:none;
        
    color:#333333;
        
    float:left;
        }
    {
        
    padding:0px;
        
    background-color:#FFFF00;
        
    }
    button {
        
    margin:0px;
        
    padding:0px;
        
    border:none;
        
    background-color:#00FF00;
        
    cursor:pointer;
        }
    span {
        
    background:url(bg_sx.gifleft top no-repeat;
        } 
    E questo l'HTML:

    Codice PHP:
    [url="#null"]<span>testocortointaga</span>[/url]





    <
    button type="submit"><span>testolungointagbutton</span></button
    Il codice è semplicissimo, eppure mi dà un'errata visualizzazione del <button> sia su IE che FF.
    E come se le dimensioni e i margini del tag <button> fossero ingestibili.
    Qualche idea?
    goat
    "Qualunque impressione faccia su di noi, egli è un servo della legge, quindi appartiene alla legge e sfugge al giudizio umano."

  6. #6
    Utente di HTML.it L'avatar di goat
    Registrato dal
    Apr 2003
    Messaggi
    1,154
    Risolta la questione!
    Il codice che ho usato è il seguente:

    Codice PHP:
    abuttonspan{
        
    position:relative;
        
    font-family:ArialHelveticasans-serif;
        
    font-size:12px;
        
    font-weight:bold;
        
    text-transform:uppercase;
        
    text-decoration:none;
        
    color:#ffffff;
        
    float:left;
        
    cursor:pointer;
        }
    {
        
    height:26px;
        
    padding:0px;
        
    background:url(bg_dx.gifright top no-repeat;
        }
    button {
        
    width:auto;
        
    height:26px;
        
    margin:0px;
        
    padding:0px 6px 0px 0px;
        
    border:none;
        
    overflow:visible;
        
    background:url(bg_dx.gifright top no-repeat;
        }
    span{
        
    margin:0px;
        
    padding:0px 6px;
        
    line-height:27px;
        
    background:url(bg_sx.gifleft top no-repeat;
        } 
    Codice PHP:
    [url="#null"]<span>testo corto in tag a</span>[/url]







    <
    button type="submit" />testo lungo in tag button</button></p
    "Qualunque impressione faccia su di noi, egli è un servo della legge, quindi appartiene alla legge e sfugge al giudizio umano."

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.