• User Attivo

    aggiungere un div ad una colonna centrata

    Ciao a tutti!
    Il mio sito è centrato rispetto alla pagina, ecco il codice
    [PHP]body{
    margin: 0;
    padding: 0;
    text-align: center;
    background-color: #333;
    padding-top: 20px;

    }

    #centralone
    {
    width: 640px;
    height: 625px;

    margin: auto;
    background: url("../images/home.png")no-repeat;
    

    }[/PHP]

    Adesso io vorrei aggiungere un div a destra del mio corpo centrato in modo che rimanga centrato solo il corpo e il mio nuovo div venga spostato a destra...
    Come posso fare ?


  • User Attivo

    Ciao pettedemon,
    potresti provare semplicemente ad aggiungere il div nel flusso e con una regola css posizionarlo in modo assoluto.

    Questo ti dovrebbe venire facile perchè conosci a priori le dimensioni del DIV 'centralone'.

    Ciao


  • User Attivo

    Ciao mirkoagrati,
    ci avevo provato ma non sono riuscito a ottenere nessun risultato
    ecco il codice

    
    
    #centralone_home
    {
        width: 640px;
        height: 626px;
        margin: auto;
        background: url(../images/home.png) no-repeat;
    
    }
    
    #sponsor
    {
        
        width: 175px;
        height: 120px;
        background-color: white;
        position: absolute;
        top: 20px;
        right: 340px;
    }
    

    e la pagina

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Documento senza titolo</title>
    <link rel="stylesheet" type="text/css" href="css/stile.css" />
    </head>
    
    <body>
    <div id="centralone_home">
    
    </div>
    
    <div id="sponsor"></div>
    
    </body>
    </html>
    
    

    E al ridimensionamento della pagina si sposta e non resta più dove vorrei...


  • User Attivo

    Ciao,
    prova ad aggiungere la regola css:

    div{display: inline;}

    e togli il posizionamento assoluto al secondo div.

    Ciao


  • User Attivo

    Non funziona, anzi non mi appare piu' nulla


  • User Attivo

    Come non appare niente?

    hai fatto così?:
    [php]
    body div{display: inline;}

    #sponsor
    {

    width: 175px;
    height: 120px;
    background-color: white;
    

    }
    [/php]


  • User Attivo

    Ti posto un po' di codice in piu' comunque continua a non apparire nulla, forse sbaglio io ..
    [PHP]body{
    margin: 0;
    padding: 0;
    text-align: center;
    background-color: #333;
    padding-top: 20px;

    }

    html, body {
    width: 100%;
    }

    h1{
    font-size: 35px;
    text-decoration: none;
    color: #603813;
    }

    h1 a:link{
    font-size: 35px;

    color:;
    

    }

    h1 a:visited{
    font-size: 35px;
    text-decoration: none;
    color:;
    }

    h1 a:hover{
    font-size: 35px;
    text-decoration: none;
    color: #4D4D4D;
    }

    h1 a:active{
    font-size: 35px;
    text-decoration: none;
    color:;
    }

    #centralone_home
    {
    width: 640px;
    height: 626px;
    margin: auto;
    background: url(../images/home.png) no-repeat;

    }

    #centralone_abbonati
    {
    width: 640px;
    height: 626px;

    margin: auto;
    

    background: url(../images/abbonati.png) no-repeat;

    }

    #centralone_grazie
    {
    width: 640px;
    height: 435px;

    margin: auto;
    background: url(../images/grazie.png) no-repeat;
    

    }

    #centralone_archivio
    {
    width: 640px;

    margin: auto;
    

    }

    body div{display: inline;}

    #sponsor
    {

    width: 175px;
    height: 120px;
    background-color: white;
    

    }
    [/PHP]

    e il codice della pagina
    [PHP]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Documento senza titolo</title>
    <link rel="stylesheet" type="text/css" href="css/stile_p.css" />
    </head>

    <body>
    <div id="centralone_home">

    </div>

    <div id="sponsor"></div>

    </body>
    </html>
    [/PHP]


  • User Attivo

    Ciao,
    con qualche modifica a me è apparso.
    Prima di tutto devi inserire i contenuti nei div,
    altrimenti che vedi?

    Io ho utilizzato FF 3.5.2.

    Qui sotto il codice della pagina di test che mi sono creato in locale con i tuoi
    post.

    [php]
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Documento senza titolo</title>
    <link rel="stylesheet" type="text/css" href="css/stile_p.css" />

    <style>
    body{
    margin: 0;
    padding: 0;
    text-align: center;
    background-color: #333;
    padding-top: 20px;

    }

    html, body {
    width: 100%;
    }

    h1{
    font-size: 35px;
    text-decoration: none;
    color: #603813;
    }

    h1 a:link{
    font-size: 35px;

    color:;
    

    }

    h1 a:visited{
    font-size: 35px;
    text-decoration: none;
    color:;
    }

    h1 a:hover{
    font-size: 35px;
    text-decoration: none;
    color: #4D4D4D;
    }

    h1 a:active{
    font-size: 35px;
    text-decoration: none;
    color:;
    }

    #centralone_home
    {
    width: 640px;
    height: 626px;
    margin: auto;
    background-color: red;

    }

    #centralone_abbonati
    {
    width: 640px;
    height: 626px;

    margin: auto;
    

    background: url(../images/abbonati.png) no-repeat;

    }

    #centralone_grazie
    {
    width: 640px;
    height: 435px;

    margin: auto;
    background: url(../images/grazie.png) no-repeat;
    

    }

    #centralone_archivio
    {
    width: 640px;

    margin: auto;
    

    }

    body div{display: inline; border: 3px solid green; margin 10px;}

    #sponsor
    {

    width: 175px;
    height: 120px;
    background-color: white;
    

    }
    </style>
    </head>

    <body>
    <div id="centralone_home">
    centralone_home
    </div>
    <div id="sponsor">
    sponsor
    </div>

    </body>
    </html>[/php]

    Ciao


  • User Attivo

    Ecco , prova adesso che ho inserito un po' di testo
    [PHP]<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Documento senza titolo</title>
    <link rel="stylesheet" type="text/css" href="css/stile_p.css" />

    <style>
    body{
    margin: 0;
    padding: 0;
    text-align: center;
    background-color: #333;
    padding-top: 20px;

    }

    html, body {
    width: 100%;
    }

    h1{
    font-size: 35px;
    text-decoration: none;
    color: #603813;
    }

    h1 a:link{
    font-size: 35px;

    color:;
    

    }

    h1 a:visited{
    font-size: 35px;
    text-decoration: none;
    color:;
    }

    h1 a:hover{
    font-size: 35px;
    text-decoration: none;
    color: #4D4D4D;
    }

    h1 a:active{
    font-size: 35px;
    text-decoration: none;
    color:;
    }

    #centralone_home
    {
    width: 640px;
    height: 626px;
    margin: auto;
    background-color: red;

    }

    #centralone_abbonati
    {
    width: 640px;
    height: 626px;

    margin: auto;
    

    background: url(../images/abbonati.png) no-repeat;

    }

    #centralone_grazie
    {
    width: 640px;
    height: 435px;

    margin: auto;
    background: url(../images/grazie.png) no-repeat;
    

    }

    #centralone_archivio
    {
    width: 640px;

    margin: auto;
    

    }

    body div{display: inline; border: 3px solid green; margin 10px;}

    #sponsor
    {

    width: 175px;
    height: 120px;
    background-color: white;
    

    }
    </style>
    </head>

    <body>
    <div id="centralone_home">
    centralone_home centralone_home centralone_home centralone_home centralone_home centralone_home centralone_home centralone_home centralone_home centralone_home
    </div>
    <div id="sponsor">
    sponsor
    </div>

    </body>
    </html> [/PHP]