Spazio inutile

[edeaj]

Ciao a tutti, da appena due giorni, grazie al consiglio di uno di voi, ho iniziato ad interessarmi di siti tableless, dal momento che attualmente, il mio sito è pieno zeppo di tabelle nidificate...
Ho iniziato a ristrutturare le pagine, soltanto che, evidentemente a causa della mia inesperienza, non capisco come mai tra la fine dei contenuti della pagina e la fine della scrollbar ci sia uno spazio immenso praticamente vuoto. so già da cosa dipende, e cioè dal posizionamento di alcuni box... vi scrivo il codice:

nel css:

#centrale {
background: white;
position: relative;
top: -1350px;
left: 0px;
margin : 0px;
border-top : 15px solid #FFCCCC;
border-right : 2px solid #FFCCCC;
border-bottom : 15px solid #FFCCCC;
border-left : 2px solid #FFCCCC;
padding : 2px;
width : 450px;
height : 780;
text-align: justify;
}


nella pagina che richiama il css:


<div align="center">
<p id="centrale">PROVA CONTENUTO</p>
</div>


in pratica quel "top: -1350px" oltre a permettermi di posizionare correttamente il box in più aggiungere credo altrettanti 1350 pixel bianchi sullo schermo, e la pagina sembra lunghissima ma in realtà non lo è. Ho provato ad impostare il posizonamento absolute piuttosto che relative, ma in questo modo ho notato che cambiando le impostazioni dello schermo o anche solo ridurre manualmente le dimensioni della finestra il box resta fermo dov'è, mentre invece mi è necessario che si sposti relativamente, come anche fa il resto del contenuto della pagina.
Mi date una mano?
Grazie a tutti per la collaborazione

[Francis87]

mi spieghi a cosa seve questo?

top: -1350px;

[edeaj]

Se metto un valore positivo va troppo in basso, perchè il suo posizionamento è relativo ad un altra immagine.... negativo invece riesco a farlo salire più in alto... ora "credo" di aver risolto in maniera un po' barbara se vogliamo e controcorrente, cioè sistemando tutto in una tabella (senza altre tabelle nidificate, molto semplice), e posizionare gli oggetti relativamente a quest'ultima....

[WarriorXP]

Originariamente inviato da edeaj
Se metto un valore positivo va troppo in basso, perchè il suo posizionamento è relativo ad un altra immagine.... negativo invece riesco a farlo salire più in alto... ora "credo" di aver risolto in maniera un po' barbara se vogliamo e controcorrente, cioè sistemando tutto in una tabella (senza altre tabelle nidificate, molto semplice), e posizionare gli oggetti relativamente a quest'ultima....

Non é che sia propriamente ortodosso, eh...

[edeaj]

Infatti me ne sono resa conto da sola... ecco perchè ho chiesto il vostro aiuto....

[bagu]

Non che abbia capito molto di quello che vuoi mostrare a video , ma penso che nidificare un div o 2 possa risolvere il tuo prob.
Se magari posti uno schizzettto di quello che vuoi realizzare ci si da una occhiata

ciao
paolo

[edeaj]

Ok, ti spiego meglio.
nella pagina devo visualizzare:
in alto al centro un'immagine (logo+banner)
immediatamente sotto, due toolbar, una a destra, una a sinistra.
al centro, tra le toolbar, c'è il contenuto della pagina.
Il problema è che posizionando prima la parte superiore e poi una toolbar, l'altra non riesco a posizionarla alla stessa altezza senza impostare un top: -qualcosa.
Questo comporta un allungamento della pagina in verticale, che risulta quindi molto lunga (la scrollbar scende molto più giù di quanto non finiscano realmente tutti gli elementi della pagina).
A questo problema ho ovviato nidificando l'immagine superiore, le due colonne ed il contenuto in una semplice tabella.
So che non è proprio attinente alla logica di utilizzo dei css, ma non capisco come posizionare correttamente le toolbar senza quel fastidioso spazio bianco dovuto al valore negativo del "top".


O meglio, una soluzione ci sarebbe, stando a quel poco che so, e cioè impostare un posizionamento absolute. In tal modo però la pagina perde in termini di accessibilità....
Tnx

[bagu]

se ho capito bene è un layout a tre colonne con una testata:
Inknoise lo fa noi !
poi basta modificarlo secondo le esigenze personali
prova a vedere se questo ti va bene
<!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 name="generator" content="http://www.inknoise.com/experimental/layoutomatic.php" /> <style type="text/css">
#container {
border: 1px solid gray;
margin: 10px;
margin-left: auto;
margin-right: auto;
padding: 10px;
}

#banner {
padding: 0;
margin-bottom: 0;
background-color: rgb(213, 219, 225);
}

#content {
padding: 0;
margin-left: 200px;
margin-right: 200px;
background-color: gray;
}

#sidebar-a {
float: left;
width: 200px;
\width: 200px;
w\idth: 200px;
margin: 0;
margin-right: 0;
padding: 0;
background-color: rgb(235, 235, 235);
}

#sidebar-b {
float: right;
width: 200px;
\width: 200px;
w\idth: 200px;
margin: 0;
margin-left: 0;
padding: 0;
background-color: rgb(235, 235, 235);
}

#footer {
clear: both;
padding: 0;
margin-top: 0;

background-color: rgb(213, 219, 225);
}
</style>
</head>
<body>
<div id="container">
<div id="banner"></div>

<div id="sidebar-a"></div>

<div id="sidebar-b"></div>

<div id="content"></div>

<div id="footer"></div>
</div>
</body>
</html>

ciao paolo

[edeaj]

Grazie bagu, ci smanetto un po' e ti faccio sapere