come rendere FLUIDO un layout?

[AnimAzzurrA]

Ciao ragazzi, è il mio primo post qui!
Sto imparando il CSS da poco, costretto dal blog wordpress che ho attivato e che è il seguente:

www.animazzurra.it

Il template iniziale mi dava gli elementi del post stretti in mezzo alla pagina, ma modifcando il CSS sono riuscito a sfruttarne la quasi totalità della larghezza.
Piccolo problema però con alcuni utenti di Internet explorer che vedono praticamente il poste centrale PASSATO GIU' al di sotto del calendario (dovrebbe stargli accanto).

Potreste dirmi quindi come fare a creare un Layout FLUIDO?
Il mio scopo + che il mio sito riempia automaticamente la finestra del browser di chi lo visita SENZA LA BARRA DI SCROLL ORIZZONTALE E CON TUTTI GLI ELEMENTI ALLINEATI.

GRAZIE!

il 'foglio' è il seguente...DITEMI VOI!!!

A.A.A.



/*
Theme Name: Flush
Theme URI: http://milo.peety-passion.com/category/themes/
Description: A simple and clean two col fluid theme with custom painting by miloIIIIVII + an intelligent PHP menu by The undersigned.
Version: 1.0
Author: miloIIIIVII
Author URI: http://milo.peety-passion.com/
*/
body{margin:0;padding:0;background:#fff url(images/bg.jpg) no-repeat top left;font:normal 13px "Tahoma", Arial, Helvetica, sans-serif;color:#333;}h2, h3, h4, h5, h6 {margin:0;padding:0;color:#245AAB;}
h1, h1 a{font:22px normal arial, Helvetica, Sans-Serif;float:right;color:#245AAB;
font-variant:small-caps;padding:0;margin:30px 0 0 0;}h2{font-size:26px; }
h3{font-size: 18px;font-variant: small-caps;font-weight: bold;background: transparent url(images/h2.gif) no-repeat bottom left;line-height:18px;}h4{font-size:11px;font-family:arial, Helvetica, Sans-Serif;}
p, ul, ol, blockquote{margin-top:0;padding-top:0;text-align:justify;line-height:18px;}
a{color:#245AAB;text-decoration:none;}a:hover{text-decoration:none;color:#333;}
a:visited{text-decoration:none;color:#000;}a img{border:none;}
#header{width:60%;height:360px;margin: 0 auto;background:transparent;}
#topmenu{margin:160px -100px 0 0;padding:0;z-index:5;float:right;width:430px;height:22px;
background:transparent url(images/men.gif) no-repeat bottom left;}
#topmenu a:link, #topmenu a:visited {color:#fff;}#topmenu a:hover {text-decoration:none;}
#topmenu ul { list-style:none;margin:0 0 0 5px;padding:0;}
#topmenu ul li a:link, #topmenu ul li a:visited {display:block;line-height:11px;padding:5px 15px 2px 5px;
margin:0 5px 0 0;font-size:13px;text-transform:uppercase;}
#topmenu ul li a:hover{ border-bottom:1px solid #ccc;}
#topmenu ul li {display:block;float:left;position:relative; }
#topmenu ul li ul {display:block;position:absolute;top:auto;list-style:none;margin:0;padding:0;
visibility:hidden;border-top:1px solid #ccc;width:220px;}
#topmenu ul li:hover ul,#topmenu ul li.msiefix ul {visibility:visible;}
#topmenu ul li ul li {position:relative;float:none;line-height:18px;color:#333;font-size:10px;_height:1px;}
#topmenu ul li ul li a:link, #topmenu ul li ul li a:visited, #topmenu ul li ul li a {display:block;
margin:0;line-height:15px;padding:2px 0 2px 10px;color:#9DA0DC;_height:1px;text-transform:none;border:0;
background-color:#114982;}
#topmenu ul li ul li a:hover {background-color:#fff;border-top:1px solid #ccc;}
.col {margin: 0 0 20px 0;padding: 0 5px 15px 5px;background: url(images/col.gif) no-repeat center bottom;}
.entry{clear:left; margin-top: 15px;padding:0 5px 15px 5px;}
.entry h4 {margin-bottom: 20px;font-size: 11px;font-weight: normal;}
.entry h4 strong {font-weight: bold;color: #333;}
#content {width: 90%;margin: 0px auto 0px;padding: 0 0 0 0px;}#l_sidebar {float: left;width: 15%;}
#main {float:left;width: 79%;margin: 10px 0 0 27px ;padding: 5px 35px 5px 0px;background: transparent no-repeat right top url(images/post.gif);}#l_sidebar ul{margin-left: 0;padding-left: 0;list-style: none;}
#l_sidebar li{padding: 5px 0 7px 0;}#l_sidebar li a{display: block;}
#l_sidebar li a:hover{background: #245AAB;color:#ccc;}#l_sidebar li.first{border: none;}
#l_sidebar h3{font-size: 15px;background: transparent url(images/h2.gif) no-repeat bottom left;}
#footer{clear:both;width:70%;height:200px;margin:0 auto;background:transparent url(images/footer.gif) no-repeat left bottom;}#footer p {margin: 0;padding: 30px;text-align: center;}
#wp-calendar {text-align:center;empty-cells: show;margin:0;width: 95%;}
#wp-calendar #prev a {font-size: 9pt;}#wp-calendar a {text-decoration: none;}
#wp-calendar caption {font: normal 1.0em 'Tahoma', Arial, Helvetica, Sans-Serif;text-align: center;}#wp-calendar th {font-style: normal;font-variant: small-caps;}#wp-calendar #next a {padding-right: 10px;text-align: right;}#wp-calendar #prev a {padding-left: 10px;text-align: left;}
#wp-calendar a {display: block;border:1px solid #245AAB;}
#wp-calendar caption {text-align: center;width: 100%;margin:0 0 5px 0;font-variant:small-caps;}
#wp-calendar td {padding: 3px 0;text-align: center;}
#wp-calendar td.pad:hover { /* Doesn't work in IE */background-color: #fff; }
#wp-calendar #today {background:#245AAB;color:#fff;}#wp-calendar #today a {color:#fff;font-weight:700;}
img.center, a img.center {display: block;margin-left: auto;margin-right: auto;padding: 3px;}
img.alignleft, a img.alignleft {float:left;margin: 4px 10px 5px 0;padding: 3px;}
img.alignright, a img.alignright {float:right;margin: 4px 10px 5px 0;padding: 3px;}
blockquote{margin: 0 0 0 10px;padding: 0 10px 0 10px;font-style: italic;color: #333;
border-left: 5px solid #245AAB;}#blockquote p{margin: 0 0 10px 0;padding: 0;}
#searchdiv {margin: 0;padding 0;}#searchform {margin: 0;padding: 0;overflow: hidden;}
#s {width: 70%;background: transparent;color: #333;font-size: 11px;font-family: Verdana, Helvetica, Sans-Serif;padding: 3px;margin: 8px 0 0 0;border: 1px solid #245AAB;}
#textfield1 {width: 175px;background: transparent;border: none;}
#submit1 {height: 19px;background: transparent;border: none;text-transform: lowercase;font-size: 10px;
font-weight: bold;color: #333;}.navigation {float: right;margin-top:10px;margin-bottom: 60px;margin-right:25px;}

[Mich_]

Anzitutto quando posti il codice devi usare i tag VB, altrimenti si perde la formattazione e risulta illeggibile. Prova con il tasto # sopra l'area di inserimento.

Potreste dirmi quindi come fare a creare un Layout FLUIDO?

Un layout deve nascere fluido. Trasformarlo dopo e` difficile.
La cosa piu` semplice e` partire da un layout pronto: alcuni sono citati tra i "link utili", altri li puoi trovare mediante ricerca in rete.

PS il tuo layout e` fluido solo in parte. Ci sono pero` alcuni elementi con posizionamento (probabilmente assoluto), che vincolano alcuni oggetti e si creano brutti effetti di sovrapposizione (basta aumentare un po' il cararattere per rendersene conto).
Se non usi MAI l'attributo position, e sistemi le cose tramite i float, la cosa risulta molto piu` semplice.

[AnimAzzurrA]

Grazie MICH!

Ho usato un altro 'trucco'.
Nelle vostre guide sul CSS è consigliato di togliere tutte le informazioni relative a width,padding e margin, cosi da crearlo automaticamente (mi riferisco al 'main').

Così facendo sembra che funzioni, ho fatto laprova anche con altri utenti che hanno risoluzioni schermi e browser diversi!

Quello che mi servirebbe sapere adesso è come fare ad inserire un'immagine sotto la testata (logo-copertina) e una a piè pagina (dedica).

Ilmio socpo è quello di conservarle (logicamente) anche quando cambia la pagina dei post.

GRAZIE.

A.A.A.

[Mich_]

Una pagina e` un documento a se`. Non ci possono essere pezzi ritagliati da altre pagine.

Pero` se in una pagina successiva carichi la stessa immagine (vuol dire che il link punta allo stesso file), il brwoser non ricarica nuovamente file, ma usa quello che ha nella cache.

come fare ad inserire un'immagine sotto la testata

E` una domanda troppo vaga.
Per come la vedo io, "sotto" puo` essere tante cose, ad esempio vari allineamenti, varie distanze, ...

Invece per il pie` di pagina, devi inserire un blocco (ad esempio un <div>), e dentro a tale blocco ci devi mettere l'immagine. Probabilmente il footer dovra` avere il clear, ma anche questo dipende da dove deve posizionarsi tale elemento.