Ridimensionamento esatto div

[samiel]

Sono in questa situazione, quanto al codice:

/*stili globali per il layout elastico con background*/
html{margin: 0;padding:0;}
body{padding: 10px;font-family:verdana,arial,sans-serif; font-size:76%; color:#1A2894; background-color:#17237A;}

/*stili generici, su header e footer*/
div#header{height:auto; background-color:white; color:#1A2894;}
div#footer{height: 60px; padding: 45px 35px; clear:both; background-color:white; color:#1A2894; border-top: thick double #17237A}

/*stili specifici per il layout*/
div#container{width:96%; border:0; margin:auto; background-color:white;}
div#wrapper{border:0; margin:0 16px 0 16px; background-color:#F4F4F4;}
div#content{width:96%; padding:10px; background-color:#F4F4F4; overflow:visible}
div#nav_right{height:auto; width: 210px; float:right; padding:25px 15px; background-color:white;}

/*stili per la navigazione menu di destra*/
div#nav_right ul{margin:0; padding:0; list-style-type:none;}
div#nav_right li{margin:0; padding-bottom:10px;}
div#nav_right a{color:#a11f12; font:bold 0.8em/1.4em verdana,arial,sans-serif; text-decoration:none;}
div#nav_right a:hover{color:#17237A; text-decoration:underline;}
div#nav_right a#activelink{color:#17237A; text-decoration:none;}

/*stili per la navigazione menu header*/
div#navbar_wrapper {width:98%; height:60px; margin:auto; padding:0; background-color:#17237A;}
div#navbar ul{list-style:none; margin:0; padding:18px; text-align:center;}
div#navbar ul li{display:inline; margin:3px; padding:0; border:4px;}
div#navbar a{background:white; color:#17237A; margin:0; padding:04px; text-decoration:none;}
div#navbar a:hover{background-color:#C5FFFC; color:#17237A; font-weight:bold

Ora, la sezione "content" inizia giusto sotto il "navbar_wrapper".
Come posso impostare "scientificamente" la sua larghezza
perché sia esattamente uguale al "navbar_wrapper", posto che
per quest'ultimo ho usato "width:98%"?

Grazie
M.

[99caos]

non comprendo quello che dici perchè content non comincia dopo navbar ma dopo header, e al suo fianco c'è navigation ed extra, quindi non mi è chiaro quello che vuoi ottenere.

innanzi tutto ti consiglio di postare il link al sito così che altri possano vederlo, ma ritorno all'idea di firebug.

se tu apri la consolle di filebug e vai in html, vedi la struttura html della tua pagina, aprendo il tag body per esempio, vedi i div che sono contenuti in esso, passando col mouse sui div, vedi nella finestra del browser, delle colorazioni che ti indicano la distribuzione dell'elemento nella pagina, larghezza, margini, padding...

in questo modo puoi comprendere quali regole sono causa di quei comportamenti.

Scientificamente è un parolone, dovresti comprendere i metodi di rendering dei diversi browser, specialmente quando si verificano risultati diversi tra browser... ma lasciando stare le cose complesse, molto lo comprendi comprendendo le regole che un elemento eredita.

magari se riformuli la domanda in maniera più precisa è meglio.

Devi chiarire innanzi tutto cosa vuoi ottenere e perchè. Se usi un layout fluido devi sapere perchè e percome, se vuoi comprendere...

Firebug aiuta molto e a fronte di un piccolo investimento di tempo per comprendere i suoi semplici meccanismi, ti fornisce un aiuto importante per velocizzare il tuo apprendimento.

[samiel]

Ho "uppato" la pagina a questo indirizzo:
http://samiel.netsons.org/ecdl.html
Noterai che l'angolo alto a sinistra del div content (grigio),
che inizia certo sotto header, ma confina con la barra
di navigazione (blu), non continua esattamente
la verticale, ma è un po' più stretto. Ora:
io volevo sapere come indicare esattamente
a content di iniziare in coincidenza con lo header,
in modo da eliminare quel piccolo scarto,
e non già empiricamente. Certo, posso aumentare
content di qualche punto, ma vorrei piuttosto capire
come si deve calcolare con precisione la misura.
Per il rendering... adesso sto lavorando con Quanta
come editor e verifico su Firefox. Credo che sia meglio
lavorare su un browser come Firefox, che più e meglio
di altri rispetta le specifiche W3C. Dopo vedrò
come la pagina è resa da altri browser più problematici,
ma intanto vorrei realizzare (e capire) come operare
sulla struttura.

Grazie mile dell'aiuto
M.

[99caos]

navbar è a 98%, content è a 96%, porta content a 98% e dovrebbe andare...
inoltre il contenitore generale esterno è a 96% quindi il contenitore è al 96% di tutta la pagina, la navbar è al 98% del contenitore e il content è al 96% del contenitore.

Adesso, o metti sia navbar che content alla stessa percentuale o credi un contenitore per entrambi che sia alla larghezza che vuoi.

[samiel]

Ho trovato la soluzione: era wrapper che andava impostato al 98%!
Un ultimo problema (almeno per ora...).
Il menu di navigazione dello header presenta le voci in "rettangoli"
bianchi all'interno di un contenitore blu. Questi "rettangoli" si conformano,
quanto alle dimensioni, al testo contenuto. Siccome ho impostato
un effetto hover per cui il testo diventa grassetto quando il mouse
ci passa sopra, il testo si espande e con esso anche il "rettangolo",
generando un effetto di movimento per me alquanto fastidioso.
Non so se manterrò quell'effetto, ma in ogni caso vorrei capire
come assegnare ai "rettangoli" una lunghezza fissa...
E non ho alcun idea in proposito... :-(

Grazie ancora
M.

[99caos]

perchè abbiano larghezza fissa devono diventare elementi block level, ossia simili a blocchi come i div, ora sono elementi list-item ossia oggetti di lista.

Quindi:

li { display: block; float: left; width: 100px; margin 10px; }
li a { display: block; width: 100%; }

ora non ricordo ma molto probabilmente iltuo menu è composto da una lista non ordinata (ul).

Block e float left servono per metterli uno a fianco all'altro, con width dai la misura e con margin li distanzi.

poi devi fare in modo che il link sia cliccabile su tutto il pulsante e non solo sul testo, quindi rendiamo block level anche i link e impostiamo una larghezza di 100%, se vuoi puoi anche impostare un altezza. per centrare il testo in altezza devi impostare line-height pari all'altezza dell'elemento nel quale lo vuoi centrare.

[samiel]

Ci siamo quasi...
Ho reso così il codice:

/*stili per la navigazione menu header*/
div#navbar_wrapper {width:98%; height:70px; margin:auto; padding:0; background-color:#17237A;}
div#navbar ul{list-style:none; margin:0; height:70px;/*padding:18px;*/ text-align:center;}
div#navbar li{display:block; float:left; width:100px; margin:8px;}
div#navbar a{display:block; width:100%; height:30px; background:white; color:#17237A; text-decoration:none;}
div#navbar a:hover{background-color:#C5FFFC; color:#17237A; font-weight:bold;}
div#navbar a:active{background-color:#C5FFFC; color:#17237A; font-weight:bold;}
div#navbar .curr a:link,a:visited,a:hover,a:focus,a:active{font-weight:bold;}

Restano un paio di problemucci sull'allineamento degli elementi creati nel menu:
1. come posso centrare la serie di blocchi rispetto al contenitore,
visto che attualmente sono allineati a sinistra?
2. non ho capito la faccenda del line-height, e in effetti
i blocchi sono tutti nella parte alta del loro contenitore...

Dopo mandami la parcella,
te la sei ampiamente meritata!!
M.

[samiel]

Ho fatto degli esperimenti, ma coronati da... insuccesso.
La centratura è e resta un obiettivo mancato :-(
Ci sono delle nozioni ancora fondamentali sulla composizione della pagina
che mi mancano. Ora, io ho i seguenti elementi:
1. body: 1240px
2. container: 1171px
3. wrapper: 1148px
4, nav_left: 150px
5. content:
6. nav_right: 240 px
Però, fra 1 e 2 (su entrambi i lati) ho uno spazio di 11.5px.
Anche fra 4 e 5 4 e fra 5 e 6 ho uno spazio di 11.5px.
E non capisco da dove salta fuori questa spaziatura...

Grazie
M.

[samiel]

In "CSS. Guida completa" l'autore afferma che"i box flottanti
si dispongono del tutto a destra o del tutto a sinistra, per cui è impossibile
centrare in orizzontale le voci del menu". Se ha ragione...
bisogna forse tornare al menu inline e lavorare su quello...
M.

[99caos]

no, puoi lavorare sull'elemento che lo contiene, dovresti però specificare una larghezza...

ad esempio se il contenitore è ul e i menu sono li puoi dire li { width: 50px } ul { width: 250px, margin: auto; } ipotizzando di avere 5 li da 50px... secondo me si può fare di meglio, ma anche io sono fermo ad un problema simile, e per questioni di contenimento ho espresso le misure in em così da non perdere l'allineamento con un ridimensionamento