[CSS]Box Model

**21Edoardo96** · 08-10-2013, 21:06

Ciao,
sto iniziando a lavorare con i box model e sto facendo un esercizio che consiste nel:
1)Fare un Box in alto con il titolo;
2)Fare tre box sotto di esso dove vi è del testo con dei link;
3)Fare un box in alto a destra alla stessa altezza del box del titolo dove vi è il logo. Il box deve essere leggermente più alto del box del titolo in modo tale che vada a sovrapporsi alle box sottostante.

Io ho fatto

HTML

codice:

<!doctype html>
<html>
<head>
<title>Box definitivo</title>
  <link rel="stylesheet" type="text/css" href="spe1.css" >
</head>
<body>
<div class="intestazione">
      <h2>MiniMarket Capaldi</h2>
</div>
<div class="logo2">
      <img class="logo" src="logo.jpg" alt="logo" />
</div>
<div class="sinistra">
      Link alle pagine:<br/>
   Clicca <a class="link" href="corsi.html">qui</a>qui se vuoi andare al MiniMarket Salvoldi.<br/>
   Clicca<a class="link" href="">qui</a> se vuoi andare al MiniMarket Bonacina.
</div>
<div class="centro">
   Storia:<br/>
   Il nostro MiniMarket naque nel 1972 da Paolo Capaldi. 
   Da oltre 40 anni il nostro negozio e' sinonimo di qualia e freschezza. 
</div>
<div class="destra">
   Orari:<br/>
   Aperti tutta settimana dalle 8:00 alle 14:00
</div>
</body>
</html>

File CSS

codice:

img.logo {width: 100px; height: 60px;}
div.intestazione
{
  height:50px;
  width:550px;
  left:20px;
  right:20px;
  background-color:#0000FF;
  
}
div.logo2
{
  position: relative;
  z-index:1; /*porto in primo piano rispetto agli altri box */
  height:60px;
  bottom:50px;
  width:100px;
  left:450px;
  background-color:#964B00; /* colore marrone */
  
}
div.sinistra
{
  position:relative;
  height:150px;
  bottom:60px; /* sommo altezza logo */
  width: 150px;
  background-color:#FFFF00;
}
div.centro
{
  position:relative;
  height:150px;
  width: 200px;
  left: 150px;
  bottom: 210px; /* sommo altezza logo2 + altezza sinistra */
  background-color:#00FFFF;
}
div.destra
{
  position:relative;
  height:150px;
  width: 200px;
  left: 350px;
  bottom: 360px; /* sommo altezza logo + altezza sinistra + altezza centro */
  background-color:#00FF00;
}
a.link:link {color: blue;}
a.link:visited{color: brown;}

Io volevo avere delle delucidazioni su:
1) Come faccio a spostare l'intera struttura appena creata in qualsiasi punto della pagina;
2) C'è qualche altro modo per evitare di fare tutti questi box senza dovere aggiungere ogni volta la "position:relative" per metterli dove voglio io.
3)Come mai nei box del punto 2, quando aggiungo un titolo di qualsiasi formato <h1>, >h2>... il box mi trasla verso il basso?

Ciao e grazie

**widoz83** · 09-10-2013, 17:53

Ciao,

se hai necessità di spostare l'intera struttura ti consiglio di utilizzare un div contenitore come struttura esterna e inserire al suo interno i div che ti interessano. In questo modo sposti solo un elemento (il contenitore) e i sottoelementi si spostano di conseguenza.
Dichiari il contenitore come "relative", i sottodiv come "absolute" (i sottodiv saranno in posizione absolute rispetto al primo elemento superiore che ha position diversa da static, in questo caso è il contenitore) e poi giochi con le proprietà left/top per posizionare i div dove vuoi all'interno del contenitore, attenzione a non superare la larghezza del tuo contenitore (oppure potresti dare ai sottodiv una larghezza in percentuale invece che in px, la somma delle percentuali deve fare 100 alla fine).

Provando questa soluzione dovrebbe risolverti anche il problema con il margine dell'h1, causato immagino da qualche problema con le position relative dei div.

In alternativa potresti pensare di utilizzare la proprietà float, che permette di flottare gli elementi dal flusso normale e affiancare uno dietro l'altro i div. Eviti così di dover impostare le proprietà left e top ai div, a parte per l'immagine che per come la vuoi tu deve essere posizionata in modo assoluto. Prova a cercare info sulla rete riguardo questa proprietà.

Spero di esserti stato di aiuto.

Ciao

**Al_katraz984** · 10-10-2013, 16:18

ti do un aiutino, stai usando un doctype html5 quindi usa i tag appropriati..

questa è una struttura in base a quello che hai postato tu, prova ad aggiungere lo stile poi vediamo che combini..

codice HTML:

<!DOCTYPE html>
<html>
 <head>
  <title>Box definitivo</title>
  <link rel="stylesheet" type="text/css" href="spe1.css" >
 </head>
 <body>
  <header>
   <h1>MiniMarket Capaldi</h1>
   <div id="logo">
    <img class="logo" src="logo.jpg" alt="logo" />
   </div>
  </header>
  <section>
   <nav>
    <p>Link alle pagine:</p>
    <p>Clicca <a class="link" href="corsi.html">qui</a>qui se vuoi andare al MiniMarket Salvoldi.</p>
    <p>Clicca<a class="link" href="">qui</a> se vuoi andare al MiniMarket Bonacina.</p>
   </nav>
  </section>
  <section>
   <p>Orari:</p>
   <p>Aperti tutta settimana dalle 8:00 alle 14:00</p>
  </section>
  <section>
   <p>Storia:</p>
   <p>Il nostro MiniMarket naque nel 1972 da Paolo Capaldi.</p>
   <p>Da oltre 40 anni il nostro negozio e' sinonimo di qualia e freschezza.</p>
  </section>
 </body>
</html>

**21Edoardo96** · 10-10-2013, 19:26

Grazie per i consigli, a breve posterò ciò che ho fatto.

Discussione: [CSS]Box Model

Strumenti discussione

Ricerca discussione

Visualizza

[CSS]Box Model

Permessi di invio