• Super User

    Jokerinos innanzitutto ti chiedo di avere un pò di pazienza 🙂 Non importa richiedere continuamente l'intervento in questo forum, soprattutto dopo pochissimo tempo.

    Passando al problema.
    Il codice della tua pagina è un pò confusionario, in ogni caso il problema adesso (per quanto riguarda il float) risiede nelle larghezze dei due contenitori:
    "è ovvio che far entrare in una scatola di 1 metro, due oggetti che affiancati ne occupano 2.5metri...è alquanto impossibile".

    Con questo è per farti capire che devi ridurre uno dei due "div" all'interno di quello spazio.

    
    #midSidebar {
        float: right;
        width: 266px;
    }
    
    ```Per poggiare l'elemento sulla destra ti bastano questi valori, rimuovi i vari "margin, display, top", non hanno senso per come li hai utilizzati.
    
    Questo non basta ovviamente, come detto sopra adesso persiste il problema delle larghezze dell'articolo e del menù. La colonna (il box) che ospita entrambe è troppo piccola in larghezza e ovviamente uno dei due elementi (il tuo menù di "liquida"), va a capo.

  • User Attivo

    Chiedo scusa per la mia impazienza , non succedera' piu'.

    Per quanto riguarda il mio problema la risoluzione che mi consigli e quella di dimuire il div midsidebar ? giusto in modo che il tutto possa inserirsi al proprio posto e non rimanendo quel fastidioso spazio che ora trovo ?

    Grazie e cordiali saluti


  • User Attivo

    Ciao ho provato ad effettuare varie prove , ho tolto di mezzo per adesso la funzione position , e ho diminiuto il width come mi hai detto tu pero' rimane sempre un po' di spazio di sopra , pero' non ho capito una cosa perche' non posso aumentare la scatola ? e metterci piu' roba ?

    Grazie e scusa il disturbo


  • Super User

    Il menù scende in quel modo perchè c'è qualcosa che lo spinge.
    Attraverso l'utilizzo di un fondamentale strumento quale Firebug (a mio parere obbligatorio per chi si cimenta in questo tipo di lavoro) puoi risalire al seguente errore e non solo.

    Ciò che lo spinge più in basso in questo caso è l'oggetto con classe "maschera".
    Se lo interroghi ha un'altezza di 400 px (mi pare). Scovandolo con firebug puoi vedere ad occhio nudo cosa questo comporta per il layout e la posizione del menù.

    Ti basta rimuovere l'altezza (o modificarla correttamente in base al suo reale scopo).

    Secondo errore:
    L'oggetto "padre" che contiene menù, articoli etc, è di una larghezza pari a 680px.

    Il contenitore di "archivio notizie" (con id containerhomepage) è di 500px e il menù sulla destra è di 180px. Ciò sarebbe corretto se non fosse che l'iframe delle google news è di 200px (20px di scarto, sempre con firebug puoi vedere come questo esca di prepotenza fuori dal suo stesso contenitore).

    Correzione:
    riporta "containerhomepage" a 470px e midSidebar, considerando il padding laterale di 5+5px) a 210px.

    Adesso i due contenitori sono correttamente impostati.

    Ovviamente non è finita qui 😄
    Adesso l'articolo primario con id "primapagina" è troppo grande per "container":

    riduci #primapagina da 700px a 680px e rimuovi a "titolo", interno a, il valore di width poichè automaticamente si estenderà sulla dimensione del suo genitore (quindi primapagina) senza doverlo specificare obbligatoriamente.

    Comprendi, modifica e dimmi come è andata 🙂

    Ciao!


  • User Attivo

    Ciao grazie per la tua immensa pazienza , volevo andare per sbaglio , allora perche' la maschera dovevo togliere l'altezza ? era cosi grande che faceva scendere il div midsidebar?

    Poi e' il caso che lasci google chrome e usi mozilla con il firebug?

    Grazie


  • User Attivo

    Grazie ora mi e' tutto piu' chiaro , ma fai anche corsi di css perche' non ho mai visto tanta semplicità nello spiegare una cosa.

    Grazie


  • Super User

    Durante lo sviluppo di una pagina web si ha certamente delle preferenze di browser, però è fondamentale testarne ogni aspetto su i browser più popolari per garantire all'utenza una visione dei contenuti indipendentene dal browser d'utilizzo.

    In ogni caso esiste firebug anche per chrome, oltre al fatto che il browser non è affatto male soprattutto data la sua leggerezza e velocità di esecuzione.

    Firefox permette un vasto numero di plugin e componenti aggiuntivi di cui molti adibiti allo sviluppo web (firebug nasce per mozilla infatti).

    Non dimenticarsi di Internet explorer che comunque sia ha tutt'oggi la più alta utenza.


  • User Attivo

    Mi puoi consigliare qualche corso o libro che parli di css giusto per capire come muovermi ?.

    Grazie


  • Super User

    Per questo ti rimando all'aiuto di qualche altro utente, personalmente per quanto riguarda il css ho utilizzato tutto tranne che i libri e non saprei quindi consigliarti alcunchè.

    Ci sono post (anche recenti) in questa sezione di utenti che però sono già stati consigliati prima di te, prova a fare una ricerca sicuramente troverai qualcosa. 🙂


  • User Attivo

    Ok allora possiamo chiudere il post con risolto.

    Soltanto se posso chiederti se puoi consigliarmi una guida per il resize dell'immagine con i css , perche' non so se hai notato che in alto dove c'e' la foto piu' grande non riesco a trovare il metodo per farla vedere bene e volevo sapere se esisteva un comando con i css per far si che ogni volta che pubblico l'immagine si adatti

    Grazie


  • Super User

    Intanto l'immagine originale all'interno del tuo sito è molto più piccola rispetto ai parametri che imponi (400 e 200px). L'immagine è di 150x150px quindi si stira e ovviamente si sfoca.

    A parte il fatto di utilizzare immagini più grandi (magari le ritagli anticipatamente con un programma di grafica), ciò che puoi fare intanto è scegliere una dimensione (larghezza o altezza) su cui relazionarsi in base al layout che la ospiterà.
    Cosa vuole dire?

    Poniamo che tu non voglia andare al di sopra di 200 px di altezza, come per altro il tuo caso, evitando così che sbordi nei contenitori sottostanti.

    Tramite css, regoliamo la nostra dimensione in altezza e rendiamo proporzionata la larghezza dell'immagine sulla base del medesimo valore.

    
    #immaginearticologrande{
    height:200px;
    width:auto;
    }
    
    

    "AUTO" è un valore che automaticamente (per l'appunto) regola la larghezza dell'immagine in relazione all'altezza (height), quindi proporzionandola.