Unofficial WebSite X5

WebSite X5 versioni obsolete => WebSite X5 [v11] Evolution/Professional - Discussioni generali => Topic aperto da: andy67 - 18 Aprile, 2015, 21:05:55

Titolo: Intestazione reattivo
Inserito da: andy67 - 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 ?

Titolo: Re:Intestazione reattivo
Inserito da: lemonsong - 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://lemonsong.altervista.org/test_media_query/)

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


Ambedue gli esempi fanno uso di media queries.

Titolo: Re:Intestazione reattivo
Inserito da: andy67 - 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 .

Titolo: Re:Intestazione reattivo
Inserito da: andy67 - 19 Aprile, 2015, 21:04:03

Hier ist noch mein Test link: http://www.svoe-stpoelten.at/mobile/

Titolo: Re:Intestazione reattivo
Inserito da: lemonsong - 20 Aprile, 2015, 12:24:54

Citazione da: andy67 - 19 Aprile, 2015, 21:04:03

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

Titolo: Re:Intestazione reattivo
Inserito da: andy67 - 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?

Titolo: Re:Intestazione reattivo
Inserito da: andy67 - 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.

Titolo: Re:Intestazione reattivo
Inserito da: lemonsong - 21 Aprile, 2015, 14:07:59

Citazione da: andy67 - 20 Aprile, 2015, 14:47:28

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 [attachimg=1]

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/ (http://lemonsong.altervista.org/test_media_query/2/)

Citazione da: andy67 - 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.

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 (http://quellidelcucuzzolo.blogspot.it/2015/03/template-alpines-website-x5-11.html)

Titolo: Re:Intestazione reattivo
Inserito da: andy67 - 21 Aprile, 2015, 19:33:27

Ha lavorato grande! Un po 'di qualcosa per il menu mobile! I tasti non vanno al 100 %

Titolo: Re:Intestazione reattivo
Inserito da: lemonsong - 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.

Titolo: Re:Intestazione reattivo
Inserito da: andy67 - 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

Titolo: Re:Intestazione reattivo
Inserito da: lemonsong - 27 Aprile, 2015, 12:09:02

Citazione da: andy67 - 27 Aprile, 2015, 07:48:19

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  :)

Titolo: Re:Intestazione reattivo
Inserito da: andy67 - 27 Aprile, 2015, 14:13:25

Beh, se si vuole, io apro un nuovo post