Layout da sistemare(centrare, sfondo,ecc...)

**pomps** · 18-10-2006, 22:44

Salve a tutti

avrei bisogno di qualche suggerimento e/o aiutino

Dunque, sto realizzando il sito per il mio studio, tramite tabelle, però avrei alcune cose da chiedere che non riesco a risolvere.
Vi posto il link al sito e alla pagina che ho realizzato: qui

come vedete c'è un header con il menù principale, un menù laterale a seconda della sezione, la zona bianca per i conttenuti e il footer.
Vi elenco subito i problemi che vorrei risolvere:
-devo centrare il tutto nella finesra del browser,
-non deve esserci lo spazio bianco sopra all'header,
-la larghezza totale dell'header è di 760pixel, oltre questa larghezza dovrebbe andarci un bordino nero di 1pixel, un'ombra e uno sfondo che si ripete,
-per i contenuti volevo inserirli tramite css...è possibile farlo? si tratterebbe di inseririre immagini e testo( in questa specifica sezione ci vanno 2 immagini che linkano a due video in pop-up)
-i pulsanti sono dei semplici rollover, però vorrei che rimanessero del colore celeste quando siamo nella sezione giusta...

vi posto l'immagine del layout che dovrei realizzare:
layout

scusate le troppe domande...ma non son molto tagliato con l'html

grazie...ciao

**pomps** · 19-10-2006, 19:35

nessuno mi dà una mano?....stò impazzendo, non riesco a risolverne neanche una...

**tudo75** · 19-10-2006, 19:49

per eliminare i margini bianchi inserisci nel css:

html, body {
margin: 0;
padding: 0;
}

mentre per centrare racchiudi la tabella madre tra i tag center:
<center>
<table ...
</table>
</center>
</body>

**tudo75** · 19-10-2006, 20:01

per il resto ci sono troppe cose da rivedere.
per i margini esterni puoi creare due colonne esterne con le zone d'ombra ed assegnare un background con la retinatura all'intera pagina.
dovresti rivedere il codice per ripulirlo da una serie di errori e comportamenti sballati
ti consiglio di cercare gli articoli sul sito per il layout con i css a colonne e riprovare successivamente

**pomps** · 19-10-2006, 20:49

ciao,
intanto grazie per aver risposto

dunque, per quanto riguarda il centrare la pagina ho risolto in parte, visto che l'header e il footer si centrano, ma poi il menù laterale si sposta verso l'interno del layout....così
ho messo i tag center come hai detto tu.

poi per il bordo bianco sopra non ho risolto, ho creato una nuova regola css nello stile interno, aggiungendo come proprietà il margin e il padding...ma niente.

ora provo con le ombre e lo sfondo retinato.......come lo posso fare questo sfondo retinato?

In effetti all'inizio avevo provato con i css, e i div per ogni parte del layout...ma poi ho rinunciato perchè non riuscivo a mettere i vari menù con i rollover

**tudo75** · 20-10-2006, 10:51

ecco il codice html modificato. per il fondo ed il resto della grafica reinserisci l'immagine del layout

codice:

<!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>Documento senza titolo</title>

<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<style type="text/css">
<!--
.copyright {
	color: #6e7d8e;
	font-size: 12px;
	font-family: arial;
}
.termini {
	color: #f7941d;
	font-size: 12px;
	font-family: arial;
	text-decoration: underline;
}
body, html {
	margin: 0;
	padding: 0;
}
-->
</style></head><body onload="MM_preloadImages('images/home_over.jpg','images/shorts_over.jpg','images/portfolio_over.jpg','images/studio_over.jpg','images/contatti_over.jpg','images/rg_over.gif','images/mg_over.gif')">
<center>
<table border="0" cellpadding="0" cellspacing="0" width="760">
  
  <tbody><tr>
    <td rowspan="3" valign="top" width="335">[img]shorts_files/Logo.jpg[/img]</td>
    <td height="12">[img]shorts_files/filetto_sopramenu.jpg[/img]</td>
  </tr>
  <tr>
    <td height="23"><table border="0" cellpadding="0" cellspacing="0" width="425">
      <tbody><tr>
        <td>[img]shorts_files/home.jpg[/img][img]shorts_files/shorts.jpg[/img][img]shorts_files/portfolio.jpg[/img][img]shorts_files/studio.jpg[/img][img]shorts_files/contatti.jpg[/img]</td>
      </tr>
    </tbody></table></td>
  </tr>
  <tr>
    <td height="98">[img]shorts_files/sotto_menu.jpg[/img]</td>
  </tr>
  <tr>
    <td height="48" valign="top">[img]shorts_files/sopra_menu_lat.gif[/img]</td>
    <td rowspan="3" valign="top" width="486"></td>
  </tr>
  <tr>
    <td height="45" valign="top"><table border="0" cellpadding="0" cellspacing="0" width="138">
      <tbody><tr>
        <td>[img]shorts_files/rg.gif[/img]</td>
      </tr>
      <tr>
        <td>[img]shorts_files/mg.gif[/img]</td>
      </tr>
    </tbody></table></td>
  </tr>
  <tr>
    <td valign="top">[img]shorts_files/sotto_menu_lat.jpg[/img]</td>
  </tr>
  <tr>
    <td colspan="2" height="17" valign="top">[img]shorts_files/footer.gif[/img]</td>
  </tr>
  <tr>
    <td colspan="2" class="copyright" align="center" height="17" valign="top">Copyright 2006 ANIMATOON STUDIO, All Rights Reserved, <span class="termini">Termini e Condizioni </span>



</td>
  </tr>
</tbody></table>
</center>
</body></html>

**salasir** · 20-10-2006, 11:28

Due cose poi vedi tu...

Il tag <center> è deprecato.

Non si usano le tabelle per il layout ma i CSS. Se non conosci i CSS. ti consiglio di darci un'occhiatina ...

**pomps** · 20-10-2006, 12:15

ciao,

ok...grazie alle tue correzioni qualche cosa si è risolto, come il bordo superiore.
però resta sempre il problema che il menù laterale si è spostato al centro....mmmm

lo sfondo come lo imposto?...alla fine potrei eliminare le ombre laterali e lasciare un bordino da 1pixel nero.

Salasir...purtroppo non li so usare i css, già è tanto se riesco a fare qualcosa con le tabelle

**tudo75** · 20-10-2006, 13:33

modifica così il css

html, body{
margin: 0;
padding: 0;
background: #ffffff url(/img/immagine_di Sfondo.jpg) repeat;
}
e l'immagine deve essere un quadrato del minor numero di pixel possibile

**tudo75** · 20-10-2006, 21:16

non hai reinserito l'immagine del layout finale nel tuo sito.
fallo e vedrò di darti una mano

Discussione: Layout da sistemare(centrare, sfondo,ecc...)

Strumenti discussione

Ricerca discussione

Visualizza

Layout da sistemare(centrare, sfondo,ecc...)

Permessi di invio