Problema Background Content

**[Juggler]Eskimo** · 03-11-2006, 16:05

Ciao a tutti sto usando un layout a due colonne, usando il float nella colonna di navigazione...
per essere brevi:

<div contaniner>
<div navigation>
<div content>
</div>

il content ha un background diverso rispetto al body e alla navigazione, ma se c'è del testo il content si riempie e lo sfondo lo segue... se metto un altro div con na lista e delle immagini
in fondo, dopo il testo risulta che sono fuori dal content e quindi hanno il colore di sfondo del body!!!
ho sempre risolto impostando un'altezza del content in percentuale nel css, ma questa volta ho dei content troppo corti e altri troppo lunghi e vorrei che fosse in automatico!
qualcuno sa risolverlo?
grazie mille

**deeee** · 04-11-2006, 02:40

non riesco a capire cosa intendi.

perchè
a) il codice che hai scritto non ha senso
b) stai usando css?

il problema non dovrebbe sussistere visto che sono settati con height: auto di solito i div.

hai provato a vedere se hai scritto correttamente gli id? hai controllato che siano univoci? se continua a dare errore imposta uno sfondo alla tua lista dello stesso colore del div..

**Another-Life** · 04-11-2006, 16:23

Originariamente inviato da [Juggler]Eskimo
Ciao a tutti sto usando un layout a due colonne, usando il float nella colonna di navigazione...
per essere brevi:

<div contaniner>
<div navigation>
<div content>
</div>

il content ha un background diverso rispetto al body e alla navigazione, ma se c'è del testo il content si riempie e lo sfondo lo segue... se metto un altro div con na lista e delle immagini
in fondo, dopo il testo risulta che sono fuori dal content e quindi hanno il colore di sfondo del body!!!
ho sempre risolto impostando un'altezza del content in percentuale nel css, ma questa volta ho dei content troppo corti e altri troppo lunghi e vorrei che fosse in automatico!
qualcuno sa risolverlo?
grazie mille

Non si cap niente....posta il documento html/Xhtml che hai utilizzato e il relativo Css se presente^^

**Mich_** · 06-11-2006, 10:42

Allora: con le capacita` divinatorie che mi sono state assegnate ...

Devi definire float anche il contenitore, altrimenti i browser interpretano a modo loro.
Di solito non ci sono controindicazioni a questo hack.

... poi fatemi sapere se le mie capacita` divinatorie mi hanno suggerito giusto ... (la parte razionale dice che ho interpretato a modo mio)

**[Juggler]Eskimo** · 06-11-2006, 12:42

ciao le tua capacità divinatorie non sono state male ma non vanno bene... infatti adesso il div content segue tutto il contenuto e mi allunga il background sotto le immagini, ma purtroppo TUTTO il div content adesso scende sotto il menu navigazione!

e poi nel caso dovessi risolvere il problema nel caso di un div che non deve flottare, ho lo stesso problema! cioè che se inserisco immagini o div non vengono considerate "contenuto" e se metto un background color questo non "arriva" fino alle immagini ma si colora solo la prima parte del div...

**Mich_** · 06-11-2006, 12:46

Le mie capacita` divinatorie sono limitate, e senza altre informazioni riguardo il codice HTML+CSS (meglio se metti anche il DOCTYPE) e` impossibile fare altre diagnosi.

(PS credevo che fosse chiaro che il problema e` definito in modo insufficiente)

**[Juggler]Eskimo** · 13-11-2006, 18:31

scusate se il mio post faceva schifo, ora lo rispiego con del codice semplificato:
<body>
<div id="container">
<div id="header"></div>
<div id="menu"></div>
<div id="content"></div>
</div>
</body>

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #534242;
background: #246a27;
text-align: center;
}

#header {
height: 100px;
background: url(imgs/header.jpg) no-repeat;
}

#container {
width: 772px;
margin: 0px auto;
text-align: left;
}

#menu {
float: left;
width: 150px;
}

#content {
padding: 7px;
background-color: #b1c9b2;
margin-left: 150px;
}

il body ha un colore di sfondo, sopra si posizionano menu e content coi loro colori di sfondo. Il menu è "fisso" nel senso che è già tutto determinato e il suo sfondo lo copre tutto ed è a posto. Il colore di sfondo del content invece, visto che il contenuto cambia da pagina a pagina, non si estende lungo tutto il contenuto se è composto da immagini. Chiaro? Cioè se metto del testo che lo fa diventare alto 500 px lo sfondo sta sotto tutto il testo ed è ok; se ad esempio in fondo inserisco dopo il testo (contenuto in tag

</p>) delle <img>, lo sfondo non si estende anche sotto le foto...

per ovviare al problema devo mettere l'altezza del content fissa, ma per le pagine che hanno un contenuto troppo corto non va bene! e non mi va di usare uno stile per quelle lunghe con le immagini e uno in automatico per quelle solo testo...

Grazie!

**Mich_** · 14-11-2006, 10:05

Mi par di capire che menu e content vanno affiancati. Allora devono essere float ambedue (e non serve il margine a quello di destra).

Poi per i problemi dei browser anche i contenitori devono essere float.

In conclusione il CSS per quel codice HTML dovrebbe essere (come struttura base):

codice:

html, body {
  width: 100%;       /* altrimenti i margini del container non sanno a cosa riferirsi */
  font-size: 100%;
}
body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  /*font-size: 12px;*/  /* i browser possono forzare i font, per cui non conviene definirli fissi */
  color: #534242;
  background: #246a27;
  text-align: center;
}
#container {
  width: 772px;
  margin: 0 auto;
  text-align: left;
  float: left;
}
#header {
  height: 100px;
  width: 100%;
  float: left;
  background: url(imgs/header.jpg) no-repeat;
}
#menu {
  float: left;
  width: 150px;
}
#content {
  padding: 7px;   /* potresti avere problemi con IE: sarebbe meglio usare il margin */
  background-color: #b1c9b2;
  float: left;
  right: 0;        /* per far finire il blocco sul margine destro del container */
}

**[Juggler]Eskimo** · 14-11-2006, 11:45

ciao, ho provato il codice ma non funziona... se metto tutto a float a left mi rimane tutto impilatpo sulla sinistra....

Discussione: Problema Background Content

Strumenti discussione

Ricerca discussione

Visualizza

Problema Background Content

Re: Problema Background Content

Permessi di invio