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

    Convertire questa tabella in CSS

    Salve,
    E' difficile abbandonare la struttura a tabelle, soprattutto se si è giunti a stabilire un proprio "template" standard che va bene praticamente su quasi tutto... ma è un passaggio che "s'ha da fà": quindi, perdonate i miei (presumo numerosi) post da novellino...

    In sostanza, come accennavo prima, devo convertire un mio "template" tabellare in una forma tableless... ho già incontrato una prima difficoltà nella conversione dell'header... la tabella è questa:
    codice:
    <table width="100%"  border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="1" align="left">[img]header-left.jpg[/img]</td>
        <td width="100%" align="right" valign="bottom" background="header-bg.jpg"></td>
        <td width="1" align="right">[img]header-right.jpg[/img]</td>
      </tr>
    </table>
    La parte che mi dà grattacapi è la terza colonna: non riesco a posizionare a destra l'immagine header-right.jpg (con le tabelle era un gioco da ragazzi), tenendo presente che la colonna centrale, un giorno, potrebbe avere dei contenuti - ad esempio il codice di un banner.
    Finora ho creato questo:
    codice:
    <div id="page">
    <div id="header">
    [img]../themes/default/header-left.jpg[/img]
    eventuale codice del banner, o comunque altro testo
    [img]../themes/default/header-right.jpg[/img]
    </div>
    </div>
    mentre il CSS è questo:
    codice:
    html, body {
    	margin: 0px;
    }
    
    #page {
    	width: 780px;
    	position: absolute; left:50%;
    	margin: 0 0 0 -390px;
    }
    
    #header {
    	background-image: url(header-bg.jpg);
    	vertical-align: text-top;
    }
    Tra l'altro, come faccio a posizionare il testo inframmezzato a "middle" (cioè all'altezza mediana delle immagini)? Al momento è a baseline di default, e non vorrei utilizzare [img]../themes/default/header-left.jpg[/img]...

    Sono più confuso che persuaso... aiuto! :-D
    Grazie in anticipo alle anime pie che mi aiuteranno...
    Home: http://www.ivansweb.com
    Le mie applicazioni gratuite in ASP
    · IWGallery
    · IWNewsletter
    · IWMessenger
    · IWGuestbook

  2. #2
    se fai un disegnino è meglio, lì ci sono immagini che tu visualizzi, gli altri no.

    4 pag. x il forum:l'ospite ora ha solo link sponsorizzati, valli a capire-GommaLayout! Agg. 25 agosto 2004)-Molla&Collano privati tecnici, per favore

  3. #3
    meglio: posto quello che sto realizzando

    versione vecchia (tabelle) | versione nuova (css)

    Il CSS della versione nuova si trova qui


    (tra l'altro, notare che le immagini sono perfettamente allineate nel vecchio modello, mentre non lo sono nel nuovo - al top delle immagini si vedono 2px di sfondo blu... :master: )
    Home: http://www.ivansweb.com
    Le mie applicazioni gratuite in ASP
    · IWGallery
    · IWNewsletter
    · IWMessenger
    · IWGuestbook

  4. #4
    prova così:

    <body>
    <div id="page">
    <div class="destra"></div>
    <div id="header">Qui scrivo altro testo, che pu&ograve; essere il codice di un banner o altro (da definire)
    </div>
    </div>
    </body>
    </html>

    --------

    * {margin:0; padding:0}
    body {text-align:center;
    background:#f5f8fd
    }

    #page {
    width: 780px;
    background:#08324b url(header-b.jpg) repeat-x;
    position:relative;
    margin:auto
    }
    #header {
    background:url(header-l.jpg) no-repeat;
    color:white;
    min-height:60px;
    height:auto!important;
    padding-left:160px;
    padding-right:160px;
    padding-top:50px;
    height:110px;
    }

    .destra {position:absolute;
    right:0;
    background:url(header-r.jpg) top right no-repeat;
    width:100%;
    height:110px
    }

    ----

    il codice è buono per gli ie in quirk, per fare andare ie6 in quirk con quel doctype basta aggiungere un commento html in cima alla pagina tipo:



    preferisco questa soluzione perché solo ie6 può andare in standard mode e quindi occorrerebbero tre tipi di codice uno per ie6 uno per gli altri ie e un altro per i browser standard tipo mozilla e opera, mentre in questo modo dove serve ne bastano due

    4 pag. x il forum:l'ospite ora ha solo link sponsorizzati, valli a capire-GommaLayout! Agg. 25 agosto 2004)-Molla&Collano privati tecnici, per favore

  5. #5
    OTTIMO! Funziona perfettamente, tuttavia trovo il codice CSS parecchio complicato da leggere per uno come me, con una esperienza medio-bassa dei fogli di stile...

    Mi sa che devo iniziare a semplificare il layout, altrimenti il tutto diventa difficile da gestire: ad esempio, inizio ad eliminare l'immagine a destra...

    Grazie, Jerry Masslo!
    Home: http://www.ivansweb.com
    Le mie applicazioni gratuite in ASP
    · IWGallery
    · IWNewsletter
    · IWMessenger
    · IWGuestbook

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.