Layout CSS

**Videodrome** · 05-07-2005, 22:09

Sto cercando di ottenete uno sfondo che si estende in larghezza il 100% e altezza il 90% (CENTRATO). Con le tabelle era semplicissimo

ma ho detto basta alla droga

VVoVe: e allora ho provato con questo:

codice:

#container {
	height: 90%;
	width: 100%;
	margin: 0px;
	padding: 0px;
	background-image: url(imm/sfondo_bianco.gif);
	background-repeat: repeat;
}

ma non funzia...ti pareva

Quello che voglio ottenere, giusto per capirci, sono due "greche" a decorazione (è il cliente che le vuole...rompicazzo

).
La prima in alto e l'altra sullo sfondo, entrambe senza margini.
Come dovrei affrontare il problema secondo voi ?

**CeMax-2000** · 05-07-2005, 23:43

Beh!! così su due piedi non è che si capisca poi molto cosa vuoi fare :master: perchè non fai qualche disegnino per capire meglio cosa ti occorre???

intanto ti ho corretto un pochino il css:

codice:

#container {
	height: 90%;
	width: 100%;
	margin: 0px auto;
	padding: 0px;
	background-image: url(imm/sfondo_bianco.gif);
}

e così funziona o almeno fa quello che deve fare il codice postato...... ripeto senza una descrizione migliore o ancor meglio uno skizzetto di quello che vuoi fare la vedo dura darti una mano d'aiuto!!

**Videodrome** · 06-07-2005, 07:47

dovuto uplodare un'esempio per maggiore chiarezza, sorry

Dunque questo è un punto di partenza.
Come puoi notare è una pagina che come margini ha tutti i valori a 0px e rispetto quello che ho postato prima ho eliminato l'immagine di sfondo (credo non occorra).
Quello che voglio ora ottenere è un' altra striscia, esattamente senza margini come quella superiore, ma bensì in basso (bottom).
Posto il codice per quella in alto:

codice:

	
#up 
        {background-color: #009900;
	width: 100%;
	left: 0px;
	right: 0px;
	height: 5px;

E fin qui funziona, almeno con IE6.
Io ho allora creato un'altro div, esattamente come quello "up" ma senza riescire a posizionarlo in basso.

Qual'è la via giusta ?

**CeMax-2000** · 06-07-2005, 10:08

ciao vedi così se va bene:

p.s. ho inserito tutto in un div #principale per pura comodità mia!!!

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
	margin:0px auto; padding:0px;
	min-height:100%;height:auto!important;height:100%;
	background-color:#F2F2F2;
}
#principale {
	margin:0px auto; padding:0px;
	min-height:100%;height:auto!important;height:100%;
	background-color:#FCFCFC;
}
#up {
	margin:0px; padding:0px;
	width:100%; height:20px;
	background-color:#009900;
}
#container {
	margin:0px auto; padding:0px;
	width:100%;
	background-color:#FFFFFF;
}
#down {
	margin:0px; padding:0px;
	width:100%; height:20px;
	background-color:#FF9900;
}
-->
</style></head>

<body>
<div id="principale">
	<div id="up"></div>
	<div id="container">
		

Questa verde &egrave; corretta </p>
		

</p>
		

</p>
		

</p>
		

</p>
		

</p>
		

</p>
		

</p>
		

</p>
		

Questa gialla, a prescindere dalla risoluzione, dovrebbe posizionarsi in basso con 0 margini </p>
	</div>
	<div id="down"></div>
</div>
</body>
</html>

**nickmadison** · 06-07-2005, 10:46

E fin qui funziona, almeno con IE6.

... ecco, comincia a sviluppare su un browser che rispetti gli standards w3c se vuoi lavorare correttamente... anche perchè non riusciamo a capirci se tu vedi una cosa e gli altri un' altra.

con FF vedo una linea verde orrizzontale e 2 stringhe di testo

**Videodrome** · 06-07-2005, 11:02

Originariamente inviato da nickmadison
... ecco, comincia a sviluppare su un browser che rispetti gli standards w3c se vuoi lavorare correttamente... anche perchè non riusciamo a capirci se tu vedi una cosa e gli altri un' altra.

con FF vedo una linea verde orrizzontale e 2 stringhe di testo

IE fa cacare...., e tutto quello che vuoi, peccato che comunque sia il browser in assoluto più usato, e pertanto la prima visualizzazione che verifico è quella, il resto spiegalo tu alla massa di utenti che lo usano !

Non sono tutti così fighetti da usare FF

**nickmadison** · 06-07-2005, 11:10

ma che c' entrano i fichetti...
il discorso è che se vuoi lavorare secondo gli standard w3c devi usare un browsers adeguato.

peccato che comunque sia il browser in assoluto più usato, e pertanto la prima visualizzazione che verifico è quella, il resto spiegalo tu alla massa di utenti che lo usano !

per questo probema devi usare gli opportuni hack e correzzioni che andrai eventualmente a rifinire prima di pubblicare il tuo lavoro.

**Videodrome** · 06-07-2005, 11:39

hai inserito tutto nel div principale e mi stà bene; Ma io con IE però continuo a vedere la barra gialla in alto sotto la verde guarda qua , mentre dovrebbe posizionarsi sullo sfondo

Da casa lo testerò con FF e magari andrà bene....dubito

, ma in ogni caso con IE non ci sono ancora, probabilmente il div "down" necessita di un'altro valore di posizionamento

ma quale..?

**CeMax-2000** · 06-07-2005, 14:57

aspè!!!.... blocca tutto!! ma tu mica hai detto che lo volevi che si posizionasse alla "base dello schermo" oppure ho frainteso io???

Cmq adesso gli do un'occhiatina

Piccola capatina al discorso sui browser per testare i lavori:

Do pienamente ragione a quello che dice NickMadison in quanto prima sviluppa con Firefox che è quello che più di tutti i browser interpreta correttamente i css ed il resto in generale.
In seguito con l'aiuto di appositi "hack" allora gestisci pure gli altri browser, primo fra tutti IE che come dici tu è per adesso il più usato!!! (oserei dire che è ancora purtroppo il più usato)

Ultima considerazione:
non si deve per forza essere "fighetti" per usaqre FF anzichè IE........ al limite io direi "più intelligenti"

**Videodrome** · 06-07-2005, 19:07

ma allora mi avete male interpretato

Per primo IO STESSO USO FF (più che altro per sicurezza..)
Secondo punto, l'approccio come tu mi confermi, forse devo prenderlo dal lato opposto, ovvero:
primo testo il layout con FF e poi "pezzo" il layout per IE.
By the way, forse ho trovato la soluzione, ma prima verifico il tutto.
PS: ma certo che lo volevo in basso, avevo uplodato anche il file

Comunque un grazie a tutti per i vostri sempre pronti suggerimenti.

Discussione: Layout CSS

Strumenti discussione

Ricerca discussione

Visualizza

Layout CSS

Avrei ...

Certo...

OK Ce-max 2000

HoOO...

Permessi di invio