nuovo sito

**stelici** · 28-02-2007, 13:14

sempre a proposito della realizzazione del mio sito, sono ancora bloccato con il posizionamento delle 3 colonne. Ho fatto uso dei div e di css.
in particolare non riesco a capire perchè la colonna dx non è a destra.
Questo il codice css relativo ai 3 div in questione:
#colonnasx {
background-color: #3366FF;
float: left;
width: 150px;
height: 100%;
margin: 0px;
}

#sezione centro {
background-color: #FFFFFF;
width: 468px;
float: left;
height: 100%;
margin: 0px;
}

#colonnadx {
background-color: #3366FF;
float:left;
width: 150px;
height: 100%;
margin: 0px;

}

aspetto un cortese aiuto.
Grazie

**stelici** · 01-03-2007, 11:39

Ragazzi ho risolto ispostando il #sezionecentro dopo il #colonnadx. Ora il layout è mpaginato come volevo.
Ora però vorrei chiedervi dei consigli:
1) occorre dare ai div, width diversi per i vari broswer?
2) occorre dare al #sezionecentro il margin= 0 150px, visto che le colonne laterali sono 150px, o va bene il float=left;
3) ho provato a dare un bordo al sezionecentro, ma finisce sotto la colonnasx, con float=left. Devo per caso ridurre width dello spessone del bordo;
4) meglio il float o position?;
5) per caricare un css esterno meglio Link o @import? link va usato per attributo Media con css alternativi;

Spero di trovare delle risposte. Intanto ringrazio chiunque voglia rispondermi.

Ciao Ciro

**stelici** · 02-03-2007, 14:54

ragazzi per favore ho bisogno di queste informazioni.
gazie

**stelici** · 06-03-2007, 15:26

nessuna risposta!!!!!

Vi porgo un'altra domanda, alla quale spero che qualcuno, cortesemente, possa rispondermi.

nel mio sito di fantacalcio, vorrei fare in modo che al primo in classifica sia associato un colore (campione), al secondo e terzo un'altro colore (champions) e cosi via per le restanti posizioni.
E' una cosa fattibile con css o serve uno script.

Grazie

**deleted_26** · 06-03-2007, 19:30

script... (lato server)

**stelici** · 07-03-2007, 12:48

puoi darmi indicazioni più precise, per favore. Anche qualche consiglio magari.
ciao e grazie
Ciro

**deleted_26** · 07-03-2007, 19:03

Si tratta di una cosa difficile: ti servirebbe un database...
Ti conv aprire un 3d nella sezione giusta...

**stelici** · 14-03-2007, 12:46

Finalmente dopo aver letto molto, tra guide, articoli e interventi sul forum, a disposizione su html, ho completato il layout da usare come modello per le pagine del mio sito, almeno nella struttura principale (fatte salve piccole migliore/modifiche).
Devo dire che da inesperto, ho tribulato tanto per farsi che tutti i div stessero al loro posto; sopratutto la sezione centrale, non appena faccio modifico al css (bordi, padding dei div e class inseriti) sfila sotto la colonnasx.
Volevo quindi chiedere se qualcuno cortesemente, puo dare un'occhiata al codice html e al css, cosi da avere un parere sul mio operato, se ho sbagliato in qualcosa, cosa migliorereste o cambiereste, insomma se dal punto prettamente tecnico del codice html e css è tutto ok.

Ho usato i niftycorners per la sezione centrale e, seguendo un'articolo su html (Un menu a tendine solo con i css), ho provato a creare un menu a comparsa con html e css, ma non funziona (come mai??, sarà perche sono il local host).

altro problema riscontarto è che se voglio inserice in'icona prima di ogni definizione dle menu sx, mi sballa tutto.

In attesa di vs commenti, vi ringrazio anticipatamente.
Ciao Ciro

P.S.:Purtroppo non potendo allegare i file in questione, non ditemi nulla, ma vi posto il codice qui sotto:

CODICE HTML PER LA INDEX

<!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=iso-8859-1" />
<title>FantaStelici League - Home Page</title>

<meta name="description" content="FantaStelici League è un sito dedicato al gioco del fantacalcio. potrai partecipare a fantastici tornei, con risultati, classifiche e gestione squadre, tutto on-line" />
<meta name="keywords" content="fanta league fantacalcio gioco risultati classifiche squadre serie a calcio campionato" />

<style type="text/css">

</style>
<script type="text/javascript" src="niftycube.js"></script>
<script type="text/javascript">
NiftyLoad=function(){
Nifty("div#newsprimopiano","fixed-height");
Nifty("div#articoli_fc","fixed-height");
Nifty("div#articoli_a","fixed-height");
Nifty("div#articoli_coppe","fixed-height");
Nifty("div#articoli_sport","fixed-height");
Nifty("div#articoli_eventi","fixed-height");
}

</script>
</head>

<body>

<div id="container">

<div id="header">
<h1>FANTASTELICI LEAGUE</h1>
<h3>1° Edizione - Stagione 2007/2008</h3>
</div>

<div id="barnav">
[img]images/home.gif[/img]Home| Storia|
[img]images/mappa-sito.gif[/img]Mappa|
[img]images/contatti.gif[/img]Contatti|
[img]images/stampa.gif[/img]Stampa|
[img]images/iscriviti.gif[/img]ISCRIVITI|
</div>

<div id="colonnasx">
<div class="homepage"> Home Page</div>
<div id="vermenu">
<ul>[*]FantaCalcio
<ul>[*]Lega Serie A[*]Lega Serie B[*]Fanta Champions[*]Fanta Coppa Italia[*]Fanta Coppa Lega[*]Fanta SuperCoppa[*]Regolamenti[/list]
[/list]
</div>

<div class="menu">
FantaCalcio
Serie A Tim
Calcio Coppe
Altri sport
Eventi speciali
Area downoload
Torna a FantaStelici
</div>

</p>
<div id="boxpreferiti">
<td width="auto"> <form target="_blank" class="titoletto">Link preferiti:

<select onchange="this.form.action=this.options[this.selectedIndex].value; this.form.submit();">
<option>Scegli un sito</option>
<option value="./televideo.php">Televideo</option>
<option value="./temporeale.php">Risultati temporeale</option>
<option value="http://www.fulltimescore.com">fulltimescore.com</option>
<option value="http://www.lega-calcio.it">Lega-calcio.it</option>
<option value="http://www.gazzetta.it/Calcio/prob_form">Probabili formazioni</option>
<option value="http://www.fantacalcio.kataweb.it/stat/index.php?page=indisponibili&ck_fantacalcio=BA DSESSION&stat=1">Indisponibili</option>
</select>
</form></td>

</div>

</p>

<div id="boxseriea">
<td width="auto"><form target="_blank" class="titoletto">Serie A TIM

<select onChange="this.form.action=this.options[this.selectedIndex].value; this.form.submit();">
<option>Scegli una squadra</option>
<option value="http://www.ascolicalcio.net/">Ascoli</option>
<option value="http://www.atalanta.it/">Atalanta</option>
<option value="http://www.cagliaricalcio.net/">Cagliari</option>
<option value="http://www.calciocatania.it/">Catania</option>
<option value="http://www.chievoverona.it/">Chievo</option>
<option value="http://www.empolicalcio.it/">Empoli</option>
<option value="http://www.acffiorentina.it/">Fiorentina</option>
<option value="http://www.inter.it/">Inter</option>
<option value="http://www.sslazio.it/">Lazio</option>
<option value="http://www.livornocalcio.it/">Livorno</option>
<option value="http://www.fcmessina.it/">Messina</option>
<option value="http://www.acmilan.com/">Milan</option>
<option value="http://www.ilpalermocalcio.it/">Palermo</option>
<option value="http://www.fcparma.com/">Parma</option>
<option value="http://www.regginacalcio.com/">Reggina</option>
<option value="http://www.asromacalcio.it/">Roma</option>
<option value="http://www.sampdoria.it/">Sampdoria</option>
<option value="http://www.acsiena.it/">Siena</option>
<option value="http://www.toroclub.it/">Torino</option>
<option value="http://www.udinese.it/">Udinese</option>
</select>
</form>
</td>

</div>
</div>

<div id="colonnadx">
<div id="boxricerca">
<form action="#" method="get">
<span class="titoletto">Ricerca un termine: </span>
<input type="text" name="textfield" />
[img]images/cerca.gif[/img]
</form>
</div>
<div id="boxnews">
<dl>
<dt>titolo notizia 1</dt>
<dd>

breve estratto della notizia</p></dd>
<dt>titolo notizia 2</dt>
<dd>

breve estratto della notizia</p></dd>

</dl>
</div>
</div>

<div id="sezionecentro">

<div id="newsprimopiano">

</p>

<span class="titoletto">PRIMO PIANO</span>

[img]#[/img]
<span class="descrizione">fantastica inter</span>
</p>
</div>

<div id="articoli_fc">

<span class="titoletto">FANTACALCIO</span>

[img][/img]
<span class="descrizione">fantastica inter. 17 vittoria di fila.</span>

leggi la notizia
</p>
</div>

<div id="articoli_a">

<span class="titoletto">SERIE A TIM</span>

[img][/img]
<span class="descrizione">INTER MEMORABILE</span>

leggi la notizia
</p>
</div>

<div id="articoli_coppe">

<span class="titoletto">SERIE A TIM</span>

[img][/img]
<span class="descrizione">INTER MEMORABILE</span>

leggi la notizia
</p>
</div>

<div id="articoli_sport">

<span class="titoletto">SERIE A TIM</span>

[img][/img]
<span class="descrizione">INTER MEMORABILE</span>

leggi la notizia
</p>
</div>

<div id="articoli_eventi">

<span class="titoletto">SERIE A TIM</span>

[img][/img]
<span class="descrizione">INTER MEMORABILE</span>

leggi la notizia
</p>
</div>

</div>

<div id="footer">

copyright 2007-2008 - Grafica, layout, sono di esclusiva proprietà di FantaStelici League

</div>
</div>
</body>
</html>

**stelici** · 14-03-2007, 12:48

Scusate ho dimenticato il css

CODICE CSS
/* CSS Document */

/*stili generici per il layout */
html {
height: 100%;
}

body {
text-align: center;
margin: 0px;
padding: 0px;
height: 100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color:#0000FF;
background-color: #FFFFFF;
}

#container {
width: 768px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
height: 100%;
text-align: left;
background-color: #FFFFCC;
}

#barnav {
background-color: #FFFFCC;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #0000FF;
padding-left: 1px;
padding-top: 2px;
padding-bottom: 2px;
text-align: left;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #0000ff;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #0000ff;
border-left-color: #0000ff;
}

#colonnasx {
background-color: #6699FF;
float: left;
width: 149px;
height: 100%;
margin: 0px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #0000FF;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #0000FF;
}

#sezionecentro {
width: 462px;
float: left;
height: 100%;
margin: 0;
background-color: #FFFFCC;
}

#colonnadx {
background-color: #6699FF;
float: right;
width: 149px;
height: 100%;
margin: 0px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #0000FF;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #0000FF;

}

h1 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 30px;
color: #FFFFFF;
padding-top: 10px;
}

h2 {
color: #0000FF;
font-size: 16px;
font-family: Geneva, Arial, Helvetica, sans-serif;
}

h3 {
color: #FFFFFF;
font-size: 14px;
font-family: Geneva, Arial, Helvetica, sans-serif;
margin-bottom: 5px;
}

p {
font:Verdana, Arial, Helvetica, sans-serif 12px;
margin: 0px 0px 16px 0px;
padding: 0px;
text-align: justify;

}

a { font:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#0000FF;
text-decoration:none;

}

/*stili generici su header e footer*/
div#header {
height:100px;
text-align: center;
background-color: #0000FF;
}

div#footer{
clear:both;
text-align:center;
padding: 5px 0;
background-color: #0000FF;
color: #FFFFCC;
font-size: 10px;
}

#footer a {
font-weight: bold;
text-decoration: none;
color: #99CCFF;
}

/*stili specifici per colonna sx*/
.homepage {
color: #0000FF;
background-color: #FFFFCC;
padding-left: 1px;
border-bottom: 1px solid #0000ff;
}

.menu {
background-color: #6699FF;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #0000FF;
text-align: left;
}

div#vermenu {
width:100%;
float:left;
margin:0;
padding:0;
border-top: 1px solid #0000FF;
background-color: #6699FF;

}

div#vermenu ul{
margin:0;
padding:0;
list-style-type:none;

}

div#vermenu li{
width:140px;
float:left;
margin:0;
padding:0;
border-right: 1px solid #0000FF;
color: #0000FF;

}

div#vermenu a{
display: block;
padding:5px;
color: #0000FF;
text-decoration:none;

}

div#vermenu a:hover{
color: #0000FF;
text-decoration:none;
background-color:#66CCFF;

}

div#vermenu li ul{
display:none;

}

div#vermenu li:hover ul{
display:block;
position:absolute;
z-index:1;
width:150px;
padding:0;
margin: 0 0 0 -1px;
border: 1px solid #0000FF;
background:#FFFFCC;

}

div#vermenu li li{
border:none;
width:150px;

}

div#vermenu li li a{
padding:2px 2px 2px 10px;

}

#boxpreferiti {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #000000;
width: 145px;
background-color: #FFFFCC;
border-top-width: 2px;
border-bottom-width: 2px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #0000FF;
border-bottom-color: #0000FF;
}

#boxseriea {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #000000;
width: auto;
background-color: #FFFFCC;
border-top-width: 2px;
border-bottom-width: 2px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #0000FF;
border-bottom-color: #0000FF;
}

/*stili specifici per colonna centrale*/
#newsprimopiano {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #0000FF;
background-color: #99CCFF;
width: 445px;
margin-bottom:10px;
font-weight: bold;
margin-top: 10px;
height: 200px;
margin-left: 9px;
}

.newsprimopiano {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
text-align: justify;
padding-left: 5px;
}

.primopiano img {
float: left;
margin: 10px;
}

#articoli_fc {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #0000FF;
background-color: #99CCFF;
width: 445px;
margin-top: 10px;
font-weight: bold;
margin-left: 9px;
}

#articoli_a {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #0000FF;
background-color: #99CCFF;
width: 445px;
margin-top: 10px;
font-weight: bold;
margin-left: 9px;
}

#articoli_coppe {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #0000FF;
background-color: #99CCFF;
width: 445px;
margin-top: 10px;
font-weight: bold;
margin-left: 9px;
}

#articoli_sport {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #0000FF;
background-color: #99CCFF;
width: 445px;
margin-top: 10px;
font-weight: bold;
margin-left: 9px;
}

#articoli_eventi {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #0000FF;
background-color: #99CCFF;
width: 445px;
margin-top: 10px;
font-weight: bold;
margin-left: 9px;
}
.articoli img {
float: left;
margin-right: 5px;
border: 1px solid #0000FF;
}

.titoletto {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #0000FF;
font-weight: bold;
text-decoration:none;
padding-left: 5px;
}

.descrizione {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
text-align: justify;
padding-left: 5px;
}

/*stili specifici per colonna dx*/
#boxricerca {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #0000FF;
background-color: #6699FF;
text-align: left;
margin: 0px;
width: auto;
padding-top: 10px;
padding-bottom: 5px;
}

#ricerca img {
vertical-align: middle;
}
form {
margin: 0px;
padding: 0px;
}

input {
vertical-align: middle;
margin: 2px;
background-color: #FFFFCC;
text-align: left;
}

#boxnews {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #000000;
width: auto;
background-color: #FFFFCC;
border-top-width: 2px;
border-bottom-width: 2px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #0000FF;
border-bottom-color: #0000FF;
}

dl { width: auto; line-height:1.3; color:#000000;
}

dt {
font-weight:bold;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
}

dt a {
color: #0000FF;
text-decoration:none;
font-size: 12px;
}

dt a:hover { color: #66CCFF;
}

dd {
margin:0;
padding-top: 2px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 2px;
}

dd p {
margin:0;
padding-top: 0;
padding-right: 0;
padding-left: 5;
padding-bottom: 0px;
}

/*stili specifici per la navigazione*/
#barnav a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
margin-right: 2px;
color: #0000FF;
font-weight: bold;
}

#barnav a:hover {
background-color: #66CCFF;
text-decoration: none;
}

.menu a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #0000FF;
text-decoration: none;
display: block;
width: auto;
border-bottom: 1px solid #ffffff;
border-right: 0px solid #ffffff;
border-left: 0px solid #ffffff;
border-top: 1px solid #FFFFFF;
padding: 1px;
font-weight: bold;
}

.menu a:hover {
background-color: #66CCFF;
}

a#activelink {
color: #0000FF;
font-weight:bold;
text-decoration:none;
font-size: 12px;
}

.fantacalcio a { text-decoration:blink;
}

**deleted_26** · 14-03-2007, 16:56

usare [code] no?

Discussione: nuovo sito

Strumenti discussione

Ricerca discussione

Visualizza

Permessi di invio