Problema footer

[Antonino_89]

Ciao a tutti.
Premetto che da poco mi sto applicando nei linguaggi html e css, e ho da poco riscontrato un problema.

Html:

<footer>   
</footer>

css:

footer{
      width: 100%;
      height: 60px;
      background-color: grey;
      position: absolute;
      bottom: 0;
   }

Magicamente il footer si posizione nel piè di pagina, anche senza aver scritto nulla, fin qui tutto bene.
Restringendo la pagina, riducendola alle dimensioni mobile il footer si sposta a metà pagina, così per risolvere il problema ho impostato il <!-- position: fixed;--> ma quest'ultimo si mangia le parole ed è onnipresente ovviamente non è un design molto bello da vedere.

esiste un modo per piazzare il footer a fine pagina e lasciarlo fermo per tutte le dimensioni?
Lascio a voi la soluzione, e grazie.

[KillerWorm]

Ciao e benvenuto.

Magicamente il footer si posizione nel piè di pagina, anche senza aver scritto nulla, fin qui tutto bene.

Chiaro però, di fatto, non c'è nulla di magico. Quel position:absolute e quel bottom:0 fanno il loro lavoro.

Restringendo la pagina, riducendola alle dimensioni mobile il footer si sposta a metà pagina, così per risolvere il problema ho impostato il <!-- position: fixed;--> ma quest'ultimo si mangia le parole ed è onnipresente ovviamente non è un design molto bello da vedere.

Non mi è molto chiaro questo punto. Ad ogni modo il position:absolute è comunque "relativo" al genitore più prossimo che ha un position diverso da static.
Posso quindi pensare a qualche altra regola, magari definita sulle media queries e attivata per determinate dimensioni, che influisca in qualche modo sul comportamento del position definito per il footer.

Bisognerebbe vedere la pagina in azione per avere chiaro il quadro della situazione. Nel caso dovresti postare il link all'eventuale pagina online.


[Mod]
Quando si posta del codice sul forum è opportuno utilizzare gli appositi tag di formattazione [CODE] (vedi regolamento di sezione), Grazie. Per ora ho sistemato io.

[Antonino_89]

Ah grazie, se mi mandi la tua mail ti posso mandare un progetto base in cui vedi il tutto fatto semplicemente, perchè ancora sono agli inizi e mi servirebbe qualche dritta.
Per scrivere i linguaggi uso notepad++, questo può influire?

[KillerWorm]

Ah grazie, se mi mandi la tua mail ti posso mandare un progetto base in cui vedi il tutto fatto semplicemente,

Mi spiace ma non seguo discussioni in privato e sul forum non ci sono tutor personali. Qui funziona così
Il codice e le indicazioni che hai fornito, non sono comunque sufficienti per risalire alla/e causa/e del problema. Se il codice CSS+HTML non è troppo lungo, potresti anche postarlo direttamente. L'ideale sarebbe comunque vedere il tutto in azione; per cui, se hai interesse a proseguire qui, sarebbe utile che tu postassi un link alla pagina pubblica in cui riscontri il problema, in modo che chi avesse intenzione di aiutarti, qui sul forum, possa capire meglio dove e come intervenire, e possa eventualmente darti tutte le dritte del caso.

perchè ancora sono agli inizi e mi servirebbe qualche dritta.

In ambito CSS, posso intanto consigliarti di dare uno sguardo ai link utili (post in evidenza) dove puoi trovare tutto ciò che ti serve per studiare, imparare, sviluppare e testare i tuoi progetti; e poi, in generale, per particolari problemi, come quello in oggetto, puoi rivolgere le tue richieste sul forum, ma non prima di aver fatto le dovute ricerche sul web e sul forum stesso.

Per scrivere i linguaggi uso notepad++, questo può influire?

Penso sia irrilevante. Ripeto, il problema che hai descritto è presumibilmente provocato da qualche regola che influisce in qualche modo sul funzionamento di quell'elemento. Potrebbero anche esserci degli errori altrove nel codice ma, anche in questo caso, è comunque necessario vedere tutto il contesto perché, da ciò che hai postato, non è possibile constatarlo.

[Antonino_89]

Si grazie, ho cercato in altri forum il problema, ma tutti usano ormai html obsoleti con div senza senso, selettori che non si usano più e il risultato non cambia. Grazie dell'interesse vediamo come ci riesco.

[Antonino_89]

Ps: quando rispondo non mi compare il tag per scrivere il codice, così ti scrivo tutto il codice, ma alla fine non sto facendo un progetto per qualcuno o per me, semplicemente metto l'essenziale senza nulla di più, se mi dici come fare ti scrivo il codice.

[Antonino_89]

Questo è un esempio veloce, se lo copi vedi la struttura visuale.

<!doctype html>

<html lang= "it">

<head>

<title>Home</title>

<meta charset= "utf-8">
<meta name= "viewport" content= "width=device-width, initial-scale=1">
<meta name= "author" content= "Pinco Pallino">
<meta name= "description" content= "">
<meta name= "keywords" content= "">

<link rel= "stylesheet" href= "css/style.css">

</head>

<body>

<header>
</header>

<footer>


</footer>

</body>

</html>

/*documento css*/

body{
    width:100%;
    margin:0 auto;
}

footer{
    width:100%;
    height:60px;
    background-color: grey;
    position:absolute;
    bottom:0;
    
}

[KillerWorm]

se mi dici come fare ti scrivo il codice.

Se rispondi attraverso "Modalità avanzata" trovi i pulsantini "#" o "<>" che inseriscono i tag attorno all'eventuale selezione, mentre con "Risposta veloce" devi scrivere tu i tag.
Vedo comunque che sei riuscito.

Questo è un esempio veloce, se lo copi vedi la struttura visuale.

Fatto e provato ma non vedo il problema. Se provi tu il codice essenziale che hai postato, il problema persiste?

[Antonino_89]

Il problema consiste nel fatto che quando prendi il browser e lo restringi dai lati, riducendolo alle dimensioni mobile il footer non rimane sotto ma si sposta verso il centro .

[Antonino_89]

Ps: Scusami, devi mettere un paragrafo "p" di testo, abbastanza lungo in modo tale che compaia la barra di scorrimento nel responsive.
Da quel momento il footer lo ritrovi nel centro