Imageready e CSS da centrare

**Stefanik** · 10-10-2005, 17:43

Ciao a tutti, ho letto vari 3d al riguardo qui nel forum, ma non sono arrivato cmq a una conclusione, quindi vi chiedo "assistenza".
Avendo creato un layout con css da imageready, ora vorrei centrare il tutto,ma senza successo.
Ho aggiunto al codice di Imageready:

codice:

body {
	background-color:D5DE45;
	text-align : center;
}

codice:

#Tabella_01 {
	position:absolute;
	margin:auto;
}

La "Tabella_01" è il contenitore più esterno di tutti gli altri DIV.

Mi date unamano?

**thomas_anderson** · 10-10-2005, 17:53

Togli position:absolute.

**Stefanik** · 10-10-2005, 17:58

Originariamente inviato da thomas_anderson
Togli position:absolute.

Ciao l'ho tolto, ma non è cambiato nulla.
Tutti i vari DIV sono dichiarati con position:absolute.
Devo togliere anche quelli?

**thomas_anderson** · 10-10-2005, 18:10

Fammi vedere il codice della pagina.

**Stefanik** · 10-10-2005, 18:13

ok.
Ti posto tutto il codice...spero non sia troppo lungo...

codice:

<html>
<head>
<title>Zazzarino</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">

userAgent = window.navigator.userAgent;
browserVers = parseInt(userAgent.charAt(userAgent.indexOf("/")+1),10);
function newImage(arg) {
	if (document.images) {
		rslt = new Image();
		rslt.src = arg;
		return rslt;
	}
}

function findElement(n,ly) {
	if (browserVers < 4)		return document[n];
	var curDoc = ly ? ly.document : document;
	var elem = curDoc[n];
	if (!elem) {
		for (var i=0;i<curDoc.layers.length;i++) {
			elem = findElement(n,curDoc.layers[i]);
			if (elem) return elem;
		}
	}
	return elem;
}

function changeImages() {
	if (document.images && (preloadFlag == true)) {
		var img;
		for (var i=0; i<changeImages.arguments.length; i+=2) {
			img = null;
			if (document.layers) {
				img = findElement(changeImages.arguments[i],0);
			}
			else {
				img = document.images[changeImages.arguments[i]];
			}
			if (img) {
				img.src = changeImages.arguments[i+1];
			}
		}
	}
}

var preloadFlag = false;
function preloadImages() {
	if (document.images) {
		Zazzarino_La_Nostra_Cucina_over = newImage("immagini/Zazzarino_La-Nostra-Cucina-.jpg");
		Zazzarino_Dove_Siamo_over = newImage("immagini/Zazzarino_Dove-Siamo-over.jpg");
		Zazzarino_La_Storia_per_Contorno_over = newImage("immagini/Zazzarino_La-Storia-per--16.jpg");
		Zazzarino_Contattaci_over = newImage("immagini/Zazzarino_Contattaci-over.jpg");
		preloadFlag = true;
	}
}

</script>
<style type="text/css">
body {
	background-color:D5DE45;
	text-align : center;
}

#Tabella_01 {
	margin:auto;
}

#Zazzarino-01 {
	position:absolute;
	left:0px;
	top:0px;
	width:800px;
	height:125px;
}

#Zazzarino-02 {
	position:absolute;
	left:0px;
	top:125px;
	width:250px;
	height:58px;
}

#Zazzarino-03 {
	position:absolute;
	left:250px;
	top:125px;
	width:550px;
	height:475px;
}

#Zazzarino-04 {
	position:absolute;
	left:0px;
	top:183px;
	width:29px;
	height:417px;
}

#Zazzarino-La-Nostra-Cucina {
	position:absolute;
	left:29px;
	top:183px;
	width:199px;
	height:22px;
}

#Zazzarino-06 {
	position:absolute;
	left:228px;
	top:183px;
	width:22px;
	height:417px;
}

#Zazzarino-07 {
	position:absolute;
	left:29px;
	top:205px;
	width:199px;
	height:27px;
}

#Zazzarino-08 {
	position:absolute;
	left:29px;
	top:232px;
	width:35px;
	height:46px;
}

#Zazzarino-Dove-Siamo {
	position:absolute;
	left:64px;
	top:232px;
	width:132px;
	height:21px;
}

#Zazzarino-10 {
	position:absolute;
	left:196px;
	top:232px;
	width:32px;
	height:46px;
}

#Zazzarino-11 {
	position:absolute;
	left:64px;
	top:253px;
	width:132px;
	height:25px;
}

#Zazzarino-12 {
	position:absolute;
	left:29px;
	top:278px;
	width:24px;
	height:322px;
}

#Zazzarino-La-Storia-per-Contorno {
	position:absolute;
	left:53px;
	top:278px;
	width:149px;
	height:47px;
}

#Zazzarino-14 {
	position:absolute;
	left:202px;
	top:278px;
	width:26px;
	height:322px;
}

#Zazzarino-15 {
	position:absolute;
	left:53px;
	top:325px;
	width:149px;
	height:25px;
}

#Zazzarino-16 {
	position:absolute;
	left:53px;
	top:350px;
	width:12px;
	height:250px;
}

#Zazzarino-Contattaci {
	position:absolute;
	left:65px;
	top:350px;
	width:118px;
	height:22px;
}

#Zazzarino-18 {
	position:absolute;
	left:183px;
	top:350px;
	width:19px;
	height:250px;
}

#Zazzarino-19 {
	position:absolute;
	left:65px;
	top:372px;
	width:118px;
	height:228px;
}


</style>
</head>
<body onload="preloadImages();>
<div id="Tabella_01">
	<div id="Zazzarino-01">
		[img]immagini/Zazzarino_01.jpg[/img]
	</div>
	<div id="Zazzarino-02">
		[img]immagini/Zazzarino_02.jpg[/img]
	</div>
	<div id="Zazzarino-03">
		[img]immagini/Zazzarino_03.jpg[/img]
	</div>
	<div id="Zazzarino-04">
		[img]immagini/Zazzarino_04.jpg[/img]
	</div>
	<div id="Zazzarino-La-Nostra-Cucina">
		<a href="#"
			onmouseover="changeImages('Zazzarino_La_Nostra_Cucina', 'immagini/Zazzarino_La-Nostra-Cucina-.jpg'); return true;"
			onmouseout="changeImages('Zazzarino_La_Nostra_Cucina', 'immagini/Zazzarino_La-Nostra-Cucina.jpg'); return true;"
			onmousedown="changeImages('Zazzarino_La_Nostra_Cucina', 'immagini/Zazzarino_La-Nostra-Cucina-.jpg'); return true;"
			onmouseup="changeImages('Zazzarino_La_Nostra_Cucina', 'immagini/Zazzarino_La-Nostra-Cucina-.jpg'); return true;">
			[img]immagini/Zazzarino_La-Nostra-Cucina.jpg[/img]</a>
	</div>
	<div id="Zazzarino-06">
		[img]immagini/Zazzarino_06.jpg[/img]
	</div>
	<div id="Zazzarino-07">
		[img]immagini/Zazzarino_07.jpg[/img]
	</div>
	<div id="Zazzarino-08">
		[img]immagini/Zazzarino_08.jpg[/img]
	</div>
	<div id="Zazzarino-Dove-Siamo">
		<a href="#"
			onmouseover="changeImages('Zazzarino_Dove_Siamo', 'immagini/Zazzarino_Dove-Siamo-over.jpg'); return true;"
			onmouseout="changeImages('Zazzarino_Dove_Siamo', 'immagini/Zazzarino_Dove-Siamo.jpg'); return true;"
			onmousedown="changeImages('Zazzarino_Dove_Siamo', 'immagini/Zazzarino_Dove-Siamo-over.jpg'); return true;"
			onmouseup="changeImages('Zazzarino_Dove_Siamo', 'immagini/Zazzarino_Dove-Siamo-over.jpg'); return true;">
			[img]immagini/Zazzarino_Dove-Siamo.jpg[/img]</a>
	</div>
	<div id="Zazzarino-10">
		[img]immagini/Zazzarino_10.jpg[/img]
	</div>
	<div id="Zazzarino-11">
		[img]immagini/Zazzarino_11.jpg[/img]
	</div>
	<div id="Zazzarino-12">
		[img]immagini/Zazzarino_12.jpg[/img]
	</div>
	<div id="Zazzarino-La-Storia-per-Contorno">
		<a href="#"
			onmouseover="changeImages('Zazzarino_La_Storia_per_Contorno', 'immagini/Zazzarino_La-Storia-per--16.jpg'); return true;"
			onmouseout="changeImages('Zazzarino_La_Storia_per_Contorno', 'immagini/Zazzarino_La-Storia-per-Con.jpg'); return true;"
			onmousedown="changeImages('Zazzarino_La_Storia_per_Contorno', 'immagini/Zazzarino_La-Storia-per--16.jpg'); return true;"
			onmouseup="changeImages('Zazzarino_La_Storia_per_Contorno', 'immagini/Zazzarino_La-Storia-per--16.jpg'); return true;">
			[img]immagini/Zazzarino_La-Storia-per-Con.jpg[/img]</a>
	</div>
	<div id="Zazzarino-14">
		[img]immagini/Zazzarino_14.jpg[/img]
	</div>
	<div id="Zazzarino-15">
		[img]immagini/Zazzarino_15.jpg[/img]
	</div>
	<div id="Zazzarino-16">
		[img]immagini/Zazzarino_16.jpg[/img]
	</div>
	<div id="Zazzarino-Contattaci">
		<a href="#"
			onmouseover="changeImages('Zazzarino_Contattaci', 'immagini/Zazzarino_Contattaci-over.jpg'); return true;"
			onmouseout="changeImages('Zazzarino_Contattaci', 'immagini/Zazzarino_Contattaci.jpg'); return true;"
			onmousedown="changeImages('Zazzarino_Contattaci', 'immagini/Zazzarino_Contattaci-over.jpg'); return true;"
			onmouseup="changeImages('Zazzarino_Contattaci', 'immagini/Zazzarino_Contattaci-over.jpg'); return true;">
			[img]immagini/Zazzarino_Contattaci.jpg[/img]</a>
	</div>
	<div id="Zazzarino-18">
		[img]immagini/Zazzarino_18.jpg[/img]
	</div>
	<div id="Zazzarino-19">
		[img]immagini/Zazzarino_19.jpg[/img]
	</div>
</div>
</body>
</html>

**thomas_anderson** · 10-10-2005, 18:39

Correggimi se sbaglio: tu vorresti centrare tutte queste immagini posizionate assolutamente? Se vuoi farlo ti consiglio di usare un unico box contenitore e poi allinearvi dentro le immagini. Ho capito bene? :master:

**Stefanik** · 10-10-2005, 23:37

Si hai capito perfettamente.
Ma come faccio a creare un box contenitore?
Pensavo di poter considerare contenitore la "Tabella_01".

**thomas_anderson** · 11-10-2005, 10:04

Puoi fare così, tenendo presente che devi cercare di calcolare prima le dimensioni delle singole immagini e quindi dare le dimensioni globali al box:

codice:

body {
margin: 0;
padding: 0;
background: #f7f6be;
color: #000;
font: 100%/1.5 Arial, Verdana, Helvetica, Geneva, sans-serif;
text-align: center;
}

#contenitore {
  width: /* calcoli la larghezza */
  margin: 10px auto 10px auto;
  padding: 0; /* oppure lo inserisci, come vuoi */
  border: 2px solid;
  border-color: #fff #ccc #ccc #fff;
  font-size: 85%;
  text-align: left;
}

#img-1 {
  width:/* larghezza della 1a immagine*/
  height: /* altezza*/
  float: left;
  margin: 5px;
  padding: 0;
}

ho creato degli id perchè da quello che ho capito le immagini hanno dimensioni diverse.

ho ridotto la dimesnione dei font, così se vuoi puoi inserire delle didascalie sotto le immagini. però in questo caso dovresti creare delle edicole ad hoc.

**thomas_anderson** · 11-10-2005, 10:17

Le edicole le puoi creare così:

codice:

#edicola-1 {
  width: /* larghezza maggiore dell'immagine */
  height: /* altezza maggiore dell'immagine */
  margin: 5px;
  padding: 5px;
  float: left;
  text-align: center;
}

#edicola-1 img {
  width: xxx;
  height: xxx;
  margin: 5px auto;
  padding: 0;
  border: /* se vuoi */
}

**Stefanik** · 11-10-2005, 10:26

Ho appena provato quanto mi hai detto,ma niente.
Non si sposta nulla!

Discussione: Imageready e CSS da centrare

Strumenti discussione

Ricerca discussione

Visualizza

Imageready e CSS da centrare

Permessi di invio