Modificare colonna centrale

[sweet_elly91]

Ciao a tutti
Volevo aprire questo topic per chiedervi un aiuto. Ho trovato online un foglio di stile che vorrei adoperare, qui: http://www.minimalistic-design.com/blue3column/

Vorrei apportare soltanto alcune modifiche, tra cui la principale alla colonna centrale, la più grande, per farle avere un'ampiezza di 578px, ma non riesco ad aumentarla senza scombinare l'intera struttura. Non sono molto esperta, ma credo che debba aumentare l'ampiezza del container che contiene tutte e tre le colonne, così da poter modificare tutto, ma non riesco a modificare come richiesto. Mi piacerebbe, poi, visualizzare i punti del menù di navigazione (intendo quello sotto l'header) al centro, ma non so proprio come intervenire...
Posso chiedere un aiuto?

Grazie in anticipo a tutti.

[Prill]

Ciao, nel css hai:

#wrap {margin: 0 auto;width: 980px;}
#left {float: left;width: 200px;}
#right { float: right;width: 740px;margin-right: 10px; }
.contentleft {float: left;width : 550px;}

dove wrap è il contenitore generale, left è la colonna sinistra e right l'altra colonna che contiene il contentleft (il tuo blocco centrale) e il contentright (la colonna destra). Per allargare il box centrale, lasciando immutati gli altri due, puoi modificare quel 550px di contentleft portandolo a 578, e parallelamente aggiungendo i 28px in più a right (che passa da 740 a 768) e a wrap (che passa a 1008, se ho fatto bene i conti)

[sweet_elly91]

Ciao Prill!
Grazie mille per la tua pronta e gentile risposta. Ho effettuato le modifiche che mi hai consigliato e la colonna effettivamente si allarga come previsto. L'unico problema è che si sballano header e footer; ho provato ad allegare uno screenshot per farti capire meglio cosa intendo dire. Posso chiederti come mai? Eventualmente potrei semplicemente allargare la colonna centrale e diminuire di 28 px la colonna di sinistra, lasciando il wrap delle dimensioni originali?

Grazie mille in anticipo

[Prill]

Sì, hai in effetti delle immagini di sfondo per header, menu eccetera larghe 980 pixel, che costituiscono i bordi laterali: per modificare la larghezza del layout sarebbe necessario modificare anche quelle. Se vuoi posso modificartele e allegartele; altrimenti, lasciando il wrap a 980 puoi restingere il div left e allargare il div right e il contentleft (puoi anche recuperare qualche pixel dal contentright, l'importante è che se allarghi uno di 28 pixel restringi l'altro (o gli altri due) di 28 pixel, in modo che la somma delle larghezze di tutti (nel conteggio vanno anche margin e padding) non superi i 980 totali

[sweet_elly91]

Grazie mille per il prezioso consiglio. Lasciando il wrap invariato ed eseguendo le modifiche che mi hai suggerito, il layout è a posto Ti ringrazio veramente molto.
Sperando di non disturbare troppo, vorrei porti due domande (spero) semplici:

1. posso chiederti come dovrei comportarmi nel caso in cui volessi spostare al centro i punti del menù di navigazione (quelli sotto l'header)?
2. posso domandarti come mai il tag
che inserisco dia uno spazio molto più ampio rispetto ad una semplice riga a capo?

Ti ringrazio davvero, poi non disturbo più

[Prill]

Il tuo menu ha un elenco largo il 100% (se non ne specifichi la larghezza, un elemento blocco si estende per tuttto lo spazio disponibile) e le voci elenco hanno un float:left, sono affiancate a sinistra. Per avere il menu centrato sarebbe necessario in questo caso specificare le dimensioni dell'elenco cui assegnare anche un margin:0 auto.
Quanto al br, invece di usare tag ulteriori per creare degli spazi vuoti, sarebbe preferibile assegnare ai vari elementi dei margini superiori o inferiori, in pixel, dell'altezza desiderata

[sweet_elly91]

Grazie mille per i consigli.
Quindi devo dare all'elenco una misura in pixel equivalente a quella dell'intero wrap?
Per quanto riguarda il
, volevo domandarti un ulteriore suggerimento per risolvere il problema poiché ho una serie di pagine che dovrei trasporre e queste hanno molto testo, ben diviso con i
, e doverle rieditare tutte rimuovendo il tag richiederebbe un quantitativo di tempo notevole, per questo stavo cercando di ripristinare il loro spazio originale.

Ti ringrazio moltissimo della pazienza.

[Prill]

Quindi devo dare all'elenco una misura in pixel equivalente a quella dell'intero wrap?

no, dovresti assegnare all'elenco una larghezza pari allo spazio occupato dai link - attualmente occupa lo spazio dell'intero wrap - e dovresti assegnare una larghezza anche alle voci elenco. Avendo dimensioni definite potresti poi centrarlo, finché è largo quanto il wrap, com'è attualmente, essendo le voci allineate a sinistra tramite il float, non è possibile che i link appaiano al centro.

Comunque puoi risolvere anche impostando sull'elenco (#menu) un text-align:center e sulle voci elenco (#menu li) un display:inline, in questo caso non è necessario specificare alcuna dimensione.

Sul br non riesco a capire in cosa consista il problema, se hai una pagina online oppure vuoi inserire il codice che permetta di riprodurla, forse sarà più semplice.
Considera comunque che qualsiasi editor, anche di testo, come Blocco note, ha la funzione Cerca e Sostituisci per cambiamenti veloci (se quindi inserissi cerca "
" sostituisci con "</p>

", modificherei con facilità avendo la chiusura di un paragrafo e l'inizio del nuovo, e sui paragrafi potrei settare i margini superiori e inferiori a mio piacimento). Probabilmente va anche bene il br, e non occorre cambiarlo, ma bisogna rendersi conto di quanto accade per capire quale possa essere la soluzione.

[sweet_elly91]

Grazie mille, ancora.
Purtroppo non ho un file online da poter ancora mostrare, ma cerco di spiegare qual è il mio "problema" con i
. In pratica, con le pagine che adoperano un altro foglio di stile (non quello linkato), il testo con due
si visualizza come segue:

Testo


Altro testo

Con il nuovo foglio di stile, invece, sempre con i soliti due tag
, il testo si visualizza come segue:

Testo




Altro testo

E' come se i
fossero più di due e non so spiegarmene il motivo, cioè non riesco a capire perché gli spazi siano più lunghi.

Ti ringrazio in anticipo e scusami il disturbo

[Prill]

Potrebbe dipendere dal line-height impostato