Come fareste un CSS crossbrowser per questo?

**freezone** · 14-01-2007, 19:47

Questo è lo schema che vorrei ottenere, ma non riesco a fare nulla che si veda allo stesso modo su IE e FireFox, se qualcuno può darmi una mano...
Il codice HTML é questo

codice:

<html>
<head>
<!-riferimento al foglio di stile -->
</head>
<body>

<div id="tutto">
    <div id="testata">
    </div>
    <div id="spallasx">
    </div>
    <div id="centrale">
        <div id="sottotestata">
        </div>
        <div id="sottocentrale">
        </div>
        <div id="spalladx">
        </div>
    </div>
    <div id="footer">
    </div>
</div>

</body>
</html>

Il foglio di stile dovrebbe essere circa così in partenza:

codice:

#tutto {
}

#testata {
}

#spallasx {
}

#centrale {
}

#footer {
}

#sottotestata {
}

#sottocentrale {
}

#spalladx {
}

L'idea è quella di avere tutti questi blocchi senza padding tra loro, ma che siano tutti adiacenti. Gli spazi li ho messi solo per far capire quali fossero i blocchi div.

**Another-Life** · 14-01-2007, 23:15

Non prendere in riferimento IE,ma cerca di realizzare quel layout solamente per firefox visto che è uno dei browser piu standard al momento.Successivamente con i commenti condizionali lo adatti ad IE.

**freezone** · 15-01-2007, 10:34

Penso che tu sappia che Firefox non è certo il più utilizzato dei browser, in ogni caso volevo sapere se qualcuno è in grado di propormi uno schema come illustrato con un CSS crossbrowser.

**Mich_** · 15-01-2007, 12:31

codice:

<div id="tutto">
    <div id="testata">
    </div>
    <div id="corpo">
      <div id="spallasx">
      </div>
      <div id="centrale">
          <div id="sottotestata">
          </div>
          <div id="sottocentrale">
          </div>
          <div id="spalladx">
          </div>
      </div>
    </div>
    <div id="footer">
    </div>
</div>

Con i seguenti attributi CSS (oltre ad altri, tipo width e height che metterai tu)
float: left; in corpo, spallasx, sottotestata, sottocentrale, spalladx
clear: both; in footer

In #corpo ci dovra` essere una immagine di sfondo larga esattametne 180px e da ripetere solo in vert, per dare lo sfondo al blocco #spallasx, che probabilmente sara` piu` corto del #centrale (trucco delle false colonne).

**freezone** · 15-01-2007, 13:23

Purtroppo non ci sono ancora... questo è il risultato:

E questo il foglio di stile:

codice:

/* CSS Document */
body {
	background-color:#D0E0E1;
}

#tutto {
	background-color:#000000;
	width:960px;
}

#testata {
	background-color:#7DFF00;
	width:960px;
	height:130px;
}

#corpo {
	float:left;
}

#spallasx {
	background-color:#D59758;
	width:180px;
	float:left;
}

#centrale {
	background-color:#E4BC96;
	width:
}

#footer {
	background-color:#FFFF00;
	clear:both;
	width:960;
	height:80px;
}

#sottotestata {
	background-color:#FF0000;
	float:left;
	width:780px;
	height:130px;
}

#sottocentrale {
	background-color:#00A33D;
	float:left;
	width:600px;
}

#spalladx {
	background-color:#0000FF;
	float:left;
	width:180px;
}

Il trucco delle false colonne è ottimo, l'avevo visto nella guida ai CSS di HTML, grazie comunque.
Ora vorrei che sottocentrale e spalladx venissero allineati insieme a sottotestata, non so se mi sono spiegato... scusate ma non è facile farsi capire, mi spiegherei meglio con carta e penna...

**freezone** · 15-01-2007, 13:26

Ho risolto così:

codice:

<div id="tutto">
    <div id="testata">
		testata
    </div>
	<div id="spallasx">
		spallasx
	</div>
	<div id="corpo"> 
		<div id="centrale">
			<div id="sottotestata">
				sottotestata
			</div>
			<div id="sottocentrale">
				sottocentrale
			</div>
			<div id="spalladx">
				spalladx
			</div>
		</div>
	</div> 
    <div id="footer">
		footer
    </div>
</div>

In pratica ho tirato fuori da "corpo" la spalla sx, ho fatto bene o è una ca**ata?

**Mich_** · 15-01-2007, 16:44

Avevo introdotto quel blocco a tutta larghezza per 2 motivi:
1. per poter dare uno sfondo tipo "false colonne"
2. per non aver problemi di compatibilta`
Se lavori in XHTML Strict e non ti serve avere sfondi diversi nei blocchi, non serve.

Invece tu hai inserito un blocco esattamente dentro un altro blocco: a volte si usa anche quello per usare margin al posto di padding ed evitare problemi con IE, ma in generale non e` necessario.

Il trucco e` usare il float in tutti i blocchi, in modo da non avere sovrapposizioni in FF e altri browser gecko.

Discussione: Come fareste un CSS crossbrowser per questo?

Strumenti discussione

Ricerca discussione

Visualizza

Come fareste un CSS crossbrowser per questo?

Permessi di invio