Posizionamento orizzontale float

di
marco95OP
il
2 risposte
M
marco95OP
Pochi posts
Iscritto da
lug, 2020
Messaggi:
14

Posizionamento orizzontale float

Salve a tutti siccome per un pò di tempo non ho avuto modo di "studiare" html e css ora stavo rispolverando un pò le basi ma non riesco a ricordare il giusto metodo per spostare un blocco al di sotto di un altro. L'esercizio in questione è il seguente:

Questo è il codice: 
<!DOCTYPE html>
<html>
<head>
  <title>Blocks</title>
  <!-- Do not change this file - add your CSS styling
       rules to the blocks.css file included below -->
  <link type="text/css" rel="stylesheet" href="blocks.css">
</head>
<body>
<div id="one">
Turns out you have a really fun time if you
go to work every day and focus on being
silly and funny and happy! - Hannah Murray
</div>
<div id="two">
All you need in this life is ignorance and confidence,
and then success is sure. - Mark Twain
</div>
<div id="three">
Well, if crime fighters fight crime and fire fighters
fight fire, what do freedom fighters fight? They never
mention that part to us, do they? - George Carlin
</div>
<div id="four">
Great minds discuss ideas; average minds discuss events;
small minds discuss people. - Eleanor Roosevelt
</div>
<p id="link">
<a href="https://www.brainyquote.com/" target="_blank">
Brainy Quote
</a>
</p>
</body>
</html>
/* This is a partial blocks.css, you need to add more rules
   to this file to complete the assignment.  Do not add any CSS
   styling to the original index.htm / start.htm */

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Here is one of many  CSS rules you will need... */
#one {
  border: 5px solid blue;
  margin: 5px;
  padding: 5px;
  width: 25%;
  position: absolute;
  right: 10px;
  top: 100px;
  float: right;

}

  #two {
    border: 5px solid green;
    margin: 5px;
    padding: 5px;
    width: 25%;
    position: relative;
    float: right;
    right: 5px;
  }

#three {
  border: 5px solid orange;
  margin: 5px;
  padding: 5px;
  width: 25%;
}

#four {
  border: 5px solid yellow;
  margin: 5px;
  padding: 5px;
  width: 25%;
}

#link{
  position: absolute;
  text-align: center;
}
Questo è il massimo che sono riuscito a fare impostando sul blocco blu la proprietà "top: 100px;" tuttavia non sono convinto che si faccia davvero così.
C'è qualcuno che può aiutarmi a ricordare come si fa? Grazie in anticipo

2 Risposte

  • andreadev
    andreadev
    Utente Attivo
    Iscritto da
    ago, 2020
    Messaggi:
    94

    Re: Posizionamento orizzontale float

    Ciao Marco,
    Non esiste un "metodo giusto" che vada bene per tutte le situazioni.
    Nel caso del tuo esercizio, potresti perfino lasciar perdere i float e posizionare i vari elementi usando direttamente "position: absolute" (quando usi questo valore come position, la proprietà "float" viene comunque ignorata).
    Una volta impostato quel valore di position, puoi indicargli quanto devono essere vicini al margine del loro elemento padre: 
    
#one {
	...
	position: absolute;
	right: 10px;
	bottom: 10px;
}

#four {
	...
	position: absolute;
	left: 10px;
	bottom: 10px;
}
    Comunque, in generale se stai progettando un sito, devi cercare di evitare codici simili, perché non si adattano bene ai vari schermi e possono diventare problematici alla lunga.
    Se vuoi mettere un blocco sotto un altro, è buono che anche nell'HTML siano uno sotto l'altro

    Se vuoi approfondire la tua conoscenza su come sviluppare layout per il web (cose che potresti usare in un progetto lavorativo), ti consiglio di dare un'occhiata a flexbox e ai grid layout (Ottima guida in inglese)
  • M
    marco95OP
    Pochi posts
    Iscritto da
    lug, 2020
    Messaggi:
    14

    Re: Posizionamento orizzontale float

    andreadev ha scritto:

    Ciao Marco,
    Non esiste un "metodo giusto" che vada bene per tutte le situazioni.
    Nel caso del tuo esercizio, potresti perfino lasciar perdere i float e posizionare i vari elementi usando direttamente "position: absolute" (quando usi questo valore come position, la proprietà "float" viene comunque ignorata).
    Una volta impostato quel valore di position, puoi indicargli quanto devono essere vicini al margine del loro elemento padre: 
    
#one {
	...
	position: absolute;
	right: 10px;
	bottom: 10px;
}

#four {
	...
	position: absolute;
	left: 10px;
	bottom: 10px;
}
    Comunque, in generale se stai progettando un sito, devi cercare di evitare codici simili, perché non si adattano bene ai vari schermi e possono diventare problematici alla lunga.
    Se vuoi mettere un blocco sotto un altro, è buono che anche nell'HTML siano uno sotto l'altro

    Se vuoi approfondire la tua conoscenza su come sviluppare layout per il web (cose che potresti usare in un progetto lavorativo), ti consiglio di dare un'occhiata a flexbox e ai grid layout (Ottima guida in inglese)
    Ciao grazie per la risposta! Si so bene che nello sviluppo web ci sono 1000 modi per fare la stessa cosa infatti il difficile per me è proprio trovare quello migliore in base al contesto
    Avevo già dato un occhiata a flexbox e mi aveva incuriosito molto cercherò di approfondirlo e magari applicarlo a qualche esercizio
Devi accedere o registrarti per scrivere nel forum
2 risposte