Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 11

Discussione: allineamento elementi

  1. #1

    allineamento elementi

    Buongiorno/ buonasera.

    Sono qui per chiedervi come risolvere questo problema di visualizzazioe:
    https://www.dropbox.com/h

    qui di seguito vi lascio il codice:

    Codice PHP:
    <?php
     session_start
    ();
    if(!isset(
    $_SESSION['user'])){
        
    header('Location: TESlogin.php');
    }
        else{
    ?>

    <!DOCTYPE html>
    <html>
    <head>
        <title>myTES</title>
        <link href="myTES_style.css" rel="stylesheet" type="text/css">
        <link rel="shortcut icon" href="tes-ico(1).ico" />
    </head>
    <body>

    <div id="mySidenav" class="sidenav">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
      <a href="#">About</a>
      <a href="#">Services</a>
      <a href="#">Clients</a>
      <a href="#">Contact</a><br><br>
      <a href="logout.php">Esci</a>
    </div>


    <div id = "main">
    <div class="header">
     <p id = "p1">My<b>TES</b></p>
     &nbsp; &nbsp;<span style="font-size:20px;cursor:pointer" onclick="openNav()">☰ </span>
    </div>


      <p id="pmain">
      &nbsp; &nbsp; Ciao <b><?= $_SESSION['nome'?></b> 
       <p id="p2">
           <img src="avatar.png">
       </p>
      </p>
                                    <hr>
     <p align = "center"> il mio abbonamento &nbsp; <i class="down"></i></p>
                                     <hr>



    </div>

    <!----- script in javascript per effetto comparsa laterale menu ----->
    <script>
    function openNav() {
        document.getElementById("mySidenav").style.width = "250px";
        document.getElementById("main").style.marginLeft = "250px";
    }

    function closeNav() {
        document.getElementById("mySidenav").style.width = "0";
        document.getElementById("main").style.marginLeft= "0";
    }
    </script>

    </body>
    </html>

    <?php
     
    }
    ?>
    codice:
    @font-face{
      src: url(font/Montserrat-ExtraLight.ttf);
      font-family: montserratblack;
    }
    
    
    html, body{
       display: inline-block;     /* Serve a far collassare i magini dei contenuti adiacenti ai limiti del body, i quali influirebbero altrimenti sullo stesso body */
       position: relative;        /* Blocca il riferimento dei contenuti con position absolute anche durante lo scroll della pagina */
       width: 100%;               /* Con inline-block la larghezza è relativa ai contenuti, quindi è necessario estenderla per l'intera larghezza della finestra */
       min-height: 100%;          /* Estende l'altezza del body per tutta la finestra anche se ci sono pochi contenuti, evitando che in tal caso il .footer si porti in mezzo alla pagina */
       margin: 0;                 /* Rimuove i margini di default per ottenere un corretto dimensionamento */
       padding: 0;
       font-family: montserratblack;
       font-size: 20px;
    }
    
    .header{ 
       width: 100%;
       background-color: grey;
       overflow: hidden;
       display: inline-block;
        }
    
    
        #pmain{
            display: inline-block;
        }
    
    
     #p1{
         text-align: center;
         color: white;
         font-size: 20px;
     }
    
     #p2{
         float: right;
     }
    
    
     i {
      border: solid black;
      border-width: 0 2px 2px 0;
      display: inline-block;
      padding: 3px;
    }
    
     .down {
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
    }
    
    /* barra a comparsa dal lato sinistro */
    .sidenav {
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: #111;
        overflow-x: hidden;
        transition: 0.5s;
        padding-top: 60px;
    }
    
    .sidenav a {
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-size: 25px;
        color: #818181;
        display: block;
        transition: 0.3s;
    }
    
    .sidenav a:hover {
        color: #f1f1f1;
    }
    
    .sidenav .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 36px;
        margin-left: 50px;
    }
    
    #main {
        transition: margin-left .5s;
        /*padding: 16px;*/
    }
    
    @media screen and (max-height: 450px) {
      .sidenav {padding-top: 15px;}
      .sidenav a {font-size: 18px;}
    }
    grazie per la vostra attenzione.

  2. #2
    Ah scusate, il link giusto è questo: https://www.dropbox.com/s/oigfuevo9t...agine.png?dl=0

  3. #3
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    Ciao, come già ti ho consigliato in precedenti discussioni sarebbe sempre opportuno effettuare, prima di tutto, un controllo con un validatore. Se non lo hai fatto, il consiglio resta sempre quello.

    Sicuramente ti verrà segnalato qualche errore, tra i quali, uno relativo ad un tag <p>, dovuto al fatto che nel tuo codice è presente un tag <p> dentro un altro tag <p>:
    codice:
      <p id="pmain">
      &nbsp; &nbsp; Ciao <b><?= $_SESSION['nome'] ?></b> 
       <p id="p2">
           <img src="avatar.png">
       </p>
      </p>
    In altre parole, un elemento <p> non può contenere altri elementi <p>.

    Prova a correggere e vedi se il problema si risolve.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  4. #4
    non è cambiato molto, ho fatto molte prove.

  5. #5
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    Perdonami ma solo dall'immagine non capisco quale sia il problema di visualizzazione di cui hai accennato.

    Cito dal regolamento di sezione:
    Infine un consiglio: spiegate sempre in modo chiaro e dettagliato il vostro problema.

    Non tralasciate particolari che potrebbero essere importanti per chi vorrebbe aiutarvi. Non siate generici: ad esempio se il vostro template non si visualizza correttamente, specificate quale punto è errato, come invece vorreste che si comportasse e in quali browser si presenta l'anomalia.
    Certo, un'immagine è sicuramente un supporto utile per dare maggiore senso al discorso e "a volte" è meglio di mille parole; però quando si posta una richiesta su qualche forum tecnico forse è bene fornire tutti i dettagli specificando prima di tutto a parole dove sta il problema e cosa ti aspetti di vedere.

    Perdona la mia divagazione filosofeggiante.

    Puoi chiarire? Grazie.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  6. #6
    No tranquillo, anzi forse hai ragione, dovevo chiarire meglio. Onestamente non so dove si presenti il problema (a parte quello che mi hai fatto presente e che ho tempestivamente corretto), può darsi che il problema si presenti nel CSS. Poi credo che il mio obiettivo, come dall'immagine, si sia compreso, ovvero quello di allineare gli elementi su un'unica riga. Spero di esser stato più chiaro.

  7. #7
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    Poi credo che il mio obiettivo, come dall'immagine, si sia compreso, ovvero quello di allineare gli elementi su un'unica riga
    Credimi, personalmente non lo avevo capito e ancora adesso fatico a capirlo... sto invecchiando

    Correggimi se sbaglio, vuoi mettere sulla stessa riga questi 3 elementi?
    codice:
    Ciao admin                    il mio abbonamento                    (immagine)
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  8. #8
    Ah ok era quello che non avevi compreso. Perdonami
    Comunque no voglio allineare le cose nel seguente modo:
    - nell'header grigio voglio allineare il menu (quello con le tre stanghette) con la scritta "myTES", quest'ultima scritta sta bene dove sta. Sono quelle tre stanghette che devono essere allo stesso livello della scritta, e anche magari staccate dal bordo sinistro (20 pixel dovrebbero andare)

    - nella parte di sotto voglio allineare "ciao tizio", l'immagine e la freccia accanto all'immagine (che mi rimanderà alla pagina info dell'utente). il "ciao tizio" sta bene lì, devono essere l'immagine e la freccia accanto all'immagine che devono essere staccate dal bordo destro.
    -"Il mio abbonamento" sta bene lì, al momento.

    Spero che stavolta mi sia spiegato meglio
    Ultima modifica di plaztinum; 10-06-2018 a 23:22

  9. #9
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    Finalmente un po' di parole... sto iniziando a capire

    La scritta "myTES" sta dentro un tag <p> che, essendo un elemento block-level, occupa normalmente l'intera larghezza per cui gli elementi posti dopo questo risulteranno su una nuova riga (vedi documentazione per maggiori chiarimenti).

    Nel tuo caso hai proprio questa situazione:
    codice:
    <div class="header">
     <p id = "p1">My<b>TES</b></p>
     &nbsp; &nbsp;<span style="font-size:20px;cursor:pointer" onclick="openNav()">☰ </span>
    </div>
    Chiaramente lo <span> che contiene l'hamburger button (quello con le tre stanghette), trovandosi dopo quel <p>, viene posto su una nuova riga. Certamente puoi risolvere con un po' di CSS ma personalmente rivedrei anche il markup HTML.

    Io lo imposterei più o meno così:
    codice:
    .header{ 
       width: 100%;
       background-color: grey;
       overflow: hidden;
       display: inline-block;
       padding: 20px 0;
       text-align: center;
       font-size: 20px;
    }
    
    #site-title{
       color: white;
    }
    
    .header>.hamburger-button{
       margin-left: 15px;
       float: left;
       cursor: pointer;
    }
    codice:
    <div class="header">
       <span id="site-title">My<b>TES</b></span>
       <span class="hamburger-button" onclick="openNav()">☰</span>
    </div>

    Hint: l'entità &nbsp; usata in serie al solo scopo di definire il posizionamento degli elementi sulla pagina è una pratica sbagliata (che si usava agli albori del web), da evitare assolutamente. Per questo esiste il CSS; per definire un preciso posizionamento ci sono specifiche proprietà, vedi left, right, top, bottom, e altre come margin, padding, text-indent, ecc.; usare queste.

    Hint: qualora non ci siano particolari motivi, è meglio separare la parte presentazionale (il CSS) dal markup HTML. Lo style in linea mi pare si possa evitare in questo caso (vedi quel <span style="font-size:20px;cursorointer"); preferibile mettere tutto il CSS nel tuo file esterno o incluso comunque a parte dentro <head>.

    Hint: come best practice per una buona programmazione è opportuno usare dei nomi autoesplicativi per class e id, così da identificare facilmente gli elementi della pagina ed evitare grossi grattacapi durante sviluppo, debug e manutenzione del codice stesso. Nomi come p1, p2, pmain, proprio no

    Sono solo dei consigli ma credimi, prima fai tua queste regole non scritte meglio è per te, a lungo andare ci guadagni in ore di sonno e salute.


    Per il resto...
    - nella parte di sotto voglio allineare "ciao tizio", l'immagine e la freccia accanto all'immagine (che mi rimanderà alla pagina info dell'utente).
    La freccia accanto all'immagine non capisco quale sia, comunque prova a giocare un po' con i margini o qualche altra proprietà di posizionamento. Se l'immagine va tirata su, prova con un valore negativo per il margin-top.
    Ultima modifica di KillerWorm; 11-06-2018 a 01:18
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  10. #10
    Mi hai aiutato moltissimo grazie mille. Come puoi notare, purtroppo, sono un porgrammatore in erba e quindi ancora devo far mie alcune competenze. Fatto sta che mi hai aiutato a risolvere il problema, adesso sarà solo questione di applicare lo stesso metodo agli altri elementi. Grazie dell' aiuto e dei preziosi consigli

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.