CSS - Layout pagina

[Cosmy]

Ciao a tutti.
E' una settimana che mi sto scervellando per riuscire ad affiancare due tag nello stesso box.
Si tratta di un'immagine relativamente grande mappata (una cartina della toscana per intendersi) e una lista UL con elencati tutti i link della mappa (so che è ridondante ma lo devo inserire per questioni di accessibilità).
In teoria essendo due elementi inline dovrebbe farlo automaticamente, no?
Ho provato anche ad inscatolarli dentro uno <span> senza risultato e infine in un div con display: inline;
Avete qualche consiglio in materia?

Vorrei l'elenco dei link alle province accanto alla cartina.

Grazie e scusate il disturbo, ma su queste questioni mi incarto che è una meraviglia.

[Mich_]

Due elementi inline vengono affiancati prendendo come riferimento la base delle linee o il centro.

Comunque una cartina ed un link (ho scritto un, coscientemente) e` difficile che li puoi allineare.

Cosi` ad occhio tu vuoi una cosa di questo tipo:

/-----------------------------\
|                             |  link1
|                             |  link2
|                             |  link3
|                             |  link4
|      qui la cartina         |  ...
|                             |
|                             |
|                             |
|                             |
|                             |
\-----------------------------/

E questo esclude che i due oggetti possano essere trattati come inline.

Dovresti trattarli invece come block, inserendo la lista di link in un apposito div ed affiancandoli attribuendo
float left;
a tutti e due
(poi ricordati di mettere un clear left; al div che segue).

[Cosmy]

Esatto è quello che cerco.
Ora provo.
Grazie mille

[Cosmy]

sembrerebbe non funzionare..

questa è la parte del mio stylesheet:

.link li {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 75%;
        font-weight: bold;
        list-style-position: inset;
        list-style-type: square;
        line-height: 24px;
        text-decoration: none;
}

.link img{
        display: block;
        float: left;
}

.link ul {
        display: block;
        float: left;
}

e questa la sua implementazione xhtml:

<ul class="link">
 <li class="link">
<ul>
<map bla bla>
[img]cartina3.gif[/img]

Il clear left; non saprei come inserirlo essendo l'ultimo div della pagina.

Ah il tutto è inserito dentro ad un blocco #content.

(per inciso ci sarebbe un altro blocco, il menù laterale, che è un float: left; eppure anche inserendo il clear left; nel blocco dei contenuti seguente, non funziona)

[Mich_]

Ci sono degli errori nel tuo CSS.

Nell'HTML non c'e` nessun elemento <img> interno ad un elemento con class="link".

Con il tuo HTML, devi scrivere:
ul.link { ... }
li.link { ... }
img.link { ... }

Per il resto il CSS mi sembra OK (ma non lo ho analizzato tutto).

Nota:
il nome link ha un significato nel DOM, per cui ti sconsiglo di usarlo come nome della classe.

[Cosmy]

scusa, ma nel mio tag img c'è specificata la classe.
E non è la stessa cosa scrivere ul.link o .link ul??

ora cambio il nome della classe (enjoy the power of vim editor )

[Mich_]

Originariamente inviato da Cosmy
scusa, ma nel mio tag img c'è specificata la classe.
E non è la stessa cosa scrivere ul.link o .link ul??

No, sono due cose molto diverse (come accennavo sopra).

Il CSS e` un linguaggio molto formale: "piccoli" errori di questo tipo non sono permessi.

[Cosmy]

in effetti cambiando come dici te funziona (anche se ora ho un altro problema che tra poco vi espongo).
A questo punto non capisco la differenza tra ul.links e .links ul. Me la potete spiegare un attimo?
Perchè eseguendo questa modifica su altre righe analoghe invece non funziona..

Tornando al mio esempio, è vero che ora mi affianca immagine e links, però me li tira fuori dal flusso della pagina e quindi il div in cui erano incastonate si chiude prima. C'è una soluzione o l'unica cosa da fare è togliere i bordi a quel div?

ecco la situazione attuale:

 /-----------------------------------------------\
 |                     div #content              |
 |     /-----------------------------\           |  
 |    |                             |  link1     |
 |    |                             |  link2     |
 \----|                             |  link3 ----/
      |                             |  link4
      |      qui la cartina         |  ...
      |                             |
      |                             |
      |                             |
      |                             |
      |                             |
      \-----------------------------/

invece vorrei:

 /------------------------------------------------\
 |                     div #content               |
 |     /-----------------------------\            |  
 |     |                             |  link1     |
 |     |                             |  link2     |
 |     |                             |  link3     |
 |     |                             |  link4     |
 |     |      qui la cartina         |  ...       |
 |     |                             |            |
 |     |                             |            |
 |     |                             |            |
 |     |                             |            |
 |     |                             |            |
 |     \-----------------------------/            |
 |                                                |
 \------------------------------------------------/
 fine pagina

[Mich_]

A questo punto non capisco la differenza tra ul.links e .links ul. Me la potete spiegare un attimo?

ul.links
si riferisce ad un tag di questo tipo:
<ul class="links">

.links ul
si riferisce ad un tag ul contenuto all'interno di un altro oggetto di classe links:
<div class="links">
...
<ul>

Lo spazio nelle definizioni dei CSS significa discendente (non necessariamente diretto)

PS: anche links e` un oggetto del DOM, e non conviene usarlo (ci possono essere browser che fanno confusione).

----

Il posizionamento dei vari blocchi dipende da un errato innestamento dei blocchi, o dall'uso di posizionamenti assoluti.

Se non lo trovi, posta il codice HTML e il CSS relativi al blocco content, alla cartina e al blocco con i link.

[Cosmy]

Grazie mille delle chiarificazioni.
Forse perchè trattasi di css, ho erroneamente trascurato un po' troppo la sintassi
mi dovrò rifare..

Per quanto riguarda l'altro problema ho trovato su internet un paio di possibili soluzioni, ma tutte presentano qualche contro indicazione.
o mettere nel div che contiene i float:
float: left;
width: 100%;

ma così mi stacca il content dal blocco head superiore (che contiene anch'esso un'immagine float che però voglio che per ragioni d'impaginazione rimanga fuori dal flusso della pagina)

altrimenti un'altra soluzione carina è inserire nel div contente i float:
width: 100%;
overflow: auto;

questa non mi dispiacerebbe se non fosse che mi ha riempito di barre di scorrimento il div.. ed io non le volevo..