Problema con CSS con 3 colonne

erlupacchiotto · 1 Dic 2004

Vi riporto il codice della pagina e del CSS sperando nel vs. aiuto.

Il problema e' che su Mozilla Firefox e Internet Explorer ho 2 diversi comportamenti dei css

grazie
ciao

HTML

Codice:

<body alink="#000000" class="Pagina">
<!-- ************************************ -->
<!--        PAGINA TESTATA                -->
<!-- ************************************ -->
<div id="footer">
         testata testatatestatatestata testata testata testata testata testata testata testata
</div>
<div id="pageFrame">
<!-- ************************************ -->
<!--            COLONNA DI SINISTRA         -->
<!-- ************************************ -->
        <div id="leftColNew" title="ColonnaSinistra">
              colonna sinistra
              colonna sinistra
              colonna sinistra
        </div>

<!-- ************************************ -->
<!--            COLONNA CENTRALE -->
<!-- ************************************ -->
        <div id="contentColNew" title="ColCentrale">
          ciaociaociaociaociaociao ciaociaociaociaociaociao ciaociao ciaociao  ciao ciao ciaociao ciao ciaociao ciao ciao ciao ciaociao ciao
        </div>
<!-- ************************************ -->
<!--            COLONNA DI DESTRA -->
<!-- ************************************ -->

                <div id="rightColNew" title="ColonnaDestra">
              colonna destra
              colonna destra
              colonna destra
              colonna destra
                </div>
</div>          
        <div id="footer">
                        &copy;FOOTER   FOOTER FOOTER FOOTER FOOTER  FOOTER  FOOTER  FOOTER FOOTER
        </div>
        </body>
</html>

CSS

Codice:

#leftColNew {
                margin-right: 50%;
                float: left;
                width: 13%;}
#rightColNew {  float:right; width: 13%; }
#contentColNew {
width: auto;
}
#innerContentColNew
{width: 50%;
margin-left: 10%;
margin-right: 10%;
}

nicola · 4 Dic 2004

css compatibili

Ciao erlupacchiotto, sono qui per cercare di darti una mano ...

Allora ti do un consiglio, se vuoi fare un 3 colonne completamente compatibile tra i due browser, devi
scrivere un css molto pulito e standard.
Più è standard il tuo codice, più sei sicuro di essere
compatibile.
Dopo questa prima premessa, aggiungo anche che mi fa molto piacere vedere in questo forum richieste di questo tipo enon solo tabelle .....
Cominciamo ....
Tre colonne .....
Devi inserire la prima
<div class="colsx">Colonna di sinistra</div>
QUELLA DI DESTRA
<div class="coldx">Colonna di destra</div>

E POI QUELLA CENTRALE
<div class="colcx">Colonna centrale</div>

lo stile che associerai alle 3 classi è

.colsx { float: left; width: 20%; }
.coldx { float: right; width: 20%; }
.colcx { margin-left: 20%; margin-right: 20%; }

E' importante che tu non imposti nessun width per la colonna centrale, si adatterà allo spazio -il 20% della colsx e - il 20% della coldx.

E' sempre meglio il layout fluido (ridimensionabile) che bloccato ad un calcolo di px. Ricordati anche di inserire la grandezza del font in %.

Io sto sviluppando un ambiente dove si possa editare al volo via web un sito completamente con i css, un esempio demo a cui puoi accedere per provare anche il tuo caso specifico, è :
http://demo.iport.it/demo.html

Ciao Nicola

erlupacchiotto · 6 Dic 2004

ho messo online la versione con i % al posto dei px

che ne pensi ?
grazie
ciaoPagina con 3 colonne

nicola · 6 Dic 2004

3 colonne fluide con DIV/CSS

Ho visto la pagina che mi hai indicato, controlla il link del tuo post, se vuoi che qualcun'altro la veda, mi sembra che funzioni tutto.

Ho visto anche l'effetto del ridimensionamento delle immagini, bello, se vuoi un consiglio, lavorerei di più sulla pulizia del font,
intendo dire distanziando e quindi rendendo più leggibile ciò che vuoi comunicare, utilizza le grandezze in % sia sui font che nell'attributo line-height (altezza della linea del testo) magari aumentandolo un po' di più della grandezza del testo.

Un'altro consiglio, è nell'utilizzo delle pseudoclassi per differenziare i link nei vari stati.

Se il tuo intento è quello di avere un impatto pulito dove il bianco è il colore predominante, tieni conto che ti sarà molto più difficile apparire bello agli occhi di tutti, se non detti uno stile che ti evidenzi, a volte bastano pochi particolari, o qualche icona.

Ciao e buon lavoro

erlupacchiotto · 6 Dic 2004

1. come dovrei modficare il link nel post ?
2. grazie per il redim img ci ho lavoato molto
3. pulizia font: potresti farmi un esempio. Sono "all'oscuro"
4. pseudoclassi: cioe' ? che sono ?
5. sfondo bianco: solo dove c'e' il testo, altrimenti c'e' l'img de ErLupacchioto

grazie
ciao

PS: se credi scrivimi pure in pvt erluacchiotto@erluacchiotto.com

nicola · 6 Dic 2004

Consigli per il tuo sito

Ciao allora,
prima cosa per modificare il tuo posto devi andare sul testo e cliccare edita, in modo da correggere il link che hai inserito nel post.

Cominciamo ......

body {
font-family: arial, helvetica, sans;
font-size: 100%;
color: #333;
}

.titoli {
letter-spacing: 2px;
text-indent: 4px;
font-weight: bold;
font-size: 120%;
color: #000;
}

.testo {
padding: left: 4px;
text-align: justify;
line-height: 120%;
}

Per quanto invece riguardano le pseudoclassi, sono gli stati che puoi controllare di un link.

Ovvero fingiamo che hai un div con classe .news
e vogliamo far evidenziare i link con un colore diverso dal testo, magari senza sottolineatura da subito ed una volta sopra con il mouse che sia visibile cambiando colore al testo e allo sfondo.
Riassumento in css

.news a {
display: block;
width: 100%;
height: 24px;
text-decoration: none;
color: #900;
}
.news a:hover {
color: #f00;
background: #eee;
text-decoration: underline;
}

Ora al posto di .news potrai inserire le classi dove sono presenti link personalizzandone il look.

NOTA che ho inserito in ".news a" gli attributi display: block; con altezza e laghezza, in modo da rendere attiva tutta l'area della riga e non solo il testo del link.

Vi sono altri stati di un link, però io credo che questo possa bastare per darti un valido aiuto.

Ultimo consiglio, utilizza come base per le tue prove Firefox, e poi testalo anche in IE, fare il contrario significa poi dover rifare tanti ragionamenti ......

Ciao Nicola

PS: I messaggi voglio postarli sempre in chiaro perchè possano essere un valido aiuto oltre che a te, anche a tutta la comunità.

Cerca

Cerca

Problema con CSS con 3 colonne

erlupacchiotto

Nuovo Utente

nicola

Utente Attivo

erlupacchiotto

Nuovo Utente

nicola

Utente Attivo

erlupacchiotto

Nuovo Utente

nicola

Utente Attivo

Discussioni simili