Creare layout

Salve a tutti, vorrei realizzare un sito con un layout come quello dell'immagine postata qui di seguito: Layout

Da dove posso iniziare? Devo usare i frame?? Come posso fare quel menu??

Grazie a tutti!!


EDIT: Sto provando con i DIV.....secondo voi è la via giusta oppure sono completamente fuori strada??


FunCool: Non fare UP, usa il tasto Edita.

[dreadnaut]

è una buona via. Puoi provare ad adattare uno di questi esempi.

Sono riuscito a fare le varie "sezioni", ora come posso mettere il menu nella fascia orizzontale sotto il logo e sopra alla scritta first in source??
http://img81.imageshack.us/my.php?image=untitleddr6.jpg

[dreadnaut]

un menu orizzontale, come un menu verticale, è definito come una lista:

 <ul id="horizmenu">
  <li><a href="....">Menu 1</a></li>
  <li><a href="....">Menu 2</a></li>
  <li><a href="....">Menu 3</a></li>
  <li><a href="....">Menu 4</a></li>
  ...
 </ul> 

Per farlo orizzontale, devi definire il css come
#horizmenu LI { display: inline; }
oppure
#horizmenu LI { float: left; }

e poi aggiungere un po' di righe per dargli la "forma" che vuoi. ad esempio se ci infili anche un "margin-left: 1.5em;" lasci un po' di spazio fra i nomi, etc...

Non riesco a metterlo in orizzontale.....ho fatto come hai scritto tu, ho creato la lista e poi con i css ho cercato di metterlo in orizzontale...ma niente, rimane sempre in verticale.

[dreadnaut]

questo sarebbe il codice completo - cosi' a me funziona:

#horizmenu {
  display: inline;
  margin: 0;
  padding: 0;
}

#horizmenu LI {
  display: inline;
} 

forse mancava l'inline su #horizmenu

Ok, ci sono riuscito, c'erano un pò di div in conflitto...ora però non riesco a togliere uno spazio.....nell'immagine si capisce meglio.
http://img137.imageshack.us/img137/2825/untitledzn4.jpg

[dreadnaut]

senza vedere il codice è un po' dura
puo' essere il margin di qualche elemento, che crea dello spessore, oppure esserci del testo o qualcosa di mezzo, tipo un <br> che non dovrebbe.

prova a dare "margin: 0;" alla colonna di sinistra e guarda che succede.

Ok, ci sono riuscito....mancava un padding, boh.

Ora non riesco a mettere il titolo a destra dell'immagine (logo), se scrivo qualcosa me la mette sotto e non in alto dove la voglio io....come nell'immagine:

http://img316.imageshack.us/img316/3690/untitlednm7.jpg

[dreadnaut]

a questo punto, per poter dire qualcosa ci vuole proprio il codice :-p

altrimenti lo metti in un <h1 id="titolo">...</h1> all'inizio, e lo "stili" con qualcosa di simile:

#titolo {
position: absolute;
text-align: center;
top: 0;
}

Ho provato a fare come hai scritto sopra, funziona, solo che la scritta me la mette tutta a sinistra, sopra l'immagine, ho provato a fare text-align: right ma nn si muove da lì, come mai??

Ci sono riuscito.....grazie lo stesso!

[dreadnaut]

quando dai un position: absolute ( o anche un float: left/right ), gli elementi prendono la larghezza minima possibile. Di solito un H1 è largo come l'elemento che lo contiene (ad esempio, largo come la pagina), ma se ci metti absolute diventa largo come il testo che ci metti dentro. E a quel punto, destra o sinistra non si muoverà di molto

Cosi, per elementi in posizione absolute, devi specificare entrambe le posizioni: quella verticale con top o bottom, e quella orizzontale, ad esempio con left: 0; oppure right: 80%;

Come devo fare per farsi che cliccando su una voce del menu orizzontale si apre la pagina soltanto sotto, nella zona grigia dell'immagine? Spero di essermi spiegato...

http://img178.imageshack.us/img178/6665/untitledyc0.jpg

Il div grigio dell'immagine si chiama <div id="content"> mentre quello del menu orizzontale <div id="navigation">. Come faccio a cliccare su una voce del menu e ad aprire la rispettiva pagine nel div content??


EDIT:
Avrei anche un altro problema....

nel menu orizzontale vorrei che quando l'utente passa con il mouse sopra l'immagine questa cambi con un'altra immagine...ho fatto così e funziona:
li a{
text-decoration:none;
padding:1px 47px;
background:transparent url(home.jpg) no-repeat scroll 0 0;
}

li a:hover{
text-decoration:none;
padding: 17px 47px;
background:transparent url(homeSel.jpg) no-repeat scroll 0 0;
}

Solo che questo funziona solo quando c'è una sola immagine (home.jpg), io invece dovrei metterne almeno 5 che cambiano quando il mouse passa sopra....come posso fare??
Ho provato a fare qualcosa del genere <li id="home"><a href="#"></a></li> e cambiare i css ma non funge....grazie.

[seneca]

E' la terza volta che ti viene segnalato di non fare UP; inoltre se ti viene cancellato un messaggio un'ora fa, non mi sembra il caso di riscrivere subito dopo...
Quando qualcuno potrà, ti darà sicuramente aiuto.
Ciao!

[dreadnaut]

aprire in un div:
non si può, non funzionano come i frame

immagini di sfondo:
se vuoi un immagine diversa per ogni A, devi dargli un id diverso e definire i diversi sfondi nel css

#home {   background: ...  }
#home:hover {   background: ...  }

#links { background: ... }
#links:hover { background: ... }

[.....]

<li><a id="home" href="home.php">Home</a></li>
<li><a id="links" href="links.php">Links</a></li> 

Scusate, però non volevo fare un up, ho scritto un altro problema che avevo...tutto qua.

Grazie dreadnaut, funziona!

Quindi non posso aprire una pagina in un altro div....sei sicuro?? Perchè io ho visto qualche sito dove viene utilizzato questo metodo...grazie!

[funcool]

Quindi non posso aprire una pagina in un altro div....sei sicuro?? Perchè io ho visto qualche sito dove viene utilizzato questo metodo...grazie!

Dovresti usare l'AJAX o affini.

Scusate, però non volevo fare un up, ho scritto un altro problema che avevo...tutto qua.

Se non volevi farlo perché lo hai fatto?

[dreadnaut]

aprire in un div non è possibile, si sono sicuro

Le altre possibilità sono:

• metti un iframe al posto del div (bleeaaurrgghhh)
• linki ad un'altra pagina dove tutto il menu/header/colonna è ripetuto (standard)
• metti tutto il contenuto nella stessa pagina, e mostri/nascondi via javascript (ad esempio con DomTab) (pesante e non bello se hai più pagine con contenuti diversi)
• richiami il contenuto da mettere nel DIV via javascript + XMLHttpRequest, e hai le pagine pronte sul sito per essere richiamate in questo modo (funziona solo con js, i motori di ricerca ti odieranno)

Se hai voglia di sbatterti si può fare una soluzione ibrida js/xmlhttprequest/php di questo tipo:

tutte le tue pagine devono essere .php, e se richiamate con un parametro del tipo ?solocontenuto=1 allora danno in output solo il contenuto del div, senza il codice che lo circonda, altrimenti danno la pagina intera

nel tuo menu, metti sia un js che richieda le pagine nella suddetta "versione ridotta" e le inserisca nel div, sia i normali link alle pagine intere, nel caso javascript non sia disponibile.

Funziona, degrada decentemente, è leggibile dai motori di ricerca. Ti devi sbattere un filo, e alla fine (come tutte le pagine ajax) mandi a quel paese il funzionamento del pulsante Back.

Dato il rapporto sbattimento/vantaggi/svantaggi, ti direi di fare le pagine normali e bon

Se hai voglia di sbatterti si può fare una soluzione ibrida js/xmlhttprequest/php di questo tipo:

tutte le tue pagine devono essere .php, e se richiamate con un parametro del tipo ?solocontenuto=1 allora danno in output solo il contenuto del div, senza il codice che lo circonda, altrimenti danno la pagina intera

nel tuo menu, metti sia un js che richieda le pagine nella suddetta "versione ridotta" e le inserisca nel div, sia i normali link alle pagine intere, nel caso javascript non sia disponibile.

Funziona, degrada decentemente, è leggibile dai motori di ricerca. Ti devi sbattere un filo, e alla fine (come tutte le pagine ajax) mandi a quel paese il funzionamento del pulsante Back.

Dato il rapporto sbattimento/vantaggi/svantaggi, ti direi di fare le pagine normali e bon

Chi mi saprebbe dare una piccola mano a fare questa cosa? Grazie!!

[funcool]

Comincia a cercare con Google la parola "ajax" e comincia a studiartelo. Non è molto difficile.

Comincia a cercare con Google la parola "ajax" e comincia a studiartelo. Non è molto difficile.

Mi sapresti consigliare una buona guida per favore? :)

[funcool]

Mi sapresti consigliare una buona guida per favore? :)

Facendo una "difficilissima" ricerca con Google ho trovato questo.

Comincia a cercare con Google la parola "ajax" e comincia a studiartelo. Non è molto difficile.

Parole al vento...

L'ho fatta la ricerca e anche io ho trovato quel risultato.....anche se gia la conoscevo quella guida....era solo per sapere se ne conoscevi altre....cmq non sei obbligato a rispondere e fare lo sbruffone.....grazie.

EDIT: Ho letto la guida di html.it però adesso non saprei da dove cominciare....anche perchè non ho trovato nessun esempio che mi potrebbe aiutare.....chi mi da qualche dritta per favore? Grazie


Ho provato a fare così...ho fatto questo javascript:

function script1() {
var e = document.getElementById("content");
e.innerHTML = "Benone!";
}

E questo è un piccolo pezzo della pagina xhtml:

<div id="content">
Ciao come stai?
</div>
<input type="button" value="Esegui esempio" onClick="script1()" />


In questo modo cliccando sul bottone che si trova nel div alla sinistra appare nel div content la scritta "benone". Solo che a me servirebbe far caricare una pagina nel div e non una scritta.....come posso fare?!

Ho provato a fare così...ma non funge forse perchè vuole una stringa:

function script1() {
var e = document.getElementById("content");
e.innerHTML = www.gazzetta.it;
}

Chi mi da una mano?? Grazie

per sicurezza, javascript non può uscire dal dominio in cui si trova, quindi se il tuo sito è kutolenko7.altervista.org , con javascript non puoi entrare in gazzetta.it.

però con ajax puoi chiedere a uno script php sul tuo sito di andare a prendere la pagina www.gazzetta.it e dartela.

Ma penso che con altervista non si possa fare, mi ero già informato con un amico(un certo Marco) per uno script da usare per una radio online..

Ad ogni modo, se vuoi fare le cose perfettine, innerHTML non è una proprietà standard, e l'attributo onclick va scritto tutto in minuscolo, sennò non ti fanno passare il tirocinio

Chi mi da una mano con ajax?!? Come ho gia detto prima non riesco a caricare una pagina (che si trova nel mio dominio) nel DIV centrale cliccando su una voce del menu del DIV laterale. Ci sto provando ma non ci riesco....grazie!

Ho risolto...grazie lo stesso.

COme si fa a mettere un css dentro una funzione?

Cioè ho fatto questa piccola funzione:

function showData() {
var e = document.getElementById("content");
e.innerHTML = "Modifica lingua o origine dati..."
setTimeout("CallDSN()", 1000);
}

e vorrei che la scritta "Modifica lingua o origine dati..." fosse bianca e in mezzo alla pagina. Grazie

[funcool]

e.innerHTML = "<div style=\"text-align:center; color:#FFFFFF;\">Modifica lingua o origine dati...<\/div>";