[RISOLTO] Far sì che un articolo possa essere "scrollato"

[MrPippoTN]

Ciao a tutti. Vorrei ottenere un template dove header (in alto) e menu (nella colonna di sinistra) rimangano sempre fissi e ben visibili, mentre gli articoli contenuti nel corpo principale del sito possano essere "scrollati" come si faceva una volta con l'ausilio dei frame. In pratica io vorrei stabilire le dimensioni del div che contiene il corpo del cms, mettiamo 900 x 600, dopodichè... Facciamo finta che l'header sia alto 150 pixel e che il corpo centrale del sito risulti alto 450 pixel... Ecco, quest'ultima parte dev'essere fissa, e ciascun articolo che compare all'interno di questo riquadro dev'essere scorrevole. Sembra una velleità assurda, ma il sito me l'hanno commissionato così. Come posso realizzare questa cosa?

[adottauncane]

Ciao MrPippoTN,
il css da applicare oltre l'altezza fissa è

Codice: [Seleziona]

overflow: auto;

[Gokuale - Takumi]

Ciao

oltre a quanto detto da adottauncane se non mi sbaglio nel css degli elementi che vuoi far rimanere fermi devi mettere

Codice: [Seleziona]

position:fixed;

però occhio che se hai dei float ti sballa tutta la struttura

ciao

[MrPippoTN]

Non riesco a risolvere... Questo è il sito di prova: http://www.mrzedilizia.it/arklinea/prova


Allego il file template.css in formato zip se no il forum non me lo lascia caricare 

[allegato eliminato da un amministratore essendo vecchio più di un anno]

[MrPippoTN]

Avrei voluto copiare il codice qui ma è troppo lungo e il sito non me lo accetta...


Il template è stato creato con ****** e non capisco quali div io debba andare a modificare nello specifico. Se riuscite a darmi qualche dritta...


Magari in alternativa esiste qualche plugin per ottenere questa cosa...

[Gokuale - Takumi]

essendo scritto con **** non so se e' il caso di postare la soluzione chiedo ai moderatori di dare la loro autorizzazione altrimenti nisba

mi spiace

 

[MrPippoTN]

Le immagini le avevo rimpicciolite mentre scrivevi questo post (grazie). Ora provo e poi ti faccio sapere...


A tra poco.

[MrPippoTN]

Le immagini le avevo rimpicciolite mentre scrivevi questo post (grazie). Ora provo e poi ti faccio sapere...


A tra poco.

Non va. 

[Gokuale - Takumi]

attendo una risposta dai moderatori in quanto avendolo creato con **** non so se posso risponderti

http://forum.joomla.it/index.php/topic,140091.0.html

comunque online non vedo nulla di quell oche ti avevo postato.
attendo
ciao

[tomtomeight]

Nel forum è vietato citare Chiedere e concedere supporto per estensioni, servizi e programmi commerciali. Se il problema è specifico del template la soluzione deve chiederla dove lo ha comprato, in alternativa vedetevela privatamente.

[MrPippoTN]

Ok, cancellate pure il thread.

[tomtomeight]

Non ho detto che bisogna cancellare il post, solo stabilire l'origine del problema che magari non dipende dal template o che magari non è un problema ma una richiesta di come si fa una cosa che può essere fatta su tutti i template.    Non ho seguito la discussione ma se non rientra nello specifico del template commerciale può benissimo proseguire senza citare estensioni commerciali o magari provarla su un template di base.

[Gokuale - Takumi]

le modifiche che volevo suggerire vanno bene per qualunque template creato in quella maniera
ovviamente vanno modificate da caso a caso
io ripubblico il mio suggerimento poi lascio ai moderatori la facolta di toglierlo o no (ma spero di no perche' mi sembra d'interesse per tutti )

e' inutile pubblicare tutto il CSS

cancellalo dal post tanto fa solo casino in un eventuale ricerca

allora comincia a mettere questo alla riga 2357

Codice: [Seleziona]

.art-content-layout .art-sidebar1 {
  margin: 0 auto;
  position: fixed;
  width: 200px;
}

questo alla riga 2364

Codice: [Seleziona]

.art-content-layout .art-content {
  border-left: 1px dotted;
  position: relative;
  width: 600px;
}

questo alla riga 1042

Codice: [Seleziona]

.art-layout-wrapper {
  margin: 130px auto 0;
  position: relative;
  z-index: auto !important;
}
e questo alla riga 395

Codice: [Seleziona]

.art-header {
  background-color: #262626;
  background-image: url("../images/header.png");
  background-position: 0 0;
  background-repeat: no-repeat;
  height: 110px;
  margin: 0 auto;
  position: fixed;
  width: 812px;
  z-index: 1;
}

occhio che pero' le tue immagini escono dalla larghezza di 800px che hai messo ed e' per questo che nell'ultyima dichiarazione ti ho messo 812px ma sei al pelo

quindi o metti le immagini a misura oppure allarche la header

praticamente ti ho registrato la sidebar e la header come fisse tramite il position:fixed;
a questo punto pero' gli altri elementi ci potevano andare sopra quindi con il position:relative; e con i margin settati a dovere ti ho spostato il contenuto degli articoli in modo che rientrassero nell'area di scorrimento

ho dovuto spostare il bordo puntinato tra menu laterale e contenuto da una classe all'altra se no con il position fixed ti ritroveresti il bordo puntinato che finisce dopo il 4 menu

ho dovuto anche dichiarare una larghezza fissa per la header se no con position fixed non riesce ad essere interpertata

ho mezzo z-index 1 alla header se no non stava davanti allo scorrimento e con i colore di sfondo uguale al tuo background i lgioco e' fatto

ciao

[adottauncane]

Non so, forse non ho capito la richiesta, ma mi sembrerebbe che con:

Codice: [Seleziona]

.art-postcontent, .art-postcontent li, .art-postcontent table, .art-postcontent a, .art-postcontent a:link, .art-postcontent a:visited, .art-postcontent a.visited, .art-postcontent a:hover, .art-postcontent a.hovered {    font-family: Arial,'Arial Unicode MS',Helvetica,Sans-Serif;    height: 300px;    line-height: 175%;    overflow: auto;}
dove metti l'height che vuoi, sei a posto.

[Gokuale - Takumi]

Hai perfettamente ragione adottauncane abbiamo fatto tutti e due la stesa cosa solo che io ho usato un altro metodo

molto meglio e piu veloce il tuo
resta piu pulito

complimenti
 

ciao

[MrPippoTN]

Non so, forse non ho capito la richiesta, ma mi sembrerebbe che con:

Codice: [Seleziona]

.art-postcontent, .art-postcontent li, .art-postcontent table, .art-postcontent a, .art-postcontent a:link, .art-postcontent a:visited, .art-postcontent a.visited, .art-postcontent a:hover, .art-postcontent a.hovered {    font-family: Arial,'Arial Unicode MS',Helvetica,Sans-Serif;    height: 300px;    line-height: 175%;    overflow: auto;}
dove metti l'height che vuoi, sei a posto.

Risolto, GRAZIEEE!!!

[MrPippoTN]

Chiedo un'altra curiosità: esiste un modo per rendere un po' più bella quella scrollbar?


http://www.mrzedilizia.it/arklinea/prova

[adottauncane]

Non che io sappia... immagino dipenda dal browser. Però prova a cercare, si sa mai.