Visualizzazione dei risultati da 1 a 6 su 6
  1. #1
    Utente di HTML.it L'avatar di nicola75ss
    Registrato dal
    Nov 2004
    Messaggi
    12,923

    drop cap e compatibilità tra browser.

    Buongiorno a tutti. Ho un problema (per la verità più di uno) con la visualizzazione di una pagina tramite diversi browser.

    Su IE (6.0) ottengo più o meno l'aspetto desiderato.
    Su firefox (1.5) invece il testo mi sfasa tutto sul lato destro e le immagini risultano una attaccata all'altra.
    Infine su opera (8.53) la pagina risulta più o meno simile ad IE tranne il fatto che la drop cap di alcune parole invade la lettera successiva (ad esempio la I di in mattinata).

    Infine forse è impressione mia ma mi sembra che la spaziatura tra righe su ie non sia uniforme mentre su opera e firefox sì.

    So che son tanti problemi ma non volevo aprire mille thread.

    Potere darmi qualche buon consiglio? Grazie per l'attenzione.

    P.S. E' il primo sito che tento di realizzare quindi non prendetemi in giro.

    Il link perchè possiate vedere gli scempi:
    http://nicola75ss.altervista.org/iso...cheologico.php

  2. #2
    Bello, non scherzo, mi piace la semplicità. cominciamo dalle iniziali:

    .first {
    font: bold 2em Georgia, serif;
    color: #900000;
    text-transform: uppercase;
    }


    Struttura base. per le immagini tu hai questa struttura?




    [img][/img]
    </p>


    Puoi fare:
    p img {
    float: right;
    display: block;
    width: xx
    height: xx
    padding: 0;
    margin-left: 5px;
    margin-bottom: 5px;
    }


    Fammi sapere. ciao

    ps:





    [img][/img]
    <span class="first">L</span>orem ipsum
    </p>


    c'è un bug di Moz/FF che non riconosce first-letter se viene prima un'immagine.

  3. #3
    Utente di HTML.it L'avatar di nicola75ss
    Registrato dal
    Nov 2004
    Messaggi
    12,923
    ciao thomas. allora,il problema dei drop cap l'hai risolto alla grande. ho provato con i diversi browser e il risultato è gradevole.

    Per l'altro consiglio che mi hai dato purtroppo non ho capito.
    Ho fatto un pò di esperimenti ma con scarsi esiti.

    Ho provato così




    [img]../immagini/anfiteatro.jpg[/img]
    <span class="first">M</span>io testo
    </p>

    come mi hai suggerito rimuovendo tutti i div ma...
    le immagini non hanno tutte la stessa altezza, quindi se la definisco a priori me le distorce, se non la definisco mi fa scherzi come questo:


    dove per riallinearla a destra è stato sufficiente assegnare un valore a height. Ho provato anche ad aumentare il margin-bottom per riallineare la terza immagine a destra ma l'ha fatto e contemporaneamente mi ha spostato a sinistra la seconda.

  4. #4
    Questo accade probabilmente perchè il contenitore delle immagini non ha una larghezza dichiarata. posta il codice che usavi prima e vediamo se si può aggiustare.

  5. #5
    Utente di HTML.it L'avatar di nicola75ss
    Registrato dal
    Nov 2004
    Messaggi
    12,923
    Il div delle foto l'ho definito con width 39% ma non avendo ancora chiaro il meccanismo possibilissimo che abbia sbagliato.
    A me basterebbe riuscire a centrare tutto il contenuto di testo e foto in maniera tale che si veda con tutti i browser alle varie risoluzioni e non mi faccia quell'effetto orrendo di firefox.
    Se poi ciascuna foto non è al centro del suo testo come hai visto nel link pazienza.

    Questo è il mio css:
    codice:
    .centrato{
    text-align:center;
    }
    .tragitto{
    font-style:italic;
    font-size:18px;
    }
    
    h1{
    font-size:200%;
    text-align:center;
    }
    .first{
    font: 2em Georgia, serif;
    color: #d98346;
    text-transform: uppercase;
    }
    div#giorno{
    width:99%;
    }
    div#testo{
    line-height:30px;
    text-align: justify; 
    width:60%;
    border-bottom: 1px solid #000;
    float:left;
    }
    div#foto{
    width:39%;
    float:left;
    margin: auto;
    }
    img
    {
    margin-left:20px;
    border:none;
    width:150px;
    }
    e il codice html con cui richiamo testo e immagini:
    <div id="giorno">
    <div id="testo"><span class="first">A</span>rrivo all'aeroporto di Cagliari in mattinata e trasferimento in hotel.
    Nel pomeriggio, visita di Cagliari: l'anfiteatro, la cattedrale, la Torre di San Pancrazio,
    il Museo archeologico. Cena e pernottamento in hotel. </div>
    <div id="foto">[img]../immagini/anfiteatro.jpg[/img]</div>
    </div>

    Grazie per l'aiuto.

  6. #6
    Innanzitutto per centrare il contenitore di 99% devi dare un text-align:center al <body> e margin-left/right su auto al contenitore. poi ti consiglio di dare il float:right al div
    #foto.a questo div darai anche la dichiarazione display:inline per fixare il double margin bug di IE. poi piazzi l'altro div #testo con la marginazione, senza dargli width: 60%. cioè l'ordine verrebbe:

    <div id="giorno">
    <div id="foto">[img][/img]</div>
    <div id="testo">
    <span class="first">L</span>orem ipsum...
    </div>
    </div>



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 © 2024 vBulletin Solutions, Inc. All rights reserved.