Visualizzazione dei risultati da 1 a 5 su 5
  1. #1
    Utente di HTML.it L'avatar di Turtler
    Registrato dal
    Apr 2018
    residenza
    Italy
    Messaggi
    3

    Problema di Posizionamento Testo

    Salve a tutti ragazzi,
    Ho un problema riguardo il posizionamento del testo all'interno di alcuni Box.
    Non riesco ad eliminare lo spazio sulla sinistra ( trattino rosso nell'immagine che ho allegato ) .
    Non riesco proprio a capire il problema anche perchè le 3 colonne non hanno questo inconveniente...
    Qualcuno di voi sicuramente molto più esperto di me sa come aiutarmi?

    Codice CSS

    codice:
    
    * { font-family: Arial, Verdana, sans-serif;
                    color: #665544;
                    }
                    
                body {
                    width: 960px;
                    margin: 5px auto;}
                    
                #content {
                    overflow: auto;
                    height: 100%;}
                    
                #nav, #feature, #footer {
                    background-color: #efefef;
                    padding: 10px;
                    margin: 10px;}
                    
                .column1, .column2, .column3 {
                    background-color: #efefef;
                    width: 300px;
                    float: left;
                    margin: 10px;}
                    
                li {
                    display: inline;
                    padding: 5px;}

    OUTPUT Immagine:
    Problema Spazio3.jpg

    Spero di essermi spiegato bene, nel frattempo ringrazio anticipatamente

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,684
    Salve, senza vedere il codice HTML a cui stai associando quelle regole è praticamente impossibile capire dove sta il problema; è necessario che tu posti anche quello.

    Assicurati inoltre che non ci siano delle altre regole che influiscano su tale comportamento.

    Se poi la pagina è pubblicata online, può essere utile che tu fornisca direttamente un link, così da rendere semplice verificare il problema a chi si offre di aiutarti.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  3. #3
    Utente di HTML.it L'avatar di Turtler
    Registrato dal
    Apr 2018
    residenza
    Italy
    Messaggi
    3
    Quote Originariamente inviata da KillerWorm Visualizza il messaggio
    Salve, senza vedere il codice HTML a cui stai associando quelle regole è praticamente impossibile capire dove sta il problema; è necessario che tu posti anche quello.

    Assicurati inoltre che non ci siano delle altre regole che influiscano su tale comportamento.

    Se poi la pagina è pubblicata online, può essere utile che tu fornisca direttamente un link, così da rendere semplice verificare il problema a chi si offre di aiutarti.
    Nessun problema , il Link alla pagina però non posso postarla perchè è offline ( è semplicemente uno schema base di layout ).
    "Penso" di aver analizzato tutte le regole, ma il problema non riesco a risolverlo, quindi sicuramente qualcosa mi sfugge...
    Questo è l'intero codice (HTML+CSS) :

    codice:
    <!DOCTYPE html>
    <html>
        <head>
            <title>Prova Di Impaginazione</title>
            <style type="text/css">
                * {
                    font-family: Arial, Verdana, sans-serif;
                    color: #665544;
                    }
                    
                body {
                    width: 960px;
                    margin: 5px auto;}
                    
                #content {
                    overflow: auto;
                    height: 100%;}
                    
                #nav, #feature, #footer {
                    background-color: #efefef;
                    padding: 10px;
                    margin: 10px;}
                    
                .column1, .column2, .column3 {
                    background-color: #efefef;
                    width: 300px;
                    float: left;
                    margin: 10px;}
                    
                li {
                    display: inline;
                    padding: 5px;}
                    
            </style>
        </head>
        <body>
            <div id="header">
                <h1>Logo</h1>
                <div id="nav">
                    <ul>
                        <li><a href="">Esempio1</a></li>
                        <li><a href="">Esempio2</a></li>
                        <li><a href="">Esempio3</a></li>
                        <li><a href="">Esempio4</a></li>
                        <li><a href="">Esempio5</a></li>
                    </ul>
                </div>
            </div>
            <div id="content">
                <div id="feature">
                    <p>Feature</p>
                </div>
                <div class="article column1">
                    <p>Colonna uno</p>
                </div>
                <div class="article column2">
                    <p>Colonna due</p>
                </div>
                <div class="article column3">
                    <p>Colonna tre</p>
                </div>
            </div>
            <div id="footer">
                <p>Copyright 2018</p>
            </div>
        </body>
    </html>


    E questo è il problema (spazio tra testo e box ) :

    Problema Spazio3.jpg

    Ringrazio di nuovo qualora qualcuno possa aiutarmi!

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,684
    Bene, si tratta semplicemente di qualche padding che andrebbe aggiustato meglio.

    Nell'ordine, il primo spazio (quello più ampio, relativo all'elemento #nav) è dato (in parte) dal valore di default del padding per l'elemento <ul> (oltre i 5px che hai impostato per per gli elementi <li> al suo interno, e oltre i 10px per #nav, che indico più avanti). L'elemento <ul> infatti nasce per contenere una lista di elementi <li> che normalmente hanno una "indentazione" verso destra. Più precisamente si tratta di un valore applicato di default, su questo elemento, per la proprietà padding o, più precisamente, per la relativa sotto-proprietà padding-left.

    Inoltre questo elemento potrebbe avere un valore di default anche per i margini.

    Tieni conto che i valori di default (per i vari elementi HTML) possono differire da browser a browser.

    Quindi, per prima cosa, puoi semplicemente impostare un valore 0 ad entrambe queste due proprietà (padding e margin) per ul.

    In genere, per grossi progetti (ma anche per semplici progetti personali) si usa "normalizzare" tutte le proprietà utilizzando degli appositi file CSS che puoi trovare sotto il termine di "css normalize" o "css reset". Eventualmente puoi trovare degli ulteriori riferimenti al capitolo 6 dei link utili CSS.

    In secondo luogo, gli altri due spazi (che nell'allegato hai segnato con i trattini rossi più corti) sono dati sempre dal padding; in questo caso non da un valore di default ma da quei 10px che hai impostato tu per il selettore "#nav, #feature, #footer", cosa che invece non hai fatto per ".column1, .column2, .column3"; ecco perché le colonne non hanno questo "spazio" a differenza degli altri elementi.

    Si tratta quindi di impostare meglio questi valori del padding sui vari elementi.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  5. #5
    Utente di HTML.it L'avatar di Turtler
    Registrato dal
    Apr 2018
    residenza
    Italy
    Messaggi
    3
    Grazie mille , a mente fredda mi sono accorto dell'errore veramente da principiante....
    hai spiegato il problema benissimo ed ho risolto il problema, sei stato molto gentile!

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.