Problemi Div e centratura... E pixel...

Emix · 22 Ott 2012

Salve a tutti,
sto facendo il layout per un sito.. ma dopo tanto mi trovo in difficolta....

la struttura del sito è abbastanza semplice, ma devo fare in modo che le misure e gli spazi coincidano e siano perfettamente CENTRATI su ogni risoluzione...

Il codice è il seguente:

HTML:

<!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>...La via dell'anima...</title>

<style type="text/css">
body { background-image: url(sfondo_tortoranew.jpg); 
background-repeat: repeat-x;
}
</style>

<style type="text/css">
#main {
	width: 1024px; /*la larghezza dell'elemento*/
	height: 2000px; /*l'altezza dell'elemento*/
	position: absolute; /*posizione assoluta per potere riposizionare l'elemento*/
	left: 50%; /*il bordo sinistra dell'elemento si troverà al 50% della larghezza disponibile*/
	top: 50%; /*il bordo superiore dell'elemento si troverà al 50% dell'altezza disponibile*/
	margin-left: -512px; /*la metà della larghezza dell'elemento è tolta come margine superiore per centrarlo*/
	margin-top: -1000x; /*la metà dell'altezza dell'elemento è tolta come margine superiore per centrarlo*/
	background-color: #333333;
}
#logo {
    width: 480px; /*la larghezza dell'elemento*/
	height: 200px; /*l'altezza dell'elemento*/
	position: absolute; /*posizione assoluta per potere riposizionare l'elemento*/
	left: 50%; /*il bordo sinistra dell'elemento si troverà al 50% della larghezza disponibile*/
	top: 50%; /*il bordo superiore dell'elemento si troverà al 50% dell'altezza disponibile*/
	margin-left: -240px; /*la metà della larghezza dell'elemento è tolta come margine superiore per centrarlo*/
	margin-top: -100x; /*la metà dell'altezza dell'elemento è tolta come margine superiore per centrarlo*/
	background-color: #0F0
}
#topmenu {
	width: 620px; /*la larghezza dell'elemento*/
	height: 40px; /*l'altezza dell'elemento*/
	position: absolute; /*posizione assoluta per potere riposizionare l'elemento*/
	left: 50%; /*il bordo sinistra dell'elemento si troverà al 50% della larghezza disponibile*/
	top: 50%; /*il bordo superiore dell'elemento si troverà al 50% dell'altezza disponibile*/
	margin-left: -320px; /*la metà della larghezza dell'elemento è tolta come margine superiore per centrarlo*/
	margin-top: -20x; /*la metà dell'altezza dell'elemento è tolta come margine superiore per centrarlo*/
	background-color: #C36;
}
#imgcenter {
	width: 620px; /*la larghezza dell'elemento*/
	height: 504px; /*l'altezza dell'elemento*/
	position: absolute; /*posizione assoluta per potere riposizionare l'elemento*/
	left: 50%; /*il bordo sinistra dell'elemento si troverà al 50% della larghezza disponibile*/
	top: 50%; /*il bordo superiore dell'elemento si troverà al 50% dell'altezza disponibile*/
	margin-left: -320px; /*la metà della larghezza dell'elemento è tolta come margine superiore per centrarlo*/
	margin-top: -252x; /*la metà dell'altezza dell'elemento è tolta come margine superiore per centrarlo*/
	background-color: #009
}
#flashnews {
	width: 200px; /*la larghezza dell'elemento*/
	height: 100px; /*l'altezza dell'elemento*/
	position: absolute; /*posizione assoluta per potere riposizionare l'elemento*/
	left: 50%; /*il bordo sinistra dell'elemento si troverà al 50% della larghezza disponibile*/
	top: 50%; /*il bordo superiore dell'elemento si troverà al 50% dell'altezza disponibile*/
	margin-left: -100px; /*la metà della larghezza dell'elemento è tolta come margine superiore per centrarlo*/
	margin-top: -50x; /*la metà dell'altezza dell'elemento è tolta come margine superiore per centrarlo*/
	background-color: #FF0
}
#footer {
	width: 620px; /*la larghezza dell'elemento*/
	height: 40px; /*l'altezza dell'elemento*/
	position: absolute; /*posizione assoluta per potere riposizionare l'elemento*/
	left: 50%; /*il bordo sinistra dell'elemento si troverà al 50% della larghezza disponibile*/
	top: 50%; /*il bordo superiore dell'elemento si troverà al 50% dell'altezza disponibile*/
	margin-left: -320px; /*la metà della larghezza dell'elemento è tolta come margine superiore per centrarlo*/
	margin-top: -20x; /*la metà dell'altezza dell'elemento è tolta come margine superiore per centrarlo*/
	background-color: #C36;
}
#imgalt {
	width: 300px; /*la larghezza dell'elemento*/
	height: 350px; /*l'altezza dell'elemento*/
	position: absolute; /*posizione assoluta per potere riposizionare l'elemento*/
	left: 50%; /*il bordo sinistra dell'elemento si troverà al 50% della larghezza disponibile*/
	top: 50%; /*il bordo superiore dell'elemento si troverà al 50% dell'altezza disponibile*/
	margin-left: -150px; /*la metà della larghezza dell'elemento è tolta come margine superiore per centrarlo*/
	margin-top: -175x; /*la metà dell'altezza dell'elemento è tolta come margine superiore per centrarlo*/
	background-color: #639
}
#section {
	width: 300px; /*la larghezza dell'elemento*/
	height: 250px; /*l'altezza dell'elemento*/
	position: absolute; /*posizione assoluta per potere riposizionare l'elemento*/
	left: 50%; /*il bordo sinistra dell'elemento si troverà al 50% della larghezza disponibile*/
	top: 50%; /*il bordo superiore dell'elemento si troverà al 50% dell'altezza disponibile*/
	margin-left: -150px; /*la metà della larghezza dell'elemento è tolta come margine superiore per centrarlo*/
	margin-top: -125x; /*la metà dell'altezza dell'elemento è tolta come margine superiore per centrarlo*/
	background-color: #F00
}
</style>


</head>

<body>

<div id="main" style="left:50%; top:50%; margin-left:-510px; margin-top: -500px;">

<div id="logo" style="left:510px; top:380px; margin-left:-240px; margin-top: -100px;">
</div>

<div id="topmenu" style="left:440px; top:589px; margin-left:-240px; margin-top: -100px;">
</div>

<div id="imgcenter" style="left:520px; top:790px; margin-left:-320px; margin-top: -252px;">
</div>

<div id="flashnews" style="left:300px; top:1106px; margin-left:-100px; margin-top: -50px;">
</div>
<div id="flashnews" style="left:510px; top:1106px; margin-left:-100px; margin-top: -50px;">
</div>
<div id="flashnews" style="left:721px; top:1107px; margin-left:-100px; margin-top: -50px;">
</div>

<div id="footer" style="left:300px; top:1220px; margin-left:-100px; margin-top: -50px;">
</div>


<div id="imgalt" style="left:100px; top:659px; margin-left:-100px; margin-top: -50px;">
</div>

</div>


</body>blu.....
</html>

Invece a questo link potete vedere come si vede ....

PROVA

Come potete vedere il blocco di colore viola si sovrappone al blocco di colore blu...La misura del blocco MAIN è 1020x2000
La somma dei pixel (come potete vedere nel file html) non arriva neanche a 1020...
Potete aiutarmi? Dove sbaglio?
Emiliano.

Emix · 23 Ott 2012

nessuno sa aiutarmi? per piacere....

borgo italia · 23 Ott 2012

ciao
o riduci la larghezza del viola o sposti a sinitra il blu

Emix · 23 Ott 2012

Ciao e grazie della risposta...
Ma perdonami.. se vedi il CSS noterai che le dimensioni totali dei blocchi sono circa 1000px... Mentre il div MAIN ha come larghezza 1024... quindi non capisco perche succede questa cosa,,,

borgo italia · 24 Ott 2012

ciao
posta un'immagine di come vorresti il layout

Emix · 24 Ott 2012

identico a quello linkato chiamato prova... ma con i blocchi viola e blu non sovrapposti ma affiancati.... la alrghezza massima dovrebbe essere 1020 complessivamente..

borgo italia · 24 Ott 2012

ciao
ok, provo e forse ti so dire qualcosa
edit
dimenticavo: perchè fai i css con delle misure e poi nei div con style= ne metti altre?
o usi i css (meglio) o style

Emix · 24 Ott 2012

borgo italia ha scritto:
ciao
ok, provo e forse ti so dire qualcosa
edit
dimenticavo: perchè fai i css con delle misure e poi nei div con style= ne metti altre?
o usi i css (meglio) o style

le misure dei css son quelle che dovrei utilizzare, ma se utilizzo quelle non mi si centra un cavolo... Ho provato... Aiutami pls...

borgo italia · 25 Ott 2012

ciao
guarda se ti va bene, poi giocando con i margin li posizioni come vuoi.
ho dovuto mettere due div in più uno (#centrale) per contenere imgalt e imgcenter e l'alto (#flash) per contenere le tre flashnews
ho aggiunto anche del background-color per vedere meglio le suddivisioni

HTML:

<!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>...La via dell'anima...</title>
<style type="text/css">
html{
	margin:0px;
	padding:0px;
}
body {
	background-image: url(sfondo_tortoranew.jpg); 
	background-repeat: repeat-x;
	background-color:#33FFFF;
	margin:0px;
	padding:0px;
}
#main {
	width: 1024px; /*la larghezza dell'elemento*/
	height: auto; /*l'altezza dell'elemento*/
	position: absolute; /*posizione assoluta per potere riposizionare l'elemento*/
	left: 50%; /*il bordo sinistra dell'elemento si troverà al 50% della larghezza disponibile*/
	margin-left: -512px; /*la metà della larghezza dell'elemento è tolta come margine superiore per centrarlo*/
	margin-top: 10px;
	background-color: #000000;
}
#logo {
    display:block;
	clear:left;
	width: 480px;
	height: 200px;
	margin-left: auto;
	margin-right:auto;
	margin-top: 10px;
	background-color: #0F0;
}
#topmenu {
	width: 620px;
	height: 40px;
	margin-left: auto;
	margin-right:auto;
	margin-top: 10px;
	background-color: #C36;
	clear: right;
}
#centrale{/*nuovo div per contenere imgcenter e imgalt */
	display:block;
	width: auto;
	height: 514px;
	clear: right;
	background-color:#999999;
}
#imgcenter {
	display:block;
	float:right;
	width: 620px;
	height: 504px;
	margin-right: 20px;
	margin-top: 10px;
	background-color: #009;
}
#imgalt {
	display:block;
	float:left;
	width: 300px;
	height: 350px;
	margin-left: 20px;
	margin-top: 10px;
	background-color: #639;
}
#flash{/*nuovo div per contenere i flashnews*/
	display:block;
	width: 630px;
	height: 110px;
	margin-left: auto;
	margin-right: auto;
	clear:right;
	background-color:#333333;
}
.flashnews {
	display:block;
	float:left;
	width: 200px;
	height: 100px;
	margin-left: 5px;
	margin-right: 5px;
	margin-top: 10px;
	background-color: #FF0
}
#footer {
	width: 620px;
	height: 40px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	background-color: #C36;
	margin-bottom:10px;
}
#section {/*non so cosa deve fare*/
	width: 300px; /*la larghezza dell'elemento*/
	height: 250px; /*l'altezza dell'elemento*/
	position: absolute; /*posizione assoluta per potere riposizionare l'elemento */
	left: 50%; /*il bordo sinistra dell'elemento si troverà al 50% della larghezza disponibile*/
	top: 50%; /*il bordo superiore dell'elemento si troverà al 50% dell'altezza disponibile*/
	margin-left: -150px; /*la metà della larghezza dell'elemento è tolta come margine superiore per centrarlo*/
	margin-top: -125px; /*la metà dell'altezza dell'elemento è tolta come margine superiore per centrarlo*/
	background-color: #F00
}
</style>
</head>
<body>
<div id="main">
	<div id="logo">logo</div>
	<div id="topmenu">topmenu</div>
	<div id="centrale"><!-- nuovo div -->
		<div id="imgalt">imgalt</div>
		<div id="imgcenter">imgcenter</div>
	</div>
	<div id="flash"><!-- nuovo div -->
		<div class="flashnews">news 1</div><!-- l'id deve essere attribuito ad un unico elemento, se più d'uno usa class -->
		<div class="flashnews">flashnews 2</div>
		<div class="flashnews">flashnews 3</div>
	</div>
	<div id="footer">footer</div>
</div>
</body>
</html>

p.s.
l'id ( #nome ) deve essere usato solo per un elemento, se ti serve per più di uno devi usare class ( .nome )

Emix · 25 Ott 2012

ciao, innanzitutto grazie per il lavoro che hai fatto... Ma cosi ci ero riuscito.. il problema sorge nel momento in cui dobbiamo mettere due imgalt (destra e sinistra) e sopra delle imgalt i blocchi sezione (section).. Sarebbero i blocchi rossi le section...

borgo italia · 26 Ott 2012

ciao
non capisco dove sono i div rossi e come esattamente vuoi fare, quello che ho fatto io rispecchiva il tuo link.
come ti ho fai un'immagine e postala (con i nomi dei div)

Emix · 26 Ott 2012

Ecco l'immagine che mi hai richiesto.. Spero sia comprensiva....

borgo italia · 27 Ott 2012

ciao
ok, ci do un occhio e provo a buttare giù qualcosa tra oggi e domani

Emix · 27 Ott 2012

grazie ancora dell'aiuto... sei gentilissimo

borgo italia · 28 Ott 2012

ciao
un piccolo dubbio:
hai dato al contenitore #main width: 1024px,
ma nell'immagine che mi hai postato c'è nella parte centrale
#imgcenter width: 620px;
#section width: 300px; (una a dx e una a sx) (analogo imgalt)
quindi 620+300+300=1220 >> 1024 (senza contare gli eventuali margini) e un errore o vuoi lo scorrimento orizzontale (orribile visu)?

Emix · 28 Ott 2012

e un errore :| la grandezza totale deve essere 1024...

borgo italia · 28 Ott 2012

ciao
dai un occhio.
se e quando modifichi le dimensioni usa carta e matita per calcolare i pixel

HTML:

<!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>...La via dell'anima...</title>
<style type="text/css">
html{
	margin:0px;
	padding:0px;
}
body {
	/*tolto img bck perche non l'ho*/
	/*background-image: url(sfondo_tortoranew.jpg); 
	background-repeat: repeat-x;*/
	background-color:#33FFFF;
	margin:0px;
	padding:0px;
	font-family:Arial, Helvetica, sans-serif;
}
#main {
	width: 1024px;
	height: auto;
	position: absolute;
	left: 50%;
	margin-left: -512px;
	margin-top: 10px;
	background-color: #000000;
}
#logo {
    display:block;
	clear:right;
	width: 480px;
	height: 200px;
	margin: 10px auto 0px auto;/* top right bottom left*/
	background-color: #0F0;
}
#topmenu {
	display:block;
	clear:right;
	width: 620px;
	height: 40px;
	margin: 10px auto 0px auto;
	background-color: #C36;
}
#centrale{
	display:block;
	width: auto;
	height: auto;
}
#centrale_sx{
	display:block;
	float:left;
	width: auto;
	height: auto;
}
#centrale_dx{
	display:block;
	float:left;
	width: auto;
	height: auto;
	clear: right;
}
#imgcenter {
	display:block;
	float:left;
	width: 620px;
	height: 610px;
	margin: 10px 0px 0px 0px;
	background-color: #996600;
}
.imgalt {
	display:block;
	float:left;
	width: 202px;
	height: 350px;
	margin: 10px 0px 0px 0px;
	background-color: #639;
}
#flash{
	display:block;
	width: 630px;
	height: auto;
	margin: 0px auto 0px auto;
}
.flashnews {
	display:block;
	float:left;
	width: 200px;
	height: 100px;
	margin:10px 5px 10px 5px;
	background-color: #FF0;
}
#foter {
	display:block;
	clear:left;
	width: 620px;
	height: 50px;
	margin: 10px auto 10px auto;
	background-color: #9900FF;
}
.section {
	clear:right;
	width: 202px;
	height: 250px;
	margin-top: 10px;
	background-color: #F00;
}
</style>
</head>
<body>
<div id="main">
	<div id="logo">logo</div>
	<div id="topmenu">topmenu</div>
	<div id="centrale">
		<div id="centrale_sx">
			<div class="section">section</div>
			<div class="imgalt">imgalt</div>
		</div>
		<div id="imgcenter">imgcenter</div>
		<div id="centrale_dx">
			<div class="section">section</div>
			<div class="imgalt">imgalt</div>
		</div>
	</div><!-- fine centrale -->
	<div id="flash">
		<div class="flashnews">flashnews 1</div>
		<div class="flashnews">flashnews 2</div>
		<div class="flashnews">flashnews 3</div>
	</div><!-- fine flash -->
	<div id="foter">footer</div>
</div><!-- fine main -->
</body>
</html>

ComputerCommunication · 31 Ott 2012

se dai una guardata con Firebug vedrai che tutti i div sono sovrapposti, prova a ricominciare da 0 a scriver il CSS!!

borgo italia · 31 Ott 2012

ciao
ma sei proprio sicuro?

con fire e ie (con chromr non so perche non lo uso)

ComputerCommunication · 31 Ott 2012

borgo italia ha scritto:
ciao
ma sei proprio sicuro?
Vedi l'allegato 1438
con fire e ie (con chromr non so perche non lo uso)

chiedo scusa...non avevo visto il resto della discussione, mi visualizzava soltanto la prima parte

Problemi Div e centratura... E pixel...

Utente Attivo

Utente Attivo

Super Moderatore

Utente Attivo

Super Moderatore

Utente Attivo

Super Moderatore

Utente Attivo

Super Moderatore

Utente Attivo

Super Moderatore

Utente Attivo

Super Moderatore

Utente Attivo

Super Moderatore

Utente Attivo

Super Moderatore

Nuovo Utente

Super Moderatore

Nuovo Utente

Discussioni simili