• Super User

    Ciao jokerinos,
    l'errore è sulla posizione "absolute". Attraverso punti cardinali quali top e left, la posizione assoluta assicura l'oggetto all'interno del tuo browser distanziandosi (di default) dai bordi del tuo body (non che della finestra del tuo browser).
    Innanzitutto o utilizzi il float o il position (io ti consiglio vivamente il primo). Non ha senso fare uso di due parametri, apparentemente simili ma profondamente diversi, per "poggiare" il tuo menù a fianco di un elemento.

    Tornando all'errore, il position: absolute, per non essere dipendente dalla grandezza del tuo browser*, *deve essere contenuto all'interno di un oggetto a sua volta posizionato in modo "relative" (che di default è impostato diciamo il body).

    A questo elemento in "relative" (un div) si relazionerà il tuo menù (absolute) il quale manterrà tali distanze (top e left) dai bordi di quest'ultimo.

    E' un argomento complesso, se sei alle prime armi ti consiglio vivamente di evitare l'uso delle "position".


  • User Attivo

    Grazie karedas, e visto che sono alle prime armi con i css che metodo mi consigli di usare per risolvere il problema della risoluzione e del posizionamento.

    Grazie


  • Super User

    Innanzitutto se hai una risorsa online potresti darci un link (non attivo) della pagina al fine di aiutarti maggiormente, seconda cosa ti consiglio di utilizzare unicamente il "float" in left o right - a meno che tu non abbia un caso particolare.

    Anche quella del float è una scelta tutt'altro che dolorosa poichè inizialmente si fa un pò fatica ad evitare errori ricorrenti di layout, ma fondamentale se vuoi lavorare con le pagine web e i css. Diversa cosa sono le position in absolute che a mio modesto parere devono sì essere utilizzate, ma solo una volta che si è più padroni dei fogli di stile e dei comportamenti degli elementi nelle pagine html.


  • User Attivo

    Karedas la risorsa on line intendi il mio sito , e' attivo e sta in linea se lo vuoi vedere posso darti il link ma poi diventa un spam non credi ?

    Grazie


  • Super User

    Puoi inserire l'indirizzo proprio come hai fatto per l'immagine, quindi rendendolo inattivo 🙂


  • User Attivo

    http: ilportaledinapoli.com

    ciao e grazie


  • User Attivo

    Hai dato una controllatina cosa ne pensi un po' confusionario vero ?

    Ciao


  • User Attivo

    Adesso ho provato a fare questa modifica :
    #sidebarContainer {
    width:480px;
    float:right;
    }
    #midSidebar {
    float:left;
    left:575px;
    width:250px;
    top:500px;

    }
    #midSidebarInner {
    border-right:1px solid #eee;
    border-left:1px solid;
    padding-right:7px;
    padding-left:7px;
    }
    #ad125px img {
    display:block;
    margin:0 auto 7px;
    }

    Pero' adirittura mi esce in basso a tutti.

    Grazie


  • User Attivo

    Ci puoi dare un occhiata ora ho usato questo codice pero' in ie da ancora qualche problema

    #midSidebar {
    float:left;
    margin:-1600px 0px 0px 445px;
    width:250px;
    top:500px;
    display:inline;


  • 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.