Template tagliato a sinistra con fascia bianca a destra [RISOLTO]

[Privilege]

Buongiorno a tutti. Spero che qualcuno possa aiutarmi ad evitare di cambiare template.
Il sito è questo: www.studiolegalebv.it
Come si puó vedere da un iPhone o semplicemente riducendo al minimo la finestra del browser il sito appare tagliato a sinistra, con fascia bianca a destra, come se il margine sinistro fosse impostato in modo da non far vedere la parte dei menu di sinistra che fuoriesce dal body (non so se si dice body...intendo il modulo centrale bianco con cornicetta grigia dove vanno gli articoli).

Si puó intervenire sui file css o index.php per risolvere? Forse modificando i margini in page navigation?
 
In caso di impossibilità di intervento su index o css, avrei pensato  di spostare all'interno del "body" (o come si chiama) i menu e ridimensionare l'header dov'è il nome del sito.

Che ne pensate? Se c'è bisogno potrei postare il css o index.

GRAZIE

[adottauncane]

Ciao Privilege,
prova a correggere così:

Codice: [Seleziona]

#main {    font-size: 1.3em;    line-height: 140%;    margin-bottom: auto;    margin-left: auto;    margin-right: auto;    margin-top: auto;    position: relative;    width: 1024px !important;}
style.css riga 161

[Privilege]

Ciao Privilege,
prova a correggere così:

Codice: [Seleziona]

#main {    font-size: 1.3em;    line-height: 140%;    margin-bottom: auto;    margin-left: auto;    margin-right: auto;    margin-top: auto;    position: relative;    width: 1024px !important;}
style.css riga 161

Ottimooooooo.....Grazie va molto meglio, anche se rimane la fascia bianca a destra e il sito un po' decentrato verso sinistra. 
Si può perfezionare centrando di più la pagina? 

[adottauncane]

Io lo vedo bene... Prova eventualmente a modificare la larghezza fino a che trovi la centratura:

Codice: [Seleziona]

width: 1024px !important;

[Privilege]

Seguendo le tue istruzioni sono riuscito a centrarlo alla perfezione impostando "width: 1180px". Resta un'ultimissima correzione al background, perchè lo sfondo dell'header (quello di colore beige per intenderci) è rimasto spostato a sinistra, lasciando a destra il bianco (credo vada corretto uniformandolo al main).
Cmq ti ringrazio tantissimo...

[Privilege]

Risolto: alla riga 41 ho cambiato il width:100% conformandolo a quanto avevo impostato nel main ovvero  width: 1180px.


E' la prima volta che risolvo qualcosa ... come faccio a mettere risolto nell'oggetto? non mi fa scrivere nulla!!


Grazie 

[Privilege]

Errata corrige: in realtà non ho risolto, perchè mi sono reso conto che se lascio il topground con width: 100% ottengo una larghezza che, seppure fluida, è tuttavia ancorata a qualcosa che impedisce che lo sfondo beige riempia tutto lo schermo, lasciando il bianco a destra.


Viceversa se imposto width: 1180px (uniformandolo al main), come ho fatto prima, ottengo che si allarga lo sfondo beige (con l'apparenza di risolvere nella finestra rimpicciolita), ma non oltre il parametro fisso impostato, sicchè con un monitor più grande, ovvero allargando la finestra, si vede sempre il bianco a destra.


Come faccio a rendere il topground adattabile come ho fatto col main?


Per comodità riscrivo il sito per far vedere l'ultima modifica:


www.studiolegalebv.it


Thanks

[BelinBelan]

ciao! visto che hai fatto "30" prova a fare "31".. io ho misurato in px e mi da come larghezza da colonna colonna il valore di 1062 px...


se provi ad aggiornare il css con quest'ultimo valore risolvi? 

[Privilege]

ciao! visto che hai fatto "30" prova a fare "31".. io ho misurato in px e mi da come larghezza da colonna colonna il valore di 1062 px...


se provi ad aggiornare il css con quest'ultimo valore risolvi? 

Come puoi leggere sopra, avevo impostato il width a 1180px, ma ingrandendo la pagina ancora non riuscivo a riempire tutta la pagina del mio monitor,quindi credo che 1062 non sia sufficiente.


Credo che si debba inserire qualche codice che, entro certi parametri massimi (che ignoro) renda il background fluido. Mi è parso di capire che la percentuale serva a questo (width: 100% potrebbe quindi andare bene se facesse allargare di più il topground).


   

[adottauncane]

Ma... se ho capito quello che vuoi dire prova a mettere center top qui:
    background-position: 0 0;

Codice: [Seleziona]

.topground {    background-attachment: scroll;    background-clip: border-box;    background-color: #CCCCCC;    background-image: url("../images/headerbg.jpg");    background-origin: padding-box;    background-position: center top;    background-repeat: repeat;    background-size: auto auto;    height: 400px;    position: absolute;    width: 100%;}
style.css riga 41

[Privilege]

Ma... se ho capito quello che vuoi dire prova a mettere center top qui:
    background-position: 0 0;

Codice: [Seleziona]

.topground {    background-attachment: scroll;    background-clip: border-box;    background-color: #CCCCCC;    background-image: url("../images/headerbg.jpg");    background-origin: padding-box;    background-position: center top;    background-repeat: repeat;    background-size: auto auto;    height: 400px;    position: absolute;    width: 100%;}
style.css riga 41

Niente da fare    [size=78%]ho copiato e incollato il tuo codice nella riga 41, ma porta sempre la fascia bianca a destra. [/size]

[size=78%]Praticamente il problema non si nota a tutto schermo, ma solo quando rimpicciolisci la finestra del browser, fino a portarla a tipo 8-10" e, scorrendo la barra di spazio sottostante, vai a vedere il margine destro del sito (dov'è il modulo "cerca" per intenderci). A quel punto puoi vedere che il beige dell'header si  interrompe all'altezza delle immagini in sequenza e inizia la parte bianca.[/size]

[size=78%]Spero di essere riuscito a spiegare meglio quello che volevo dire.  [/size]

[adottauncane]

A. Allora togli l'immagine di lì e mettila qui:

Codice: [Seleziona]

body {    -moz-font-feature-settings: normal;    -moz-font-language-override: normal;    -x-system-font: none;    background-attachment: scroll;    background-clip: border-box;    background-color: transparent;    background-image: url("../images/headerbg.jpg");    background-origin: padding-box;    background-position: 0 0;    background-repeat: repeat-x;    background-size: auto auto;    color: #474747;    font-family: Georgia,"Times New Roman",Times,serif;    font-size: 62.5%;    font-size-adjust: none;    font-stretch: normal;    font-style: normal;    font-variant: normal;    font-weight: normal;    line-height: 1.2;}style.css riga 33

[Privilege]

A. Allora togli l'immagine di lì e mettila qui:

Codice: [Seleziona]

body {    -moz-font-feature-settings: normal;    -moz-font-language-override: normal;    -x-system-font: none;    background-attachment: scroll;    background-clip: border-box;    background-color: transparent;    background-image: url("../images/headerbg.jpg");    background-origin: padding-box;    background-position: 0 0;    background-repeat: repeat-x;    background-size: auto auto;    color: #474747;    font-family: Georgia,"Times New Roman",Times,serif;    font-size: 62.5%;    font-size-adjust: none;    font-stretch: normal;    font-style: normal;    font-variant: normal;    font-weight: normal;    line-height: 1.2;}style.css riga 33

La riga 33 l'ho sostituita con la tua e dalla riga 41 ho tolto solo la stringa "[size=78%]background-image: url("../images/headerbg.jpg")". L'effetto è che modificando la riga 33 non cambia nulla in termini di fascia bianca a destra, ma togliendo l'immagine dalla riga 41 si toglie completamente il beige diventando tutto bianco. Ho provato anche ad eliminare tutta la riga 41, visto che ho notato che è interamente riportata nella riga 33, ma l'effetto è sempre il bianco in tutto lo schermo. [/size]
[size=78%]Preciso che questo è quello che vedo con Firebug. Ma a questo punto mi viene un dubbio... Tu non dovresti vedere quello che vedo anch'io con firebug?[/size]

[Privilege]

Nessuna soluzione?

[adottauncane]

Quella che ti ho scritto. Togli tutto quello relativo al background dove è ora, anche lo sfondo grigio, e copia e sostituisci completamente il body. Vedrai che funziona.

[Privilege]

Avevi ragione ...ho fatto esattamente come hai detto e ora va benissimo.
Tra un po' lo pubblico!!
Grazie infinite !!