centramento pagina: non me ne funziona uno!

[kain]

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!

@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]

ciao
prova a guardare questo link
https://www.mrw.it/css/articoli/creare-box-liquido-centrato-verticalmente_704.html

io comunque uso quasto dando le misure assolute in px

#contenitore{
	width:930px;
	height:570px;
	position: absolute;
	overflow: hidden;
	top: 50%;
	left: 50%;
	margin-left: -465px;/*metà della larghezza*/
	margin-top:-285px;/*metà dell'altezza*/
}

prova, al massimo non funzia

 

[kain]

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;
}

 

[kain]

.....perchè non funziona e tutto il sito si sposta sulla destra

 

[borgo italia]

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]

il mio wrapper è il contenitore degli altri div ed al momento ha queste regole

#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]

ciao
prova in questo modo per centrarlo in orizzontale

#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

#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]

sono ritornato sul centramento ed inserendo

}
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]

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]

Ciao grande Gatto grazie del responso, si il footer è all'interno del wrapper ed ha queste regole:

#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 ;

<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]

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

#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]

..allora ho dato il relative al footer e ho inserito come background di questo l'immagine , ecco tutto il footer:

#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]

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.

<!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)