Ciao MAttia, mi scuso per il rompimento di scatole..ma sto realizzando un minisito su un libro horror...e mi piacerebbe sistemare il layout e ottenere un risultato simile a questa immagine.
http://www.cadutaponies.altervista.org/i...A_HOME.jpg
tutto il materiale (da me abbozzato) lo trovi qui:
http://www.cadutaponies.altervista.org/inquisitore (gli accessi te li avevo già forniti)
A parte sistemare il menu (e spostarlo leggermente più a DX) avrei bisogno di spostare un pò verso SX la scritta in basso "scritto da..."
Mi puoi aiutare??
Grazie mille
Saluti
Devi creare un
div che conterrà tutto il sito a cui darai tramite CSS una larghezza massima e la posizione centrale.
Quindi sarà una cosa del tipo:
Codice:
#iddeldivcontenitore{
width: 960px;
margin: 0 auto;
}
OK, sistemato...grazie mille!!
Adesso però non riesco a sistemare il menu...dici che dovrei metterlo separato come header.php??
Sei riuscito a dare un'occhiata ai file??
Saluti
Io ho guardato solo il risultato HTML direttamente dal mio browser.
Se la parte che cambia è solo quella centrale e il menù è sempre uguale, ti conviene mettere il menù in un file a parte. Questo è solo un fatto di comodità, in modo che, se dovessi cambiare qualcosa del menù, modificheresti solamente un file.
Per mettere il menù in orizzontale puoi fare in due modi:
- dai ai vari li un float: left tramite CSS e aggiungi un border per fare la riga bianca;
- crei un p dove metti i vari elementi del menù separati con un |.
Intendi una cosa del genere??
Codice:
<div id="header"></div>
<div id="menu">
<ul>
<li><p align="left"><font face="Arial" size="3"><a style="text-decoration: none"><font color="#FFFFFF">HOME</font></a></p> | </li>
<li><p align="left"><a style="text-decoration: none" href="contenuti.htm"><font color="#FFFFFF">CONTENUTI</font></a></p> | </li>
<li><p align="left"><a style="text-decoration: none" href="autore.htm"><font color="#FFFFFF">AUTORE</font></a></p> | </li>
<li><p align="left"><a style="text-decoration: none" href="contatti.htm"><font color="#FFFFFF">CONTATTI</font></a></font></li></p>
</ul>
</div>
per cortesia potresti farmi anche un esempio di come usare il float: left ??
Thanks
Saluti
Utilizzando la proprietà
float, il codice HTML sarebbe questo:
Codice:
<div id="menu">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="contenuti.htm">CONTENUTI</a></li>
<li><a href="autore.htm">AUTORE</a></li>
<li class="last"><a href="contatti.htm">CONTATTI</a></li>
</ul>
</div>
Questo il codice CSS:
Codice:
#menu ul li{
float: left;
font-family: Arial, sans-serif;
font-size: 15px;
border-right: 1px solid #FFF;
}
#menu ul li.last{
border-right: 0;
}
#menu ul li a{
text-decoration: none;
color: #FFF;
}
Invece, per quanto riguarda il secondo modo che ti ho spiegato, il codice HTML sarebbe questo:
Codice:
<div id="menu"><p><a href="#">HOME</a> | <a href="contenuti.htm">CONTENUTI</a> | <a href="autore.htm">AUTORE</a> | <a href="contatti.htm">CONTATTI</a></p></div>
Questo il codice CSS:
Codice:
#menu p{
font-family: Arial, sans-serif;
font-size: 15px;
}
#menu p a{
text-decoration: none;
color: #FFF;
}
Ciao MAttia, grazie per la solita puntuale risposta...però purtroppo le pagine vengono vuote...mi spiego...questo è il codice che ho messo nel file menu.php:
Codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
<head>
<title> L'INQUISITORE </title>
<style type="text/css">
body{
background-color: #000;
}
#menu ul li{
float: left;
font-family: Arial, sans-serif;
font-size: 15px;
border-right: 1px solid #FFF;
}
#menu ul li.last{
border-right: 0;
}
#menu ul li a{
text-decoration: none;
color: #FFF;
}
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="contenuti.php">CONTENUTI</a></li>
<li><a href="autore.php">AUTORE</a></li>
<li class="last"><a href="contatti.php">CONTATTI</a></li>
</ul>
</div>
</body>
</html>
Ho anche provato il secondo metodo...ma il risultato è il medesimo...ovvero pagina nera e vuota:
http://www.cadutaponies.altervista.org/i...e/menu.php
Cosa sbaglio??
Saluti
Chand
Se il file "menu.php" viene incluso in altri file, non devi mettere i tag
html,
head e
body perché ci sono già nel file che li contiene.
In questo momento vedi tutto nero perché non hai chiuso il tag
style. Comunque ti conviene mettere tutto il CSS in un file esterno.
Quando hai finito il sito, passalo sul
validatore del W3C così da eliminare eventuali errori.
Bene...adesso ho diviso il menu e la parte finale (quella del copyright) in due fil che vengono inclusi a inizio e a fine pagina (sempre entro il DIV ovviamente)...se riesci a dare un'occhiata e dirmi se ho fatto tutto correttamente mi faresti un grandissimo piacere
Grazie mille per la gentilezza
Saluti
Chand
p.s. per il css aspetto di vedere se è tutto corretto fin ora...dopodichè potrò creare il file a parte con tutti gli effetti del caso (assieme al mio amico)
p.s.2 Ho avuto problemi col validatore del W3C...mi da errore
Devi eliminare il tag
title dal file "menu.php" e spostare il tag
style[i] nel tag [i]head della pagina principale.
Non usare il parametro
align, ma utilizza l'attributo CSS
text-align.
Non usare le virgolette (') ma i doppi apici (") per includere i parametri dei vari tag (per esempio,
width="100").
Nelle immagini non usare il parametro
border, ma utilizza l'attributo CSS
border; nelle immagini utilizza il parametro
alt e chiudi i tag:
Codice:
<img src="immagine.jpg" width="100" height="50" alt="Descrizione immagine" />
Non usare il tag
center, ma utilizza un
div con l'attributo CSS
text-align settato a "center".
Non utilizzare il tag
font, ma utilizza il CSS per applicare i vari attributi.
A un certo punto utilizzi il tag
pre, in quel caso specifico sarebbe più corretto utilizzare un tag
br.
Chiudi i tag
br:
Non inserire direttamente il simbolo del copyright, ma utilizza la relativa entità (
©).