centramento pagina: non me ne funziona uno!

kain

Utente Attivo
14 Apr 2010
67
0
0
ciao a tutti questo problema non lo riesco a risolvere con la rete eppure è un problema comune con centinaia di post in giro ma le varie soluzioni non mi funzionano, scusate l'argomento pluriBANNATO ma forse è colpa del mio css. al momento per centrare non c'è neanche più il magin 0 auto che tanto con Ie di win non funzionava
se avete tempo datemi qualche consiglio, buon lavoro o buon divertimento a tutti!

Codice:
@charset "utf-8";
body{font: 90% Verdena,sans-serif;text-align:center;color:white;
background: url("elements/bk.png") repeat-x fixed center bottom #3399FF;
}


#wrapper {text-align: left;}
#wrapper {



	position: absolute;
	height: 936px;
	width: 978px;
	top: -96px;
	
	
	
}
#menu {
	position: absolute;
	height: 210px;
	left: 1px;
	top: 69px;
	width: 978px;
}
#slide {
	position: absolute;
	height: 265px;
	left: 20px;
	top: 280px;
	width: 449px;
	
}
#slideslide {
	position: absolute;
	height: 265px;
	right: 20px;
	top: 280px;
	width: 449px;
	
}
#sx {
	position: absolute;
	height: 274px;
	left: 20px;
	top: 546px;
	width: 449px;
	
}	
#Dx {
	position: absolute;
	height: 274px;
	right: 20px;
	top: 546px;
	width: 449px;
	
}	
#footer {
	position: absolute;
	height: 108px;
	right: 2px;
	top: 825px;
	width: 976px;
	text-align:center
}
A:LINK{
text-decoration: none;
color: navy;
}

A:VISITED{
text-decoration: none;
color: green;
}

A:HOVER{
Color:#FFFFCC;
text-decoration: none;
}

A:ACTIVE{
COLOR: navy;
text-decoration: none;
}
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.046
150
63
PR
www.borgo-italia.it

kain

Utente Attivo
14 Apr 2010
67
0
0
quindi seguendo le dritte del link che hai postato devo solo iserire il mio wrapper qui dentro?

<div id="Box_Liquido">
contenuto ..........................
</div>

e fare lo stesso nel css lasciando i valori invariati ?

#Box_Liquido
{
position: Absolute;
top: 50%;
background-color: #DDDDDD;
width: 100%;
height: 250px;
margin: -125px, 0px, 0px, 0px;
}
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.046
150
63
PR
www.borgo-italia.it
ciao
....devo solo iserire il mio wrapper qui dentro?
dipende.
se il tuo wrapper rappresenta il contenitore no ( è il box wrapper che deve centrarsi), alttrimenti si.
verifica le varie position:, che nei div interni dovrebbero essere position:relative
es., se hai
<div id="Box_Liquido">
<div id="interno">
contenuto ..........................
</div>
</div>
il box interno deve avere position:relative (cioè relativo al box_liquido e non allo schermo)
come accennato io uso un div contenitore e all'interno metto gli altri vari div.
però io uso solo le dimensioni assolute in px (es. la mia home risulta "abbastanza" centrata in oriz che in vert)
 

kain

Utente Attivo
14 Apr 2010
67
0
0
il mio wrapper è il contenitore degli altri div ed al momento ha queste regole

Codice:
#wrapper {text-align: left;}
#wrapper {position: absolute;
	height: 936px;
	width: 978px;
	top: -96px;
	}
quello che ho fatto ieri è stato proprio mettere il wrapper dentro il div consigliato nel tuo link e ci ho appena riprovato ma non funziona.
c'è un sistema efficace per centrare questo sito.....oppure al diavolo i div il w3c è andiamo ad usare le table che almeno se gli dici allinea al centro stanno al centro?
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.046
150
63
PR
www.borgo-italia.it
ciao
prova in questo modo per centrarlo in orizzontale


Codice:
#wrapper {
	position: absolute;
	height: 936px;
	width: 978px;
	left: 50%;
	margin-left: -468px;/*metà della larghezza*/
	top: -96px;/* non capisco questo -96*/
	text-align: left;
	overflow:scroll;/*se vuoi che appaia in lo scroll*/
	}
se invece vuoi centrarlo in horiz e in vert
Codice:
#wrapper {
	position: absolute;
	height: 936px;
	width: 978px;
	left: 50%;
	top: 50%;
	margin-left: -468px;/*metà della larghezza*/
	margin-top:-489px;/*metà dell'altezza*/
	text-align: left;
	overflow:scroll;/*se vuoi che appaia in lo scroll*/
	}
poi devi mettere tutto (vari div, testi e/o immagini) dentro i tag <div id="wrapper">.....</div>
per veder se funzia fatti una semplice pag htm dando un colore di sfondo diverso tra il body e il wrapper, dovrebbe risultari un rettangolo colorato centrato.
anche se sono sicuro che funzi perchè nel mio sito (varie ver IE o FF) funzia
 

kain

Utente Attivo
14 Apr 2010
67
0
0
sono ritornato sul centramento ed inserendo
HTML:
}
div#wrapper {
width: 978px;
margin: 0 auto;
}

dove wrapper è il contenitore di tutti gli elementi ho ottenuto il centramento

mi chiedo però se devo centrare allo stesso modo gli altri div che ho all'interno perchè sono scritti così
}
#footer {
position: absolute;
height: 108px;
right: 2px;
top: 825px;
width: 976px;
text-align:center
}
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.046
150
63
PR
www.borgo-italia.it
ciao
se #footer è dentro il wrapper devi dargli
position: relative;/* oppure non indicare, se non ricordo male relative è di default */
poi se wrapper ha width: 978px;
e footer width: 976px;
right: 1px;/* (978-976)/2 = 1 */
 

kain

Utente Attivo
14 Apr 2010
67
0
0
Ciao grande Gatto grazie del responso, si il footer è all'interno del wrapper ed ha queste regole:
HTML:
#footer {
	position: absolute;
	height: 108px;
	right: 2px;
	top: 1395px;
	width: 976px;
	text-align:center;
	font-size:12px; Verdena,sans-serif;
	color:#FFFFFF;
quindi mi sembra di aver capito che devo solo dargli il relative e tutto va da se?
ho anche un'altra domanda perchè preso dall'estro mi sono permesso di aggiungere un div per mettere un'ombra sotto il footer con queste regole:

#bottom-shadow {background: url("sh.jpg") no-repeat fixed center bottom ;

HTML:
<div id="bottom-shadow">
<div id="wrapper">

    <div id="menu">contenuto del wrapper </div>( div di chiusura di <div id="bottom-shadow">)

può andare bene così?

purtroppo ho solo un monitor da 1024 x 768 e non posso fare test altrove se uso ctrl + lo scroll del mouse è attendibile come visualizzazione?
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.046
150
63
PR
www.borgo-italia.it
ciao
si devo solo dargli il relative poi "dovrebbe" andare a posto.
per la seconda domanda non ho capito bene
vuoi che il div menu abbia una immagine di sfondo?
se è così baste che tu nel css metta
Codice:
#menu{
/*................*/
background: url("sh.jpg") no-repeat fixed center bottom ;
/*.................*/
}
non ti serve fare un div aggiuntivo, tra l'altro se metti il div bottom-shadow dentro il div menu, poi devi operare sullo z-index affinchè l'immagine non sia in primo piano rispetto al testo
 

kain

Utente Attivo
14 Apr 2010
67
0
0
..allora ho dato il relative al footer e ho inserito come background di questo l'immagine , ecco tutto il footer:
HTML:
#footer {
	position: relative;
	height: 104px;
	right: 2px;
	top: 825px;
	width: 976px;
	text-align:center;
	font-size:12px; Verdena,sans-serif;
	color:#FFFFFF;
	background: url("elements/sh.jpg") no-repeat fixed center bottom ;
va bene?
ammesso che vada bene adesso per fare delle prove di risoluzione mi è sufficiente usare ctrl + lo scroll del mouse ?
grazie
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.046
150
63
PR
www.borgo-italia.it
ciao
avendo tu un monitor 1024 x 768 e avendo dato al div contenitore #wrapper una height: 936px; e una width: 978px; dovresti vedere il contenitore centrato al centro dello scheromo in orizzontale e per il verticale vedere le barre di scorrimento del browser.
se provi questo piccolo html, vedrai un riquadro rosso (wrapper) con al suo interno uno verde (footer) leggermente staccato dal bordo inferiore.
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Documento senza titolo</title>
<style type="text/css">
html{
margin:0px;
padding:0px;}
body{
margin:0px;
padding:0px;}
#wrapper {/*allineato orizzontalmente al centro del monitor*/
	position:absolute;/*coordinate rispetto al monitor*/
	background-color:#FF0000;/*per vedere il riquadro*/
	height: 936px;
	width: 978px;
	left: 50%;
	margin-left: -489px;/*metà della larghezza*/
	top: 20px;
	text-align: left;
	}
#footer{
	position:relative;/*coordinate rispetto al wrapper essendo al suo interno*/
	background-color:#00FF00;/*per vedere il riquadro*/
	width:978px;
	height:200px;
	top:700px;/*leggermente distaccato dal fondo del wrapper, mettendo 736px si attacca al fondo*/
	text-align:center;
	}
</style>
</head>
<body>
<div id="wrapper">QUESTO E' IL WRAPPER
	<div id="footer">questo è il footer</div>
</div>
</body>
</html>
è evidente che ci vuole un po' di pazienza nel calcolo dei px, ma se prima calcoli su un foglio quello che vuoi ottenere, riesci a posizionare quello che vuoi.

p.s.
se usi ad es dreamwiever con la vista progettazione non riesci a vedere bene, devi sempre provare con un bw (meglio con più come IE e fire)
 
Discussioni simili
Autore Titolo Forum Risposte Data
M Menu e logo responsive problema centramento HTML e CSS 6
Prof Grave problema di centramento... Javascript 1
G Pagina html in stringa PHP 2
L Creare ancore interne alla pagina PHP 1
F Aiuto! cambio immagine di sfondo al cambio pagina HTML e CSS 2
Shyson Regex che trova la parola nella pagina jQuery 6
L Eliminazione di una pagina dalla gallery SEO e Posizionamento 0
D Apre il lightbox fuori pagina Javascript 0
K posizionare variabile da pagina html all'iframe. Javascript 1
R jquery che cambia css di un elemento non mi funziona sulla pagina caricata da ajax Ajax 5
U Link a pagina ed esecuzione file PHP 0
S Passare query o utm alla pagina successiva Domini 1
D [Cerco] Pagina Facebook settore calcio Annunci servizi di Social Media Marketing 0
napuleone div centrato alla pagina posto sopra ai contenuti HTML e CSS 1
G Eliminare l'effetto refresh di una pagina internet PHP 8
L Bing prima pagina prima riga; Google mi ignora SEO e Posizionamento 0
P Pagina modifica record che non funziona PHP 0
T Conferma reload pagina Javascript 4
A Submit senza ricaricare la pagina Ajax 2
L Problemi form Pagina php HTML e CSS 3
L php mysql cerca e visualizza pagina PHP 0
S Variabile in post su altra pagina PHP 2
D Visualizzazione pagina basata sul valore di un campo del database PHP 2
D Pagina non trovata Wordpress WordPress 7
E Pagina Cloudflare e captcha Domini 1
W Anomalia Pagina Facebook Social Media Marketing 9
A Aiuto per pagina php PHP 0
T Risolto Redirect a pagina esterna Javascript 2
M Questa pagina non carica correttamente Google Maps: aiuto!! HTML e CSS 1
T Offuscare link pagina web PHP 2
D Stampa a video in altra pagina html Database 3
Cosina script data aggiornamento pagina Javascript 1
Y cambiare sfondo di una pagina Javascript 1
Y Vorrei selezionare un colore di sfondo per una pagina web Javascript 0
S Apertura in una nuova pagina PHP 6
G creazione menu a tendina e invio a pagina php PHP 1
B Stampare una porzione della pagina PHP 0
D Pubblicità Instagram su pagina da 144 mila follower Vendere e Acquistare pubblicita' online 3
A Dare l'accesso ad una pagina solo ad un utente specifico PHP 0
F pagina dinamica PHP PHP 3
W Invio Dati ad un altra pagina Classic ASP 1
Samuele Ronzani Click e reload della pagina PHP 1
M Compilazione automatica campi in input stessa pagina PHP 0
C Statistiche pagina Facebook aziendale Social Media Marketing 2
L titolo del sito nella pagina di ricerca di google SEO e Posizionamento 2
MarcoGrazia Pagina canonical SEO e Posizionamento 0
elpirata Update dinamico informazioni scritte in una pagina php jQuery 11
C Vendo pagina FB Presentati al Forum 0
A [CERCO] Pagina Instagram Annunci servizi di Social Media Marketing 1
L Cerco pagina Instagram 1-2k Annunci servizi di Social Media Marketing 4

Discussioni simili