Visualizzazione dei risultati da 1 a 9 su 9
  1. #1

    Problema dimensionamento celle

    Salve.
    Vorrei venire a capo di un piccolo problema di visualizzazione...
    Questa è l'home page di un mio sito: http://gas75.interfree.it/index.html
    Come potete notare, mentre il logo in alto è centrato, le due celle laterali sottostanti non sono della medesima larghezza grafica, nel senso che non rispettano la larghezza impostata da me su ciascuna delle due, precisamente width="144", come potete verificare aprendo il codice sorgente...

    Inoltre, la seconda colonna contiene un iframe che, se gli assegno la larghezza della colonna, width="400", non mi occupa tutta la larghezza disponibile, cosa che invece fa con width="420"! Se poi metto all'iframe width="100%", la barra laterale addirittura va a sforare sull'immagine della cella a destra!

    Insomma, le larghezze delle colonne sono fissate in 144, 400, 292, 144, totale 980 come impostto definendo la tabella: come faccio affinché prima e ultima colonna si visualizzino come da istruzioni, e l'iframe occupi la larghezza giusta senza dovergli assegnare 20 pixel in più?

    Ho controllato tutte le larghezze inserite negli oggetti presenti...

    Metto anche il codice completo della tabella, qualora fosse utile...
    codice:
    <table width="980" border="0" cellspacing="0" cellpadding="0">
    	<tr>
    		<td width="144" rowspan="3" valign="top" align="center">
    		<div style="background:#000000">Menù</div>
    		
    
    Autori
    
    		Disegnatori
    
    		Personaggi
    
    		Serie mensile
    
    		Altre pubblicazioni
    
    		Frasario
    
    		Dampyr Girls
    
    		Articoli
    
    		Gadget
    
    		Link</p>
    		<style type="text/css">
    		@import url(http://www.google.com/cse/api/branding.css);
    		</style>
    		<div class="cse-branding-bottom" style="color:#FFFFFF">
    		<div class="cse-branding-form"><form action="http://www.google.it/cse" id="cse-search-box" target="_blank">
    		<div><input type="hidden" name="cx" value="partner-pub-6822685114702104:bwqrwb-phpm" />
            <input type="text" name="q" size="12" />
            <input type="submit" name="sa" value="Cerca nel sito" /></div></form>
            </div>
            <div class="cse-branding-logo"></div>
            <div class="cse-branding-text">Ricerca personalizzata</div>
            </div></td> 
    		<td width="400" height="146" valign="middle"><center><div id="box" style="width: 400px; height: 146px; border: none;"><table height="146" cellpadding="2" 
    		cellspacing="0" width="100%" style="display:none">
    			<tr>
    				<td align="center" valign="middle"><div style="font-size:14pt">Orrore, azione e sentimento a caccia di Vampiri, e non solo, nei luoghi più suggestivi del 
    				pianeta, come non sono mai stati proposti prima, grazie alla bravura di uno staff di autori e disegnatori senza rivali: sfogliare per credere!</div></td>
    			</tr>
    		</table>
    		<table height="146" cellpadding="2" cellspacing="0" width="100%" style="display:none">
    			<tr>
    				<td align="center" valign="middle"><div style="font-size:14pt">Harlan Draka, il figlio di un Vampiro dal fortissimo carisma... 
    				Tesla, la Non-morta grintosa e scatenata quanto dolcissima... Kurjak, il guerrigliero esperto e brontolone... Loro gli eroi, ma tanti amici in tutto il mondo 
    				abbracciano la loro causa!</div></td>
    			</tr>
    		</table>
    		<table height="146" cellpadding="2" cellspacing="0" width="100%" style="display:none">
    			<tr>
    				<td align="center" valign="middle"><div style="font-size:14pt">Le trame di tutti gli albi regolari e delle pubblicazioni extra, coadiuvate da schede, copertine, frasario, sosia ed approfondimenti! "Dampyr" è 
    				anche sul Web, per chi vuole fare il punto sulla saga o saperne di più sul mondo di Harlan e dei Maestri della Notte!</div></td>
    			</tr>
    		</table>
    		<table height="146" cellpadding="2" cellspacing="0" width="100%" style="display:none">
    			<tr>
    				<td align="center" valign="middle"><div style="font-size:14pt">Interviste esclusive a Fabrizio Russo, Stefano Andreucci, Luca 
    				Raimondo, Nicola Genzianella.</div></td>
    			</tr>
    		</table>
    		<table height="146" cellpadding="2" cellspacing="0" width="100%" style="display:none">
    			<tr>
    				<td align="center" valign="middle"><div style="font-size:14pt">Il sito offre alcuni file dedicati a "Dampyr": icone, salvaschermo, 
    				skin, sfondi, in esclusiva e pronti da	scaricare! E' possibile anche cimentarsi nel Dampyr Quiz per testare la propria conoscenza di Harlan & 
    				soci!</div></td>
    			</tr>
    		</table>
    		<table height="146" cellpadding="2" cellspacing="0" width="100%" style="display:none">
    			<tr>
    				<td align="center" valign="middle"><div style="font-size:14pt">Praga, la capitale ceca, è il quartier generale dei nostri eroi e lo 
    				scenario di alcune tra le storie più belle ed importanti: entra a conoscerne storia e immagini!</div></td>
    			</tr>
    		</table></div></center></td>
    		<td width="292" height="380" valign="top" rowspan="3"><div align="center"><MAP NAME="mappa"><AREA SHAPE="rect" COORDS="191,170,260,194" HREF="Fumetto.htm" 
    		alt="Clicca per entrare" title="Clicca per entrare" onClick="window.focus()"></MAP>[img]home_divadlo.jpg[/img]</div></td>
    		<td width="144" rowspan="3" valign="top" align="center"><div style="background:#000000">Tagboard</div>
    		
    
    <div id="cboxdiv" style="text-align: center; line-height: 0"><div><iframe frameborder="0" width="144" height="246" 
    		src="http://www6.cbox.ws/box/?boxid=292647&amp;boxtag=fwmv2a&amp;sec=main" marginheight="0" marginwidth="0" scrolling="auto" allowtransparency="yes" name="cboxmain" 
    		style="border:#000000 1px solid;" id="cboxmain"></iframe></div>
    		<div><iframe frameborder="0" width="144" height="102" src="http://www6.cbox.ws/box/?boxid=292647&amp;boxtag=fwmv2a&amp;sec=form" marginheight="0" marginwidth="0" 
    		scrolling="no" allowtransparency="yes" name="cboxform" style="border:#000000 1px solid;border-top:0px" id="cboxform"></iframe></div></div></p></td>
    	</tr>
    	<tr>
    		<td width="400" height="160" valign="middle"><iframe src="News.html" name="tab" width="420" height="210" marginheight="0" topmargin="0" marginwidth="2" 
    		scrolling="auto" frameborder="1" target="_blank"></iframe></td>
    	</tr>
    	<tr>
    		<td width="400" height="24" align="center" valign="middle">Novità | Newsletter | Scambio banner</td>
    	</tr>
    	<tr>
    		<td colspan="4"><div align="center" style="font-size:14pt"><font size="2">Disegno in home page di <a href="http://www.lucaraimondo.it/">Luca 
    		Raimondo</a>.</font></div></td>
    	</tr>
    </table></div></center>

  2. #2
    Non riesco a trovare un errore vero e proprio nel tuo codice.
    Quindi o mi è sfuggito o lo "sfasamento" potrebbe essere dovuto al fatto che per impostare la struttura del tuo sito hai mischiato tabelle e div.


    Dato che le tabelle non dovrebbero essere usate per dare un'impostazione alla pagina ma solo per dati tabellari una soluzione potrebbe essere utilizzare solo i div.

    Un'altra cosa che ho notato è che nella tua pagina hai dichiarato il doctype ma non hai messo
    codice:
    <html xmlns="http://www.w3.org/1999/xhtml">
    al posto di
    codice:
    <html>
    Non credo che sia questo a darti problemi, ma sarebbe meglio che lo sistemassi.

    Fammi sapere se hai risolto!

  3. #3
    L'aggiunta di quel codice non cambia una virgola...

    Non so se ho "mischiato" tabelle e div... Quella pagina era nata come una tabella centrata divisa in 3 colonne: testi a sinistra e destra e immagine centrale... Lì andava tutto bene, poi quando ho inserito la tagboard (dove tabelle e div abbondano ma non per mia scelta... ) e la ricerca di Google, si è presentato questo problema delle due colonne e dell'iframe...

  4. #4
    In realtà li mischi anche prima della tagboard
    codice:
    <div align="center">
     [img]banner_grande_new.gif[/img]
     
     
     Togli la pubblicità
    </div> 
    <table width="980" border="0" cellspacing="0" cellpadding="0"> 
     <tr>
    l'immagine del titolo è all'interno di un div
    mentre il resto del sito è impostato su tabelle

    dentro queste tabelle ci sono altri div es.
    codice:
    <div style="background:#000000">Menù</div>

    una cosa del genere diventa difficile da gestire, nel senso che se c'è un errore diventa moolto difficile da trovare...

    se tu imposti la pagina solo sui div (tagboard escluso) o l'errore sparisce oppure diventa più semplice trovarlo

    io in genere imposto le pagine grossomodo così

    codice:
    <body>
     <div style="margin:auto; width:980px;" id="contenitore">
      <div style="width:980px; height:__px" id="titolo"></div>
      <div style="width:980px; height:__px" id="centro">
       <div style="float:left;width:144px; height:__px" id="menu"></div>
       <div style="float:left;width:400px; height:__px" id="testo"></div>
       <div style="float:left;width:292px; height:__px" id="immagine"></div>
       <div style="float:left;width:144px; height:__px" id="tagboard"></div>
      </div>
      <div style="width:980; height:__px" id="pedice"></div>
     </div>
    </body>

  5. #5
    Riguardando il tuo codice

    prova a mettere i
    codice:
    cellpadding="2"
    uguali a zero pixel e vedere se non siano quelli i 20 pixel in più!

  6. #6
    "Montare" una pagina web soltanto con i div non l'ho mai fatto...
    Non credevo creasse problemi centrare un'immagine fuori da una tabella con sotto la tabella...
    e se ho usato dei div in una tabella è stato per necessità grafica, non per incasinare il codice...

    I cellpadding posti uguale a 0 non risolvono... Del resto creano "margine" dentro una cella, non fuori... e mi servono pari a 2 per questioni di spaziatura tra i contenuti di celle diverse.
    io in genere imposto le pagine grossomodo così
    Sembra che metti assieme una pagina composta da frame...

  7. #7
    Sembra che metti assieme una pagina composta da frame...
    non è che con le tabelle sia molto diverso solo che per definire un'area della pagina devi usare 3 tag (table - tr -td) invece di uno (div).

    All'inizio montare una pagina di soli DIV può apparire più difficile, lo so per esperienza personale anch'io inizialmente usavo le tabelle per il layout, ma se ci prendi un po' la mano i risultati sono migliori...

    Se vuoi provare ti posso dare una mano!

  8. #8
    Se invece non vuoi passare ai div, un metodo per capire dov'è il problema può essere dare TEMPORANEAMENTE un colore di sfondo alle tabelle e alle celle.
    In modo da capire qual è il punto in cui si sfasa.

    es.
    codice:
    <table style="background-color:#f00">
    la tabella interessata diventerà rossa e tu potrai vedere se è al posto giusto oppure se è sfasata... e così per tutti gli altri tag: table, tr, td, div

    è un metodo un po' noioso, ma aiuta molto.

  9. #9
    Ho quasi risolto... Ho cambiato la larghezza delle tabelle incluse nel div "box", fissando 400 anziché 100% che intendeva sfruttare la larghezza della cella che le conteneva... Avevo preso il 100% dal codice trovato su una guida per realizzare quell'effetto... creato credo per adattarsi a tutte le larghezze, definendo queste in una cella contenitrice...

    Ora le due colonne laterali sembrano abbastanza simmetriche, credo che l'ideale sia ora allinearle con il logo.

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.