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

Discussione: Aiuto pagina html+css

  1. #1

    Aiuto pagina html+css

    Salve ragazzi, preciso che sono un neofita, quindi prego, a chiunque abbia intenzione di aiutarmi, di non spaventarsi alla vista del codice che posterò
    In poche parole il mio problema è che, con la riduzione della pagina alcuni elementi si spostano mentre ridimensiono, appunto, la pagina, in particolar modo, parlo del "menu" della mia pagina. Come devo fare per ovviare a questo problema ? Grazie mille anticipatamente a chiunque tenterà di aiutarmi.

    P.S: Ovviamente sono sicuro che questo codice presenterà un'infinita di errori, quindi non fatevi problemi a dirmi dove e perche ho sbagliato. Grazie ancora a tutti per il vostro tempo.
    codice:
    index.html
    <html>
    <head>
        <link href="stile.css" rel="stylesheet" type="text/css">
        <title>Il Regno Degli Animali</title>
    </head>
    
    <body>
    
    <div id="lista">
        <table>
            <tr>
                <td><a href="www.google.it">HOME</a></td>
                <td><a href="www.google.it">CONTATTI</a></td>
                <td><a href="www.google.it">DOVE SIAMO</a></td>
                <td><a href="www.google.it">PREZZI</a></td>
            </tr>
        </table>
    </div>
    
    <div id="img">
        <img src="immagine.jpg"/>
    </div>
    
    <div id="linea"></div>
    
    <!--<div id="contenitore">-->
        <a href=""><div id="sinistra">
                        <div id="sxup"> 
                            <h2>Cuccioli Di Cane</h2>
                        </div>
                        <img src="immagine3.jpg"/>
                    </div></a>
        <a href=""><div id="centro">
                        <div id="ceup">
                            <h2>Uccelli</h2>
                        </div>
                        <img src="uccello.jpg"/>
                    </div></a>
        <a href=""><div id="destra">
                        <div id="dxup">
                            <h2>Anfibi</h2>
                        </div>    
                        <img src="anfibio.jpg"/>
                    </div></a>
    <!--</div>-->
    
    </body>
    </html>
    
    Stile.css
    
    body {background-color:#E0FFBF}
    
    #lista {margin-top:15px;
            }
    lista table {margin-left:180px;
                }
    #lista td {border: 1px solid #000;
                border-radius:10px 10px;
                background-color:#604200;
                }
    
    #lista td a {margin-left:25px;
                margin-right:25px;
                text-decoration:none;}
    #lista td a:link {color:#fff}
    #lista td:hover {background-color:#D2B06A}
    #lista td:hover a {color:#604200}
    
    #img {width:950px;
            height:350px;
            margin-left:180px;
            margin-top:5px;}
    #img img {height:100%;
                width:100%;
                border-radius: 10px 10px;}
    
    #linea {width:1100px;
            margin-top: 20px;
            margin-left:105px;
            border: 3px solid #604200}
    
    /*#contenitore {margin-top:15px;
                    position:relative;}*/
    #sinistra {height:200px;
                width:300px;
                border:1px solid #000;
                margin-left:55px;
                margin-top:15px;
                float:left;
                border-radius:10px 10px;
                position:absolute;}
    #sinistra img {width:100%;
                    height:170px;
                    border-radius:0 0 10px 10px}
    #sxup {height:30px;
            width:100%;
            background-color:#D2B06A;
            border-radius:10px 10px 0 0}
    #sxup h2 {margin:0 0 0 60px;
                color:#fff}
    
    #centro {height:200px;
                width:300px;
                border:1px solid #000;
                float:left;
                margin-left:150px;
                margin-top:15px;
                border-radius:10px 10px;
                position:absolute;
                margin-left:500px}
    #centro img {width:100%;
                    height:170px;
                    border-radius:0 0 10px 10px;}
    #ceup {height:30px;
            width:100%;
            background-color:#D2B06A;
            border-radius:10px 10px 0 0}
    #ceup h2 {margin:0 0 0 110px;
                color:#fff}
            
    #destra {height:200px;
                width:300px;
                border:1px solid #000;
                margin-left:150px;
                margin-top:15px;
                float:left;
                border-radius:10px 10px;
                position:absolute;
                margin-left:955px}
    #destra img {width:100%;
                    height:170px;
                    border-radius:0 0 10px 10px;}
                    
    #dxup {height:30px;
            width:100%;
            background-color:#D2B06A;
            border-radius:10px 10px 0 0}
    #dxup h2 {margin:0 0 0 110px;
                color:#fff}
    Ultima modifica di Vincent.Zeno; 11-11-2017 a 22:08

  2. #2
    Amministratore L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    20,649
    ciao matteo,
    quello che tu chiami problema, non avendo impostato un layout responsivo, è il naturale comportamento del codice che hai scritto.

    tuttavia il tuo menu si trova a sinistra della pagina, quindi dove e come si sposterebbe?

    altra cosa: devi impostare il doctype per il documento, altrimenti il browser fa quello che può (non avendo le regole di riferimento da seguire).

    ricorda che, per postare codice sul forum, sei tenuto (come tutti noi) ad utilizzare il tag CODE (vedi tasto # in modalità avanzata). per ora correggo io il post, la prossima volta inseriscilo tu, grazie.

  3. #3
    Quote Originariamente inviata da Vincent.Zeno Visualizza il messaggio
    ciao matteo,
    quello che tu chiami problema, non avendo impostato un layout responsivo, è il naturale comportamento del codice che hai scritto.

    tuttavia il tuo menu si trova a sinistra della pagina, quindi dove e come si sposterebbe?

    altra cosa: devi impostare il doctype per il documento, altrimenti il browser fa quello che può (non avendo le regole di riferimento da seguire).

    ricorda che, per postare codice sul forum, sei tenuto (come tutti noi) ad utilizzare il tag CODE (vedi tasto # in modalità avanzata). per ora correggo io il post, la prossima volta inseriscilo tu, grazie.
    Si scusami questa è la seconda volta che faccio una richiesta su questo forum e non sono ancora pratico di come funzioni. Comunque il problema avviene quando, come detto in principio, riduco la finestra della pagina da destra verso sinistra, i link del menu non rispettano più i loro valori iniziali. Di seguito ti riporto la visione della pagina "intera" e quella ridotta, appunto, da destra verso sinistra.
    http://prntscr.com/h97q3f
    http://prntscr.com/h97qx4

    Spero di essermi spiegato per il meglio e ti ringrazio per l'aiuto.
    Ultima modifica di MatteoR94; 11-11-2017 a 22:24

  4. #4
    Amministratore L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    20,649
    Quote Originariamente inviata da MatteoR94 Visualizza il messaggio
    i link del menu non rispettano più i loro valori iniziali
    quello che dici è impossibile (salvo che tu non l'abbia previsto, ma non è questo il caso)

    c'è un "brutto effetto" alla voce "dove siamo" ma non credo sia questa la domanda...

    c'è un errore nei link: manca il prefisso https://
    è a questo che ti riferisci?

  5. #5
    Quote Originariamente inviata da Vincent.Zeno Visualizza il messaggio
    quello che dici è impossibile (salvo che tu non l'abbia previsto, ma non è questo il caso)

    c'è un "brutto effetto" alla voce "dove siamo" ma non credo sia questa la domanda...

    c'è un errore nei link: manca il prefisso https://
    è a questo che ti riferisci?

    Vero, grazie per avermelo fatto notare. No, parlando in modo molto grezzo, nella prima immagine vedi i "contenitori" dove ho messo i link, sono "snelli" e il [Dove siamo] è scritto in un unica riga, mentre viceversa quando vado a ridurre la pagina è come se applicasse dei margini alti e bassi ed il tutto sembra più "gonfio" e inoltre come hai notato il [Dove siamo] applica un testo a capo. Non riesco a capire come ovviare a questa situazione.

  6. #6
    nel css ma e ben più complicato. Ad esempio se si tratta di immagini bisogna dire al browser che se la risoluzione è tot le imensioni devono essere XxY e così via. se si tratta di testo purtroppo si deve fare una scelta o rimpicciolire il carattere che può diventare illegibile oppure lascirlo andare a capo.
    Nel tuo caso del menu per non avere il testo che va a capo e deforma i pulsanti, quando la risoluzione arriva a un certo punto si opta per il menu a comparsa, cioè non più i pulsanti ma uno solo che cliccato apre un menu a lista.
    Conclusione che per progettare un menu e una pagina responsive cio vuol ben altro che un semplice css
    “Che le cose siano cosi, non vuol dire che debbano andare così. Solo che quando si tratta di rimboccarsi le maniche e incominciare a cambiare, vi è un prezzo da pagare. Ed è allora che la stragrande maggioranza preferisce lamentarsi più che fare”.

    Giovanni Falcone

  7. #7
    Amministratore L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    20,649
    ma tu cosa voi ottenere... una impostazione fissa dell'altezza e larghezza del bottone?

    il fatto che il testo di "dove siamo" vada a capo implica un'aumento dell'altezza delle cella che lo contiene, quindi anche della riga che contiene le celle. al che tutte le celle aumentano di misura.

    stai parlando di problemi legato al ridimensionamento del browser; ma in quella pagina niente è progettato per essere elastico o responsivo. forse è meglio che chiarisci cosa vuoi fare e come ti vuoi muovere...

  8. #8
    Quote Originariamente inviata da Vincent.Zeno Visualizza il messaggio
    ma tu cosa voi ottenere... una impostazione fissa dell'altezza e larghezza del bottone?

    il fatto che il testo di "dove siamo" vada a capo implica un'aumento dell'altezza delle cella che lo contiene, quindi anche della riga che contiene le celle. al che tutte le celle aumentano di misura.

    stai parlando di problemi legato al ridimensionamento del browser; ma in quella pagina niente è progettato per essere elastico o responsivo. forse è meglio che chiarisci cosa vuoi fare e come ti vuoi muovere...
    Si vorrei un'impostazione fissa (che sarebbe quella della prima immagine postata) che rimanga tale anche al ridimensionamento del browser.

    Potreste indirizzarmi ad una guida qui all'interno del sito o anche esterna, come preferite.

  9. #9
    Un'impostazione fissa che rimanga tale ridimensionando il browser e che tutti gli elementi siano visibili è impossibile ottenerla.
    Come ti ho detto quando si ridimensiona il browser bisogna accettare altre impostazioni oppure che certi elementi vengano tagliati
    “Che le cose siano cosi, non vuol dire che debbano andare così. Solo che quando si tratta di rimboccarsi le maniche e incominciare a cambiare, vi è un prezzo da pagare. Ed è allora che la stragrande maggioranza preferisce lamentarsi più che fare”.

    Giovanni Falcone

  10. #10
    Amministratore L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    20,649
    dai una dimensione fissa sia alla tabella che alle celle (la dimensione della tabella è la somma delle celle più eventuale cellspacing da conteggare)
    Ultima modifica di Vincent.Zeno; 12-11-2017 a 01:13

Tag per questa discussione

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