Visualizzazione risultati 1 fino 10 di 10

Discussione: posizione

  1. #1
    Guest

    Predefinito posizione

    Non sapevo di preciso dove aprire questa discussione o che titolo mettere, allora sto lavorando ad un sito, premendo su un link nella pagina mi apre la pagina php che ho creato, fin qui nessun problema, il testo pure appare nel punto deciso, ma se provò ha posizionarlo leggermente più in basso, mi si sposta il menù
    il mio sito è fatto da una barra superiore dove c'è il menù, uno spazio dove c'è il contenuto dei link e dove appaiono le pagine php create (per ora solo una) e una barra inferiore, io vorrei che la barra inferiore non si spostasse più in basso facendo apparire anche la barra di scorrimento di lato appena sposto il testo più in basso, come devo fare?

    spero di essere stato chiaro, in caso contrario proverò a postare due immagini per far capire cosa chiedo

    grazie

  2. #2
    Guest

    Predefinito

    Ciao, sarebbe utile un link alla pagina e il codice che usi

  3. #3
    Guest

    Predefinito


    questa è la pagina normale
    ma se provo a spostare il contenuto "testo prova" più verso giù succede questo

    come potete vedere la barra inferiore blu viene spostata più in giù, ecco questo non dovrebbe succedere come dovrei fare? qualche idea l'avrei, ma sono ancora agli inizi quindi preferisco chiedere aiuto qui

  4. #4
    L'avatar di radiodelmomento
    radiodelmomento non è connesso AlterGuru
    Data registrazione
    09-09-2010
    Messaggi
    1,075

    Predefinito

    Questo è un problema CSS, non c'entra il PHP.
    A giudicare dalle immagini sembrerebbe che il testo del Copyright abbia un posizionamento fisso (fixed), mentre la barra assoluto (absolute).
    Come già detto da mathis servirebbe il link alla pagina (non degli screenshot) o il codice HTML (non per forza PHP).

    Ciao!

  5. #5
    Guest

    Predefinito

    chiedo scusa per aver sbagliato posto dove aprire il post, ma ormai continuo qui senza aprire un altro post
    questo è il CSS
    Codice:
    /* RESET CSS */html, body, div, p, span,
    h1, h2, h3, h4, h5, h6,
    blockquote, pre, a, abbr, acronym, address, big, cite, code,
    img, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td, iframe, ins{
        margin:0;
        padding:0;
        border:0;
        font-size:100%;
        font:inherit;
        line-height:1;
    }
    img {border:none; vertical-align:bottom;}
    /*FINE RESET*/
    
    
    /*colore sfondo*/
    body {background-color:#FFF;}
    /*colore sfondo*/
    /*barra menù*/
    #menù {position:relative; background:#06659f;  width:100%; height:64px;  }
    /*barra menù*/
    /*logo sito sul menù*/
    #logo {
        position: absolute;
        margin-left: 0px;
        margin-top: 0px;
        top: 7px;
        width: 63px;
        height: 54px;
        left: 5px;
    }
    /*logo sito sul menù*/
    #pagine
    {
        width:100%;
        height:539px;
    }
    #barrainferiore
    {
        background:#06659f;
        width:100%;
        height:64px;
        
    }
    p.testobarrainf
    {
    position:absolute;
     font-family: 'Open Sans', sans-serif;
     color: white;
      font-size: 13px;
      text-align:center;
     
        top: 632px;
        left:46%;
     
    }
    
    
    /*menù*/
    @import url(http://fonts.googleapis.com/css?family=Open+Sans:600);
    /* Menu CSS */#cssmenu,
    #cssmenu > ul {
      background:#06659f;
      padding-bottom: 3px;
      font-family: 'Open Sans', sans-serif;
      font-weight: 600;
    }
    
    
    
    
    #cssmenu:before,
    #cssmenu:after,
    #cssmenu > ul:before,
    #cssmenu > ul:after {
      content: '';
      display: table;
    }
    #cssmenu:after,
    #cssmenu > ul:after {
      clear: both;
    }
    #cssmenu {
      width: auto;
      zoom: 1;
    }
    #cssmenu > ul {
      background:#06659f;
      margin: 0;
      padding: 0;
      position: absolute;
      margin-left:36%;
    
    
      
    }
    #cssmenu > ul li {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    #cssmenu > ul > li {
      float: left;
      position: relative;
    }
    #cssmenu > ul > li > a {
      padding: 23px 26px;
      display: block;
      color: white;
      font-size: 13px;
      text-decoration: none;
      text-transform: uppercase;
      text-shadow: 0 -1px 0 #0d0d0d;
      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7);
      line-height: 18px;
    }
    #cssmenu > ul > li:hover > a {
      background: url(highlight-bg.png) repeat;
      text-shadow: 0 -1px 0 #97321f;
      text-shadow: 0 -1px 0 rgba(122, 42, 26, 0.64);
    }
    #cssmenu > ul > li > a > span {
      line-height: 18px;
    }
    #cssmenu > ul > li.active > a,
    #cssmenu > ul > li > a:active {
      background-color:#06659f;
      background-image:url(../IMG/icon.png);
      background-repeat:no-repeat;
      background-position:left;
     
      
    }
    /* Childs */
    #cssmenu > ul ul {
      opacity: 0;
      visibility: hidden;
      position: absolute;
      top: 120px;
      background-color:#06659f;
      margin: 0;
      padding: 0;
      z-index: -1;
    }
    #cssmenu > ul li:hover ul {
      opacity: 1;
      visibility: visible;
      margin: 0;
      color: #000;
      z-index: 2;
      top: 64px;
      left: 0;
    }
    #cssmenu > ul ul:before {
      content: '';
      position: absolute;
      top: -10px;
      width: 100%;
      height: 20px;
      background: transparent;
    }
    #cssmenu > ul ul li {
      list-style: none;
      padding: 0;
      margin: 0;
      width: 100%;
    }
    #cssmenu > ul ul li a {
      padding: 18px 26px;
      display: block;
      color: #FFF;
      font-size: 13px;
      text-decoration: none;
      text-transform: uppercase;
      width: 150px;
      border-left: 4px solid transparent;
      -webkit-transition: all 0.35s ease-in-out;
      -moz-transition: all 0.35s ease-in-out;
      -ms-transition: all 0.35s ease-in-out;
      transition: all 0.35s ease-in-out;
    }
    #cssmenu > ul ul li a:hover {
        background-image: url(../IMG/icon.png) ;
        background-repeat:no-repeat;
        background-position:left;
      
    }
    #cssmenu > ul ul li a:active {
        background-color:06659f;
    }
    
    
    /*menù*/
    /*loginregistrazione*/
    #messreg
    {
        text-align:center;
        margin-top:10px;
    }
    p.logout{
        position: absolute;
        margin-left:94%;
        top: 26px;
        font-size:13px;
        color:white;
        font-family: 'Open Sans';
        text-transform: uppercase;
    }
    p.login
    {
        position: absolute;
        margin-left:90%;
        top: 26px;
        font-size:13px;
        color:white;
        font-family: 'Open Sans';
        text-transform: uppercase;
    }
    p.registrazione
    {
        position: absolute;
        margin-left:84%;
        top: 26px;
        font-size:13px;
        color:white;
        font-family: 'Open Sans';
        text-transform: uppercase;
    }
     
     p.logout a:link    {text-decoration: none; color: white;}
    p.logout a:visited {text-decoration: none; color: white;}
    p.logout a:hover   {color: white;}
    
    
    p.registrazione a:link    {text-decoration: none; color: white;}
    p.registrazione a:visited {text-decoration: none; color: white;}
    p.registrazione a:hover   {color: white;}
    p.login a:link    {text-decoration: none; color: white;}
    p.login a:visited {text-decoration: none; color: white;}
    p.login a:hover   {color: white;}
    
    
    
    
    #registrazione
    {
        
        margin-left:38%;
        margin-top:10%;
        
    }
    #login
    {
        
    
    
        
        margin-left:38%;
        margin-top:10%;
        
    
    
    }
    #loginform
    {
        margin-top
    }
    #loginstat
    {
        margin-left:30%;
        
        
    }
    #loginstat1
    {
        margin-left:46%;
    }
    #inputlogin
    {
        margin-bottom:1%;
    }
    
    
    
    
        
    #ora
    {
        position: absolute;
        margin-left: 10%;
        color: white;
        left: -7px;
        top: 21px;
        font-family: 'Open Sans';
        text-transform: uppercase;
        font-size:13px;
    }
    
    
    /*loginregistrazione*/
    /*PAGINA NARUTO*/
    #Naruto
    {
        background:#ffeabf;
    }
    #ContenitoreNaruto
    {
        margin-left:45%;
        margin-top:5%;
      
    }
    
    
    /*FINE PAGINA NARUTO*/
    questo è l'HTML della pagina index:
    Codice:
    <!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" />
    <link rel="stylesheet" type="text/css" href="CSS/falcon.css" />
    <link rel="shortcut icon" href="IMG/favicon.ico" />
    <title>FALCONWEB</title>
    </head>
    <body>
    <div id="menù">    
    <div id="logo">    
    <img src="IMG/logo.png" alt="logo" width="57" height="44" usemap="#Map" border="0" />    
      </div>    
    <div id="ora">
    <a href="http://time.is/Italy" id="time_is_link" style="font-size:13px"></a><span id="Italy_z723" style="font-size:13px"></span>
    <script src="http://widget.time.is/it.js">
    </script>
    <script>
    time_is_widget.init({Italy_z723:{template:"TIME<br/>DATE", time_format:"12hours:minutes:secondsAMPM", date_format:"monthnum-daynum-year"}});
    </script>
    </div>  
    <div id='cssmenu'>
    <ul>   <li >
    <a href='index.php'><span>HOME</span>
    </a>
    </li>   
    <li><a href='#'><span>ESEMPI</span></a>      
    <ul>       
      <li><a href='?pag=Naruto'><span>NARUTO</span>
    </a>
    </li>       
      <li><a href='?pag=Continumm'><span>CONTINUUM</span>
    </a>
    </li>         
    <li><a href='?pag=Miosito'><span>MIO SITO</span>
    </a>
    </li>      
    </ul>   </li>  
     <li class='has-sub'><a href='#'><span>Prova3</span>
    </a>      <ul>       
      <li><a href='#'><span>Provae3</span>
    </a>
    </li>     
        <li class='last'><a href='#'><span>Prova3</span>
    </a>
    </li>      
    </ul>   
    </li>   
    <li class='last'><a href='#'><span>Prova5</span>
    </a>
    </li>
    </ul>       
     </div>       
     <p class="login"><a href='?pag=login'>LOGIN</a>        
    </p>      
      <p class="registrazione"><a href='?pag=register'> SIGN UP</a>      
      </p>            
        <p class="logout"><a href='?pag=logout'>LOGOUT</a></p>                 
    </div> 
    <div id="pagine">     
     <?php       if($_GET['pag'] == 'login') include('login.php');            ?>          
      <?php       if($_GET['pag'] == 'register') include('register.php');            ?>   
        <?php       if($_GET['pag'] == 'logout') include('logout.php');            ?>   
           <?php       if($_GET['pag'] == 'Naruto') include('naruto.php');            ?>              
             <?php       if($_GET['pag'] == 'Continuum') include('continuum.php');            ?>     
                      <?php       if($_GET['pag'] == 'Miosito') include('miosito.php');            ?>                         
              </div>
              <div id="barrainferiore">        
      <p class="testobarrainf">
    AlexGioffre'©2014-2014</p>          
    </div>
    </body>
    </html>

  6. #6
    NLSweb non è connesso Altervistiano Junior
    Data registrazione
    17-01-2014
    Messaggi
    658

    Predefinito

    alla tua #barrainferiore gli puoi assegnare una position:absolute , pero' poi ti sorge il problema che il contenuto tra il menu' superiore e la barra inferiore superi l'altezza della barra.
    il problema quindi non e' tanto CSS ma HTML , devi pensare alla struttura del sito..
    mi spiego (in modo esemplificato) se tu hai tre div (alto->menu , centro->testo , basso->barra) e' normale che il variare della altezza del testo centrale faccia variare la posizione della barra in basso ; se vuoi che questo con accada devi creare un iframe centrale in modo che il menu in alto e la barra in basso rimangano in posizioni sempre fisse e il testo centrale possa scorrere indipendentemente.

    ma c'e' anche un altro fattore : nel momento che ridimensiono la pagina (attualmente) il sito non si ridimensiona e non si riposiziona adeguatamente. quindi avrai una sovrapposizione delle voci di menu ed uno sfalzamento del menu e della barra .
    Ultima modifica di NLSweb : 03-07-2014 alle ore 11.07.34

  7. #7
    Guest

    Predefinito

    Citazione Originalmente inviato da NLSweb Visualizza messaggio
    alla tua #barrainferiore gli puoi assegnare una position:absolute , pero' poi ti sorge il problema che il contenuto tra il menu' superiore e la barra inferiore superi l'altezza della barra.
    il problema quindi non e' tanto CSS ma HTML , devi pensare alla struttura del sito..
    mi spiego (in modo esemplificato) se tu hai tre div (alto->menu , centro->testo , basso->barra) e' normale che il variare della altezza del testo centrale faccia variare la posizione della barra in basso ; se vuoi che questo con accada devi creare un iframe centrale in modo che il menu in alto e la barra in basso rimangano in posizioni sempre fisse e il testo centrale possa scorrere indipendentemente.

    ma c'e' anche un altro fattore : nel momento che ridimensiono la pagina (attualmente) il sito non si ridimensiona e non si riposiziona adeguatamente. quindi avrai una sovrapposizione delle voci di menu ed uno sfalzamento del menu e della barra .
    per quanto riguarda la struttura della pagina è una cosa che avevo pensato di fare dopo, prima voglio sistemare il sito, che mi consigli di fare per costruire il sito come voglio io, cioè alto=menù, mezzo=contenuto pagine, basso=barra

    grazie comunque per la risposta

  8. #8
    Guest

    Predefinito

    con iframe ho risolto più o meno, ora avendo problemi con l'alimentatore del pc non posso lavorare bene al sito, grazie per la risposta, finito la pagina se avrò bisogno di aiuto verrò di nuovo qui, grazie mille

  9. #9
    NLSweb non è connesso Altervistiano Junior
    Data registrazione
    17-01-2014
    Messaggi
    658

    Predefinito

    Se vuoi esistono anche soluzioni alternative al iframe ...
    io te l'ho suggerito solo perche' e' il metodo piu' semplice e veloce ..
    una alternativa e' l'utilizzo delle tecniche parallax
    ma ci sono anche molti altri metodi.

  10. #10
    Guest

    Predefinito

    Citazione Originalmente inviato da NLSweb Visualizza messaggio
    Se vuoi esistono anche soluzioni alternative al iframe ...
    io te l'ho suggerito solo perche' e' il metodo piu' semplice e veloce ..
    una alternativa e' l'utilizzo delle tecniche parallax
    ma ci sono anche molti altri metodi.
    sono ancora agli inizi quindi sto provando varie metodi, per ora voglio sono fare una cosa semplice, può essere che per una pagina uso iframe, per un altra uso un altro metodo, cosi da esercitarmi

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •