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

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

http://i58.tinypic.com/ih3aj9.png
questa è la pagina normale
ma se provo a spostare il contenuto "testo prova" più verso giù succede questo
http://i59.tinypic.com/30jiv4k.png
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

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! :=D:

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>

---

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 .

Citazione:

---

Originalmente inviato da NLSweb

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

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

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.

Citazione:

---

Originalmente inviato da NLSweb

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