• User

    css position:absolute

    Buongiorno a tutti.

    Ieri ho deciso di fare giù un piccolo sito in HTML. Avendo in torno delle persone con più esperienze in html e css lì ho fatto vedere il lavoro nella prima fase, che sarebbe una pagina con un sfondo e il logo, dopo un ora di discussione nessuno sapeva esattamente come si può risolvere il problema ( perché usciva fuori la barra dello scorrimento che non va bene e poi quando riducevo la pagina gli elementi rimanevano fissi), (uno diceva che devo cambiare totalmente l'immagine, l'altro diceva fai un immagine dello sfondo lungo 2000 px e così via.....) insomma le soluzioni non erano convincenti anche perchè voglio scrivere un codice pulito e per bene!!
    Quindi:
    Se qualcuno bravo/a in html e css (che sopratutto non usa i metodi obsoleti come le tebelle) può vedere quello che ho fatto e mi può dare dei consigli, ringrazio infinitivamente......

    Nell'immagine w ww.sfondoconlogo.altervista.org vedete uno sfondo con delle macchie grige, lo sfondo è un immagine grande 1280x417 px, e si ripete come vedete nell'immagine.
    poi c'è un altra immagine di una riga curva con il logo grande: 1280x504 .

    Il codice html:
    [html]
    <body bottommargin="0" leftmargin="0" marginheight="0" marginwidth="0" rightmargin="0" topmargin="0">
    <div align="center">

    <div align="center" id="curva">
    <img src="logo_riga.png" />
    pippo
    </div>

    </div>
    </body>
    [/html]
    ed ecco il CSS:

    body {
    background-image:url(sfondo.jpg);
    background-repeat:repeat-y;
    font-family: ,Arial, Verdana, sans-serif;
    font-size: 14px;
    
    }
    
    
    
    #curva {
    overflow:hidden;
    width: 1270px;
    height:600px;
    position:absolute;
    top: 50%;
    left: 50%;
    margin-left: -650px;
    margin-top: -280px;
    }
    
    

    Con questo CSS tutto funziona, nel senso che quando riduco la pagina tutto si sposta come dovrebbe, e non c'è più la barra dello scorrimento ma tanti mi dicono che usare position: absolute non va bene, é così? Perché?
    E se non va bene quale potrebbe essere il codice giusto ?

    Grazie.


  • User Attivo

    Ciao andia,

    puoi tranquillamente utilizzare il position:absolute; nell'esempio che hai citato esso viene utilizzato per centrare orizzontalmente e verticalmente il contenuto.
    E' una tecnica che ho utilizzato anch'io in un paio d'occasioni ma che ho abbandonato per un semplice motivo: se ridimensioni la pagina a 1024x768px noterai che l'immagine viene tagliata a sinistra e a destra.

    Conviene sempre utilizzare una risoluzione massima di 960px per permettere anche a chi ha monitor con risoluzioni inferiori di visualizzare il sito.

    Claudio.


  • User

    Buongiorno Claudio_c,

    Grazie per la risposta. In realta tutto il contenuto della mia pagina (il menu ecc...) andrà dentro un quadrato di 1000px, che sarà in centro della pagina sotto la riga diritta. Quindi chi avrà una risoluzione 1280 vedrà tutta l'onda e chi avrà la risoluzione di 1024 vedrà il logo e la riga diritta e tutto ciò che sarà scritto sotto, a questo punto secondo te va bene? Magari devo solo diminuire il 1000 px a 960?

    Grazie
    Andia


  • User Attivo

    Ciao,
    io per sicurezza rimarrei sui 960px; se vuoi una guida di riferimento prova a vedere ttp://960.gs/.

    Un saluto,
    Clsaudio.


  • User

    Grazie!!