Visualizzazione dei risultati da 1 a 5 su 5
  1. #1
    Utente di HTML.it
    Registrato dal
    Jun 2005
    Messaggi
    101

    Problemi nel convertire una tabella in CSS

    Ciao... premetto che di CSS non me ne intendo molto.
    Ho una tabella formata da diverse righe e colonne ma ora la voglio convertire in div CSS.
    Visto che con i CSS non posso mettere colonne ho dei problemi a inserire il testo nella seconda colonna della tabella, come faccio a spostare un testo sulla desta in alto?
    Per farvi capire meglio posto il link della tabella...
    http://www.bladexperience.com/evl/girls/girlsheader.htm
    Grazie!
    Mr Blade
    ----------
    The Art Of Sailing

  2. #2
    Il "problema" vero è che con i CSS non devi più "ragionare" come se si trattasse di tabelle. I box possono essere considerati come delle "celle", ma non sono vincolati dalla struttura tipica delle tabelle. Premesso questo, mi sono "divertito" a convertire la tua pagina in XHTML...ti riporto qui il codice del file con tanto di CSS incorportato. L'unica cosa è che ho usato sempre il Verdana come carattere, quindi sta a te modificarlo, se serve, nelle regole di stile. Inoltre ho usato i pixel come unità di misura dei caratteri...non è il massimo, visto che con IE non puoi modificarne le dimensioni (puoi provare tu a usare altre unità, come i pt).

    codice:
    <!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>
    <title>Documento senza titolo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    <!--
    body {
    font-size: px;
    font-family: Verdana,Helvetica,Arial,Sans-serif;
    color: #000000;
    background-color: #999999;
    padding: 9px;
    margin: 0;
    }
    hr,.nascosto {
    display: none;
    }
    .clear {
    clear: left;
    }
    #testata {
    width: 100%;
    min-height: 114px;
    height: auto !important;
    height: 114px;
    background-color: #000000;
    background-image: url(logo_girls.gif);
    background-repeat: no-repeat;
    background-position: center right;
    position: relative;
    }
    h1 {
    font-size: 23px;
    font-family: Arial,Sans-serif,Verdana,Helvetica;
    color: #ffffff;
    padding: 0;
    margin: 0 0 0 22px;
    }
    #testata em {
    font-size: 15px;
    font-weight: bold;
    font-style: normal;
    color: #999999;
    }
    #menutestata {
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2px;
    right: 25%;
    }
    #menutestata li {
    list-style: none;
    padding: 0;
    margin: 0;
    float: left;
    }
    #menutestata li a {
    font-size: 10px;
    color: #ffffff;
    text-decoration: none;
    text-transform: lowercase;
    padding: 0 5px;
    border-left: 1px solid #ffffff;
    margin: 0;
    float: left;
    }
    #menutestata li a#primolink {
    border-left: none;
    }
    #navigation {
    padding: 0;
    margin: 0;
    position: absolute;
    bottom: 5px;
    left: 22px;
    }
    #navigation li {
    list-style: none;
    padding: 0;
    margin: 0 4px 0 0;
    float: left;
    }
    #navigation li a {
    font-size: 12px;
    font-weight: bold;
    color: #ffffff;
    text-transform: lowercase;
    text-decoration: none;
    float: left;
    }
    #menulinks {
    width: 100%;
    min-height: 16px;
    height: auto !important;
    height: 16px;
    background-color: #cccccc;
    margin-top: 16px;
    }
    #links {
    padding: 0;
    margin: 0 0 0 22px;
    }
    #links li {
    list-style: none;
    padding: 0;
    margin: 0 4px 0 0;
    float: left;
    }
    #links li a {
    font-size: 10px;
    font-weight: bold;
    color: #333333;
    text-decoration: none;
    line-height: 16px;
    float: left;
    }
    -->
    </style>
    </head>
    <body>
    <div id="testata">
    <h1>BladeXPerience.com</h1>
    Underground Engine
    <p class="nascosto">Inizio</p>
    <hr />
    <h2 class="nascosto">Menu testata</h2>
    <ul id="menutestata">[*]Forum[*]Guestbook[*]Cards[*]Meeting[*]Directory[/list]
    <p class="nascosto">Inizio</p>
    <hr />
    <h2 class="nascosto">Menu navigazione</h2>
    <ul id="navigation">[*]Home[*]Humors[*]Curiosit&agrave;[*]Hack[*]Linux[*]Guide[*]IRC[*]Programmi[*]Webmaster[*]Girls[/list]
    <p class="nascosto">Inizio</p>
    <hr />
    </div>
    <div id="menulinks">
    <h2 class="nascosto">Menu links</h2>
    <ul id="links">[*]Celebrit&agrave;[*]Eden[*]Calendari[*]Giochi[*]Media[/list]
    <br class="clear" />
    <p class="nascosto">Inizio</p>
    <hr />
    </div>
    
    ...CONTENUTI DELLA PAGINA...
    
    </body>
    </html>
    Questo codice permette anche di far "degradare" bene la pagina quando aumenti le dimensioni del carattere entro un certo limite ed è strutturato in modo che possa essere accessibile anche senza i CSS attivi (noterai che ci sono dei link che riportano all'inizio della pagina e delle linee di separazione delle varie sezioni, oltre ai titoli di queste ultime). Volendo, queste linee, i titoli e i link per tornare all'inizio possono essere impostati diversamente in modo da essere sempre interpretabili (ho usato display: none per comodità, per nasconderli, anche se non è la soluzione migliore).

    Solo un consiglio...prova a visualizzare la pagina disabilitando i CSS (con un browser che lo permette come Firefox) e a "studiare" il mio CSS...imparerai molte cose utili. E se hai dei dubbi...c'è sempre il forum!

  3. #3
    Utente di HTML.it
    Registrato dal
    Jun 2005
    Messaggi
    101
    grazie mille!
    mi metto subito a spippolare!
    se ci sono problemi, saprò a chi rivolgermi
    Mr Blade
    ----------
    The Art Of Sailing

  4. #4
    Utente di HTML.it
    Registrato dal
    Jun 2005
    Messaggi
    101
    Primo problema...
    come posso colorare un solo link del menù inferiore?
    Ad esempio, voglio colorare di bianco solo la parola "Calendari"... è possibile?
    Ci ho studiato un po' ma i risultati non si vedono ancora
    Grazie!
    Mr Blade
    ----------
    The Art Of Sailing

  5. #5
    studia i selettori!
    id, classi, pseudoselettori ecc ecc

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.