ridimensionamento pagina

[Andrex]

ciao stò costruendo il mio primo layout in css e ho una domanda.. volevo sapere come posso fare in modo che il layout si ridimensioni in base alle dimensioni della pagina.. non sò e ho reso l'idea..
se riduco la finestra del browser da destra gli elementi si allineano a sinistra..

vi posto il codice.. del css.. il validator dice che è tutto giusto però sinceramente non saprei

html{
height:100%;
width:100%;
}

body{
margin:0px;
height:100%;
width:100%;
}

/*Testo*/

.stile1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
text-align:center;
font-size:9px;
}
.stile2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
text-align:center;
font-size:10px;
}
.stile3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
text-align:center;
font-size:10px;
}

/*Struttura*/

#head{
width:750px;
height:107px;
background-color: #FFFFFF;
position:absolute;
left: 120px;
top: 0px;
}
#menu{
width:750px;
height:20px;
background-color: #669999;
position:absolute;
top: 105px;
left: 120px;
background-image: url(immagini/menu.gif);
}
#centro{
width:750px;
height:321px;
background-color:#FFFFFF;
position:absolute;
left:120px;
top: 128px;
}
#basso{
width:750px;
height:15px;
position:absolute;
left:121px;
top: 578px;
background-color: 669999;
}
#sotto{
width:750px;
height:18px;
background-color: #669999;
position:absolute;
left: 122px;
top: 576px;
background-image: url(immagini/basso.gif);
}
/*Box*/

#colonna_sx{
width:190px;
height:322px;
position:absolute;
top: -2px;
background-color: #FFFFFF;
left: 0px;
}

#menu_sx{
width:190px;
height:150px;
position:absolute;
top: 1px;
}

#img_centro{
width:367px;
height:322px;
position:absolute;
background-color:#FFFFFF;
left: 192px;
top: -2px;
}
#box_newsdx{
width:187px;
height:307px;
position:absolute;
background-color: #FFFFFF;
left: 566px;
top: -1px;
}
#newsletter{
width:187px;
height:128px;
position:absolute;
background-color: #FFFFFF;
left: 122px;
top: 445px;
float:left;
}
#volontariato{
width:187px;
height:131px;
position:absolute;
background-color:#FFFFFF;
float:left;
left: 310px;
top: 445px;
}
#esperienze{
width:187px;
height:129px;
position:absolute;
background-color: #FFFFFF;
float:left;
left: 499px;
top: 445px;
}
#graziea{
width:186px;
height:129px;
position:absolute;
background-color: #FFFFFF;
float:left;
left: 687px;
top: 445px;
}
#cdo{
width:190px;
height:36px;
position:absolute;
left: 0px;
top: 260px;
background-color: #FFFFFF;
}


grazie ciao

[yappo]

ciao.. ho guardato in modo veloce il codice...
per quel che ne so io dovresti usare anche div "creati" con i margini in modo da nn impostare altezze "assolute"...

se riduco la finestra del browser da destra gli elementi si allineano a sinistra..

html{
height:100%;
width:100%;
padding: 0px;
margin: 0px auto;

}

body{
margin:0px;
height:100%;
width:100%;
padding: 0px;
margin: 0px auto;
}

body{
font-size: 100%;
font-family: verdana;
text-align: center;
}

io di solito inserisco questo codice nel css quando voglio un layout centrato nella pagina...

poi mi creo un contenitore ed inizio a costruire...

[Andrex]

grazie.. ho inserito il codice e rifatto la pag.. sembra che vada.. unica cosa.. per farlo ridimensionare basta dare position relative al contenitore o devo darlo a tutti i box?perchè con le position relative mi si sballa tutto in dw.. sul foglio di lavoro è un casino mentre il risultato è giusto..
invece se uso position absolute si vede bene da entrambe le parti..
cosa dici? son disperato

[yappo]

ora nn ho ben capito cosa ti capita ancora....

posso dirti che dove mi serve io metto absolute mentre in altri punti costruisco utilizzando o i margini o relative...

div#container{position:relative; width: 760px; height: 100%;margin: 0 auto;
text-align: left;}
body>div#container{height:auto;min-height:100%}

DIV.header {WIDTH:765px;
POSITION:RELATIVE;
TOP:0px;
HEIGHT:72px;
visibility: visible;
overflow: visible;
PADDING:0px;
MARGIN: 0px 0px 0px 0px;
text-align:left;
}



DIV.menutop {WIDTH:765px;
POSITION:absolute;
TOP:72px;
HEIGHT:110px;
visibility: visible;
overflow: visible;
BORDER:0px;
PADDING:0px 0px 0px 0px;
MARGIN: 0px 0px 0px 0px;
background-image: url(the_doctor.jpg);
background-repeat:no-repeat;
text-align:left;
}

io uso entrambi... vedi? :master:

[Andrex]

ciao.. il problema ora è semplicemente nel foglio di lavoro di dreamweaver.. nella versione mx si vede tutto sballato poi una volta aperta la pagina con IE si vede giusto..
con la versione mx 2004 fino ad ora non ho mai avuto problemi e anche il foglio di lavoro si vedeva bene.. ordinato.. come nel browser per intenderci.. ora invece non +.. è diventato un casino... quando inserisco un box si sfalsa tutto e mi si mischia tutto..quindi è impossibile lavorare..
come posso risolvere questo problema..
ciau e grazie per la pazienza

[yappo]

ciao...

io ho lostesso tuo problema ma ho il dw mx 2003... la mia collega ha il dw mx 2004 professional e vede tutto correttamente... nn so che dirti...

io ci sono abituato e mi tengo il foglio di lavoro impostato tra metà pagina e metà codice così se ho problemi "passo" da li...

[andrea.paiola]

non fidatevi dell'anteprima di dreamweaver... fate le prove nei browsers reali o (meglio) cambiate editor... HTML-Kit ha un'anteprima uguale a IE e la possibilità di aggiungere anteprime uguali a Mozzilla o altri browsers: figata!

[Andrex]

ciao andrea.. anche su dw puoi aggiungere i browser per controllare.. cmq è vero.. nella versione 2004 si lavora molto meglio e non si vede tutto sfalsato.. infatti a me è andato tutto bene fino a ieri.. ma ora che guardo bene il problema nasce quando aggiungo un secondo box nella colonna di sinistra..

sicuramente sbaglio qualcosa.. il codice è questo.. (purtroppo le pagine non sono ancora caricate e non posso farvele vedere direttamente..)

html{
height:100%;
width:100%;
padding: 0px;
margin: 0px auto;

}

body{
margin:0px;
height:100%;
width:100%;
padding: 0px;
margin: 0px auto;
}
body{
font-size: 100%;
font-family: verdana;
text-align: center;
}


/*Struttura*/

#contenitore{
width:750px;
height:595px;
background-color: ;
position:relative;
margin-top:0px;
margin-left:0px;
left:0px;
top:0px;
}
#head{
width:750px;
height:106px;
background-color: #FFFFFF;
position:relative;
float:left;
}
#menu{
width:750px;
height:20px;
position:relative;
float:left;
background-image:url(../immagini/menu.gif);
}
#centro{
width:750px;
height:450px;
background-color:#FFFFFF;
position:relative;
float:left;
}
#basso{
width:750px;
height:18px;
background-image:url(../immagini/menu.gif);
position:relative;
float:left;
}

/*Box*/
#menu_alto{
width:565px;
height:20px;
position:relative;
float:right;
margin-left:90px;
}
#fascia_sx{
width:185px;
height:450px;
position:relative;
float:left;
background-color:#006666;
}
#fascia_centro{
width:380px;
height:450px;
position:relative;
float:left;
background-color: #FFFFFF;
}
#menu_latodx{
width:185px;
height:450px;
position:relative;
float:left;
background-color: #FFFFCC;
}
#menusx{
width:185px;
height:200px;
float:left;
background-color:#FFFFFF;
}
#newsletter{
width:185px;
height:200px;
float:left;
background-color:#66FF00;
}
#cdo{
width:185px;
height:50px;
float:left;
background-color: #FF6633;
}


grazie per la pazienza.. mi ucciderete tra poco

[Moro]

una cosa:
perche mettere nel foglio di stile anche le proprietà per html?

html{
height:100%;
width:100%;
padding: 0px;
margin: 0px auto;

}

per quello che ne so solo IE vede questo comando, che fra l'altro non capisco a che serve... Ps: in xhtml non va proprio messo!!!

[yappo]

in xhtml non va proprio messo

dici?

per quello che ne so solo IE vede questo comando, che fra l'altro non capisco a che serve

bhe, io è da un po' che mi smazzo tra accessibilità e xhtml... e questa volta nn ho parole... VVoVe: