Background css

[ivanisevic82]

Ciao ragazzi, ho bisogno di un aiuto.
Premetto che mi sono avvicinando da poco e comincio a comprendere solo adesso il funzionamento di base del css.

Ho creato la struttura di basel del mio sito: sarà con 3 colonne a larghezz fissa.

Ho inserito uno sfondo che faccia da background (quello che vedrete è solo indicativo, così come tutto il resto, il sito è ancora privo di contenuti) ma ho un problema.

Quando cambio le dimensioni della finestra e quindi visualizzo il sito con risoluzioni inferiori a quelle per cui il sito è stato pensato (minimo 1024) lo sfondo si deforma.

E' difficile da spiegare, meglio che gli date un occhiata, stringendo la finestra e scorrendo all'estrema destra del sito:
www.ivanisevic82.netsons.org

Il risultato che vorrei ottenere apportando le correzioni opportune, è equivalente a quello che si ha qui su html.it

Il codice che uso attualmente per lo sfondo è questo:

body{
text-align: left;
background-repeat:repeat-y top center;
background-image: url(light_body.gif);
background-position: center;
}

Cosa sbaglio?

Grazie per l'aiuto, ciao!

[fcaldera]

sbagli a voler ancorare al centro uno sfondo
ti devi creare un div di larghezza prefissata, centrarlo (e ci sono già discussioni sul forum in merito), metterci i tuoi contenuti e poi dargli quel background con position: top left

[ivanisevic82]

Nel template che sto creando c'è un div che determina la larghezza totale del sito e che richiama a questa parte del css:

#container{
width: 960px;
margin: 0px auto;
text-align: left;
}

Io l'immagine e la posizione top legt devo inserirla lì?

Ho provato a fare così:

#container{
width: 960px;
margin: 0px auto;
text-align: left;
background-image: url(light_body.gif);
background-position: top left;
}

Ma non funziona...

Sbaglio qualcosa?

Grazie!

[Raccoon29]

Io personalmente utilizzerei un altro approccio; io te lo espongo, poi decidi tu se seguirlo o no, ci mancherebbe.

Elenco una serie di modifiche, fai una copia di backup del tuo lavoro poi segui le modifiche, e dimmi se ti piace ugualmente oppure no:

1) Togliere la dicitura "background-image" da "body" ( quindi anche "background-position" che ora è inutile)
2) Aggiungi in body:

body{
   ...
   background-color: silver;
   margin: 0;
}

3) Aggiungi in container

#container{
   ...
   background-color: white;
   padding-top: 8px;

Ecco fatto. Ripeto, è solo un'opinione, magari avrai avuto le tue ragioni per fare così.

Il tuo problema è che come tu rimpicciolisci la finestra, il fuoco del centro si sposta verso sinistra, perciò anche l'immagine di sfondo si sposterà a sua volta, in modo da posizionare le scritte sul grigio, tutto ciò perché hai centrato lo sfondo (come ha giustamente detto fcaldera).
Nel modo che ti ho illustrato non costringi al caricamento dell'immagine di sfondo e non hai il problema di lato. L'unico neo è che in altezza dovrai dichiarare l'altezza con "height" dal momento che l'altezza dei float non viene considerata nel computo dell'altezza del div padre, cosicché le scritte vadano a finire nel nulla.


Infine in alternativa, se sei smaliziato e vuoi soluzioni rapide benché non perfette
puoi sempre decidere di aggiungere un

body{
   ...
   background-attachment: fixed;
}

per evitare che salti fuori il grigio scuro quando scrolli in orizzontale ( ma ti consiglio la mia comunque ).

PS: la soluzione con immagine dietro sarà soggetta ad errori anche quando visualizzerai la pagina su di un schermo wide 16:9, cioé anche in caso contrario (dallo stringere allo allargare)

buona fortuna
hth
ciauz

[ivanisevic82]

Ti ringrazio per la risposta chiara e articolata!

Mi dispiace di averti indotto in errore, lo sfondo non è fatto di semplici colori, come puoi vedere in quella che allo stato attuale è semplicemente una prova.
In realtà sarà un immagine che avrà anche un effetto ombra ai lati, quindi non posso usare dei semplici colori, ma devo necessariamente caricare un immagine.

Devo farlo caricando "background-attachment: fixed;" oppure ci sono altri metodi migliori?

Altra cosa: non sono affatto esperto di html, css, ecc...
Sono riuscito a crearmi un struttura di base della pagina web con tanta fatica, facendo mille tentativi e cominciando a intuire poco a poco il funzionamento reale delle cose.
Dopo aver risolto il problema del background dareste un occhiatina al mio template?

E' composto da una parte php e una css...sono sicuro che ci saranno un sacco di parti sovrabbondanti che ho aggiunto e che in realtà non servono...mi servirebbe una mano per dare una sfoltita e alleggerire tutto!

Grazie mille!

[Raccoon29]

Uhm, capisco, sì allora se ci sono le ombre l'immagine ci vuole

Perdonami, ma penso che non sia comunque la strada migliore, perché come ti ho detto nel caso in cui tu visualizzi il sito su di un schermo wide, salterà probabilmente di nuovo il problema; l'errore di fondo è che tra l'immagine di sfondo e la sua posizione e la scritta, non c'è alcun vincolo, perciò sei sempre nel rischio di avere un bug grafico (probabile) ad ogni diversa dimensione dello schermo che lo visualizza.

Allora ti presento un'altra soluzione articolata che utilizza l'immagine e che è più stabile e sicura, poi mi dici se ti va bene (il concetto stavolta è di costringere lo sfondo al "container" piuttosto che al "body"):

l'HTML è il medesimo, mentre il CSS ha queste variazioni (rispetto al tuo codice attuale: quello in rosso va eliminato, quello in verde va aggiunto, spero che non sei daltonico :-P ):

body{
   text-align: left;
   
   background-attachment: fixed;
   background-image: url(.....);
   background-position: center;
    
   margin: 0;
   background-color: silver; /* io ho scritto "silver" ma dovresti metterci il colore con cui termina l'ombreggiatura */
}

#container{
   
   background-image: url(/media/light_body.gif);
   background-position: center;
   padding: 5px 50px;
   
   margin: 0px auto;
   text-align: left;
   width: 960px;
}

E il solito discorso dell'altezza con i float.
Ha un che di professionale così, vero?
Chiaramente tutto quello che ho fatto è stato spostare lo sfondo dal body al div contenitore. Ora il vincolo di cui abbiamo bisogno per non far uscire le scritte sul grigio c'è.
Ah inoltre così avresti anche la possibilità di aggiungere un'ombra sotto al contenitore, ancora più scena!
Così dunque che te ne pare?

hth
ciauz

[ivanisevic82]

Grazie, sei stato gentilissimo, adesso è davvero perfetto!
E poi grazie al tuo aiuto ho imparato delle cose utili che potranno essermi utili per il futuro...

Dato che ci sono posto anche il resto del codice, però non voglio essere stressante, rispondi pure con calma e quando hai tempo, vorrei sapere quali sono le parti inutili, superflue o che appesantiscono senza creare vantaggi.

Considera che mi ho usato com base template prefatti, a cui ho cambiato praticamente quasi tutto...
L'introduzione che trovi nel php per esempio è quella che trovi scritta in un tutti i template per websitebaker (il cms che utilizzo e per il quale sto costruendo il template il questione).

Ancora devo terminare, per ora c'è solo la struttura di base...

Devo ancora inserire il footer; un linear menu; creare la struttura grafica dei "tasti" del menu, ecc...

Qui c'è la parte php:

 Website Baker is free software; you can redistribute it and/or modify
 it under the terms of the GNU General Public License as published by
 the Free Software Foundation; either version 2 of the License, or
 (at your option) any later version.

 Website Baker is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 GNU General Public License for more details.

 You should have received a copy of the GNU General Public License
 along with Website Baker; if not, write to the Free Software
 Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA

*/

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title><?php page_title(); ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=<?php if(defined('DEFAULT_CHARSET')) { echo DEFAULT_CHARSET; } else { echo 'utf-8'; }?>" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link href="<?php echo TEMPLATE_DIR; ?>/screen.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>

<div id="container">
	
<div id="header" class="width" align="center">
    [img]/media/header.jpg[/img]
</div>

<div id="navigation"> <td class="leftside"> 	
              
              <?php show_menu2(); ?> 
</div>

<div id="extra"> <td class="content (2)> 
              
              <?php page_content(2); ?>	
</div>

<div id="content"> <td class="content (1)>                            
            
              <?php page_content(1); ?>


</div>
</body>

E qui quella css:

@charset "utf-8";
/* CSS Document */


body{
text-align: left;
margin: 0;
background-color: #d4d3d3;
}

#container{
background-image: url(/media/light_body.gif);
background-position: center;
padding: 5px 40px;
width: 960px;
margin: 0px auto; 
text-align: left; 
}

#navigation{
float: left;
width: 160px;
width:170px;
width:160px;
}

#extra{ 
float: right;
width: 160px;
width: 170px;
width: 160px;
}

#content{
margin: 0 180px;
}

C'è una cosa che vorrei fare da subito: vorrei spostare il menu di sinistra più a sinistra (parte troppo avanti)...sai come posso fare?

Grazie per il supporto e scusa per il post valanga, ciao!

[Raccoon29]

Ehm, scusa una cosa, non so se magari son tutte accortezze dovute al trascrizione qui sul forum dell'HTML ma... io noto diversi problemi ed anche particolarmente gravi (nel senso che dovrebbero far saltare la pagina)... vado col listarli, poi mi fai sapere:

1_

<div id="container">
   ...

2_
utilizzi un paio di volte la classe "content" con una sintassi che non mi pare esista in HTML:

<... class="content (2)>
...
<... class="content (1)>

quegli (1) e (2) non li capisco, inoltre non chiudi le virgolette

3_
nello stesso punto di "content (2)" ed altri, utilizzi varie volte il <td> ma non vedo nessuna tabella (come saprai <td> è il TableDescription, rappresenta, diciamo, le colonne della tabella),
quindi che c'entra?
Di norma:

<table>
   <tr>
      <td>Cella</td>
   </tr>
</table>

Fammi sapere.

Per quanto riguarda quello spazio ti basterebbe ridurre il padding della lista alla sua sinistra, qualcosa come

ul{
   padding-left: 5px;
}

anche se il test preciso non l'ho potuto fare, perché il tuo codice richiama funzioni PHP che non ho ma su per giù... comunque dovrebbe funziare.

hth
ciauz

[ivanisevic82]

1) E' vero! Me ne sono accorto proprio ora...l'ho corretto, ma non è cambiato niente...com'è che funzionava??

2) Quella sintassi è tipica di websitebaker, il cms che uso.
In pratica mi consente di dividere in blocchi separati la pagina.
Nel caso specifico nel "content (1)" c'è la colonna centrale dei contenuti, e nel 2 la colonna extra di destra.
Di volta in volte le riempio di contenuti attraverso l'editor del mio cms.
Ho trovato la guida qui.
http://help.websitebaker.org/pages/e...ent-blocks.php

3) In effetti non mi ricordo da dove è venuto fuori "td"...
Secondo te al posto di "td class=" che devo mettere?
EDIT: Ho provato con "class" da solo e funziona...va bene?

4) Ma...in questo momento non c'è padding, come faccio a ridurlo?
Forse non ho ben chiaro come funziona il padding...

Sono ignorantissimo!

Grazie mille per il tuo supporto!

[Raccoon29]

Ciao,

allora, uno per uno...

1_ Probabilmente è da ricondurre all'intelligenza dei browser (stai usando Firefox?) che quando vedono che manca un fine tag, lo interpretano e lo mettono loro. Ad ogni modo una chiusura di tag mancante non ti valida il codice.

2_ ...ubi maior ...

3_ Beh di un class da solo messo lì non si è mai sentito... sinceramente non so quale sia lo scopo di quei <td> (che peraltro noto ora che non sono nemmeno chiusi). Puoi provare ad aprire e chiudere un "div" con quella classe, oppure uno "span" qualcosa del tipo:

<div class="container" />

4_ Fai attenzione a quello che ti ho detto: io ho detto che ti consiglio di ridurre il padding della lista! Tu non hai messo del padding, ed infatti non c'è, solo che la lista, in questo caso <ul>, per poter aggiungere i pallini, ha bisogno di spostare le scritte più a destra, e per far ciò si serve del padding. Chiaro ora?
Perciò quello che andrai a fare tu sarà una cosa del tipo:

ul{
   padding-left: 5px; /* o addirittura 0px */
}

Se vuoi una riprova che possa rendere la cosa più chiara, inserisci una qualche scritta giusto PRIMA della lista, nello stesso "div": vedrai che la scritta sarà spostata più a sinistra degli stessi pallini della lista.
Spero sia chiaro, è un argomento un po' ostico.

Vorrei infine avvertire che stiamo finendo di gran lunga off-topic, quindi forse è il caso di chiuderla... se vuoi ulteriori delucidazioni, a fianco c'è il mio indirizzo MSN, lì ti posso spiegare tranquillamente queste cose (che sono piuttosto basilari).

hth
ciauz