Problemi di allineamento css

24-08-2014, 17.31.24

Salve a tutti,

So che è una cavolata ma non capisco dove sbaglio. Dunque sulla mia pagina devo allineare due testi di cui un testo che viene visualizzato a sx dello schermo (ossia la visualizzazione della data), viene visualizzata come si deve. Invece il testo "benvenuto" dovrebbe essere allineato al centro sulla stessa riga della data. ma questo non avviene e avviene sfalzato, ossia la data viene visualizzata in alto a sx come deve essere e il "benvenuto" viene visualizatto si al centro ma sotto di una riga. E' possibile metterlo sulla stessa riga ??? Spero di ricevere un vostro aiutino grazie. Questo è quanto viene visualizzato:

Questo è quello che viene visualizzato:

http://s3.postimg.org/qofb4ka9v/Data...e_sfalzati.png

E questo è quanto ho fatto:

Codice PHP:




<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

<style type="text/css"> 

    

.sin{ 

margin:0; 

padding:0; 

background:transparent;float:left; 

clear: both;

} 



.cent{ 

    

height: 0;

margin:0; 

padding:0; 

text-align: center;

} 

</style>

    </head>

    <body>

        <?php

        

       include_once("connetti.php");



       include_once("data.php");





echo '<div class="cent">';

      echo "<h2> Prova inserimento campi </h2>";

       echo "<hr /> </div>  ";

        ?>

    </body>

</html>

25-08-2014, 09.44.07

E' difficle darti una mano senza vedere il codice di data.php oppure un risultato HTML (hai postato un immagine e non si capisce quali elementi hai usato nell'DOM html).

Posta il sorgente e ti potremo dare una mano, cmq di base credo andando a intuito che tu abbia chiamato dentro data.php un div, i div per definizione se non specifichi il width diventano lunghi quanto il loro container.
Ti consiglio di utilizzare display: table-cell; dentro il css su entrambi i div, oppure una tabella o in extremis il float (sempre css).

**NLSweb** · 25-08-2014, 13.46.01

Il problema visivo risiede nel H2 , questo difatti crea lo sfalzamento da te descitto; per risolvere la cosa (mantenendo la struttura da te indicata) definisci nel CSS una position (relativa o assoluta dipende dalle tue esigenze) , quindi compenza lo sfallo con top o bottom.
Esempio:

Codice:

#cent h2{
 position:relative;
 bottom:50px;
}

in alternativa puoi , con lo stesso principio , abbassare la data o.. modificare la struttura HTML..

25-08-2014, 17.47.02

Ciao NLSweb,

Allora ho risolto come da te suggeritomi. Ovviamente c'è una piccola imperfezione ma meglio di prima lo è. innanzi tutto ti posto i due codici ta richiesti.

Questo è il file data.php richiamato nel file html:

Codice PHP:




<?php



$Attuale = date("d/m/Y");

//$Trattino =" - ";

echo  $Attuale ;



?>

E questo è l'intero codice html:

Codice PHP:




<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

<style type="text/css"> 

    

.sin{ 

width: 20%;

} 



.cent{ 

     position:relative;

      bottom:50px;

text-align:center;

} 

</style>

    </head>

    <body>

        <?php

        

       include_once("connetti.php");



       include_once("data.php");





echo '<div class="cent">';

      echo "<h2> Prova inserimento campi </h2>";

       echo "<hr /> </div>  ";

        ?>

    </body>

</html>

E questo è il risultato con la tua modifica ecco l'immagine:

http://s18.postimg.org/z573wcrzt/Dat...o_centrato.png

Come si vede non è perfettamente allineato con la data. Si può sistemare ??? Grazie.

**NLSweb** · 25-08-2014, 18.01.32

Ti consiglio di assegnare un DIV per la data ed un altro per il titolo
quindi con i CSS definisci l'aspetto grafico
ecco due esempi:

con position absolute

Codice HTML:

<!DOCTYPE html>
<html>
<head>
<style>
#Data{
 position:absolute;
 top:25px;left:10px;
 left:20px;
}
#Titolo{
 position:absolute;
 top:0px;left:150px;
 font-size:100%;
}
</style>
</head>
<body>

<div id="Data">25/08/2014</div>
<div id="Titolo"><h2>Prova Inserinmento</h2></div>

</body>
</html>

con position realtive

Codice HTML:

<!DOCTYPE html>
<html>
<head>
<style>
#Data{
 position:relative;
 top:20px;
 left:20px;
}
#Titolo{
 position:relative;
 top:-20px;
 text-align:center;
 font-size:100%;
}
</style>
</head>
<body>

<div id="Data">25/08/2014</div>
<div id="Titolo"><h2>Prova Inserinmento</h2></div>

</body>
</html>

25-08-2014, 19.37.51

Originalmente inviato da NLSweb

Ti consiglio di assegnare un DIV per la data ed un altro per il titolo
quindi con i CSS definisci l'aspetto grafico
ecco due esempi:

con position absolute

Codice HTML:

<!DOCTYPE html>
<html>
<head>
<style>
#Data{
 position:absolute;
 top:25px;left:10px;
 left:20px;
}
#Titolo{
 position:absolute;
 top:0px;left:150px;
 font-size:100%;
}
</style>
</head>
<body>

<div id="Data">25/08/2014</div>
<div id="Titolo"><h2>Prova Inserinmento</h2></div>

</body>
</html>

con position realtive

Codice HTML:

<!DOCTYPE html>
<html>
<head>
<style>
#Data{
 position:relative;
 top:20px;
 left:20px;
}
#Titolo{
 position:relative;
 top:-20px;
 text-align:center;
 font-size:100%;
}
</style>
</head>
<body>

<div id="Data">25/08/2014</div>
<div id="Titolo"><h2>Prova Inserinmento</h2></div>

</body>
</html>

Ciao NLSweb,

Un solo problema, a posto della data che tu hai scritto come posso sfruttare il file data.php che mi si aggiorna ogni giorno ????

25-08-2014, 20.02.37

Ciao NLSweb,

Allora così va benissimo, anche perchè ho messo in h2 la data in modo tale che avessero la stessa grandezza. Al centro con "text-align: center;" non me lo fa spostare e ho risloto mettendo "left:395px;" e così l'ho messo al centro. Un ultima cosa mi rimane. La riga che avevo sotto si è dimezzata e la debbo allungare. Qualche suggerimento a suo favore ???? Sicuramente da aggiungere un altro css all'interno dei precedenti. Per adesso ti ringrazio dell'aiuto. Ti mostro quello che ho fatto e modificato.

data.php:

Codice PHP:




<?php



$Attuale = date("d/m/Y");

//$Trattino =" - ";

echo "<h2>";

echo $Attuale;

echo "</h2>";



?>

iscrizione.php

Codice PHP:




<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

<style type="text/css"> 

 #Data{

 position:absolute;

 top:0px;

 left:10px;

 left:20px;

}

#Titolo{

 position:absolute;

 top:0px;

 left:395px;

 text-align: center;

 font-size:100%;

}

</style>

</head>

<body>



</body>

</html>

</style>

    </head>

    <body>

        <?php

        

       include_once("connetti.php");

echo '<div id="Data">';

       include_once("data.php");



echo '</div>';



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





       echo "<hr /> ";

echo "</div>";

       ?>

    </body>

</html>

Risultato finale:

http://s29.postimg.org/rr8k4cdrr/Dat...o_centrato.png

Dopo di che ho risolto il problema grazie a te.

**NLSweb** · 25-08-2014, 21.28.47

Un ultima cosa mi rimane. La riga che avevo sotto si è dimezzata e la debbo allungare.

basta che la posti fuori dal DIV Titolo ... quindi dopo echo "</div>";

25-08-2014, 21.38.17

Ciao NLSweb,

Niente da fare. Mi visualizza la riga sopra i titoli. Devo aver sbagliato qualcosa nei codici ma non capisco cosa, uffy. il tag <hr> non ricordo si chiude ????

Questo quello che ho fatto:

Codice PHP:




<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

<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%;

}

#linea{

    

top: 40px;



}

</style>

</head>

<body>



</body>

</html>

</style>

    </head>

    <body>

        <?php

        

       include_once("connetti.php");



       echo '<div id="Data">';



include_once("data.php");



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





echo "</div> </div> </div>  ";



echo '<div id="linea">';



echo "<hr>";

?>

    </body>

</html>

E questo è il risultato:

http://s9.postimg.org/oodazto0v/Riga...icch_sotto.png

non capisco il perchè uffy....

25-08-2014, 22.38.09

Ciao NLSweb,

Allora finalmente ho risolto mettendo la riga sotto come la volevo io. Questa è la soluzione finale. Mi spiace aver postato tanti codici, ma sono tutte modifiche effettuare step by step ch emi hanno portato grazie al tuo aiuto alla soluzione finale. Questo dovrebbe essere l'ultimo codice definitivo.

iscrizione.php:

Codice PHP:






<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

<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: 42px;

width: 98%;

color: #0000ff;

}

</style>

</head>

<body>



</body>

</html>

</style>

    </head>

    <body>

        <?php

        

       include_once("connetti.php");



       echo '<div id="Data">';



include_once("data.php");



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



echo "</div> </div> </div>  ";



echo ' <hr> <div id = "hr">';



echo "</hr> </div>";



?>

    </body>

</html>

E questa è quello che volevo ottenere in partenza:

http://s22.postimg.org/rjsymw8lt/Sol...definitiva.png

Ti pongo solo una domanda, anzi perdonami due.

1) I due testi come puoi vedere dall'immagine si possono attaccare completamente in alto ????

2) tutto ciò che verrà inserito dopo, verrà messo dopo la riga ???? Ossia i campi e tutto il resto ????

Grazie dell'aiuto in tanto.

**NLSweb** · 25-08-2014, 22.46.43

Il problema in origine della riga dipende che hai optato per una position absolute per i precedenti DIV
se vuoi continuare ad usare position absolute , ti consiglio (per la riga e tutto quello che dovrà seguire) di creare un div sottostante con una definiszione di stile (CSS) che lo ponga ad una distanza corretta , tutto quello al suo interno si posizionerà al di sotto della testatina.

Altrimenti puoi sempre usare il codice relative ....

26-08-2014, 12.41.57

Ciao NLSweb,

Non ho capito esattamente cosa debbo inserire nel css che ho fatto. Hai detto:

se vuoi continuare ad usare position absolute , ti consiglio (per la riga e tutto quello che dovrà seguire) di creare un div sottostante con una definiszione di stile (CSS) che lo ponga ad una distanza corretta

Cosa intendi dire ??? ossia cosa dovrei inserire come aggiunta ??? Grazie.

**NLSweb** · 26-08-2014, 13.07.56

Dopo la chiusaura del DIV Titolo , apri un nuovo DIV e assegnagli un ID
in questo nuovo inserirai la linea HR e tutto il resto del codice.

quindi nel CSS definisci lo stile per il nuovo DIV
esempio:

Codice:

#nuovoDIV{
 position:absolute,
 top:80px; /*  la distanza in px la devi valutare in base a come vuoi che sia disposto il resto del contenuto  */
}

26-08-2014, 13.15.01

Ciao NLSweb,

Alla fine c'ero arrivato da solo: Difatti ho fatto così:

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: 42px;

width: 98%;

color: #0000ff;

}

div {

    

position:absolute;

top: 65px;    

}

</style>

E va magnificamente bene. Ill post per me si può chiudere con un "risolto". Te la senti di aiutarmi anche all'altro post della verifica inserimento dati con ajax ????

**NLSweb** · 26-08-2014, 13.24.37

Si , posso aiutarti .. mi puoi passare il link del post ...

26-08-2014, 13.58.13

Ciao NLSweb,

Te lo passo subito.

http://forum.it.altervista.org/html-...ml#post1157201

Qua c'è quello che vorrei fare ed ottenere il più semplice possibile con la chiamata ajaxe il controllo asincrono dei dati mentre s'immentono. Come fa altervista quando ti registri per un nuovo sito. Grazie.

Discussione: Problemi di allineamento css

LinkBack

Strumenti discussione

Display