Prorpietà e posizionamento

**Neptune** · 16-01-2010, 02:52

Salve a tutti,
sto cercando di creare un layout molto minimale ma con la mia poca esperienza non riesco a posizionare tutto "come vorrei".

Il codice è il seguente:

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=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css">
<!--

#pagina{
	width:100%;
	height:700px;
	z-index:1;
	background-color: #EACC26;
	clip: auto;
	min-height: 600px;
}
#naviga {
	width:100%;
	height:40%;
	z-index:1;
	background-color: #616362;
}
#corpo{
	width:100%;
	height:60%;
	z-index:1;
	bottom: inherit;
}
#apDiv1 {
	position:absolute;
	left:25px;
	top:24px;
	width:95%;
	height:80%;
	z-index:1;
	border-color: white;
	border-style:solid;
	border-width:1px;
}

-->
</style>
</head>

<body>
<div id="apDiv1">
  <center>
    Testo, testo, testo, testo, testo

  Testo, testo, testo, test...
  </center></div>
<div id="pagina">
<div id="naviga"></div>
<div id="corpo"></div>
</div>



</p>
</body>
</html>

Detto in pratica naviga e corpo, le strisce rispettivamente con sfondo grigio e giallo, dovrebbero appunto fungere solo da "sfondo della pagina". Non ci andrebbe scritto nulla dentro.

Lo spazio in cui invece andrò ad inserire gli elementi sarebbe l'elemento "apDiv1".

Ora, come posizionamento vorrei riuscire a fare che si ridimensioni tutto rispetto alla pagina, ovvero i due oggetti dello sfondo siano grandi quanto tutta la pagina, qualsiasi grandezza essa sia, e apDiv1 rimanga sempre un "rettangolo" centrato rispetto alla pagina.

Purtroppo non riesco a farlo, se gli do le grandezze in percentuale "sparisce" tutto (ho fatto diverse prove, questo è solo uno dei miei tanti "guazzabugli"

).

Vi ringrazio in anticipo per l'attenzione,
Neptune.

**Shores** · 16-01-2010, 03:41

Allora, a #pagina hai dato una altezza fissata in 700px, quindi di certo #naviga e #corpo non potranno mai occupare tutta la pagina: non glielo permette il fatto che il loro contenitore abbia una altezza fissata!

Quindi: dai a #pagina (che a questo punto io chiamerei piuttosto #sfondo!)
height:100%;
position:absolute;
z-index:-1;

elimina del tutto #corpo che non serve assolutamente a nulla e lascia #apDiv1 così com'è e dovresti essere a posto.

Ciao!

**Neptune** · 16-01-2010, 19:31

Originariamente inviato da Shores
Allora, a #pagina hai dato una altezza fissata in 700px, quindi di certo #naviga e #corpo non potranno mai occupare tutta la pagina: non glielo permette il fatto che il loro contenitore abbia una altezza fissata!

Quindi: dai a #pagina (che a questo punto io chiamerei piuttosto #sfondo!)
height:100%;
position:absolute;
z-index:-1;

elimina del tutto #corpo che non serve assolutamente a nulla e lascia #apDiv1 così com'è e dovresti essere a posto.

Ciao!

Il problema, che mi sono dimenticato di specificare, è che avendo due parti dello sfondo di colori molto distinti, non riesco a trovare un colore per il testo che sia ben leggibile per entrambi, quindi vorrei fare che il testo che ricade sulla parte grigia sia tipo bianco, e sulla parte gialla nero.

Ecco perchè la divisione in due label. Così come mi hai consigliato tu effettivamente come ridimensionamento è perfetto, ma per il testo come potrei fare?

P.S: Sarebbe anche ben accetto un consiglio per un colore che si veda bene su entrambi i tipi di sfondo

**Shores** · 16-01-2010, 19:43

Semplicemente... NON puoi: il testo ha un colore che dipende strettamente dalla proprietà color assegnata al tag che lo contiene, quindi, a menu che tu non divida il testo contenuto in due diversi tag, è IMPOSSIBILE colorarlo diversamente solo perché è sopra a uno sfondo diverso!

Quindi, l'unica vera soluzione è che il riquadro centrale che contiene il testo abbia un altro colore unico di sfondo e un adatto colore del testo di conseguenza.

E, tra l'altro, non esiste un colore che si legga bene in entrambi gli sfondi: la leggibilità dipende dalla differenza in contrasto (ovvero dalla luminosità relativa dei due colori, e i due colori che usi sono tali che è veramente difficile se non impossibile trovare un colore che risalti su entrambi...

Discussione: Prorpietà e posizionamento

Strumenti discussione

Ricerca discussione

Visualizza

Prorpietà e posizionamento

Permessi di invio