Modo discussione | Modo lineare

Chandler · 30-04-2010, 18:48

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

***Mattia*** · 01-05-2010, 07:55

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;

}

Chandler · 01-05-2010, 14:55

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

***Mattia*** · 02-05-2010, 09:32

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 |.

Chandler · 03-05-2010, 19:28

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

***Mattia***

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;

}

Chandler · 05-05-2010, 19:32

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

***Mattia*** · 06-05-2010, 08:38

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.

Chandler · 07-05-2010, 01:45

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

***Mattia*** · 07-05-2010, 07:34

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:

Codice:

<br />

Discussioni correlate...
Discussione:		Autore	Risposte:	Letto:	Ultimo messaggio
	Layout con posizioni assolute	Chandler	10	723	13-07-2011 09:54 Ultimo messaggio: Mattia