Problema sito: risoluzioni?

14-04-2012, 13.58.15

Salve. Ho lavorato al mio sito tenendo conto della risoluzione del mio pc (1280x768), ma ora mi sono accorto che per tutte le altre risoluzioni cambia e non di poco il suo aspetto, soprattutto la posizione dei vari elementi.
Premetto che gli elementi che ho inserito (tabelle, immagini,..) sono tutti con dimensione in percentuale. E ho fatto ciò proprio per evitare problemi con le altre risoluzioni... ma niente.
Secondo me il vero problema è il tag <div style="position:absolute; top: px; left: px"> che ho usato per inserire tutti gli elementi nelle posizioni più adeguate. Però questo tag tiene conto della distanza in pixel da un margine di riferimento. Quindi proprio perchè non è un tag "liquido" ma, appunto, fisso, evidentemente non si adatta a tutte le risoluzioni.

Ora mi chiedo: come ovviare al problema?
Sarebbe preferibile qualche tag con la stessa funzione di <div style>, ma magari che si serve di percentuali. Altrimenti proponetemi qualche altra soluzione.

Grazie in anticipo.

**dreadnaut** · 14-04-2012, 14.32.36

Tolgo subito di mezzo la cosa problematica: banner e link con referrer sono forme di sponsorizzazione esterne, e quindi fuori regolamento.

Il sito: a monte della grafica, c'è un problema di tabelle, che pietrificano il layout delle pagine, costringendoti a coordinate assolute ed altri "aggiustamenti" vecchio stampo, di cui oggi potremmo fare a meno.

Poi vabbeh, c'è anche del javascript non necessario delle immagini, quando basterebbero due righe di css.

Io ti proporrei un'altra soluzione, ma richiede rifare un sacco di roba. Secondo me, l'intero html della tua pagina potrebbe essere questo:

Codice HTML:

<!doctype html>
<html><head>
 <meta charset="utf-8" />
 <title>Wikiguadagno</title>
 <link rel="shortcut icon" href="index_files/icona.ico" />
 <style type="text/css">
   /* ... qua il css ... */
 </style>

</head><body>

<div role="banner">
  <a href="http://www.wikiguadagno.altervista.org" alt="WikiGuadagno">WikiGuadagno</a>
</div>

<ul role="navigation"> 
 <li><a href="index.html">Home</a>
 <li><a href="guida.html">Breve guida</a>
 <li><b>Elite</b>
  <ul>
   <li><a href="beruby.html">Beruby</a>
   <li><a href="20dollars.html">20Dollars2Surf</a>
  </ul>
 <li><b>In prova</b>
  <ul>
   <li><a href="ptcbox.html">Ptc Box</a>
   <li><a href="fandealer.html">Fandealer</a>
   <li><a href="paysnork.html">Paysnork</a>
  </ul>
 <li><a href="contattaci.html">Contattaci</a>
</ul>

<div role="main">

  <h1>Benvenuto su <em>Wikiguadagno</em>.</h1>
  
  <p>Il nostro motto è <em>"Saper guadagnare online"</em>.
  
  <p>Crediamo, infatti, che la sfiducia degli utenti della rete nei confronti del guadagno online sia dovuta soprattutto ad una forma di "cattiva informazione". Questo, dunque, è lo scopo che Wikiguadagno si propone di perseguire: descrivere dettagliatamente le tipologie di guadagno online, facendo riferimento soltanto ai siti più sicuri ed efficienti.
  
  <p>Per una corretta navigazione, invitiamo i nuovi utenti a leggere la nostra <a href="">Breve guida</a>. Ciò per avere una prima idea circa le varie sezioni costituenti il sito.
  
  <p>Sito ottimizzato per Google Chrome.
  
</div>

</body></html>

Il resto può essere tutto css, compreso il posizionamento e tutta la grafica. Se hai voglia di studiartelo un po', ci diamo una pulita?

Discussione: Problema sito: risoluzioni?

LinkBack

Strumenti discussione

Display

Problema sito: risoluzioni?

Regole di scrittura