Visualizzazione dei risultati da 1 a 10 su 10

Discussione: problemi con il ridimensionamento di immagini

  1. #1

    problemi con il ridimensionamento di immagini

    Ciao a tutti dopo circa 20 anni sono tornato causa forza maggiore alla programmazione .
    sto creando una mia pagina web � mi sono arenato sul ridimensionamento automatico di immagini o meglio se lavoro su una singola immagine riesco tranquillamente a farla in questo modo:
    <style>
    .flex {max-width: 100%}
    </style>
    <body>
    <p><center><img><img class="flex" src="season.gif" alt="immagine nn caricata"></center></p>

    </body>
    quando mi trovo davanti un gruppo di 5 immagini che ho trasformato in pulsanti non riesco a farlo.
    vi allego una foto per farmi capire meglioprova.jpg.
    il mio intento e quello di far ridurre l'immagine principale quella con la scritta season e le bandierine allo stesso modo al variare della risoluzione ,quindi al variare della dimensione della pagina devono adattarsi tutti insieme alla nuova dimensione . ho provato in tutti i modi ma nulla, ho provato ad inserire in una tabella le bandierine ma ancora nulla gentilmente qualcuno pu� aiutarmi grazie mille in anticipo.

  2. #2
    Moderatore di XHTML e HTML L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    17,798
    fai vede il codice della parte interessata

  3. #3
    eccolo:

    <!doctype html public "-//w3c//dtd html 4.0 transitional//en">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <meta name="Generator" content="PHP Studio">
    <title>untitled</title>
    </head>
    <style>
    #pulsante
    {
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: bold 12px Arial, Helvetica, sans-serif;
    color: #fff;
    padding: 10px 45px;
    border: solid 1px #0076a3;
    background:#0095cd ;


    -moz-border-radius: 20px; <!-- #0095cd variando i px varia la curvatura del pulsante-->
    -webkit-border-radius: 20px;
    border-radius: 20px;


    -moz-box-shadow: 0 6px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 6px 3px rgba(0,0,0,0.5);
    box-shadow: 0 6px 3px rgba(0,0,0,0.5);
    }
    #pulsante:hover {
    background: #0095cd;
    background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
    background: -webkit-linear-gradient(top, #0078a5, #00adee);
    background: -moz-linear-gradient(top, #0078a5, #00adee);
    background: -ms-linear-gradient(top, #0078a5, #00adee);
    background: -o-linear-gradient(top, #0078a5, #00adee);
    background: linear-gradient(top, #0078a5, #00adee);
    }


    #pulsante:active {
    position: relative;
    top: 1px;
    }
    #pul:active {
    position: relative;
    top: 1px;
    }


    .flex {max-width: 100%}
    </style>
    <body>
    <!--<p><center><img><img class="flex" src="season.gif" alt="immagine nn caricata"></center></p>
    -->
    <p><center><img><img class="flex" src="season.gif" alt="immagine nn caricata"></center></p>


    <div id="Layer2"
    style="position:absolute;left:1060px; top:10px; width:80px; height:84px; z-index:2">
    <input type="image" src="ita" id="pul"onclick="location.href='http://www.slowdive.it'" />
    <!--<img><img class="flex" src="ita" alt="immagine nn caricata"> -->
    </div>


    <div id="Layer2"
    style="position:absolute; left:1100px; top:10px; width:80px; height:84px; z-index:2">
    <input type="image" src="uki" id="pul"onclick="location.href='http://www.slowdive.it'" />
    </div>


    <div id="Layer2"
    style="position:absolute; left:1140px; top:10px; width:80px; height:84px; z-index:2">
    <input type="image" src="fra" id="pul"onclick="location.href='http://www.slowdive.it'" />
    </div>
    <div id="Layer2"
    style="position:absolute; left:1180px; top:10px; width:80px; height:84px; z-index:2">
    <input type="image" src="spa" id="pul"onclick="location.href='http://www.slowdive.it'" />
    </div>


    <div id="Layer2"
    style="position:absolute; left:1220px; top:10px; width:80px; height:84px; z-index:2">
    <input type="image" src="ger" id="pul"onclick="location.href='http://www.slowdive.it'" />
    </div>
    <center>
    <button id="pulsante" onclick=season>Home</button>


    <button id="pulsante" onclick="location.href='chisiamo.html'">chi siamo</button>


    <button id="pulsante">corsi</button>
    <button id="pulsante">mermaid</button>
    <button id="pulsante">Ambiente</button>
    <button id="pulsante">Ambiente</button>
    <button id="pulsante">Viaggi</button>
    <button id="pulsante">Eventi</button>
    <button id="pulsante">Diving</button> </center>
    </body>
    </html>

  4. #4
    so che utilizzando position: absolute non posso ridimensionare le immagini ma io ho bisogno che bandierine mi restino in quella posizione anche ridimensionate e non so come poterlo fare ho provato un po tutto grazie per la risposta

  5. #5
    nessuno mi aiuta pls.

  6. #6
    non so se ho posto male la domanda oppure sto chiedendo qualcosa di impossibile vincent.zeno mi hai chiesto il codice è l ho pubblicato
    o forse sbagliato il modo o il luogo ?
    se ho sbagliato qualcosa mi scuso in partenza

  7. #7
    Moderatore di XHTML e HTML L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    17,798
    è il tempo per dare una risposta completa e verificata che manca, forse riesco entro sera a guardare bene. abbi pazienza

  8. #8
    oki scusa pensavo di aver sbagliato qualcosa grazie mille

  9. #9
    Moderatore di XHTML e HTML L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    17,798
    ciao, ho ripulito un po' il codice. conteneva anche errori gravi.
    controlla le differenze tra il tuo e quello che ho scritto qui sotto.
    codice:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <meta name="Generator" content="PHP Studio">
    <title>untitled</title>
    <style type="text/css">
    #pulsante
    {
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: bold 12px Arial, Helvetica, sans-serif;
    color: #fff;
    padding: 10px 45px;
    border: solid 1px #0076a3;
    background:#0095cd ;
    
    
    -moz-border-radius: 20px; /* #0095cd variando i px varia la curvatura del pulsante */
    -webkit-border-radius: 20px;
    border-radius: 20px;
    -moz-box-shadow: 0 6px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 6px 3px rgba(0,0,0,0.5);
    box-shadow: 0 6px 3px rgba(0,0,0,0.5);
    }
    #pulsante:hover {
    background: #0095cd;
    background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
    background: -webkit-linear-gradient(top, #0078a5, #00adee);
    background: -moz-linear-gradient(top, #0078a5, #00adee);
    background: -ms-linear-gradient(top, #0078a5, #00adee);
    background: -o-linear-gradient(top, #0078a5, #00adee);
    background: linear-gradient(top, #0078a5, #00adee);
    }
    
    
    #pulsante:active {
    position: relative;
    top: 1px;
    }
    #pul:active {
    position: relative;
    top: 1px;
    }
    
    
    .flex {max-width: 100%}
    </style>
    
    
    </head>
    
    
    <body>
    <center><p><img class="flex" src="season.gif" alt="logo season ('non immagine non caricata')"></p></center>
    
    
    
    
    <div id="Layer1" style="position:absolute;left:1060px; top:10px; width:80px; height:84px; z-index:2">
    <input type="image" src="ita" id="pul1" onclick="location.href='http://www.slowdive.it'" >
    </div>
    
    
    <div id="Layer2" style="position:absolute; left:1100px; top:10px; width:80px; height:84px; z-index:2">
    <input type="image" src="uki" id="pul2" onclick="location.href='http://www.slowdive.it'" >
    </div>
    
    
    <div id="Layer3" style="position:absolute; left:1140px; top:10px; width:80px; height:84px; z-index:2">
    <input type="image" src="fra" id="pul3" onclick="location.href='http://www.slowdive.it'" >
    </div>
    
    
    <div id="Layer4" style="position:absolute; left:1180px; top:10px; width:80px; height:84px; z-index:2">
    <input type="image" src="spa" id="pul4" onclick="location.href='http://www.slowdive.it'" >
    </div>
    
    
    <div id="Layer5" style="position:absolute; left:1220px; top:10px; width:80px; height:84px; z-index:2">
    <input type="image" src="ger" id="pul5" onclick="location.href='http://www.slowdive.it'" >
    </div>
    
    
    <center>
    <button id="pulsante" onclick=season>Home</button>
    
    
    <button id="pulsante" onclick="location.href='chisiamo.html'">chi siamo</button>
    
    
    <button id="pulsante">corsi</button>
    <button id="pulsante">mermaid</button>
    <button id="pulsante">Ambiente</button>
    <button id="pulsante">Ambiente</button>
    <button id="pulsante">Viaggi</button>
    <button id="pulsante">Eventi</button>
    <button id="pulsante">Diving</button>
    </center>
    
    
    </body>
    </html>
    il problema è procedurale e contestuale.
    prima cosa se fai posizionamenti assoluti e con dimensioni fisse dei contenitori non ne uscirai mai.
    quindi ragiona in maniera "elastica", cioè non dare mai per scontata la risoluzione del browser.
    prova a ridisegnare la pagina assegnando dimensioni in percentuale, così ti avvicinerai a ciò che vuoi ottenere
    posiziona gli elementi in maniera relativa, oppure allineali flottando.
    personalmente terrei un solo contenitore ove mettere tutte le bandiere. bandiere che setterei con float:left per allinearle (ma è tutto da verificare)

    altro: gli id devono essere unici ("id" sta per identificativo), non si possono duplicare all'interno di una pagina.

    questo è solo un punto di partenza... buon lavoro

  10. #10
    grazie mille mi metto subito al lavoro e cerco di capire gli errori che ho commesso sei stato gentilissimo a presto.

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.