Problema con CSS con 3 colonne

erlupacchiotto

Nuovo Utente
5 Gen 2004
23
0
0
48
Roma
www.erlupacchiotto.com
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

Utente Attivo
18 Nov 2004
35
0
0
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
 
Ultima modifica:

nicola

Utente Attivo
18 Nov 2004
35
0
0
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

Nuovo Utente
5 Gen 2004
23
0
0
48
Roma
www.erlupacchiotto.com
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 [email protected]
 

nicola

Utente Attivo
18 Nov 2004
35
0
0
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à.
 
Discussioni simili
Autore Titolo Forum Risposte Data
S problema con css bootstrap3 HTML e CSS 4
Emix Problema con creazione form css/mobile HTML e CSS 3
F [Javascript] Problema funzione jquery con elementi css esterni Javascript 1
A [WordPress] Problema CSS con diversi browser WordPress 4
S Problema con Form CSS HTML e CSS 1
berry94mf Problema con include e css PHP 1
V Problema Rollover con css HTML e CSS 1
M problema con media query CSS HTML e CSS 1
D Problema collegamento file css con html HTML e CSS 4
S Problema con il css di un font HTML e CSS 2
A Problema gestione layout con css HTML e CSS 11
F problema con sfondo CSS HTML e CSS 2
C Problema con il CSS per il comando text-align HTML e CSS 10
M css html problema con explorer help HTML e CSS 0
G problema con css PHP 9
B Problema di inserimento "menu con css" in pagina web "con tabelle" HTML e CSS 5
M Problema con css HTML e CSS 3
M problema css con ie8! help HTML e CSS 0
K problema con current css HTML e CSS 0
L problema con menù css HTML e CSS 1
T problema con i css ... explorer visualizza male... HTML e CSS 2
I Problema con i CSS su diversi browser HTML e CSS 3
S Problema con CSS IE 7 e XP HTML e CSS 2
M Problema CSS nei widget con sfondo sfumato HTML e CSS 0
R Problema con i css in standard mode HTML e CSS 3
N [PHP+HTML+CSS] Problema con un div HTML e CSS 6
R problema con il css dei link HTML e CSS 2
S Piccolo problema con i CSS HTML e CSS 2
I Problema CSS con joomla e phpbb [Era: joomla e phpbb] Joomla 2
G Css, problema margine con explorer HTML e CSS 0
F [CSS] Problema con IE e div fixed HTML e CSS 2
R Problema con pop-pu in css HTML e CSS 4
M Problema con Try Catch PHP 0
Sergio Unia Problema con gli eventi del mouse su una data table: Javascript 2
T PROBLEMA CON SESSIONI PHP 3
T ALTRO PROBLEMA CON ARRAY PHP PHP 1
T PROBLEMA CON ARRAY PHP 8
L problema con query select PHP 2
R Problema query con ricerca id numerico PHP 2
F Problema con risposta PHP 0
S problema con recupero dati tabella mysql PHP 2
Z Problema con il mio tp-l i nk Reti LAN e Wireless 1
L Problema RAM con Tomcat 8 Apache 0
napuleone problema con sort e asort PHP 4
Z Problema con INT MySQL PHP 1
Z Problema database MySQL con XAMPP PHP 0
M Problema con controllo form in real time jQuery 6
Z Problema di sincronizzazione PAYPAL con PHP PHP 1
G Problema con Get page PHP 4
P Problema con require once PHP 6

Discussioni simili