Autore Topic: Intestazione reattivo  (Letto 5880 volte)

andy67

  • Limbo
  • Nuovo arrivato
  • *
  • Post: 22
Intestazione reattivo
« il: 18 Aprile, 2015, 21:05:55 »
Ciao!
Vorrei fare l'intestazione reattivo , ma non posso farlo !

Ho la #imHeader già CSS max- width : 100 % ; height: 100 % ; ma non funziona !
Qualcuno mi può aiutare ?

lemonsong

  • Anziani
  • Utente storico
  • *
  • Post: 1867
    • lemonsong's world
Re:Intestazione reattivo
« Risposta #1 il: 19 Aprile, 2015, 13:52:14 »
Con solo quei CSS non è possibile perché imHeader è all'interno (figlio) di imPage che ha la larghezza impostata nella struttura del modello (larghezza del sito).

Inoltre, seconde me, non ha senso rendere responsive (reattivo) solo l'header del sito.

Se vuoi tentare di rendere responsive un sito creato con WS, prova a dare un'occhiata qui:

http://lemonsong.altervista.org/test_media_query/

http://quellidelcucuzzolo.blogspot.it/2015/03/template-alpines-website-x5-11.html


Ambedue gli esempi fanno uso di media queries.



andy67

  • Limbo
  • Nuovo arrivato
  • *
  • Post: 22
Re:Intestazione reattivo
« Risposta #2 il: 19 Aprile, 2015, 19:58:22 »
Hi lemonsong ! Devo ammettere che ho già utilizzato lo script e non farlo , ma come posso ridurre l'intestazione . Tutto il resto funziona ! Come si dice che non posso ridursi con i CSS , ma forse con Java intestazione sceneggiatura .

andy67

  • Limbo
  • Nuovo arrivato
  • *
  • Post: 22
Re:Intestazione reattivo
« Risposta #3 il: 19 Aprile, 2015, 21:04:03 »
Hier ist noch mein Test link: http://www.svoe-stpoelten.at/mobile/

lemonsong

  • Anziani
  • Utente storico
  • *
  • Post: 1867
    • lemonsong's world
Re:Intestazione reattivo
« Risposta #4 il: 20 Aprile, 2015, 12:24:54 »
http://www.svoe-stpoelten.at/mobile/


Da quello che vedo nel tuo test, nelle media queries, hai nascosto l'header di WS sostituendolo con un div con id top

Quindi, se ho capito cosa vuoi ottenere, prova a modificare così il CSS:

Citazione
#top {
     display:block;
     width:100%;
     
height:80%;
}

#top img{
    width:100%;
}


Blu: modificato
Rosso: puoi cancellarlo
Verde: aggiunto

andy67

  • Limbo
  • Nuovo arrivato
  • *
  • Post: 22
Re:Intestazione reattivo
« Risposta #5 il: 20 Aprile, 2015, 14:47:28 »
Naturalmente il tag img non pensavo anche di questo per essere al 100%. Ha funzionato.

C'è una soluzione Java script che io non perdo i link grafici nell'intestazione?

andy67

  • Limbo
  • Nuovo arrivato
  • *
  • Post: 22
Re:Intestazione reattivo
« Risposta #6 il: 21 Aprile, 2015, 06:01:25 »
Ciao! Ho un'altra domanda ! Come posso ottenere i campi di input il modulo di contatto sul 100% di larghezza.

lemonsong

  • Anziani
  • Utente storico
  • *
  • Post: 1867
    • lemonsong's world
Re:Intestazione reattivo
« Risposta #7 il: 21 Aprile, 2015, 14:07:59 »
C'è una soluzione Java script che io non perdo i link grafici nell'intestazione?


Secondo me è più "pratico" lasciare l'header di WS ed inserire testi, immagini etc... con il codice HTML [ Guests cannot view attachments ]

Ad ogni codice inserito assegniamo un id o classe, esempio immagine con link:

Codice:
Only registered users can see contents. Please click here to Register or Login.
Con jQuery assegniamo, per esempio, una classe al div contenitore che genera WS:

Codice:
Only registered users can see contents. Please click here to Register or Login.
Addesso possiamo gestire il nostro "oggetto" con le media queries, esempio:

Codice:
Only registered users can see contents. Please click here to Register or Login.

Qui c'è un esempio:
http://lemonsong.altervista.org/test_media_query/2/


Ciao! Ho un'altra domanda ! Come posso ottenere i campi di input il modulo di contatto sul 100% di larghezza.


La domanda è un po' OT comunque, come già detto, in questo template puoi trovare qualcosa:
http://quellidelcucuzzolo.blogspot.it/2015/03/template-alpines-website-x5-11.html

andy67

  • Limbo
  • Nuovo arrivato
  • *
  • Post: 22
Re:Intestazione reattivo
« Risposta #8 il: 21 Aprile, 2015, 19:33:27 »
Ha lavorato grande! Un po 'di qualcosa per il menu mobile! I tasti non vanno al 100 %

lemonsong

  • Anziani
  • Utente storico
  • *
  • Post: 1867
    • lemonsong's world
Re:Intestazione reattivo
« Risposta #9 il: 22 Aprile, 2015, 12:43:20 »
Sei ancora OT, per altre domande puoi aprire un altro topic!

Comunque nei CSS dell'esempio online trovi tutto:

Codice:
Only registered users can see contents. Please click here to Register or Login.

andy67

  • Limbo
  • Nuovo arrivato
  • *
  • Post: 22
Re:Intestazione reattivo
« Risposta #10 il: 27 Aprile, 2015, 07:48:19 »
salve !
Un ultimo problema che ho ...
Come posso fare questa pagina gli oggetti giusti per galleggiare tra i due oggetti di sinistra? In modo che sia un'immagine e una descrizione appare qui sotto!

Mi dispiace per la traduzione di Google! Questa domanda appartiene ancora a questo argomento!

http://www.svoe-stpoelten.at/mobile/mitglieder.html

Saluti
andy

lemonsong

  • Anziani
  • Utente storico
  • *
  • Post: 1867
    • lemonsong's world
Re:Intestazione reattivo
« Risposta #11 il: 27 Aprile, 2015, 12:09:02 »
Questa domanda appartiene ancora a questo argomento!

No, l'argomento/titolo di questo topic è: "Intestazione reattivo"
Sei passato dall'intestazione al menu e adesso agli oggetti nel contenuto della pagina  :)

andy67

  • Limbo
  • Nuovo arrivato
  • *
  • Post: 22
Re:Intestazione reattivo
« Risposta #12 il: 27 Aprile, 2015, 14:13:25 »
Beh, se si vuole, io apro un nuovo post