sistemazione margini di lista in blocco con margini [era: [Tra poco fondo] "Loop"...]

**Gionnico** · 17-07-2006, 17:10

Dunque.. stò progettando la struttura del mio sito con i css. Dovrebbe essere qualcosa del genere:

codice:

               |
   TOP         | sottolink1 sottolink2
---------------+-----------------------
---------------+-----------------------
 link1         |
               |
 link2         |
               |
 link3         |
               |
 link4         |
---------------+-----------------------
---------------+-----------------------
   BOTTOM      |   copyright ecc.
               |

Per questo ho diviso con <div> le sezioni TOP, MENU, BOTTOM, ed impostato:

codice:

#top {
  margin: 0px 0px 0px;
  border-bottom: 5px solid #505050;
}
#menu {
  margin: 1px 0px 1px;
  border-top: 5px solid #505050;
  border-bottom: 5px solid #505050;
}
#bottom {
  margin: 0px 0px 0px;
  border-top: 5px solid #505050;
}

E fin qui, tutto bene.

Però a sua volta vorrei impostare uno spazio (di 1px) che separi tra loro i blocchi con i link, dunque:

codice:

#menu a {
  margin: 0px 0px 1px;
}

Il problema è che così mi separa l'ultimo link e la fine del MENU con un pixel prima del bordo.
Se il margine lo metto in alto per i link, la situazione è la stessa ma "di sopra"..

Non sò se mi sono spiegato bene, ma ecco il "loop" di cui parlavo...

Aiuto!!

PS: Non vorrei fare porcate tipo "l'ultimo link gli dò un id e gli dico di togliere i margini", che tra l'altro ho provato e non funziona....

**Mich_** · 17-07-2006, 17:25

Anzitutto attento ai titoli: che tu fonda o meno non aiuta a capire il problema.

Poi non hai postato il codice HTML (cosa che impedisce di capire cosa esattametne hai), e comunque non usi strutture corrette: una lista si fa con <ul> e[*].
Per poter sistemare i margini, conviene usare strutture rigide (blocchi), non cose elastiche (inline): in tal senso il[*] e` meglio del semplice <a>

Ma la soluzione nel tuo caso e` banale: metti un px di padding in alto al blocco, poi metti un px di margine in basso ad ogni struttura interna
(il padding del blocco contenitore corrisponde al margin del blocco contenuto).

**panta1978** · 17-07-2006, 17:37

Originariamente inviato da Gionnico

Però a sua volta vorrei impostare uno spazio (di 1px) che separi tra loro i blocchi con i link, dunque:

codice:

#menu a {
  margin: 0px 0px 1px;
}

Occhio, c'è un errore: margin può avere 1, 2 o 4 argomenti. Non 3 (vedi manuale CSS di base: http://css.html.it/guide/lezione/35/i-margini/)

**Mich_** · 17-07-2006, 17:47

Originariamente inviato da panta1978
Occhio, c'è un errore: margin può avere 1, 2 o 4 argomenti. Non 3 (vedi manuale CSS di base: http://css.html.it/guide/lezione/35/i-margini/)

A me non risulta ( http://www.w3schools.com/css/pr_margin.asp ) con 3 argomenti vuol dire che left e right sono uguali (mentre top e bottom sono specificati).
Magari e` una cosa che i browser accettano, anche se non e` ufficiale nella sintassi.

**Gionnico** · 17-07-2006, 17:51

Mi dispiace, ma anche col padding sembra non funzionare.. forse non ho capito bene....

Originariamente inviato da Mich_
non hai postato il codice HTML (cosa che impedisce di capire cosa esattametne hai)

Allora rimedio (ho semplificato molto ma il problema si vede ancora:

codice:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" >
  <head>
    <title>ciao</title>
    <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" href="stile.css" />
  </head>
  <body>
    <div id="riquadro_sinistro">
      <div id="top">
        <span>Testata</span>
      </div>
      <div id="menu">
        link1
        link2
        link3
        link4
      </div>
      <div id="bottom">
      <span>Info in coda.</span>
      </div>
    </div>
  </body>
</html>

codice:

#riquadro_sinistro {
  position: absolute; 
  top: 0px;
  left: 0px;
  width: 150px;
  height: 650px;
}
#menu a, #top, #bottom {
  display: block;
  padding: 5px 10px;
  border-width: 0px;
  color: #FFC;
  background: #444;
  border-right: 5px solid #505050;
}
#top {
  margin: 0px 0px 1px;
  border-bottom: 5px solid #505050;
}
#menu { 
  margin: 0px 0px 0px;
  border-top: 5px solid #505050;
  border-bottom: 5px solid #505050;
}
#bottom {
  margin: 1px 0px 0px;
  border-top: 5px solid #505050;
}
#menu a {
  margin: 1px 0px 0px;
}

... e comunque non usi strutture corrette: una lista si fa con <ul> e[*].
Per poter sistemare i margini, conviene usare strutture rigide (blocchi), non cose elastiche (inline): in tal senso il[*] e` meglio del semplice <a>

PS: per le liste intendi dire che questo:

codice:

      <div id="menu">
        link1
        link2
        link3
        link4
      </div>

dovrebbe diventare

codice:

      <div id="menu">
        <ul>[*]link1[*]link2[*]link3[*]link4[/list]
      </div>

questo?

edit: leggo ora le altre risposte:

Originariamente inviato da panta1978
Occhio, c'è un errore: margin può avere 1, 2 o 4 argomenti. Non 3 (vedi manuale CSS di base: http://css.html.it/guide/lezione/35/i-margini/)

L'ho letto proprio nella guida di html.it che indichi.. come dice il mod: "alto destra/sinistra basso"..

Comunque anche con 4 non cambia..

**Mich_** · 17-07-2006, 18:43

Anzitutto dovresti passare dal validatore HTML prima di postare. Altrimenti ti dico che la cosa non funziona dati gli errori di sintassi.

Poi e` inutile creare sovrastrutture (un <ul> esattamente contenuto in un <div>).
Dovrebbe diventare:

codice:

<ul id="menu">[*]link1[*]link2[*]link3[*]link4[/list]

Spero non stia testando con IE: non credo che possa funzionare bene XHTML 1.1 in IE

nel #menu devi inserire:
padding: 0 0 1px;
che completa il margin di 1 px che metti in alto in ciascun <a>

**Gionnico** · 17-07-2006, 19:02

Originariamente inviato da Mich_
Anzitutto dovresti passare dal validatore HTML prima di postare. Altrimenti ti dico che la cosa non funziona dati gli errori di sintassi.

codice:

    * Line : 14 (Level : 2) Redefinition of border-right-width : #top
    * Line : 14 (Level : 2) Redefinition of border-right-width : #menu a
    * Line : 14 (Level : 2) Redefinition of border-right-width : #bottom

Non posso farlo? Cio'è stò dicendo che questi 3 id devono avere bordo a destra, poi separatamente dico chi deve averli sopra e chi sotto..

Poi e` inutile creare sovrastrutture (un <ul> esattamente contenuto in un <div>).
Dovrebbe diventare:

codice:

<ul id="menu">[*]link1[*]link2[*]link3[*]link4[/list]

Beh, va bene.

Spero non stia testando con IE: non credo che possa funzionare bene XHTML 1.1 in IE

No, con Firefox..

nel #menu devi inserire:
padding: 0 0 1px;
che completa il margin di 1 px che metti in alto in ciascun <a>

Beh, si: il concetto è giusto.. il problema sono i bordi che crea: se metto il bordo in alto sotto "menu", prima lui mette uno spazio in alto per i tag <a> e sopra il bordo. E' brutto esteticamente, vorrei una cosa più lineare.
Anche il bordo basso non và, infatti sembra che "menu" metta prima il padding in basso e poi il bordo...

**Mich_** · 18-07-2006, 09:45

Finche` ci sono errori HTML non ha senso sistemare il CSS.

Stiamo parlando di XHTML 1.1. Non puoi usare la semantica che vuoi.
Non puoi scrivere un testo in un <div>. E uno <span> non puo` stare direttamente in un <div>.

Non riesco a capire la sematica del tutto, per cui non riesco ad aiutarti.
La scritta "Testata" e` un titolo? Allora va messa in un <hN> (N=1..6)
E cosa rappresenta il "Info in coda"?
Testata e infoincoda devono essere dei link?

Non avevo capito che fanno parte della stessa struttura: in tal caso i bordi vanno sistemati in altro modo, tenendo conto della struttura complessiva.
Se non sono titoli, probabilmente devono far parte dello stesso <ul> (anche se non sono link).

**Gionnico** · 18-07-2006, 13:55

Originariamente inviato da Mich_
Finche` ci sono errori HTML non ha senso sistemare il CSS.

Veramente io ho fatto il controllo e dice che ho un XHTML 1.1 corretto....

Stiamo parlando di XHTML 1.1. Non puoi usare la semantica che vuoi.
Non puoi scrivere un testo in un <div>. E uno <span> non puo` stare direttamente in un <div>.

Parli dei link... ma perché il validatore non dice nulla, allora?????

Prima dello span dovrei mettere una lista o un

? Ma perché non mi dà errore??

Non riesco a capire la sematica del tutto, per cui non riesco ad aiutarti.
La scritta "Testata" e` un titolo? Allora va messa in un <hN> (N=1..6)

Ci metto il logo della ditta: potrebbe essere un testo oppure un'immagine.

E cosa rappresenta il "Info in coda"?

Penso di metterci tipo: crediti, contatore visite, cambio lingua...

Testata e infoincoda devono essere dei link?

Alcuni si ed alcuni no.. non è sufficiente aggiungerci il tag <a> ?

Non avevo capito che fanno parte della stessa struttura: in tal caso i bordi vanno sistemati in altro modo, tenendo conto della struttura complessiva.

Ora stiamo ragionando solo sul "riquadro_sinistro"..

Se non sono titoli, probabilmente devono far parte dello stesso <ul> (anche se non sono link).

Ah. Poi la classe o l'id li aggiungo direttamente al[*] per cambiare dimensione e colore?

**Mich_** · 18-07-2006, 14:31

Originariamente inviato da Gionnico
Veramente io ho fatto il controllo e dice che ho un XHTML 1.1 corretto....
....
Parli dei link... ma perché il validatore non dice nulla, allora?????

Prima dello span dovrei mettere una lista o un

? Ma perché non mi dà errore??

Non so perche` non segnali l'errore. Non ho mai lavorato con XHTML 1.1: problemi di compatibilita`. E` praticamente impossibile sistemarlo per IE

Ci metto il logo della ditta: potrebbe essere un testo oppure un'immagine.
...
Penso di metterci tipo: crediti, contatore visite, cambio lingua...

E` sempre un problema di sematica: se uno e` l'header e l'altro il footer, non devono stare nella grafica della colonna sinistra

Alcuni si ed alcuni no.. non è sufficiente aggiungerci il tag <a> ?

Dipende. In tal caso pero` il CSS cambia: occorre ridefinire l'<a> interno a quel blocco.

Ora stiamo ragionando solo sul "riquadro_sinistro"..

Non ne sono sicuro. Vedi problema semantico di cui sopra

Ah. Poi la classe o l'id li aggiungo direttamente al[*] per cambiare dimensione e colore?

E` una possibilita`. Ma ricorda: prima il codice HTML (con semantica corretta), poi il CSS.
Se sbagli la semantica, e` molto piu` difficile sistemare il CSS.

Discussione: sistemazione margini di lista in blocco con margini [era: [Tra poco fondo] "Loop"...]

Strumenti discussione

Ricerca discussione

Visualizza

[Tra poco fondo] "Loop"...

Re: [Tra poco fondo] "Loop"...

Re: Re: [Tra poco fondo] "Loop"...

Permessi di invio