affiancare oggetti in div ..

[angelicab]

il flash .. è una semplice animazione con foto .. senza nessun link ...
i testi .. sono dei link a pagine del sito .. vorrei realizzare un piccolo elenco su 3 righe
- mail della città
- ricerca
- ultimi aggiornamenti

[pierofix]

Ok. Un primo abbozzo di struttura, quindi, potrebbe essere il seguente:

<div id="testata">

   [img]logo.png[/img]

   <object id="presentazione">
      
   </object>

   <ul id="menu">[*]mail della città[*]ricerca[*]ultimi aggiornamenti[/list]

</div>

Occhei?

[angelicab]

si potrebbe andare ..
quello che non riesco a fare .. è affiancare gli elementi

[pierofix]

Eheheh. Cosa potrei inventarmi per farvi capire il concetto? Proviamo così. Una pagina web è una canzone, suonata con la chitarra. La canzone ha solo due note: mi (alto) e si. Insomma, le prime due corde. Le dita sulla tastiera non servono: approfittate per pulirvi le orecchie o il naso. La canzone fa così: mi, si. Basta. Punto. Una pizzicata alla prima corda, una alla seconda. Due note distinte. Bene: avete appena abbozzato la vostra pagina web intelligente.

La prima nota consiste nel dare un senso alle informazioni, usando quindi XHTML. La seconda consiste nel vestire la struttura, creare la grafica, con i CSS.

Prima una nota, poi l'altra.

Tu adesso mi hai detto: "Ok per la struttura, ma non riesco ad affiancare gli elementi". Per forza: per adesso stiamo suonando la prima nota. Quando suoni la prima non devi preoccuparti della seconda, quella viene dopo.

Il tuo intervento dovrebbe essere stato, piuttosto: "Bene. Adesso abbiamo la struttura. Come proseguire con lo stile?" Spero di essermi spiegato.

[angelicab]

Bene. Adesso abbiamo la struttura. Come proseguire con lo stile?

[pierofix]

Proviamo ad abbozzare qualcosa? Partiamo, come al solito, parandoci un po' il sederino:

*
{
   margin:0; padding:0;
}

Dopodichè possiamo fare le prime considerazioni: il logo e la presentazione animata avranno dimensione fissa. Ipotizziamo che il logo abbia dimensione 100×100 px² e la presentazione 300×100:

*
{
   margin:0; padding:0;
}
#logo
{
   width:100px; height:100px;
}
#presentazione
{
   width:300px; height:100px;
}

Una soluzione sarebbe usare i posizionamenti assoluti. Proviamoci:

*
{
   margin:0; padding:0;
}
#testata
{
   position:relative;
}
   #logo
   {
      width:100px; height:100px;
   }
   #presentazione
   {
      position:absolute; left:100px;
      width:300px; height:100px;
   }
   #menu
   {
      position:absolute; top:0; right:0;
      list-style:none;
      text-align:right;
   }

And here it is. Ultimamente sto lavorando poco con i CSS, quindi probabilmente ci sono soluzioni più performanti. Non ho nemmeno la possibilità di fare dei test di compatibilità, quindi spero che funzioni bene. Fai delle prove e dicci.