• User Attivo

    chi mi aiuta ?

    Ho un sito suddiviso in tre sezioni tramite frame.
    ora voglio operare tale suddivisione con i css.

    ho pensato di suddividere letre sezioni tramite il posizionamento assoluto. stile.
    Ecco il foglio di stile,

    body {background-color: #000000;
    color: #FFFFFF;
    font-family: arial,trebuchet MS,verdana;
    font-size: 8pt;}
    #menu { width:75px
    position:absolute;
    top: 00px;
    left: 00px;
    background:;
    color:;
    font-family: arial,trebuchet MS,verdana;
    font-size: 8pt;
    }
    #intro {width:425px;
    height:165px;
    position:absolute;
    top: 165px;
    left: 75px;
    background:;
    color:;
    font-family: arial,trebuchet MS,verdana;
    font-size: 8pt;
    }
    #pagina {width:425px;
    position:absolute;
    bottom: 165px;
    right: 75px;
    background:;
    color:;
    font-family: arial,trebuchet MS,verdana;
    font-size: 8pt;
    }
    #Banfield {
    background:black;
    border: 2px solid blue;}

    }
    #RiverPlate {
    background:black;
    border: 2px solid blue;
    }
    #Feyenoord
    {background:black;
    border: 2px solid blue;
    }
    #Bologna {
    background:black;
    border: 2px solid blue;
    }
    #Inter {
    background:black;
    border: 2px solid blue;
    }
    #pictures{
    background:black;
    border: 2px solid blue;
    }

    h2 {color:; font-family: arial,trebuchet MS,,verdana;}
    h3 {color: blue; font-family: arial,trebuchet MS,,verdana;
    font-size: 19pt; font-weight: bold;}
    a:link {color: #988753;
    font-weight:bold;
    text-decoration:none;}
    a:visited {color: white;font-weight:bold;
    text-decoration:none;}
    a:hover {font-weight:bold;color: #99FFFF;}

    come notate il seguente file non ha il background nero:

    Thanks


  • User Attivo

    Ciao gigliotave 🙂
    Iniziativa lodevole la tua, ti aiutiamo volentieri.

    Ti do subito qualche dritta:

    • Evita il posizionamento assoluto. Ti conviene inserire tutta la struttura dentro ad un div contenitore, e poi applicare alle varie parti un float per disporle correttamente. Cerca nel forum la parola "wrapper", uscirà qualcosa di utile.
    • I fogli di stile si dicono a cascata, anche perché la maggior parte delle proprietà vengono ereditate. Non occorre specificare il font per ogni elemento, quando l'hai già fatto nel body (tutti gli elementi sono figli del body, quindi lo ereditano).
    • Cerca gli stili inline, cioè quelli scritti dentro all'html della pagina, ed eliminali. Gli stili inline sovrascrivono sempre lo stile definito nel foglio di stile esterno.
    • Testa sempre il tuo layout su Firefox. Mai su Internet Explorer.Buon lavoro!
      :ciauz:

  • User Attivo

    Ciao ho seguito il tuo consiglio e tutto andava bene sino a quando mi e' venuto in mente di controllare se aveno inserito in tutti i file il doctype.. :

    in ogni pagina in cui inserisco il doctype:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    il browser non esegue il float..
    sono veramente al limite del suicidio..

    ( quest' ultima prova l' ho fatta solo con internet explorer )
    per cortesia dammi un consiglio perche' sono al limite...!


  • User Attivo

    Ciao gigliotave,
    puoi linkare nuovamente la pagina, che il vecchio collegamente non funziona?


  • User Attivo

    ti linko direttamente il sito,
    ma ho l' impressione che se elimino il box esterno tutto andra' a posto anche se inserisco il doctype
    eccoti il link ( ora e' in ordine ma non c'e la DOCTYPE)
    http://it.geocities.com/julio_cruz_inter
    PS
    Grazie per l' interssamneto sei molto gentile!


  • User Attivo

    Non ti preoccupare, siamo qui apposta 🙂

    Cos'è esattamente che non flotta e su quale browser? Su firefox vedo bene tutto, e leggendo il css sia #menu che #destra dovrebbero fluttuare correttamente.


  • Super User

    In ogni caso per solcare l'eriditarietà puoi sempre usare l'attributo !important accanto al font in modo che sei sicuro escluda le altre direttive.


  • User Attivo

    Se solo inserisco la doctype nei file #menu non flotta piu' sia con firefox che con i.e.
    :mmm:


  • User Attivo

    temo di non aver capito bene:
    potresti rispiegarmelo per favore?
    Thanks!


  • Super User

    @gigliotave said:

    temo di non aver capito bene:
    potresti rispiegarmelo per favore?
    Thanks!
    Intanto prova a inserire questa doctype che è + generica:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    ```.  L'attributo !important è un' imposizione.
    Ponendo che tu abbia questa lista di attributi:
    
    a:hover, a:active, a:link, a:visited{[INDENT]color:#000000;
    text-decoration:underline;
    [/INDENT]}
    
    E vuoi ad esempio che un determinato link nella pagina prenda degli attributi totalmente diversi tipo:
    p a:hover{[INDENT]color:#666666;
    text-decoration:none;
    [/INDENT]}
    **** /// il p davanti sta a dire che si riferisce ai link posti all'interno del tag "P" e cioè all'elemento di blocco "paragrafo".****
    
    Puoi riscontrare dei problemi visto che gli attributi generici del tag "a" sono gia stati definiti.
    Cosa usare?
    
    Accanto all'attributo ci puoi scrivere l'aggiuntiva "!important" (con l'esclamativo davanti) in modo che il browser capisca che quel tag li faccia di conto unicamente a quelle proprietà e non ad altre sparse a giro per il foglio di stile.
    Quindi:
    p a:hover{[INDENT]color:#666666 !important;
    text-decoration:none !important;
    [/INDENT]}
    
    Spero di esser stato chiaro =p

  • User Attivo

    @gigliotave said:

    Se solo inserisco la doctype nei file #menu non flotta piu' sia con firefox che con i.e.
    :mmm:

    Ciao gigliotave,
    sono andato a ricontrollare la tua pagina e adesso non ha più la proprietà float.


  • User Attivo

    ti ringrazio per la esaurentissima spiegazione,
    comunque il testo del programma non era quello posto all' inizio della discussione.
    PS
    lo sapevo che nei css si mette p o td o #pinco pallino per specificare che quegli attibuti valgono solo li !
    inizio a provare ad inserire la doctype che mi hai indicato mi sa che e' la soluzione giusta


  • User Attivo

    ma ora veramnete dovrebbe essere tutto a posto la doctype e' solo nell' index ed io con firefox vedo floattare menu correttamente


  • Super User

    @gigliotave said:

    lo sapevo che nei css si mette p o td o #pinco pallino per specificare che quegli attibuti valgono solo li !

    A volte i browser soprattutto IE non interpretano bene i fogli di stile e le sue direttive. Quello che ho scritto sopra risolve "diciamo" la situazione.


  • User Attivo

    inserendo la doctype che mi hai suggerito non esegue piu' il float,
    faccio fatica ad utilizzare gli altri tuoi suggerimenti per il problema specifico


  • User Attivo

    si ho provato a caricarlo con I.E. ed il float non lo fa piu'!


  • Super User

    @gigliotave said:

    inserendo la doctype che mi hai suggerito non esegue piu' il float,
    faccio fatica ad utilizzare gli altri tuoi suggerimenti per il problema specifico

    l'attributo float è uno dei + difficili e macchinosi da utilizzare.
    Conta che ogni elemento che contiene un elemento float deve avere anch'esso tale attributo o avere una dimensione "FISSA" e non in percentuale (width:100%, height:100% ecc).

    Dicci qual'è l'elemento che non va nello speifico.