• User Attivo

    Problemi con id e class

    Salve a tutti , come si va , ho un problema nella compilazione del mio file css

    allora il file html e' questo :

    <div id="primapagina">
    <div class="titolo"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
    <div class="testoarticolo"> <?php the_excerpt(''); ?></div>
    <div class="immagine"><a href="#"><?php dp_attachment_image($post->ID, 'thumbnail', 'alt="' . $post->post_title . '"' ); ?></a></div>
    </div>

    il file css

    #primapagina {
    width:700px;
    height:250px;
    padding:2px;
    border-right:1px solid;
    border-right-color:silver;
    margin-bottom:10px;
    }
    #titolo {
    font-family:"Georgia, Palatino, serif";
    font-size:30px;
    line-height:normal;
    font-weight:normal;
    padding:2px;
    width:700px;
    color:#231F20;
    top:40px;
    }

    #immaginearticologrande {
    float:right;
    left:220px;
    top:-230px;
    width:500px;
    height:600px;
    }

    #testoarticolo {
    font-family:"tahoma";
    font-size:12px;
    color:#878787;
    float:left;
    width:280px;
    height:250px;
    position:static;
    }

    Pero' volevo far notare che nella class "immagine articolo " quando modifico la dimensione dell'immagine cambiando il valore "width" alla foto non succede.

    Attendo vostre notizie e aiuti e suggerimenti

    Grazie


  • User Attivo

    titolo
    testoarticolo
    immagine

    sono classi e non id quindi, nel css non devi mettere il cancelletto "#" ma il punto "."


  • User Attivo

    Ciao Tigrone , esatto ho risolto piu' o meno in questa maniera e ora va tutto bene , soltanto che ho un altro problema quello della risoluzione sto usando un monitor con una risoluzione 1240 * 1280 un po altina e dopo che ho compilato il css il sito si vede bene , mentre se riporto tutto alla risoluzione minore il monitor tipo 1024 * 769 ho un problema con una parte di sito infatti c'e' un riquadro che non riesce a stare fermo e se ne va per i fatti suoi il codice che gli ho applicato e' questo
    #midSidebar {
    float:left;
    position:absolute;
    left:780px;
    width:250px;
    top:500px;
    }
    ti allego anche l'immagine cosi ti fai un idea :

    htttp: bgdinformatica.it/img.jpg

    Ma questo succede solo se cambio risoluzione dove e' che sbaglio.

    Grazie per la tua disponibilità cordiali saluti


  • 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