Impaginazione aiuto

18-06-2010, 19.54.30

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ò! :(

**dementialsite** · 18-06-2010, 22.42.20

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...

19-06-2010, 00.14.01

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/

19-06-2010, 09.33.25

Grazie mille 1 tutti e due !!! :) a presto!!

19-06-2010, 11.05.24

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:

Codice 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>

[DS] Usa i tag di codice quando ne riporti ampi stralci, si legge meglio... e non esce un post kilometrico

19-06-2010, 11.59.59

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.

Codice 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>

l'ho provato e funziona, non é proprio correttissimo, ma per adesso va bene

19-06-2010, 20.58.05

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

19-06-2010, 22.11.20

ehm, non ho capito la domanda, tu intendi fare la pagina che hai linkato in css?

20-06-2010, 09.26.54

Originalmente inviato da worldpixel

ehm, non ho capito la domanda, tu intendi fare la pagina che hai linkato in css?

Si :) esatto!!

Discussione: Impaginazione aiuto

LinkBack

Strumenti discussione

Display

Impaginazione aiuto

Regole di scrittura