[IE vs FF] false colonne, scroll e allineamento immagini

**debug** · 01-08-2007, 15:57

Ok, ho adottato la tecnica delle false colonne, ho messo un'immagine di sfondo (al body) facendola ripetere in verticale, all'interno della pagina ho inserito un'immagine come header che deve allinearsi all'immagine di sfondo, questo avviene correttamente finchè non compare la barra di scroll in FF.

Ho provato vari compromessi, ma con nessuno sono riuscito ad ottenere l'allineamento perfetto in tutte le situazioni (con e senza scroll, su IE e su FF).

CSS:

codice:

html {
	width: 100.01%;
	max-width: 100%;
	height: 100%;
	font-size: 100%;
	margin: 0;
	padding: 0;
}
body {
	background: url(img/bg2.gif) repeat-y 50% 0;
	width: 100%;
	height: 100%;
	font-family: "Trebuchet MS", Georgia, Verdana, "Times New Roman";
	font-size: 12px;
	color: #FFFFFF;
	text-align: center;
	background-color: #3F4253;
	margin: 0 auto;
}
#colonnona { /* contenitore per tutto (esclusa l'header) */
	width: 594px;
	text-align: center;
	margin: 0 auto;
	padding-left: 1px;
}
#contenitore-cx { /* colonna interna per contenuti */
	width: 393px;
	float: left;
}
#contenitore-dx { /* colonna interna per altri contenuti (a fianco all'altro contenitore) */
	width: 141px;
	float: right;
}
h1#logotipo { /* contiene immagine header */
	width: 633px;
	height: 62px;
	margin: 0 auto;
	padding: 0;
	padding-bottom: 4px;
}
#menu ul {
	background-image: url(img/bg_menu.gif);
	background-repeat: repeat-x;
	list-style: none;
	width: 594px;
	height: 26px;
	padding: 0;
	padding-top: 3px;
	padding-bottom: 10px;
	margin: 0 auto;
	text-align: center;
}

HTML:

codice:

<body>
<h1 id="logotipo"><img src=.... /></h1>
<div id="colonnona" align="center">

<div id="menu"><ul>...[/list]</div>

<div id="contenitore-cx">...</div>
<div id="contenitore-dx">...</div>

</div>
</body>

PS: ho preso spunto dall'articolo sull'estendere le false colonne.

ciaoooooooo!!!!!!

**debug** · 01-08-2007, 18:35

Per far capire meglio la situazione e cosa vorrei ottenere...

praticamente, riesco a creare una struttura come questa: http://www.csszengarden.com/?cssfile=190/190.css

solo che io voglio un incrocio tra le false colonne, che usa immagine in background nel body, e le colonne in un div, in cui appunto l'immagine di background è assegnata al div.

Ma, per il primo, il bug è che se l'allineamento è corretto senza scrollbar, allora non va bene quando la scrollbar compare, e viceversa; per il secondo il bug è che se i contenuti sono più corti della pagina (finestra) l'immagine di sfondo (che fa da false colonne) non arriva fino alla fine.

In allegato un esempio dei problemi delle due soluzioni (in rosso).

Ciaoooooo!!!!

**debug** · 02-08-2007, 11:14

In parte ho "risolto", attribuendo allo sfondo dell'header attachment: fixed, ma, ovviamente, in questo modo scorrendo la pagina, i contenuti sotto all'header sormontano quest'ultimo...

E' una cosa accettabile secondo voi?

Ciaooooooo!!!!!

**debug** · 06-08-2007, 01:47

Per la cronoca, ho trovato un compromesso:

debug 2.0

Ciaooo!

Discussione: [IE vs FF] false colonne, scroll e allineamento immagini

Strumenti discussione

Ricerca discussione

Visualizza

[IE vs FF] false colonne, scroll e allineamento immagini

Permessi di invio