Newsgroup: it.lavoro.professioni.webmaster
Titolo: problemino con CSS (lungo ma penso semplice)

Ciao,
penso sia un sciocchezza, ma finora ho sempre impaginato con le tabelle e
sono aglil inizi con l'impaginazione CSS.
devo fare una pagina con un header orizzontale in alto composto da due
immagini (img1 500x150 e img2 500x20). L'header non occupa tutta la
larghezza dello schermo, ma lascia spazio sulla destra a una barra laterale
verticale composta da un'immagine (img3 140x600) che si incastra in alto
sulla destra.
Il risultato dovrebbe essere una cosa del genere (guardatela con un font
monospaced tipo il courier):
-----------|        |
   img1    |        |
           |        |
-----------|  img3  |
   img2    |        |
-----------|        |
           |        |
 contenuti |        |
           |        |
-----------|        |
partendo da un esempio e giocando con float, margin e clear ho ottenuto
quasi quello che voglio, ma non riesco ad allineare img3 in alto. Come
fareste voi?
qui c'è il codice che sto usando:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
">
<html>
<head>
<style type="text/css">
div.container
{
width:1000px;
margin:0px;
border:1px solid gray;
line-height:150%;
}
div.header1
{
/*padding:0.5em;*/
color:white;
background-color:gray;
background-image:url('images/img_01.jpg');
background-position:top left;
background-repeat: none;
height: 131px;
width: 561px;
}
div.titoli
{
color:white;
background-color:gray;
background-image:url('images/img_02.gif');
background-position:top left;
background-repeat: repeat-y;
height: 20px;
}
div.right
{
color:white;
background-color:gray;
background-image:url('images/img_03.jpg');
background-position:top left;
background-repeat: repeat-y;
position:relative;
width: 239px;
height: 600px;
float: right;
}
div.footer
{
padding:0.5em;
color:white;
background-color:gray;
clear:right;
}
h1.header
{
padding:0;
margin:0;
}
div.left
{
float:left;
width:160px;
margin:0;
padding:1em;
}
div.content
{
margin-left:190px;
border-left:1px solid gray;
padding:1em;
}
</style>
</head>
<body>
<div class="container">
<div class="header1"></div>
<div class="titoli"></div>
<div class="right"></div>
<div class="left"><p>"Never increase, beyond what is necessary, the number
of entities required to explain anything." William of Ockham
(1285-1349)</p></div>
<div class="content">
<h2>Free Web Building Tutorials</h2>
<p>At W3Schools you will find all the Web-building tutorials you need,
from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p>
<p>W3Schools - The Largest Web Developers Site On The Net!</p></div>
<div class="footer">Copyright 1999-2005 by Refsnes Data.</div>
</div>
</body>
</html>
Grazie ciao
-- 
elimina unsampdoriano per rispondere via email


Cosě al volo,(ho dato solo un rapido sguardo al codice) mi sembra che 
sia solo un problema di FLOAT.
se devi centrare il tutto fai un DIV contenitore, imposti img3 con FLOAT 
right e tutti gli altri tre con FLOAT left. Se il contenitore č 
abbastanza grande da contenere i div affiancati dovresti ottenere il 
risultato sperato.
Ciao


Piů o meno...oltre a quello era anche l'ordine in cui erano messi i div. Ho
quasi ottenuto quello che volevo, ma come elimino lo spazio bianco tra gli
elementi di destra e quello di sinistra?
Grazie
bye!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
div.container
{
width:100%;
margin:0px;
border:1px solid gray;
/*line-height:150%;*/
float:left;
}
div.header
{
border: 1px solid #000000;
padding:0px;
color:white;
background-color:gray;
background-position:top left;
background-repeat: none;
height: 131px;
width: 561px;
float:left;
}
div.titoli
{
border: 1px solid #000000;
padding:0px;
margin:0px;
color:white;
background-color:gray;
background-position:top left;
background-repeat: repeat-y;
height: 20px;
width: 561px;
float:left;
}
div.right
{
border: 1px solid #000000;
padding:0px;
margin:0px;
color:white;
background-color:gray;
background-position:top left;
background-repeat: repeat-y;
position:relative;
width: 239px;
height: 600px;
float:right;
}
div.contenuti
{
/*border: 2px solid #000000;*/
padding:0;
margin:0px;
color:white;
background-color:gray;
background-position:top left;
background-repeat: repeat-y;
}
</style>
<title>Untitled</title>
</head>
<div class="container">
<div class="right"></div>
<div class="header"></div>
<div class="titoli"></div>
<div class="contenuti"></div>
</div>
</html>
-- 
A.S. Tronzo (544503)  - VII.33
Stagione 23: 4° in VII.33


 bye!
Ciao

 spazi che non vorresti.
Mi sei stato di grande aiuto, in effetti si trattava proprio di misure da
sistemare.
Con IE6 funziona bene. Non ho testato con NN e Firefox.
Il risultato, se serve a qualcuno, è qui:
http://www.softmasters.net/css/
Ciao e grazie mille!!!
-- 


 
Ciao

 dalla somma dei due)
Ora è quasi perfetto!!!
Ho solo un problema con Mozilla malefico che non mi centra tutta la baracca;
io lo vedo a sinistra, mentre con IE6 è centrato bene :(
bye!


 ha
scritto nel messaggio news:cugra5$rv9$
1...@newsreader.mailgate.org

TROVATO!!! La soluzione nel container:
display:block;
margin-left:auto;
margin-right:auto;
sul sito ho già aggiornato la pagina e anche validata xhtml strict  :)
bye!