Menu' sopra un'immagine di sfondo

[a.desantis]

Ciao ragazzi
questo e' il mio primo post.
Vorrei realizzare un sito dedicato alla fotografia, il mio hobby.
Voorei realizzare un home page tipo questa : www.macrophotography.com , con un menu' posizionato sulla destra dell'immagine di sfondo.
Sto utilizzando il layout offerto da Html.it, e sto cercando di riadattarlo ( www.macrofotografia.net)...quello con posizionamenti assoluti.
Sto studiando un libro sui CSS, una guida di Meyer, ma sto agli inizi.
Per posizionare il menu sull'immagine, che usereste voi?
Grazie
Antonio

[thomas_anderson]

ciao!
più della guida di Eric Meyer ti consiglio quella di Gianluca Troiani:

http://www.constile.org/css_guida_completa/

nel senso che quella di Meyer è ricalcata sulle specifiche ed è più teorica, quella di Troiani più pratica. detto questo il tuo caso si risolve posizionando il menu o con la proprietà 'float' o con 'position', stando attento a dare al menu questa formattazione:

<ul id="menu">[*]voce 1[*]idem
[omissis][/list]

a cui potresti applicare:

#menu {
  width: 200px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: transparent;
}

#menu li {
  margin: 0.5em 0; /* 0.5em distanza standard link */
  padding: 0;
}

#menu a {
  display: block;
  width: 200px;
  margin: 0;
  padding: 0;
  background: transparent;
  text-align: left;
  font-weight: bold;
  text-decoration: none;
  color: #fff;
 }
#menu a:hover {
  background: transparent;
  color: #ffc;
  text-decoration: none;
  text-align: center; /* piccolo effetto dinamico che sposta il testo */
}

nota che io ho usato una misura fissa per il menu (200px), ma tu puoi usare sia em che %. per il posizionamento, scegli tu quello che ti è + congeniale. ciao

[a.desantis]

Originariamente inviato da thomas_anderson
ciao!
più della guida di Eric Meyer ti consiglio quella di Gianluca Troiani:

http://www.constile.org/css_guida_completa/

nel senso che quella di Meyer è ricalcata sulle specifiche ed è più teorica, quella di Troiani più pratica. detto questo il tuo caso si risolve posizionando il menu o con la proprietà 'float' o con 'position', stando attento a dare al menu questa formattazione:

<ul id="menu">[*]voce 1[*]idem
[omissis][/list]

a cui potresti applicare:

#menu {
  width: 200px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: transparent;
}

#menu li {
  margin: 0.5em 0; /* 0.5em distanza standard link */
  padding: 0;
}

#menu a {
  display: block;
  width: 200px;
  margin: 0;
  padding: 0;
  background: transparent;
  text-align: left;
  font-weight: bold;
  text-decoration: none;
  color: #fff;
 }
#menu a:hover {
  background: transparent;
  color: #ffc;
  text-decoration: none;
  text-align: center; /* piccolo effetto dinamico che sposta il testo */
}

nota che io ho usato una misura fissa per il menu (200px), ma tu puoi usare sia em che %. per il posizionamento, scegli tu quello che ti è + congeniale. ciao

Grazie dei consigli
E' proprio il concetto di position che mi riesce ostico: o meglio, non riesco a capire bene la posizione di un elemento rispetto a che o cosa e in quali casi.
Antonio

[fcaldera]

Originariamente inviato da a.desantis
Grazie dei consigli
E' proprio il concetto di position che mi riesce ostico: o meglio, non riesco a capire bene la posizione di un elemento rispetto a che o cosa e in quali casi.
Antonio

se hai dieci minuti puoi dare un'occhiata qui
http://www.barelyfitz.com/screencast...s/positioning/

[fra84]

senza aprire nuovi post..
siccome interessava anche a me la stessa cosa.. premettendo che sto facendo un sito in html volevo chiedervi dove bisogna mettere l'immagine di sfondo del manù???
nel codice css?? se è si come?
grazie

[bagu]

ul {background-image:url(tua-foto.jpg)}
cosi metti una immagine di sfondo a tutto il menù, attenzione che si ripete in orizzontale e verticale fino ad occupare tutto lo spazio

[fra84]

grazie Bagu... solo che nn essendo moolto pratico dei css nn sò dove devo mettere questo codice: nell'html?? o nel file css???...
considerando sempre il codice scritto sopra da thomas anderson!!!

[bagu]

Originariamente inviato da bagu
ul {background-image:url(tua-foto.jpg)}
cosi metti una immagine di sfondo a tutto il menù, attenzione che si ripete in orizzontale e verticale fino ad occupare tutto lo spazio

#menu {
  width: 200px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: transparent;
}
#menu ul {background-image:url(tua-foto.jpg)}

#menu li {
  margin: 0.5em 0; /* 0.5em distanza standard link */
  padding: 0;
}

#menu a {
  display: block;
  width: 200px;
  margin: 0;
  padding: 0;
  background: transparent;
  text-align: left;
  font-weight: bold;
  text-decoration: none;
  color: #fff;
 }
#menu a:hover {
  background: transparent;
  color: #ffc;
  text-decoration: none;
  text-align: center; /* piccolo effetto dinamico che sposta il testo */
}