tempalte Sito - Div e Foglio di stile

**mattorock** · 06-02-2008, 16:32

Mi sono addentrato da poco nel mondo dei fogli di stile, e da qualche giorno che provo e riprovo a fare un template per un ipotetico Sito. Ho letto molte guide in giro per internet ma non riesco a creare un template, composto da diversi Div, che sia centrato rispetto alla pagina di internet explorer o Firefox. Vi allego l'immagine del template che vorrei creare con i div attraverso i fogli di sitle . Potreste aiutarmi ? grazie

**ricman** · 06-02-2008, 16:56

Gli oggetti si centrano assegnadogli "margin:0 auto" coi css (e se cerchi il termine qui nel forum o su gooogle trovi tutti gli approfondimenti).

**mattorock** · 06-02-2008, 18:18

Si quello l'avevo capito ma non riuscivo ugualmente a centrarli dandogli delle coordinate...
Adesso sono riuscito a centrarne, l'unica cosa che non sono riuscito a capire e che Iexplorer va tutto bene, in mozilla ho uno spazio bianco che mi divide i div inferiori.

Questo è il link della pagina di prova :Pagina di Prova

Questo è l'html:
[CODE<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.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=iso-8859-1" />
<title>Css Layout - esempio 2 by Onsitus</title>

<link href="ccs/Sylvia2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="centrato">

<div id="inte"> </div>
<div id="sottomen"></div>
<div id="areaS">
<div id="menu">
<p align="left" style="flash">menu</p>
</div>
<div id="corpo">
</div>
</div>
</div>
</body>CODE]

Questo è il foglio di stile:

codice:

/* -------CENTRAGGIO SITO------- */
body 			{
  					
					text-align: center; 
					top:0;
				}

#centrato 		{  
					text-align: center;
					width: 760px;
					margin: 0 auto;
					top:0;
				
				}
				
				
/* -------DIV ID------- */				

#inte			{
					margin:0 auto 0 auto;
					width:760px;
					height:150px;
					background:#FFFFCC;
				}

#sottomen 		{
					margin:0 auto 0 auto;
					width:760px;
					height:50px;
					background:#000099;
				}


#areaS		{  
					text-align: center;
					width: 760px;
					margin: 0 auto;
					top:0;
				
				}


#menu 			{
					margin:0 auto 0 auto;
					position:relative;
					left:-285px;
					top:auto;
					width:190px;
					height:250px;
					background:#FFFFCD;
				}
				


#corpo 			{
					margin:0 auto 0 auto;
					position:relative;
					left:10px;
					top:-250px;
					width:400px;
					height:350;
					background:#00FFFF		
				}

Scusate se ho scritto dei sfondoni.....

**ricman** · 07-02-2008, 01:37

Io lo vedo centrato... però è diverso dalla foto... sembra un altro layout.

Ti invito anche aleggere questa guida

**mattorock** · 07-02-2008, 11:14

Si ora l'ho centrato, prova pero a vederlo con mozilla e con iexplorer, con il primo browser appare uno spazietto bianco subito dopo il div blu scuro, in Iexplorer invece è tutto ok (senza spazio bianco).

**ricman** · 07-02-2008, 11:38

Mi sembra che gli dia noia il tag P nel menu della colonna di Sx...

**mattorock** · 07-02-2008, 12:14

Si era proprio quello!!! , quindi non posso usare il tag p in mozilla ? consa mi consigli di fare se dovessi inserire uno stile di paragrafo nel div. Forse mi conviene inserire gli stili del font direttamente nel tag Div?

grazie per la pazienza

**Myaku** · 07-02-2008, 14:28

codice:

<p align="left" style="flash">menu</p>

non usare "align", meglio che definisci le formattazioni di p nel css. style="flash" dove l'hai preso?!

**mattorock** · 07-02-2008, 14:41

Ok ora è tutto a posto, ho assegnato un p class nel css,

grazie mille per l'aiuto

Discussione: tempalte Sito - Div e Foglio di stile

Strumenti discussione

Ricerca discussione

Visualizza

tempalte Sito - Div e Foglio di stile

Permessi di invio