Template personalizzato

13-06-2007, 21.36.29

Regazzi sto creando un template con css e html per il gioco, ma non funziona bene con firefox, solo con IE. Come posso modificarlo senza perdere l'impaginazione che era presenta in IE???
L'ho creato io, e non essendo un grafico chiedo a tutti voi di darmi dei consigli per sistemarlo

.
Ecco il codice della index

Codice HTML:

<html>
<head>
<title></title>
<link href="style.css" type="text/css" media="screen" id="stile" rel="stylesheet"/>
<style></style>
</head>
<body>
<div id="titolo">The Robots Game
<div id="sottotitolo">la guerra sta per cominciare...</div>
</div>
<div id="collegamenti">
<a class="link" href="#">Home</a>
<a class="link" href="#">Info</a>                 
<a class="link" href="#">Registrati</a>                 
<a class="link" href="#">Lavora</a>                 
<a class="link" href="#">e@mail</a>             
</div>         
<div id="corpo"><br/><br/>             
<div class="dtabella">             
<div class="dtc1" style="width:280px;">Intestazione tabella&nbsp;&nbsp;&nbsp;&nbsp;<img src="riduci.gif" onclick="corpo_tabella.style.display='none'"/>&nbsp;&nbsp;<img src="espandi.gif" onclick="corpo_tabella.style.display='block'"/>
</div><br/>             
<div id="corpo_tabella">             
<div class="dtd1">Cella1</div>
<div class="dtd1">Cella2</div>
<div class="dtd1">Cella3</div>
<div class="dtd1">Cella4</div><br/>             
<div class="dtd2">Cella1</div>
<div class="dtd2">Cella2</div>
<div class="dtd2">Cella3</div>
<div class="dtd2">Cella4</div><br/>             
<div class="dtd1">Cella1</div>
<div class="dtd1">Cella2</div>
<div class="dtd1">Cella3</div>
<div class="dtd1">Cella4</div><br/>             
<div class="dtd2">Cella1</div>
<div class="dtd2">Cella2</div>
<div class="dtd2">Cella3</div>
<div class="dtd2">Cella4</div><br/>
</div></div>  <br/><br/>          
<div class="box" onmousemove="style.color='gray'" onmouseout="style.color='#DDDDDD'">
Nella seconda metà del XXI secolo, dopo la fine della Terza Guerra Mondiale, e qualche anno di relativa crisi economica, si dovette far fronte ad alcuni problemi che se finora accettabili, ora non potevano essere più accettati, come la mancanza di manodopera intelligente. I robot delle fabbriche avevano dimostrato i loro punti deboli durante la produzione bellica che aumentarono di rilievo ancor più negli anni successivi. Le tecniche di costruzione, erano diventate talmente complesse che i normali robot programmati non erano in grado di svolgere gran parte dei lavori. Nel 2062 venne perciò indetta la prima edizione della fiera dell'IA ovvero intelligenza artificiale presso Ginevra. Di anno in anno comparivano chip sempre più complessi, ma nessuno era in grado di essere definito “intelligente”. Una svolta decisiva si ebbe nella 4° edizione quando un gruppo di studenti neolaureati itali-americani, propose un ambizioso e costoso progetto che risultava complessissimo anche sulla carta. Trovarono un finanziatore, una nuova software-house da poco venuta al mondo la Home-Paq-Key. Nella rassegna successiva, contro ogni previsione degli organizzatori, venne presentato il progetto ultimato della nuovo tecnologia. La fiera fu dichiarata sospesa appena alla prima serata, e vennero aperti nel giro di poche ore degli uffici per la compravendita dei nuovi progetti. Dopo parecchie settimane si trovò un accordo e nel Palazzo di Ferro, il chip venne venduto alla stessa casa che aveva finanziato l'operazione.
Dopo l'imbastimento delle strutture, vennero al mondo i primi robot umanoidi dotati di grande IA. Questi, a differenza dei progetti originari presentavano un' quoziente intellettivo superiore a quello umana. Dopo qualche giorno di riunioni, nominarono loro rappresentante il numero D18 che prese il nome di Joan Sharft. Pochi giorni dopo al tavolo delle discussioni internazionali venne indetta una riunione straordinaria per decidere le sorti della nuova classe.
Vennero garantiti gli stessi diritti umani e venne fatta firmare loro la carta dei diritti e dei doveri. Rimaneva il fatto che la gente e molti capi politici stentavano a credere i nuovi cyborg intelligenti come un umano o comunque diversi da macchine e presto dai parlamenti vennero tagliati fuori tutti i robot. I moti vennero eliminati senza altre possibilità di protesta. La situazione arrivò al culmine alla Vigilia di Natale quando il presidente sudafricano sentenziò che a suo parere i robot fossero “Creature inferiori che essendo inferiori agli uomini dovevano considerarli Dei se non avessero voluto che gli Dei li distruggessero”. Probabilmente le intenzioni del presidente non arrivavano a quello che accadette in seguito, sta di fatto che i robot non accettarono queste parole e tra la notte di Natale e Santo Stefano vennero eseguite più di 80.000 esecuzioni sommarie contro i capi di stato contrari. In seguito in tutte le trasmissioni venne dato questo messaggio da Joan Sharft. “Gli inferiori si sono ribellati a degli Dei ingiusti”.
Quello che accadette in seguito fu il caos. Dopo numerose guerre civili, con vari colpi di stato i cyborg instaurarono regimi dittatoriali in tutto il mondo però con un imprevisto. Il partito finora unito si sgretolò in due profonde divisioni, quella degli interventisti attivisti che volevano farla pagare dura all'umanità facendo un vero e proprio sterminio e quella degli interventisti passivi che volevano far pagare solo una pesante tassa alle persone. Questa venne prontamente estinta e la parte degli interventisti più moderati passò dalla parte degli umani. La frattura divenne ancora più visibile e irreparabile. I protezionisti (così presero nome i moderati in seguito), vennero mandati in esilio nei sistemi periferici insieme agli umani, concedendo 2 anni prima di iniziare la guerra, per armarsi. La gestione dei partiti protezionisti venne affidata ad una serie di classi che si impegnarono a preparare un tot di unità per la guerra.
</div>
</div>
</body>
</html>

Codice del css

Codice HTML:

body{
	background-image:url(bg.jpg);
	background-repeat:repeat-x;
	text-align:center;
}

#titolo{
	background-color:trasparent;
	border:0px #F4F4F4 solid;
	height:87px;
	color:gray;
	font-size:40px;
	font-family:Arial;
	display:inline;
	margin-right:50px;
}

#collegamenti{
	background-color:trasparent;
	border:0px #F4F4F4 solid;
	height:87px;
	color:gray;
	font-size:20px;
	font-family:Arial;
	display:inline;
}

a.link{
	background-color:#606060;
	border:1px gray solid;
	height:30px;
	width:70px;
	color:gray;
	font-size:15px;
	font-family:Arial;
	display:inline;
	padding:5px;
	margin-left:5px;
	margin-top:10px;
	text-decoration:none;
}

a:hover.link{
	background-color:#606060;
	border:1px gray solid;
	height:30px;
	width:70px;
	color:silver;
	font-size:15px;
	font-family:Arial;
	display:inline;
	padding:5px;
	margin-left:5px;
	margin-top:10px;
	text-decoration:none;
	background-image:url(black_link.gif);
	background-repeat:no-repeat;
}

#sottotitolo{
	background-color:trasparent;
	border:0px #F4F4F4 solid;
	color:silver;
	font-size:16px;
	font-family:Arial;
}

#corpo{
	background-color:white;
	border:1px #F4F4F4 solid;
	height:100%;
	width:700px;
}

.dtd1{
	background-image:url(td1.gif);
	height:30px;
	width:70px;
	background-repeat:repeat-x;
	display:inline;
	color:#DADADA;
	font-size:16px;
	padding:3px;
}

.dtd2{
	background-image:url(td2.gif);
	height:30px;
	width:70px;
	background-repeat:repeat-x;
	display:inline;
	color:#BEBEBE;
	font-size:16px;
	padding:3px;

}

.dtc1{
	background-image:url(tc1.gif);
	height:30px;
	width:70px;
	background-repeat:repeat-x;
	display:inline;
	color:gray;
	font-size:20px;
	padding:2px;

}

.dtabella{
	border:1px silver solid;
	width:282px;
}


.td1{
	background-image:url(td1.gif);
	height:30px;
	width:70px;
	background-repeat:repeat-x;
	display:inline;
	color:#DADADA;
	font-size:16px;
	padding:3px;
}

.td2{
	background-image:url(td2.gif);
	height:30px;
	width:70px;
	background-repeat:repeat-x;
	display:inline;
	color:#BEBEBE;
	font-size:16px;
	padding:3px;

}

.tc1{
	background-image:url(tc1.gif);
	height:30px;
	width:70px;
	background-repeat:repeat-x;
	display:inline;
	color:gray;
	font-size:20px;
	padding:2px;

}

.box{
	background-image:url(box.gif);
	height:300px;
	width:600px;
	background-repeat:repeat-x;
	color:#DDDDDD;
	font-size:14px;
	padding:10px;
	border:1px #ECECEC solid;
	overflow:auto;
	text-align:justify;
}

.tabella{
	border:1px silver solid;
}

FunCool: Visto che non parli di CMS, sposto in Basi per siti Web.

**seneca** · 13-06-2007, 22.24.07

non riuscivo a postarlo nello stesso topic, non capisco perche'

Non capisco perche' si veda cosi' male il topic......

Ho sistemato il tutto: devi usare i tag appositi per il codice (html) e (/html) con le parentesi quadre al posto delle tonde. Inoltre usa il tasto EDITA invece di fare post consecutivi (parlo del terzo...)
Ciao!

**Ufobm** · 15-06-2007, 13.52.24

L'annoso problema della compatibilità tra browser... bisogna lavorare parecchio per far quadrare il tutto... e soprattutto avere sott'occhio le differenze... come vedo però hai usato un nuovo templates scaricato da internet quindi il problema è risolto?

**zulukwebsite** · 15-06-2007, 15.00.00

una cosa che ho notato io (ma forse dico una cappellata) è ke con firefox è complicato gestire le altezze dei div più ke le larghezze ...cmq bisognerebbe lavorare molto con il padding e con il margin nei css ....

**Ufobm** · 15-06-2007, 15.23.47

ma più che altezze, larghezze ecc. i veri problemi nascono con gli allineamenti (almeno nel mio caso) e le posizioni degli elementi (ogni float usato è un disastro)!

**zulukwebsite** · 15-06-2007, 16.06.57

Originalmente inviato da Ufobm

ma più che altezze, larghezze ecc. i veri problemi nascono con gli allineamenti (almeno nel mio caso) e le posizioni degli elementi (ogni float usato è un disastro)!

be anche ..bisogna sempre stabilire ki è il padre e il fijo...ogni div dipende dal precedente

Discussione: Template personalizzato

LinkBack

Strumenti discussione

Display

Template personalizzato

Regole di scrittura