Posizionamento pagina tramite utilizzo <div></div>

**Alesorta** · 04-02-2013, 14:08

Salve a tutti,

innanzitutto, essendo il mio primo post mi presento: non sono un professionista del settore ma per diletto ho deciso di incamminarmi nel lungo e tortuoso cammino che idealmente dovrebbe portarmi attraverso HTML, CSS e JavaScript. Se le forze e le capacità lo permetteranno mi addentrerò anche in JQuery e PHP, ma penso che già i primi tre diano abbastanza carne al fuoco.

E infatti, comincio subito con l'esporre i miei problemi.
Recandovi a questo indirizzo troverete la mia pagina di prova. Vi prego di sorvolare sul fattore estetico: è, per l'appunto, una semplice pagina per esperimenti. In calce al presente messaggio riporterò i codici HTML e CSS.

Cliccando nel link a destra dell'immagine, aprirete una pagina in cui (in maniera molto spartana) è indicata la struttura che vorrei dare alla homepage (per semplicità riporto il link).

Già nella sezione header ho riscontrato i primi problemi. Infatti anche se in apparenza tutto sembrerebbe funzionare alla perfezione a tuttoschermo (o perlomeno sul mio monitor 1366x768), non appena andiamo a ridimensionare la pagina del browser, gli elementi se ne vanno un pochino per i fatti loro.

Il mio quesito è dunque:
-come posso fissare gli elementi di modo che mantengano la posizione anche ridimensionando il browser?

Ovviamente accetterò ben volentieri qualsiasi suggerimento o critica non specifica con il mio problema.

Grazie di tutto. Di seguito, i codici HTML e CSS

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pagina di prova</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div id="container">
<div id="header">
<div id="sezioneSXh">[img]ken.jpg[/img]</div>
<div id="sezioneDXh">Collegamento immagine struttura del sito</div>
</div>
<div id="topmenu">Topmenu orizzontale sotto header</div>
<div id="content">
<div id="sezioneSXc">Contenuto pagina sinistra</div>
<div id="sezioneCc">Contenuto pagina centro</div>
<div id="sezioneDXc">Contenuto pagina destra</div>
</div>
<div id="footer">Footer</div>
</div>
</body>
</html>

CSS

codice:

body { background-color: Lime; } 
#container { background-color: Aqua; 
                  width: 60%; 
                  margin: auto; 
                  padding: 10px; } 
#header { background-color: Blue; 
               padding: 10px; 
               height: 150px; } 
#sezioneSXh { background-color: Fuchsia; 
                     width: 150px; 
                     height: 150px; 
                     float: left; } 
#sezioneDXh { background-color: Gray;
                     float: right;
                     height: 150px; 
                     width: 630px; }

**Prill** · 04-02-2013, 15:09

Il mio quesito è dunque: -come posso fissare gli elementi di modo che mantengano la posizione anche ridimensionando il browser?

in header hai specificato dimensioni precise per i due div affiancati col float, ma la dimensione del contenitore è del 60%. Questo comporta che a una risoluzione molto alta (o rimpicciolendo collo zoom) i due div appaiano molto distanziati, e a una risoluzione bassa (o ingrandendo con lo zoom o ridimensionando la finestra) i due div si dispongano su righe diverse (perché quel 60% è inferiore ai 630 + 150 pixel dei div flottanti).
Puoi impostare una dimensione fissa anche sul container (in questo caso i div manterranno sempre la stessa distanza fra loro e a risoluzioni basse avrai uno scrolling orizzontale ma non si produrrà l'accapo). Oppure, lasciando la dimensione in percentuale sul container dovresti assegnargli anche un min-width (larghezza minima), oppure dovresti dare una dimensione percentuale anche al div destro e a quello sinistro

**Alesorta** · 04-02-2013, 15:23

Originariamente inviato da Prill
in header hai specificato dimensioni precise per i due div affiancati col float, ma la dimensione del contenitore è del 60%. Questo comporta che a una risoluzione molto alta (o rimpicciolendo collo zoom) i due div appaiano molto distanziati, e a una risoluzione bassa (o ingrandendo con lo zoom o ridimensionando la finestra) i due div si dispongano su righe diverse (perché quel 60% è inferiore ai 630 + 150 pixel dei div flottanti).
Puoi impostare una dimensione fissa anche sul container (in questo caso i div manterranno sempre la stessa distanza fra loro e a risoluzioni basse avrai uno scrolling orizzontale ma non si produrrà l'accapo). Oppure, lasciando la dimensione in percentuale sul container dovresti assegnargli anche un min-width (larghezza minima), oppure dovresti dare una dimensione percentuale anche al div destro e a quello sinistro

Preciso, chiaro ed efficace. Ho seguito i tuoi consigli ed ora tutto funziona (non ho ancora uppato le modifiche online).

Dato che le due soluzioni avevano lo stesso effetto ho optato per dare una dimensione in px all'header di modo da avere una riga di codice in meno.

Grazie mille.

**Alesorta** · 04-02-2013, 17:02

Complico ulteriormente la situazione.

Come è possibile ottenere un effetto per il quale gli elementi div si ridimensionano e posizionano, similmente a quanto accade qui? Riuscire ad ottenere un risultato del genere aiuterebbe non poco nella strutturazione di pagine ottimizzate per il mobile.

Inoltre questo sito presenta anche un'altra "chicca", che da quel che so dovrebbe essere una caratteristica comune a molti template di CMS (in questo caso penso si tratti di Joomla): il menu orizzontale che diventa menu a tendina quando la larghezza della pagina diviene inferiore alla larghezza dell'elemento. Si tratta di una funzionalità avanzata? Se è relativamente semplice da ottenere, come i può fare?

**Prill** · 05-02-2013, 18:16

Guarda qui http://css-tricks.com/convert-menu-to-dropdown/

**Alesorta** · 06-02-2013, 01:38

Grazie mille Prill. Non ho ancora avuto modo di vedere (e, conseguentemente, di sperimentare) il link che hai fornito, ma non appena ci lavorerò provvederò ad informare sull'esito.

Nel frattempo volevo portare alla vostra attenzione altri quesiti sorti durante le mie esercitazioni (penso che mi capiterà piuttosto spesso di utilizzare questo forum).

Il sito di riferimento rimane sempre questo. Colgo l'occasione per chiedere se è il caso che posti codice HTML o se posso dare per scontato che utlizziato gli strumenti per sviluppatori dei vostri browser. Magari solo una sezione di codice con le indicazioni della riga? E per il CSS?

Ecco i quesiti:
-l'altezza che ho definito per il mio #containter è un valore ben preciso. Posso, ed eventualmente come, attribuire una altezza variabile in base alle dimensioni degli elementi contenuti in #container?

-nel testo della sezione destra dell'header, sopra e sotto al testo sono presenti dei margini senza che però abbia impostato nulla. Sono dovuti ai parametri standard di

</p> oppure ho sbagliato qualcosa nel codice?

-Ho alcuni problemi a centrare perfettamente il menu orizzontale. Questo perché a quanto pare lo spessore dei bullet (rimossi con list-style: none; )di quella che prima era una UL, rimane nonostante scompaia l'elemento grafico. Si può eliminare questo spessore o è una cosa con la quale bisogna convivere?

-I link del menu vorrei fare in modo che indirizzassero attraverso una nuova finestra. Dato che vorrei provare a mantenermi in modalità "strict" e dato che le soluzioni esposte qui prevedono una minima conoscenza di JavaScript (che non possiedo), è possibile sapere se esistono modi per utilizzare la funzione "target: _blank" attraverso i fogli di stile?

Grazie dell'attenzione

**sgogghy** · 06-02-2013, 03:16

l'altezza che ho definito per il mio #containter è un valore ben preciso. Posso, ed eventualmente come, attribuire una altezza variabile in base alle dimensioni degli elementi contenuti in #container?

Basta eliminarla e il container si adatterà automaticamente.

nel testo della sezione destra dell'header, sopra e sotto al testo sono presenti dei margini senza che però abbia impostato nulla. Sono dovuti ai parametri standard di

</p> oppure ho sbagliato qualcosa nel codice?

Si i tag

generano questi spazi

Ho alcuni problemi a centrare perfettamente il menu orizzontale. Questo perché a quanto pare lo spessore dei bullet (rimossi con list-style: none; )di quella che prima era una UL, rimane nonostante scompaia l'elemento grafico. Si può eliminare questo spessore o è una cosa con la quale bisogna convivere?

Togli la width:60% dell'ul e impostala a quella del menu (760px) poi imposti una larghezza in base ai li (4 li ->760/4 ->imposti una width di 190 per ogni li)

I link del menu vorrei fare in modo che indirizzassero attraverso una nuova finestra. Dato che vorrei provare a mantenermi in modalità "strict" e dato che le soluzioni esposte qui prevedono una minima conoscenza di JavaScript (che non possiedo), è possibile sapere se esistono modi per utilizzare la funzione "target: _blank" attraverso i fogli di stile?

No solo javascript. Ti sconsiglio vivamente di prendere l'abitudine di impostare i target con il Javascript, lavoro troppo certosino (io lavoro sempre in transitional)

Discussione: Posizionamento pagina tramite utilizzo <div></div>

Strumenti discussione

Ricerca discussione

Visualizza

Posizionamento pagina tramite utilizzo <div></div>

Permessi di invio