problema sistemazione css

29-08-2014, 18.13.03

Salve a tutti,

Ho il seguente problema che non riesco a risolvere. Ho da visualizare la data odierna contenuta in un file php e richiamato nella parte bassa del foglio html e poi nella parte altra per intenderci dove ci sono i tag <body> </body> ho l'intestazione il tutto contornato da una riga verticale. Solo che quando vadno ad inserire un campi input sotto la riga, me lo mette in mezzo alla riga. Questo il codice:

Codice PHP:




</script>

<style type="text/css"> 

 #Data{

 position:absolute;

 top:0px;

 left:10px;

 left:20px;

 

}

#Titolo{

position:absolute;

top:0px;

left:395px;

width: 350px;

font-size:100%;

}

hr {

width: 1038px;

color: #0000ff;

}

div {

    

position:absolute;

top: 65px;    

}

footer{

    bottom:0;

    height:100px;

    position:absolute;

    width:100%;

    text-align:center;

   

    }

    table{

        border:1px solid black;

    }    

</style>

</head>

<body>

    <header>

        

    <div id="Titolo"><h2>Prova inserimento campi</h2>    </div>   

    <div id="hr"> <hr> </div> </hr>

    </header>  

 

    <footer> 

        <div id="footer">

pincopallino

       </footer> </div>

    

    <!-- inizio inserimento campi per processarli con ajax -->

    <form action="checkdate.php" method="post" id="contatti">

 

        <div id="div">

 <label for="cognome">Cognome: <input type ="text" id="cognome" name="cognome" onkeyup="input" maxlenght ="15" ></label>

<p>       

        

  </div>  </form>

    

   

 <?php

        

include_once("connettimysqli.php");



include_once("data.php");







?>

    </body>

</html>

Mi potreste dare una corretta per favore ??? Questa è l'immagine.

http://s8.postimg.org/gww659ut1/insdati.png

Grazie spero in una vostra sistemata . non sono molto bravo con i css.

**mexonline** · 29-08-2014, 18.41.29

si sovrappongono perche div{ } applica lo stile ad ogni div presente in pagina e hr { } lo applica ad ogni hr che inserisci se metti id="div" oppure id="hr" questo non applica lo stile al div

Codice HTML:

<style type="text/css">  
 #Data{ 
 position:absolute; 
 top:0px; 
 left:10px; 
 left:20px; 
  
} 
#Titolo{ 
position:absolute; 
top:0px; 
left:395px; 
width: 350px; 
font-size:100%; 
} 
hr { 
position:absolute;
top: 50px;
width: 1038px; 
color: #0000ff; 
} 
div { 
position:absolute; 
top: 65px;     
} 

footer{ 
    bottom:0; 
    height:100px; 
    position:absolute; 
    width:100%; 
    text-align:center; 
    
    } 
    table{ 
        border:1px solid black; 
    }     
</style> 
</head> 
<body> 
    <header> 
         
    <div id="Titolo"><h2>Prova inserimento campi</h2>    </div>    
    <hr> 
    </header>   
  
    <footer>  
        <div id="footer"> 
pincopallino 
        </div> 
       </footer>

    <!-- inizio inserimento campi per processarli con ajax --> 
    <form action="checkdate.php" method="post" id="contatti"> 
  
        <div> 
 <label for="cognome">Cognome: <input type ="text" id="cognome" name="cognome" onkeyup="input" maxlenght ="15" ></label> 
<p>        
         
  </div>  </form>

prova cosi ed ecco un esempio

aaa e se inserisci nel hr {} una distanza top: "50px"; esempio nel div {} metti un numero più grande esempio top: "70px";
per dare spazio e non far sovrappore l'input con la linea hr

30-08-2014, 17.47.50

Ciao mexonline,

Magnifico, ho visto l'esempio e l'hai sistemato come volevo io. Ovviamente per abbasare il campo dall'input devo metter eun 70px su div giusto dalla distanza della riga. Un ultima cosa per avere la riga tutta fino in fondo va bene il valore: width: 1038px ???? Grazie.

30-08-2014, 18.00.18

Ciao mexonline,

Allora risolto il problema completamente la riga l'avevo messa a meno px ed era normale che non ci arrivasse alla fine. Il post si può chiudere con un "Risolto". Grazie dell'aiuto e sopratutto della siste,ata al codice css.

30-08-2014, 18.20.52

Ciao mexonline,

Scusami di nuovo ma mi sono accorto che nel footer c'è la scrooll bar e la vorrei eliminare è possibile ???? Stavo cercando negli esempi ma sono riuscito a bloccarla con la rotellina del mouse ma non ad eliminarla definitivamente. Grazie.

**mexonline** · 30-08-2014, 18.33.44

parli della scrooll bar orizontale a fondo pagina?

prova sostituendo il footer con questo, non dovrebbe darti più scrooll bar

Codice HTML:

footer{ 
    bottom:0px;  
    height:100px;
    position:absolute; 
    text-align:center;
    width:1000px; 
    }

come qui esempio

31-08-2014, 13.16.24

Ciao mexonline,

Eeheheheh sei un grande. Era proprio quello che cercavo. grazie. :P Ora la discussione si può chiudere con un "Risolto"

31-08-2014, 13.30.18

Ciao mexonline,

Allora rettifico di nuovo perdonatemi. Ancora il calvario non è finito. Ho messo il testo originale del footer ma ovviamente sono ricomparse le scroolbar in quanto è sud due righe. Con le scroobar si legge tutto regolarmente per intero, però volevo far si che scomparissero e anche se sta su due righe si leggesse ugualmente, come fanno in molti siti. Posto di nuovo il codice stavolta con il footer completo.

Codice PHP:






<style type="text/css"> 

 #Data{ 

 position:absolute; 

 top:0px; 

 left:10px; 

 left:20px; 

  

} 

#Titolo{ 

position:absolute; 

top:0px; 

left:395px; 

width: 350px; 

font-size:100%; 

} 

hr { 

position:absolute;

top: 50px;

width: 1055px; 

color: #0000ff; 

} 

div { 

position:absolute; 

top: 72px;     

} 



footer{ 

    bottom:0px;  

    height:100px;

    position:absolute; 

    text-align:center;

    width:1000px; 

    

    } 

    table{ 

        border:1px solid black; 

    }     

</style> 

</head> 

<body> 

    <header> 

         

    <div id="Titolo"><h2>Prova inserimento campi</h2>    </div>    

    <hr> 

    </header>   

  

   <footer>  

        <div id="footer"> 

La pagina è stata creata by Fabio xxx. Tutti i diritti riservati. 

Ogni parte o contenuto di essa se ricopiati o riportati in altre pagine 

senza previaviso e autorizzazione dell'autore, saranno puniti a norma di legge.  

        </div>        </footer>



    <!-- inizio inserimento campi per processarli con ajax --> 

    <form action="checkdate.php" method="post" id="contatti"> 

  

        <div> 

 <label for="cognome">Cognome: <input type ="text" id="cognome" name="cognome" onkeyup="input" maxlenght ="15" ></label> 

<p>        

         

  </div>  </form

    

   

 <?php

        

include_once("connettimysqli.php");



include_once("data.php");







?>

    </body>

</html>

Come si potrebbe sistemare ???? Grazie di nuovo.

**NLSweb** · 31-08-2014, 16.10.01

Per non visualizzare la scrollbar basta usare il comando CSS overflow:hidden; , puoi anche specificare solo la scrollbar orizzontale o verticale , rispettivamente : overflow-x:hidden; overflow-y:hidden;

31-08-2014, 17.49.01

però mi si vede smezzato la seconda riga, c'avevo provato :(

**NLSweb** · 31-08-2014, 23.31.19

Allora aumenta la dimensione height del footer
o
diminuisci la dimensione del font del testo

devi necessariamente dare lo spazio necessario per visualizzare il testo se non vuoi lo scroll

**mexonline** · 02-09-2014, 23.48.52

Si come dice NLSweb per non mostrare più la scroll bar riduci il testo o aumenti l'altezza dal basso cioè bottom e aumenti anche l'height del div footter (ma se non sbaglio un dispositivo con uno schermo più piccolo vedrà sempre la barra per spostare la pagina mettendo le percentuali nel width la scroll bar orizontale non si vedrebbe più neanche su altri dispositivi)

**NLSweb** · 03-09-2014, 13.00.42

Su dispositivi diversi bisogna usare Media-Query per adattare la pagina

03-09-2014, 13.41.22

Allora ho tirato su leggermente la scritta ed o ra è come voglio io ossia senza scrollbar. Quindi direi che qua si può chiudere con un "Risolto" Graziea tutti e due. A mexonline e a NLSweb per le dritte.

Discussione: problema sistemazione css

LinkBack

Strumenti discussione

Display

problema sistemazione css

Problemi di allineamento css

Regole di scrittura