Aiutamici Forum
Benvenuto Ospite Cerca | Topic Attivi | Utenti | | Log In | Registra

[RISOLTO] centrare un'immagine sullo sfondo Opzioni
pollonia
Inviato: Friday, October 29, 2010 9:44:53 PM
Rank: AiutAmico

Iscritto dal : 10/15/2010
Posts: 68
ciao

eccomi con un'altro quesito...



quello che vedete....è solo a scopo di esempio
lo sfondo in azzurro sottostante e stato fatto con una piccola immagine e poi duplicata
in sovrapposizione a questo, all'interno di un div ho inserito l'altra immagine
che vedete sopra,la risoluzione è di 1024x768,quello che non capisco! come mai
impostando la risoluzione del mio monitor a 1024 mi trovo le barre di scorrimento
sia verticali che orizzontali? mentre se lascio impostato a 1440x900 le barre non ci sono...
c'è un sistema per poter visualizzare le pagine web intere a qualunque risoluzione, senza
quelle fastidiosissime barre di scorrimento?

grazie
ciao

Sponsor
Inviato: Friday, October 29, 2010 9:44:53 PM

 
ecofive
Inviato: Friday, October 29, 2010 10:00:45 PM

Rank: AiutAmico

Iscritto dal : 6/20/2008
Posts: 7,111
Ogni monitor ha una risoluzione predefinita, es. 1024X768 (è quella dello schermo LCD da 15"). Se ciò che hai messo nella tua pagina web supera (come dimensioni) la risoluzione dello schermo, ti appaiono inevitabilmente le barre di scorrimento.
Uno dei sistemi per evitare questo inconveniente consiste nel costruire le pagine web in una tabella (con una sola cella) di larghezza predefinita: attualmente 1000 pixel vanno abbastanza bene (anche se chi ha un vecchio monitor CRT da 15" con risoluzione di 800X600 pixel vedrà le famigerate barre). Se non vuoi usare le tabelle, lo stesso risultato puoi ottenerlo con i CSS.
Certamente Wubullo ti saprà dare altre utili indicazioni. Quello che non ho capito è cosa c'entra centrare uno sfondo ...

Ciao.
pollonia
Inviato: Friday, October 29, 2010 10:26:04 PM
Rank: AiutAmico

Iscritto dal : 10/15/2010
Posts: 68
hemm...corretto il titolo della discussione Whistle

la risoluzione del mio monitor è 1440 ;)

infatti quel problema a chi ha i vecchi monitor con
risoluzione 800 sarà ancora peggio...ma chi ha ancora
monitor così piccoli....! ;)
ho trovato molti siti che a qualunque risoluzione imposti il monitor
vedi sempre le pagine belle centrate e senza barre...
avranno fatto un miracolo!? :))) scherzoo!!
magari impostando qualcosa nel codice....sentiamo Wubullo!
che di codice se ne intende ;)

ciao
ecofive
Inviato: Friday, October 29, 2010 10:41:12 PM

Rank: AiutAmico

Iscritto dal : 6/20/2008
Posts: 7,111
wubullo
Inviato: Saturday, October 30, 2010 2:43:36 PM

Rank: AiutAmico

Iscritto dal : 12/9/2009
Posts: 345
Cari amici,
la vostra fiducia nei miei consigli mi lusinga! Temo però che mi sopravvalutiate... Anxious Anxious Anxious

Per venire alla domanda di pollonia, la questione è abbastanza semplice. Il layout generale di un sito è regolato da due parametri CSS: le regole assegnate al tag <body> e quelle assegnate a un'altra sezione, che normalmente viene chiamata <div id="container">.

Vediamo il problema più da vicino:

Code:
<!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" dir="ltr" lang="it-IT">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Questa &egrave; una pagina di prova</title>
<link type="text/css" rel="stylesheet" media="screen" href="http://www.miosito.it/css/style.css" />
</head>

<body>
<div id="container">   <!-- Qui inizia il riquadro che contiene tutta la pagina del nostro sito -->
<div id="header">      <!-- Qui inizia il riquadro che contiene la testata del nostro sito -->
</div>                     <!-- Qui FINISCE il riquadro che contiene la testata del nostro sito -->
<div id="nav">          <!-- Qui inizia il riquadro che contiene il menu di navigazione del nostro sito -->
</div>                     <!-- Qui FINISCE il riquadro che contiene il menu di navigazione del nostro sito -->
<div id="content">     <!-- Qui inizia il riquadro che contiene il corpo del testo principale del nostro sito -->
</div>                     <!-- Qui FINISCE il riquadro che contiene il corpo del testo principale del nostro sito -->
<div id="footer">       <!-- Qui inizia il riquadro che contiene il piè di pagina del nostro sito (di solito, ci sono i credits) -->
</div>                     <!-- Qui FINISCE il riquadro che contiene il piè di pagina del nostro sito (di solito, ci sono i credits) -->
</div>                     <!-- Qui FINISCE il riquadro che contiene tutta la pagina del nostro sito -->
</body>
</html>


Le regole CSS assegnate al tag <body>, se dotate di qualche piccolo accorgimento, conferiscono alla pagina un formato compatibile con qualunque risoluzione del browser. Nel nostro caso:

Code:
body {
background:transparent url('sfondo-piccolo.gif') repeat scroll center; /* Tutte le proprietà di background in un'unica dichiarazione! */
text-align:center;
margin:0;
padding:0 0 20px 0;
font-family:Arial, Helvetica, sans-serif;
font-size:0.8em;
color:#000000;
}


A questo punto nascono i problemi. Se al <div id="container"> ora vogliamo assegnare una dimensione e un'immagine di sfondo, dovremo tener presente che qui la risoluzione dello schermo diventa un fattore. Normalmente si risolve così:

Code:
#container {
width:850px; /* LA SOLUZIONE */
height:550px; /* LA SOLUZIONE */
margin: 20px auto 20px auto; /* Questa dichiarazione è importantissima! */
padding:5px;
text-align:left;
background: transparent url('sfondo-centrale.gif') no-repeat scroll center;
/* Volendo, si può circoscrivere il <div> entro un bordo --> border:3px solid #000000;  */


Ho assegnato al container una larghezza di 850px e un'altezza di 550px; va da sé che a questo punto anche l'immagine che uso da sfondo dovrà avere le stesse dimensioni. Questo accorgimento risolve i problemi per tutti i monitor con risoluzione fino a 1024X768.
Per adattare il riquadro anche ai monitor più piccoli, si dovrà ridurre l'ampiezza del container (e di conseguenza dell'immagine di sfondo ad esso assegnata) fino a 790px.

Ma... Ne vale la pena? d'oh!

Un buon sito normalmente ha un container dell'ampiezza di 900 / 950 px (più piccolo, il contenuto diventa sacrificato). Chi non si rassegna ad abbandonare la risoluzione 800X600 dovrà usare lo scroller, ma - secondo me - è un problema suo! Drool Drool

Spero di non aver creato confusione e di aver fornito una risposta utile. Qualora non dovesse essere così, rimango a tua disposizione!

A presto,


ecofive
Inviato: Saturday, October 30, 2010 4:14:49 PM

Rank: AiutAmico

Iscritto dal : 6/20/2008
Posts: 7,111
Bravo Wubullo.
Per Pollonia aggiungo che le risoluzioni più usate (80-90 % delle volte) sono ormai 1280X1024 e 1024X768. La percentuale di chi ha schermi da 800X600 pixel è bassissima, anche perché si tratta dei vecchi monitor CRT.

Ciao.
wubullo
Inviato: Saturday, October 30, 2010 4:41:27 PM

Rank: AiutAmico

Iscritto dal : 12/9/2009
Posts: 345
ecofive ha scritto:
le risoluzioni più usate (80-90 % delle volte) sono ormai 1280X1024 e 1024X768. La percentuale di chi ha schermi da 800X600 pixel è bassissima, anche perché si tratta dei vecchi monitor CRT.


Per la cronaca: io uso addirittura la risoluzione 1280X800px!
maopapof
Inviato: Saturday, October 30, 2010 4:56:56 PM

Rank: AiutAmico

Iscritto dal : 10/31/2004
Posts: 7,026
@wubullo ... --- > è possibile vedere in praticacome funziona il codice .... a livello prova ? grazie

wubullo
Inviato: Saturday, October 30, 2010 5:12:11 PM

Rank: AiutAmico

Iscritto dal : 12/9/2009
Posts: 345
maopapof ha scritto:
@wubullo ... --- > è possibile vedere in pratica la funzione del codice .... a livello prova ? grazie


Ciao maopapof!

In realtà questo esempio non esiste da nessuna parte: l'ho scritto di getto, a mo' di esempio.

Se vuoi puoi creartelo in locale!

1) Incolla questo codice in un editor HTML (testuale) o in un file di "Blocco note" e salvalo con estensione .htm:
Code:
<!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" dir="ltr" lang="it-IT">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Questa &egrave; una pagina di prova</title>
<link type="text/css" rel="stylesheet" media="screen" href="style.css" />
</head>

<body>
<div id="container">   <!-- Qui inizia il riquadro che contiene tutta la pagina del nostro sito -->
<div id="header">      <!-- Qui inizia il riquadro che contiene la testata del nostro sito -->
</div>                     <!-- Qui FINISCE il riquadro che contiene la testata del nostro sito -->
<div id="nav">          <!-- Qui inizia il riquadro che contiene il menu di navigazione del nostro sito -->
</div>                     <!-- Qui FINISCE il riquadro che contiene il menu di navigazione del nostro sito -->
<div id="content">     <!-- Qui inizia il riquadro che contiene il corpo del testo principale del nostro sito -->
</div>                     <!-- Qui FINISCE il riquadro che contiene il corpo del testo principale del nostro sito -->
<div id="footer">       <!-- Qui inizia il riquadro che contiene il piè di pagina del nostro sito (di solito, ci sono i credits) -->
</div>                     <!-- Qui FINISCE il riquadro che contiene il piè di pagina del nostro sito (di solito, ci sono i credits) -->
</div>                     <!-- Qui FINISCE il riquadro che contiene tutta la pagina del nostro sito -->
</body>
</html>


2) Incolla questo codice in un editor HTML (testuale) o in un file di "Blocco note" e salvalo col nome style.css:
Code:
body {
background:transparent url('sfondo-piccolo.gif') repeat scroll center; /* Tutte le proprietà di background in un'unica dichiarazione! */
text-align:center;
margin:0;
padding:0 0 20px 0;
font-family:Arial, Helvetica, sans-serif;
font-size:0.8em;
color:#000000;
}

#container {
width:850px; /* LA SOLUZIONE */
height:550px; /* LA SOLUZIONE */
margin: 20px auto 20px auto; /* Questa dichiarazione è importantissima! */
padding:5px;
text-align:left;
background: transparent url('sfondo-centrale.gif') no-repeat scroll center 5px;
border:3px solid #000000;
}


3) A questo punto, non ti rimane che:
- utilizzare un'immaginetta qualunque per lo sfondo del <body> (attenzione: si ripeterà in orizzontale e in verticale!) modificando questo valore: background:transparent url('nomefile.estensione');
- utilizzare un'altra immagine per lo sfondo del <div id="container">. A seconda della dimensione e del nome di questa immagine, dovrai agire sui parametri: width:larghezza dell'immagine in pixel; - height:altezza dell'immagine in pixel; - background: transparent url('nomefile.estensione').

N.B.: file .htm, file .css e immagini dovranno essere contenute tutte nella stessa cartella (per esempio: "prova_sito").

Per altre curiosità, sono a tua disposizione.

A presto,


maopapof
Inviato: Saturday, October 30, 2010 5:30:06 PM

Rank: AiutAmico

Iscritto dal : 10/31/2004
Posts: 7,026
@wubullo.... grazie ... provo ... ci mancava proprio una persona disponibile come @eco .... complimenti :O)

posterò in sezione html un mio personale problema ... www.ammortizzatori-maudar.com ( da 800 apache/flash corretto w3c ok )

spero che mi possiate aiutare ciao grazie ed a presto:O)

wubullo
Inviato: Saturday, October 30, 2010 5:33:59 PM

Rank: AiutAmico

Iscritto dal : 12/9/2009
Posts: 345
Mao, non c'è di che!

Ho guardato il sito e ho già visto il problema (sarà complicato, ma forse riusciremo a venirne fuori!). Ci sentiamo su un nuovo topic.

Ciao!
pollonia
Inviato: Wednesday, November 03, 2010 12:51:11 PM
Rank: AiutAmico

Iscritto dal : 10/15/2010
Posts: 68
finita la breve vacanza....si torna al lavoro! Whistle

ecofive... scusami, ho inserito un esempio non proprio appropriato,quello a cui mi riferivo è un'unica immagine, senza colonne, però sempre
con uno sfondo sottostante.
per quanto riguarda la risoluzione dello schermo,infatti oramai 800x600 andrà a scomparire,però realizzando anche
una pagina da 1024 (come sto facendo io...) e si ha un monitor con risoluzioni da 1200 in sù,ci si trova la pagina
spostata tutta sulla sinistra e un bruttissimo spazio bianco sulla destra che compensa lo spazio mancante a tale risoluzione
per questo motivo volevo centrare l'immagine, ma allo stesso tempo che rimanesse sempre
centrata a qualunque risoluzione si ha il monitor.grazie anche a te per le dritte! :)

wubullo....grande come sempre... ;)
grazie per le "lezioni" di HTML ;) ne farò tesoro!
scrivi che è un esempio....per cui non posso copiarlo nel mio codice?
ti posto quì direttamente il mio codice con le impostazioni della mia pagina
così si capisce meglio,e magari può servire a qualcun'altro! :)

ciao


wubullo
Inviato: Wednesday, November 03, 2010 12:57:47 PM

Rank: AiutAmico

Iscritto dal : 12/9/2009
Posts: 345
pollonia ha scritto:
realizzando anche
una pagina da 1024 (come sto facendo io...) e si ha un monitor con risoluzioni da 1200 in sù,ci si trova la pagina
spostata tutta sulla sinistra e un bruttissimo spazio bianco sulla destra che compensa lo spazio mancante a tale risoluzione
per questo motivo volevo centrare l'immagine, ma allo stesso tempo che rimanesse sempre
centrata a qualunque risoluzione si ha il monitor.grazie anche a te per le dritte!


Code:
#container {
width:850px; /* LA SOLUZIONE */
height:550px; /* LA SOLUZIONE */
margin: 20px auto 20px auto; /* Questa dichiarazione serve per centrare la <div>! */
padding:5px;
text-align:left;
background: transparent url('sfondo-centrale.gif') no-repeat scroll center 5px;
border:3px solid #000000;
}


Guarda cosa ti ho scritto alla voce margin...

pollonia ha scritto:
scrivi che è un esempio....per cui non posso copiarlo nel mio codice?


Puoi anche copiarlo, a patto che cambi gli URL delle immagini, sennò non funziona!

pollonia ha scritto:
ti posto quì direttamente il mio codice con le impostazioni della mia pagina
così si capisce meglio,e magari può servire a qualcun'altro!


Rimango in attesa. Ciao!
pollonia
Inviato: Wednesday, November 03, 2010 9:18:29 PM
Rank: AiutAmico

Iscritto dal : 10/15/2010
Posts: 68

questo è il codice...
c'è uno sfondo poi ho inserito un div e ho richiamato all'interno l'immagine
e questa è spostata sulla sinistra (mentre dovrebbe stare centrata...)

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css">
<!--
body {
background-image: url(sfondo%20prova.jpg);
background-repeat: repeat;
}
#apDiv1 {
position:absolute;
left:223px;
top:11px;
width:850px;
height:550px;
z-index:1;

}
-->
</style></head>

<body>
<div id="apDiv1"><img src="immagine prova.jpg" width="1024" height="768" /></div>
</body>
</html>


ho provato ad inserirci il codice che hai scritto tu...ma non succede niente!
probabilmente non lo inserisco nel posto giusto.

un'ultima cosa...mi potresti spiegare la differenza tra "div" e "div pa" io uso di solito il "div pa"
poi magari sbaglio...

grazie
ciao
ecofive
Inviato: Wednesday, November 03, 2010 9:38:32 PM

Rank: AiutAmico

Iscritto dal : 6/20/2008
Posts: 7,111
Per i div PA vedi qui:
http://help.adobe.com/it_IT/Dreamweaver/10.0_Using/WScbb6b82af5544594822510a94ae8d65-7e14a.html

Mi pare però che ti stia infognando con i codici. Per avere un'immagine centrata basta questo codice (è un esempio):
<div style="text-align: center;"><img style="width: 538px; height: 422px;" alt="" src="cartella/immagine.jpg"></div>

Ciao.
pollonia
Inviato: Thursday, November 04, 2010 12:59:51 PM
Rank: AiutAmico

Iscritto dal : 10/15/2010
Posts: 68
mi sà che hai ragione! stò diventando matta con il codice (certo che voi siete dei geni a capirlo ;) )
ma d'altronde, se non lo capisci non fai niente, solo con la grafica come stò facendo io non risolvo nulla...

non stò risolvendo niente...l'immagine stà sempre sulla sinistra e se si centra, inserendo il vostro codice...e andando poi a impostare il monitor a 1024
in fondo c'è la barra di scorrimento Brick wall
uff...non capisco dove sbaglio!!

ciao
wubullo
Inviato: Thursday, November 04, 2010 3:58:09 PM

Rank: AiutAmico

Iscritto dal : 12/9/2009
Posts: 345
Ciao pollonia!

Mi spiace, ma questa volta devo darti una tiratina di orecchi: non mi hai dato molto retta! Shame on you Shame on you Shame on you

Di tutte le cose che ti avevo scritto non vedo traccia nel codice che hai postato.... Not talking

Riproviamo:

Code:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css">
<!--
body {
background-image: url('sfondo_prova.jpg');
background-repeat: repeat;
}

#apDiv1 {
width:???px;
height:???px;
margin: 20px auto 20px auto; /* Questa dichiarazione serve per centrare la <div>! */
padding:5px;
background: transparent url('immagine_prova.jpg') no-repeat scroll center 5px;
}
-->
</style></head>

<body>
<div id="apDiv1"></div>
</body>
</html>


Per prima cosa, rinomina i file immagine inserendo gli underscore al posto degli spazi.
Mi ero poi premurato di dirti che il background di una <div> interna al <body> deve essere 900 / 950 px, non già di suo 1024!
Inoltre, se dai a una <div> un posizionamento assoulto (come avevi scritto: position:absolute;) ogni browser interpreterà il posizionamento a suo modo, tanto più se dai come istruzione left:223px;, che - come sai - significa "posiziona a 223px dal margine sinistro"...
Ancora: dove stanno le istruzioni per margin?!?!?

Per concludere: ridimensiona la tua "immagine_prova.jpg" a 900 / 950 px di larghezza, riprova con questo nuovo codice che ti ho postato sostituendo a width:???px; e height:???px; la dimensione di "immagine_prova.jpg" (dopo appunto averla ridimensionata).

Se hai dubbi, siamo qua.

A presto.
ecofive
Inviato: Thursday, November 04, 2010 4:52:21 PM

Rank: AiutAmico

Iscritto dal : 6/20/2008
Posts: 7,111
Pollonia, ti lascio nelle abili mani di Wubullo; non voler però fare tutto e subito.

Ciao.
pollonia
Inviato: Thursday, November 04, 2010 6:34:26 PM
Rank: AiutAmico

Iscritto dal : 10/15/2010
Posts: 68
grazie ragazzi per la pazienza... ;)

wubullo... nel codice che ti ho postato non erano presenti le tue modifiche,
ma solo le mie operazioni basi,cioè! impostazione dello sfondo, creazione
del div e inserimento dell'immagine nel suo interno...scusami, non te l'avevo specificato Whistle
ad ogni modo...riprovo! ;)

ecofive....tranquì,non ho mai preteso di fare tutto subito,pensa... che a questo progetto ci stò
lavorando gia da due anni....più calma di così!! :)
e se sono ancora dietro è per merito delle persone come voi
che mi seguono e mi aiutano,altrimenti io avrei già mollato da tempo ;)
mi stò rendendo conto che è un progetto enorme e complicato
da seguire...però,per quanto difficile sia, mi appassiona e mi và bene così...non ho fretta! ;)

vi faccio sapere!

ciao
Utenti presenti in questo topic
Guest


Salta al Forum
Aggiunta nuovi Topic disabilitata in questo forum.
Risposte disabilitate in questo forum.
Eliminazione tuoi Post disabilitata in questo forum.
Modifica dei tuoi post disabilitata in questo forum.
Creazione Sondaggi disabilitata in questo forum.
Voto ai sondaggi disabilitato in questo forum.

Main Forum RSS : RSS

Aiutamici Theme
Powered by Yet Another Forum.net versione 1.9.1.8 (NET v2.0) - 3/29/2008
Copyright © 2003-2008 Yet Another Forum.net. All rights reserved.