Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 17

Discussione: piu div in una pagina

  1. #1

    piu div in una pagina

    Ciao a tutti raga , ho un problema che da solo non riesco a risolvere e sicuramente voi potete darmi una mano:
    Leggendo nel forum ho preso il codice html di un div , il quale a tutte le risoluzioni del monitor viene visualizzato centralmente
    #topdiv {
    position: absolute;
    width: 760px;
    height: 100px;
    padding: 0;
    top: 40%;
    left: 50%;
    margin: -300px 0 0 -380px;
    background-image: url(immagini/images.jpg);
    background-repeat: repeat;
    }
    , il mio problema e' questo quando faccio il copia e incolla del codice per creare un alto div
    , i div si sovrappongono , se lo visualizzo in modalita grafica riesco a spostarlo ma al posto delle percentuali escono i px , ma quando lo visualizzo nel browser si sposta tutto.
    devo mettere qualche altra voce all'elenco del codice , o meglio cosa sbaglio perche' credo che la cosa sia fattibile.

    grazie mille

  2. #2

  3. #3
    il top div lo metti in position:relative.

    poi l'altro div lo metti in position:absolute (rispetto al div genitore che è relative) e lo sposti con i margini e i pixel

    dimmi se ti funziona, è piu facile a farsi che a dirsi.

  4. #4
    e poi una cosa:io sto provando su dreamweaver il tuo codice, ma non mi esce quel che intendi tu..
    o hai omesso qualcosa nella tua descrizione qui sul forum o qualcosa non va.

  5. #5
    ciao raga e mille grazie per le risposte , anche se sto provando e non ho ancora risolto, comunque io non voglio creare una pagina css esterna ma tenere tutto il codice nella stessa pagina , vi posto il codice :
    <style type="text/css">
    <!--
    #topdiv {
    position: absolute;
    width: 760px;
    height: 100px;
    padding: 0;
    top: 40%;
    left: 50%;
    margin: -300px 0 0 -380px;
    background: #FF0000;
    }
    #secondodiv {
    position: absolute;
    width: 760px;
    height: 100px;
    padding: 0;
    top: 435px;<----------------sono queste le cose che credo non vadano bene
    left: 524px;<.------------------==============================
    margin: -300px 0 0 -380px;
    background:#0099FF;
    }

    -->
    </style>
    </head>

    <body>

    <div id="topdiv">testo</div>
    <div id="secondodiv">testo</div>

    </body>
    </html>

    questo e' il codice che ho io completo che in dw fa vedere graficamente allineato , ma poi visulaizzandolo in IE , il secondo div si sposta sulla sinistra.

  6. #6
    Non usare le position Absolute... Usa "relative" . In pratica togli le position (tanto sono giuste default per i div), i top e i left. Poi modifichi il modo di centrare usando il famoso "margin:0 auto" che trovi ormai ovunque...
    Fantasupermegafavolipermeramagicultra irresistibili
    4 10 30 100 1001 personaggi insuperabili fantaincredibili ultraimpossibili iperterribili irresistibili!!!

    "... a quell'età ... bastava un dito per fare la pace ..."
    fotine

  7. #7
    Originariamente inviato da bancopaz
    ciao raga e mille grazie per le risposte , anche se sto provando e non ho ancora risolto, comunque io non voglio creare una pagina css esterna ma tenere tutto il codice nella stessa pagina , vi posto il codice :
    <style type="text/css">
    <!--
    #topdiv {
    position: absolute;
    width: 760px;
    height: 100px;
    padding: 0;
    top: 40%;
    left: 50%;
    margin: -300px 0 0 -380px;
    background: #FF0000;
    }
    #secondodiv {
    position: absolute;
    width: 760px;
    height: 100px;
    padding: 0;
    top: 435px;<----------------sono queste le cose che credo non vadano bene
    left: 524px;<.------------------==============================
    margin: -300px 0 0 -380px;
    background:#0099FF;
    }

    -->
    </style>
    </head>

    <body>

    <div id="topdiv">testo</div>
    <div id="secondodiv">testo</div>

    </body>
    </html>

    questo e' il codice che ho io completo che in dw fa vedere graficamente allineato , ma poi visulaizzandolo in IE , il secondo div si sposta sulla sinistra.
    ------------------------------------------------------------------------------

    ho capito il tuo errore...

    devi usare la proprietà display e mettere in linea l'elemento... ora ti faccio un esempio...
    ........
    background-color:limegreen;
    width:342px;
    height:302px;
    display:inline;
    float:left;
    margin-top:30px;
    margin-left:60px; }

    per spostare i tuoi div devi usare display che mette in linea l'elemento, cioè il tuo div; automaticamente devi applicarci il float un'altra proprietà e con il valore left dici di affiancare il tuo div all'altro, e con le proprietà margin specifichi dove lo vuoi... poi i valori andrai a metterli tu ve ne sono anche altri oltre a quelli che ho messo nell'esempio...

    quello che manca a te è display e float...
    se ti crea problemi... devi eliminare position...

    ecco un sito dove ti spiegano le proprietà:
    http://css.html.it/guide/lezione/39/...y-float-clear/



  8. #8
    Originariamente inviato da blacksoniangel
    devi usare la proprietà display e mettere in linea l'elemento... ora ti faccio un esempio...
    ........
    display:inline;
    float:left;
    Spiegaci anche questa....
    Fantasupermegafavolipermeramagicultra irresistibili
    4 10 30 100 1001 personaggi insuperabili fantaincredibili ultraimpossibili iperterribili irresistibili!!!

    "... a quell'età ... bastava un dito per fare la pace ..."
    fotine

  9. #9
    Originariamente inviato da ricman
    Spiegaci anche questa....
    -------------------------------------------------------------------->

    il div è un elemento spaziale che una volta usato, qualunque elemento successivo, andrà a capo. Quindi se io voglio per esempio avere due div accanto devo usare la proprietà float oppure display che sono proprietà css.

    La proprietà display ha una sola funzione e sarebbe quella di definire il trattamento e la presentazione di un elemento modificando così gli standard.
    Vi sono vari valori che posso dare a display, ma in questo caso io devo dire di mettere in linea il div e il codice è questo "display:inline;"

    Invece la proprietà float permette di rimuovere un elemento dal normale flusso del documento e spostarlo su uno dei lati right o left del suo elemento contenitore. I valori che puoi dare sono left, right o none.

    left: L'elemento viene spostato sul lato sinistro del box contenitore, il contenuto scorre a destra.

    right: L'elemento viene spostato sul lato destro, il contenuto scorre a sinistra.

    none: Valore iniziale e di default in mancanza di una dichiarazione esplicita. L'elemento mantiene la sua posizione normale.

    Io prima ho fatto un esempio... poni il caso che io voglia inserire dei div laterali a questo devo applicare anche la proprietà float e dare il valore left, che mi permette di avere un'altro elemento alla sua sinistra.

    e se poi io voglio spostare a mio piacimento il div userò poi le proprietà margin-top, margin-left e così via...

    bisogna solo fare prove...

  10. #10
    Allora raga , inanzitutto grazie per le dritte ho imparato altre cosette, non son riuscito ad ottenere l'effetto voluto però impostando un ottimo margin left riesci comunque a portare sempre la pagina al centro di ogni risoluzione, forse qualche impostazione oppure qualche comando che non conosco e potrebbe migliorare la cosa, ho anche provato ad inserire invece dei margin-left:50px; ad usare la percentuale , l'effetto e' bello , ma sembra di ingrandire e rimpicciolire la pagina .... cmq non ddemordo voglio provare ancora a vedere se la spunto io oppure il muro di gomma.
    :-)

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.