su ie va su mozilla no

**yag** · 10-11-2005, 23:49

devo realizzare questo con i css

/---up-----\
|-------------|
|-------------|
|-------------|
|-------------|
\--down---/

immaginate che questa sia una immagine dove c'è up devo metterci
del testo
dove down pure.

mi potete dare qualche consiglio su come creare con div css etc.
una cosa del genere una struttura riusabile nel senso per ogni pagine
ho una cosa del genere

grazie ciao

**yag** · 11-11-2005, 00:14

Originariamente inviato da yag
devo realizzare questo con i css

/---up-----\
|-------------|
|-------------|
|-------------|
|-------------|
\--down---/

immaginate che questa sia una immagine dove c'è up devo metterci
del testo
dove down pure.

mi potete dare qualche consiglio su come creare con div css etc.
una cosa del genere una struttura riusabile nel senso per ogni pagine
ho una cosa del genere

grazie ciao

IO lo sto realizzando con tre div
<div class="top_bg"></div>
<div class="centro_bg"></div>
<div class="bottom_bg"></div>
ma forse c'è una soluzione migliore che dite ?

**yag** · 11-11-2005, 00:48

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="http://localhost/css_layout.css" rel="stylesheet" type="text/css">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>xxxxxxxxxxxxxx</title>
</head>

<body>
<div id="container">
<div id="header">[img]immagini/index1_01.gif[/img]</div>
<div id="content">
    

<div class="top_bg">
<div class="testataPagina">
21/10/2005<span class="news_titolo">quattro</span>
</div>
</div>
<div class="centro_bg ">

<div class="corpoPagina">
Lorem Ipsum is simply dummy text of the printing and typ...
</div>

</div>
<div class="clearhack"></div>
<div class="bottom_bg"></div>



</div>
<div id="footer">[img]immagini/index1_05.gif[/img]</div>
</div> 
</body>
</html>

css incrimanto:
----------------------

codice:

.top_bg
{
	background-image: url(immagini/top_bg.jpg);
	width: 780px;
	height: 60px;
}

.centro_bg
{
	background-image: url(immagini/centro_bg.jpg);
	width: 780px;
	background-repeat: repeat-y;
	background-position: left;
	
	background-color: #deeafa;
	height: auto;
}

.bottom_bg
{
	background-image: url(immagini/bottom_bg.jpg);
	width: 780px;
	height: 30px;
}

/*

*/
.testataPagina
{
	margin-left: 50px;
	padding-top: 25px;
}


.corpoPagina
{
	padding-left: 10px;
	clear: both;
	
}

in pratica su ie la parte centrale si allarga come dovrebbe essere
su mozilla la foto sborda fuori la parte centrale che non si allarga

ci tengo a precisare che top (è la parte alta di una img)
centro (é la parte centrale difatto solo il lato sinistro dell'immagine )
bottom (è la parte finale)
l'immagine è un rettangolo con bordi (in grafica) con i lati
alto
sinistro
basso
qualcosa tipo:

---top----
|
|centro
|
---bottom----

**Mich_** · 11-11-2005, 10:06

Una sola discussione per ogni problema !!!

Ricorda che il box-model di IE e` diverso dallo standzard e dagli altri browser.

E ricorda che IE usa il termine
width
come se fosse
min-width

Se cerchi fra gli hack per IE, trovi le soluzioni.

**yag** · 11-11-2005, 10:21

Originariamente inviato da Mich_
Una sola discussione per ogni problema !!!

Ricorda che il box-model di IE e` diverso dallo standzard e dagli altri browser.

E ricorda che IE usa il termine
width
come se fosse
min-width

Se cerchi fra gli hack per IE, trovi le soluzioni.

si lo so ma
non sono riuscito a risolverlo io non ho usato un min-height
1)perchè non ho specificato l'altezza dovrebbe adattarsi al contenuto
sia su ie che con mozzilla

no?

2) come risolve il problema sfondo con mozzilla
mi spiego ho allegato anche delle foto se uso dei

non mette lo sfondo dentro un div
siccome i miei blocchi sono 3 proprio per comporre uno sfondo
mi in incasina come si vede da foto.

mozzilla mette una linea bianca (dove uso

**Mich_** · 11-11-2005, 10:34

Sembra quasi uno sfondo, con all'interno tre aree.
<div id="container">
<div id="testa">testa</div>
<div id="corpo"> </div>
<div id="coda">coda</div>
</div>

con CSS:

codice:

#container {
  background: url(...);
  height: ...;
  width: ...;
}
#testa {
  height: ...;
  width: 100%;
}
#corpo {
  height: 100%;
  width: 100%;
}
#coda {
  height: ...;
  width: 100%;
}

In alternativa, se il #corpo non ha altezza fissa, si puo` mettere una immagine di testa ed una di coda (sempre come sfondo), e nel #corpo inserire un'immagine di una sola riga che si ripete in verticale:
background: url(...) repeat-y;

**yag** · 11-11-2005, 10:41

Originariamente inviato da Mich_
Sembra quasi uno sfondo, con all'interno tre aree.
<div id="container">
<div id="testa">testa</div>
<div id="corpo"> </div>
<div id="coda">coda</div>
</div>

con CSS:

codice:

#container {
  background: url(...);
  height: ...;
  width: ...;
}
#testa {
  height: ...;
  width: 100%;
}
#corpo {
  height: 100%;
  width: 100%;
}
#coda {
  height: ...;
  width: 100%;
}

In alternativa, se il #corpo non ha altezza fissa, si puo` mettere una immagine di testa ed una di coda (sempre come sfondo), e nel #corpo inserire un'immagine di una sola riga che si ripete in verticale:
background: url(...) repeat-y;

esatto ma è già così

1) chiedevo se esistono a livello di markup soluzioni migliori

2)il css è questo

codice:

.top_bg
{
	background-image: url(immagini/top_bg.jpg);
	width: 780px;
	height: 60px;
}

.centro_bg
{
	background-image: url(immagini/centro_bg.jpg);
	width: 780px;
	background-repeat: repeat-y;
	background-position: left;
	
	background-color: #deeafa;
	height: auto;
}

.bottom_bg
{
	background-image: url(immagini/bottom_bg.jpg);
	width: 780px;
	height: 30px;
}

ma il comportamento è diverso fra ie e mozzilla :master:
come da foto mozzilla è la foto in basso con la linea bianca

questo se faccio così nel codice :

top

<div class="centro_bg">
<div class="corpoPagina">

cia</p></div>
</div>

bottom

**Mich_** · 11-11-2005, 10:54

A che ti serve quel: <div class="corpoPagina">?

E che CSS ha associato?
Non e` che per caso ci sono dei bordi o margini o padding associati al .corpoPagina o ad un

al suo interno?

Tornando al width.
Se lo usi devi anche usare l'hack per IE, altrimenti per forza i comportamenti sono diversi: IE interpreta male il width.

**yag** · 11-11-2005, 10:58

Originariamente inviato da Mich_
A che ti serve quel: <div class="corpoPagina">?

E che CSS ha associato?
Non e` che per caso ci sono dei bordi o margini o padding associati al .corpoPagina o ad un

al suo interno?

Tornando al width.
Se lo usi devi anche usare l'hack per IE, altrimenti per forza i comportamenti sono diversi: IE interpreta male il width.

in pratica quello lo uso perchè l'immmagine a livello grafico
ha dei bordi e uso quel div per impostare il padding left di tot pixel ti pasto il css

codice:

/*
per le immagini ed il testa che stanno 
i cima alla pagina (per ogni pagine diverso)
*/
.testataPagina
{
	margin-left: 50px;
	padding-top: 25px;
}


.corpoPagina
{
	padding-left: 10px;
	clear: both;
	height: auto;
	width: auto;
	
}

ti ho perso sul width io non ho problemi li sono su l'height

**Mich_** · 11-11-2005, 11:22

Prima avevi detto che alcuni browser non rispettano la larghezza ...

Stai dicendo che .corpoPagina ti serve in un altro posto? Ho capito giusto?
Allora prova a toglierlo da li`, e lascia solo il

, facendo attenzione che non ci siano dei CSS associati al p , oppure dai una classe al

e usa quindi solo le proprieta` che ti servono.

Discussione: su ie va su mozilla no

Strumenti discussione

Ricerca discussione

Visualizza

realizzare questo con i css

Re: realizzare questo con i css

su ie va su mozilla no

Permessi di invio