Visualizzazione dei risultati da 1 a 6 su 6
  1. #1
    Utente di HTML.it
    Registrato dal
    Feb 2010
    Messaggi
    333

    spostare un'immagine con i media query

    Ciao a tutti,
    ho un logo posizionato in maniera assoluta a top:1em; e left:5em;
    Ho scelto gli em dopo varie prove per aver una misura elastica ma forse andava bene anche il %
    Fatto sta che sugli schermi del PC e anche nei piccoli in modalità landscape va tutto bene
    Negli schermi piccoli ruotati longitudinalmente il logo diventa troppo centrato e calpesta il titolo.
    Ho provato a portare left a zero ma non si muove di un millimetro
    Ecco come ho fatto:

    @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 667px)
    and (orientation : portrait) {
    img#stemma{left:0;}
    }

    se sbaglio:dove sbaglio?
    Grazie

  2. #2
    Utente di HTML.it
    Registrato dal
    Feb 2010
    Messaggi
    333
    Quote Originariamente inviata da _Marco_87 Visualizza il messaggio
    Hai sbagliato codice: devi postare quello dell'immagine oltre a quello del resize, e comunque penso che l'errore sia 'position:absolute'.
    Poi non puoi usare gli attributi top e left in quella maniera, e invece degli em dovevi usare propio le percentuali.
    Il motivo è che gli em sono dipendenti da un valore diverso, mentre % è dipendente dalla grandezza dello schermo o del contenitore em è dipendente dall'attributo font-size del contenitore che lo contiene.
    Essendo iscritto dal 2010 dovevi già saperlo...
    Te lo dico non per insultarti o altri, ma per invitarti a rileggerti le guide css, e la documentazione ufficiale sulle regole html.

    P.S.
    Se esiste un attributo che fà sballare a destra o a sinistra lo trovi subito facendo così:
    codice HTML:
    margin:0;
    padding:0;
    left:0;
    nel css lo metti sia all'immagine che ai contenitori, se si sposta nella posizione corretta un attributo di questi sopra era sbagliato, quindi devi trovare il contentore giusto e correggerlo(tieni presente che è una specie di trick, non si fà così per davvero).
    sì Lo so e ho provato sia il % poi per curiosità il em
    Il codice dell'immagine adesso è:
    img#stemma
    {
    position:absolute;
    left:1%;
    top:1%;
    height:100%;
    }
    ma non cambia niente.
    Non mi era mai capitato di usare top e left nelle query

  3. #3
    Utente di HTML.it
    Registrato dal
    Feb 2010
    Messaggi
    333
    il div contenitore è position:relative
    Il sito è www.iomla.net

  4. #4
    Utente di HTML.it
    Registrato dal
    Feb 2010
    Messaggi
    333
    per ora ho dato a left un valore medio che vada bene anche per i piccoli schermi altrimenti pasticciava

  5. #5
    Utente di HTML.it
    Registrato dal
    Feb 2010
    Messaggi
    333
    nella query dei piccoli schermi il galletto e l'editor sono display:none
    Il css è imola.css

  6. #6
    Utente di HTML.it
    Registrato dal
    Feb 2010
    Messaggi
    333
    adesso va bene anche sugli smartphone in cui la scritta è su 2 righe
    Ma lo sfondo tra il <div> header e il menù è eccessivo causa il margin-top che nella query non riesco ad azzerare

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.