Printable View
Ciao a tutti, sono da un po' su altervista e ho compreso abbastanza come funziona. L'unica cosa che non riesco a capire è l'impaginazione. Continuo a fare tabelle su tabelle per impaginare ma non mi viene ciò che vorrei. Mi potete aiutare???
Il sito è http://greenlogic.altervista.org/Home/Home.html
ma in particolare questa pagina: che non riesco a venirne a capo. Grazie a tutti.
http://greenlogic.altervista.org/Oratorio/Oratorio.html
Devo usare il CSS?? Non lo so tanto però! :(
Aiuto, che mal di testa... seriamente, faccio una fatica bestiale a cercare di distinguere i singoli contenuti.
Provo a darti qualche consiglio molto generico, utile se dovrai riprogettare il sito:
- fai in modo che la colonna con le informazioni principali sia una sola: sul web, diversamente dalla stampa, non funziona molto bene suddividere le informazioni su più colonne
- rendi questa colonna ben distinguibile dalle altre, con un (colore di) sfondo diverso, e magari con un testo più grande (nel tuo caso, meglio più piccolo sulle altre)
- la larghezza delle colonne deve essere equilibrata: tieni presente che righe più corte sono maggiormente leggibili per l'occhio umano, ma troppo corte rendono difficile l'impaginazione
Ti sconsiglio caldamente di utilizzare "layout tables": le tabelle non sono nate per impaginare contenuti, ma per disporre informazioni che si prestano naturalmente ad una visualizzazione tabellare.
Ti serve decisamente un'infarinatura di CSS, soprattutto per quanto riguarda i layout. Prova a cercare in rete qualche guida (ce n'è una ottima su http://css.html.it/, non riesco a linkartela perché al momento il sito è irraggiungibile)...
Stammi bene...
visto che non riesce a linkartela lui (che ha ragione) te la linko io: http://css.html.it/guide/leggi/3/gui...iti-con-i-css/
Grazie mille 1 tutti e due !!! :) a presto!!
Salve Ragazzi oggi mi sono rimesso al lavoro, ma purtroppo non riesco ancora a comprendere come allineare bene il CSS. Un esempio per farvi capire è questo. Potete aiutarmi in qualche modo? Grazie a tutti!
http://greenlogic.altervista.org/LaNostraStoria/a.html
Il codice è il seguente se vi può servire:
[DS] Usa i tag di codice quando ne riporti ampi stralci, si legge meglio... e non esce un post kilometricoCodice HTML:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body{text-align:center;}
div#boxbig{border:2px solid black; width:800px; height:1700px; margin:0 auto 0 auto; text-align:left;}
div#boxintestazione{border:2px solid blue; width:796px; height:300px;}
div#boxmenu{float:left; border:2px solid green; width:396px; height:1392px;}
div#boxcontenuto{float:right; border:2px solid red; width:396px; height:1392px;}
</style>
</head>
<body>
<div id="boxbig">
<div id="boxintestazione">
<div align="center">
<img src="Desarumba_logo2.png">
<br>
<font size=7>
<font face ="French Script MT">
<font color="Green"
<text> il sito ufficiale. </text>
</font>
</font>
<br>
<script type="text/javascript">
//<![CDATA[
document.write('<s'+'cript type="text/javascript" src="http://ad.altervista.org/js.ad/size=728X90/r='+new Date().getTime()+'"><\/s'+'cript>');
//]]>
</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Green Logic</title>
<style type="text/css">
.menu1 {padding:0 0 0 32px; margin:0; list-style:none; height:35px; background:#fff url(button1.gif);
position:relative; border:1px solid #000; border-width:0 1px; border-bottom:1px solid #444;}
.menu1 li {float:left;}
.menu1 li a {display:block; float:left; height:35px; line-height:35px; color:#aaa; text-decoration:none;
font-size:11px; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 8px;
cursor:pointer;}
.menu1 li a b {float:left; display:block; padding:0 16px 0 8px;}
.menu1 li.current a {color:#fff; background:url(button3.gif);}
.menu1 li.current a b {background:url(button3.gif) no-repeat right top;}
.menu1 li a:hover {color:#fff; background:#000 url(button2.gif);}
.menu1 li a:hover b {background:url(button2.gif) no-repeat right top;}
.menu1 li.current a:hover {color:#fff; background:#000 url(button3.gif); cursor:default;}
.menu1 li.current a:hover b {background:url(button3.gif) no-repeat right top;}
</style>
</head>
<body>
<ul class="menu1">
<li><a href="http://greenlogic.altervista.org/Home/Home.html"><b>Home</b></a></li>
<li class="current"><a href="http://greenlogic.altervista.org/LaNostraStoria/LaNostraStoria.html"><b>La nostra storia</b></a></li>
<li><a href="http://greenlogic.altervista.org/Musica/Musica.html"><b>Musica</b></a></li>
<li><a href="http://greenlogic.altervista.org/Informatica/Informatica.html"><b>Informatica</b></a></li>
<li><a href="http://greenlogic.altervista.org/Norvegia/Norvegia.html"><b>Norvegia</b></a></li>
<li><a href="http://greenlogic.altervista.org/Oratorio/Oratorio.html"><b>Oratorio</b></a></li>
<li><a href="http://greenlogic.altervista.org/CanaleInter/Mediaplayer.php#nogo"><b>Inter</b></a></li>
<li><a href="http://greenlogic.altervista.org/Curiosita/curiosita.html"><b>Progetti e curiosità</b></a></li>
</ul>
</div>
<div id="boxmenu">
Qui possiamo inserire il nostro menu di navigazione.
</div>
<div id="boxcontenuto">
Qui inseriamo il contenuto della pagina.
</div>
</div>
</body>
</html>
il tuo codice non ha alcun senso, hai messo due volte il tag <head></head> stessa cosa il tag <body></body>, prova a riscrivere daccapo tutto ricordandoti che i tag che ho detto sopra ci possono essere una volta sola, ora provo a riscrivertelo io con anche l'ndentazione.
l'ho provato e funziona, non é proprio correttissimo, ma per adesso va beneCodice HTML:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Green Logic</title>
<style type="text/css">
body{
text-align:center;
}
#boxbig{
border:2px solid black;
width:800px;
height:1700px;
margin:0 auto 0 auto;
text-align:left;
}
#boxintestazione{
border:2px solid blue;
width:796px;
height:300px;
}
#boxmenu{
position: absolute;
left: 104px;
top: 314px;
border:2px solid green;
width:200px;
height:1392px;
}
#boxcontenuto{
position: absolute;
left: 308px;
top: 314px;
border:2px solid red;
width:592px;
height:1392px;
}
.menu1 {padding:0 0 0 32px; margin:0; list-style:none; height:35px; background:#fff url(button1.gif);
position:relative; border:1px solid #000; border-width:0 1px; border-bottom:1px solid #444;}
.menu1 li {float:left;}
.menu1 li a {display:block; float:left; height:35px; line-height:35px; color:#aaa; text-decoration:none;
font-size:11px; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 8px;
cursor:pointer;}
.menu1 li a b {float:left; display:block; padding:0 16px 0 8px;}
.menu1 li.current a {color:#fff; background:url(button3.gif);}
.menu1 li.current a b {background:url(button3.gif) no-repeat right top;}
.menu1 li a:hover {color:#fff; background:#000 url(button2.gif);}
.menu1 li a:hover b {background:url(button2.gif) no-repeat right top;}
.menu1 li.current a:hover {color:#fff; background:#000 url(button3.gif); cursor:default;}
.menu1 li.current a:hover b {background:url(button3.gif) no-repeat right top;}
</style>
</head>
<body>
<div id="boxbig">
<div id="boxintestazione">
<img src="Desarumba_logo2.png"><br/>
<font face ="French Script MT" size=7 color="Green">
il sito ufficiale.
</font><br/>
<script type="text/javascript">//<![CDATA[ document.write('<s'+'cript type="text/javascript" src="http://ad.altervista.org/js.ad/size=728X90/r='+new Date().getTime()+'"><\/s'+'cript>'); //]]>
</script>
<ul class="menu1">
<li>
<a href="http://greenlogic.altervista.org/Home/Home.html"><b>Home</b></a>
</li>
<li class="current">
<a href="http://greenlogic.altervista.org/LaNostraStoria/LaNostraStoria.html"><b>La nostra storia</b></a>
</li>
<li>
<a href="http://greenlogic.altervista.org/Musica/Musica.html"><b>Musica</b></a>
</li>
<li>
<a href="http://greenlogic.altervista.org/Informatica/Informatica.html"><b>Informatica</b></a>
</li>
<li>
<a href="http://greenlogic.altervista.org/Norvegia/Norvegia.html"><b>Norvegia</b></a>
</li>
<li>
<a href="http://greenlogic.altervista.org/Oratorio/Oratorio.html"><b>Oratorio</b></a>
</li>
<li>
<a href="http://greenlogic.altervista.org/CanaleInter/Mediaplayer.php#nogo"><b>Inter</b></a>
</li>
<li>
<a href="http://greenlogic.altervista.org/Curiosita/curiosita.html"><b>Progetti e curiosità</b></a>
</li>
</ul>
</div>
<div id="boxmenu">
Qui possiamo inserire il nostro menu di navigazione.
</div>
<div id="boxcontenuto">
Qui inseriamo il contenuto della pagina.
</div>
</div>
</body>
</html>
Ragazzi, voi avreste un codice per impostare lo stesso lavoro ma in css? X favore sn in crisi :( grazie
http://greenlogic.altervista.org/Oratorio/Oratorio.html
ehm, non ho capito la domanda, tu intendi fare la pagina che hai linkato in css?
Si :) esatto!!Citazione:
Originalmente inviato da worldpixel