Accedi per seguire   
Seguaci 0
Fatmanscoop

[css]adattamento Navate Laterali

12 messaggi in questa discussione

Ciao a tutti!! Sto costruendo un sito internet utilizzando i fogli di stile. La pagina è costituita da una navata centrale (di 624 px) e di due bande laterali, create semplicemente specificando nel body un margine sinistro e un margine destro. Vorrei che in qualche modo queste 2 navate si adattassero in base alla risoluzione ( ex se sto usando una risol 800x600 diventassero 100 e 100, mentre se sto usando 1024x768 diventassero estese entrambe 200px). Vorrei anche che rimpicciolendo la finestra le 2 bande laterali diminuissero progressivamente prima di far scomparire la navata centrale.

Inoltre ho problemi di compatibilità tra ie è firefox.

Modificato da Fatmanscoop

Condividi questo messaggio


Link di questo messaggio
Condividi su altri siti

Rispettvamente screenshot Firefox e Internet explorer

post-36254-1192360862_thumb.jpg

post-36254-1192361053_thumb.jpg

Modificato da Fatmanscoop

Condividi questo messaggio


Link di questo messaggio
Condividi su altri siti

Per fare le navate ti consiglio di sfruttare la proprietà FLOAT.

Se non sei pratico ti possiamo dare una mano (ultimamente ho fatto diverse prove con i css nell'implementare il mio sito e devo dire che non è stato facile capirne il comportamento).

Per il discorso della loro larghezza in base alla risoluzione l'unico modo è con uno javascript (anche se sarebbe meglio sempre evitarli), l'unico linguaggio che è in grado di riconoscere la risoluzione corrente dell'utente.

Condividi questo messaggio


Link di questo messaggio
Condividi su altri siti

Mmm capisco. Il float mi è già capitato di usarlo quando costruivo 3 navate: una a sinistra col ruolo di menu, una a destra con per esempio il login, e quella centrale con le informazioni. In questo caso sulle barre di sinistra e di destra non metterei nulla (così come visualizzato negli screenshot del mio post precedente). Mi conviene quindi usare ugualmente i float?? Il problema è che non mettendo nulla nelle barre laterali mi pare che il float sia ininfluente e poi dovrei creare delle sezioni fittizie in cui nn metto nulla.

Poi, se io mettessi le proporzioni in percentuale (intendendo anche la dimensione della pagina), non avrei comunque un aggiustamento a prescindere dalla risoluzione? (più che altro perchè di javascript non sono molto afferrato).

Un ultima cosa: quando stringo la pagina vorrei che le barre laterali venissero progressivamente "mangiate" prima che la mia finestra inizi a scomparire inevitabilmente. Per adesso accade una cosa strana: quando io stringo la finestra i bordi si stringono progressivamente, ma gli elementi interni rimangono tali, cosicchè il bordo, continuando a stringere si rimpicciolisce e gli elementi escono praticamente dai bordi (spero di essermi fatto capire, ma se ti possono essere utiliti mando i files sorgente)

Grazie ancora della tua disponibilità.

Condividi questo messaggio


Link di questo messaggio
Condividi su altri siti

Fammi capire, le due navate laterali le usi per centrare la pagina? Altra domanda: la navata centrale deve avere un'ampiezza fissa di 624px?

Condividi questo messaggio


Link di questo messaggio
Condividi su altri siti

Ma non puoi utilizzare il semplice tag CENTER (o con i css usi i text-align) e dare una larchezza fissa alla colonna centrale?! :)

Se tanto gli spazi laterali intendi lasciarli vuoti puoi fare anche così :P

Condividi questo messaggio


Link di questo messaggio
Condividi su altri siti

Oltre a center si può usare margin, per questo stavo chiedendo :)

Condividi questo messaggio


Link di questo messaggio
Condividi su altri siti

Si ho usato i margin. Ho specificato nel body 200 px di margini a sinistra e 200 px a destra. Vorrei fare in modo che cambiando le dimensioni della pagina, e cambiando la risoluzione dello schermo tutte le proporzioni rimangano le stesse.

Probabilmente mi sono espresso male ma con navate intendevo semplici spazi bianchi.

Modificato da Fatmanscoop

Condividi questo messaggio


Link di questo messaggio
Condividi su altri siti

Per la centratura è sufficiente usare margin in questo modo:

margin: 0px auto;

Va applicato al div che contiene la navata centrale. Per far si che anche IE 5 capisca questo comando si deve scrivere qualcosa di questo genere:

body {
text-align: center;
}

#navata-centrale {
margin: 0px auto;
text-align: left;
width: 90%;
}

Dopo ti basta giocare con le percentuali (90%) o con l'unità di misura em per ottenere una dimensione costante a seconda di quanto sia grande la finestra.

Condividi questo messaggio


Link di questo messaggio
Condividi su altri siti

Ok ho capito perfettamente. Avrei un'altra richiesta. Utilizzando ciò che mi hai detto ho un ridimensionamento della pagina in base alle dimensioni della finestra del browser. Volevo chiederti se era possibile far si che anche gli elementi interni (testo, immagini), si ridimensionino in base alla dimensione della finestra.

Per spiegarmi un pò meglio l'idea sarebbe di poter simulare il mio sito, oltre che nella finestra del browser del pc, anche su un browser di un pda. Posso farlo utilizzando un unico foglio di stile, o per maggior controllo dovrei utilizzarne uno apposito che simuli l'interfaccia del sito sul pda stesso (poniamo che le sue dimensioni siano 240px, 320 px)?

Modificato da Fatmanscoop

Condividi questo messaggio


Link di questo messaggio
Condividi su altri siti

So che sto abusando molto del tuo tempo e della tua pazienza, vorrei però ancora chiederti se esiste un tutorial, o se mi puoi dare dei consigli, per la costruzione dell'interfaccia di un forum tramite css e html.

Condividi questo messaggio


Link di questo messaggio
Condividi su altri siti

Per il pda ti conviene creare un css apposito, lo puoi specificare con l'attributo media con valore handheld:

- http://www.w3.org/TR/REC-CSS2/media.html

O in alternativa puoi usare questo tutorial, dove spiega come ottenere il risultato che cerchi con i css e un po' di java script:

- http://www.alistapart.com/articles/switchymclayout/

Per il resto io ho cominciato ad usare i CSS leggendo riviste online come A List Apart o blog specializzati (tutti in inglese)... una buona fonte è certamente Dmoz.org, un motore di ricerca "umano" che contiene tanti siti interessanti, anche in italiano, guarda qui:

- http://www.dmoz.org/World/Italiano/Compute...tura/Xml/Xhtml/

- http://www.dmoz.org/World/Italiano/Compute..._Marcatura/Css/

Nelle sezioni in inglese trovi anche di più. Ciao :)

Condividi questo messaggio


Link di questo messaggio
Condividi su altri siti

Crea un account o accedi per lasciare un commento

Devi essere un utente registrato per partecipare

Crea un account

Iscriviti per un nuovo account nella nostra community. È facile!


Registra un nuovo account

Accedi

Sei già registrato? Accedi qui.


Accedi Ora
Accedi per seguire   
Seguaci 0