The Best Geek Forum

aiuto con codice html

Hai bisogno di aiuto per il tuo codice?? Posta qui il tuo problema! Degli utenti specializzati provvederanno subito ad assisterti!

Moderatore: Moderatore in prova

sono ignorante in materia avrei bisogno di un codice html per una presentazione della mia mappa concettuale durante l'esame di maturità. qualcosa di semplice ed efficace. potete postare qua se avete qualche codice già fatto oppure aiutarmi a sviluppare il mio.
la mia idea è questa:
home page con scritta centrale gigante "TOTALITARISMO" con possibilità tramite href di essere indirizzati ad una nuova pagina in cui tramite menù a tendina orizzontale ho la possibilità di aprire a seconda della tendina una materia specifica.
avrei grande necessità soprattutto della home page con la scritta gigante a centro pagina che veramente non so come si faccia.
posto sotto quello che ero riuscito a eleborare raggruppando i vari esercizi riguardo la seconda pagina con il menù a tendina.


CODICE HTML

Codice: Seleziona tutto

<HTML>
<HEAD>
<title>pagina 2</title>
<link rel=stylesheet href="menufifa.css" type="text/css">
</HEAD>
<BODY background="imm9.JPG" align="center" bgcolor="black">
<div id="hormenu"> 
 <ul> 
 <li><a href="home.html"><font color="yellow" align="center" size="600" face="911_porscha"  ><b>ANALISI&nbspTERMINE&nbspTOTALITARISMO</b></font></a> 
 </li>  
 </div>
 <div id="hormenu">
 <ul> <!– Lista principale: definisce il menu nella sua interezza –>
 <li><a href="trofei buffon.html">STORIA</a> <!– Primo list-item, prima voce del menu –>
 <ul> <!– Lista annidata: voci del sotto-menu –>
 <li><a href="homefifaita.html">AAAA</a></li>
  <li><a href="homefifa.html">BBBB</a></li>
 </ul>
 </li> 
<ul> <!– Lista principale: definisce il menu nella sua interezza –>
 <li><a href="video buffon.html">FILOSOFIA </a> <!– Primo list-item, prima voce del menu –>
 <ul> <!– Lista annidata: voci del sotto-menu –>
 <li><a href="homefifaita.html">CCCC</a></li>
  <li><a href="homefifa.html">DDDD</a></li>
 </ul>
 </li> 
 <ul> <!– Lista principale: definisce il menu nella sua interezza –>
 <li><a href="#">ITALIANO</a> <!– Primo list-item, prima voce del menu –>
 <ul> <!– Lista annidata: voci del sotto-menu –>
  <li><a href="homefifaita.html">EEEE</a></li>
  <li><a href="homefifa.html">FFFF</a></li>
 </ul> 
 </li>
 <ul> <!– Lista principale: definisce il menu nella sua interezza –>
 <li><a href="#">FISICA</a> <!– Primo list-item, prima voce del menu –>
 <ul> <!– Lista annidata: voci del sotto-menu –>
  <li><a href="homefifaita.html">EEEE</a></li>
  <li><a href="homefifa.html">FFFF</a></li>
 </ul> 
 </li>
 <ul> <!– Lista principale: definisce il menu nella sua interezza –>
 <li><a href="#">SCIENZE</a> <!– Primo list-item, prima voce del menu –>
 <ul> <!– Lista annidata: voci del sotto-menu –>
  <li><a href="homefifaita.html">EEEE</a></li>
  <li><a href="homefifa.html">FFFF</a></li>
 </ul> 
 </li>
 <ul> <!– Lista principale: definisce il menu nella sua interezza –>
 <li><a href="#">INGLESE</a> <!– Primo list-item, prima voce del menu –>
 <ul> <!– Lista annidata: voci del sotto-menu –>
  <li><a href="homefifaita.html">EEEE</a></li>
  <li><a href="homefifa.html">FFFF</a></li>
 </ul> 
 </li> 
 <ul> <!– Lista principale: definisce il menu nella sua interezza –>
 <li><a href="#">INFORMATICA</a> <!– Primo list-item, prima voce del menu –>
 <ul> <!– Lista annidata: voci del sotto-menu –>
  <li><a href="homefifaita.html">EEEE</a></li>
  <li><a href="homefifa.html">FFFF</a></li>
 </ul> 
 </li>
 </div>
 </body>
</HTML>
CODICE CSS

Codice: Seleziona tutto

div#hormenu {
 width: 100%; 
float: left; 
margin: 0; 
padding: 0;
 border-top: 1px solid black;
 background: black;
opacity:0.4;
filter:alpha(opacity=40);
 }
 div#hormenu ul {
 margin: 0;
 padding: 0;
 list-style-type: none;
 }
 div#hormenu li {
 width:100px;
 float:left;
 margin: 0;
 padding: 0;
 border-right: 1px solid black;
 color:background="SFONDO.jpg" ;
 }
 div#hormenu a {
 display: block;
 padding: 5px;
 color: white;
 text-decoration: none;
 }
 div#hormenu a:hover {
 background-color: #000033;
 color: orange;
 text-decoration: none;
 }
 div#hormenu li ul {display: none}
 div#hormenu li:hover ul {
 display: block;
 position: absolute;
 z-index:1;
 width:150px;
 padding: 0;
 margin: 0 0 0 -1px;
 border:1px solid black;
 background: black;
 }
 div#hormenu li li {border: none; width: 150px;} 
div#hormenu li li a {padding: 2px 2px 2px 10px;}

GRAZIE MILLE IN ANTICIPO SPERO MI POSSIATE DARE UNA MANO PERCHE' SONO DISPERATO, GRAZIE MILLE DAVVERO
Ciao al di là del tuo codice che sicuramente sarà più preciso per quanto riguarda l'idea che hai in mente, però così è un po' confusionale.

innanzitutto 'stilizzi' tutto con il css e ti consiglio di utilizzare molto più i label all'interno dei div dove con i div rappresenti le classi e con i label gli id relativi per ogni elemento

html:

Per quanto riguarda la pagina con scritta totalitarismo è molto semplice fai una cosa in css:

HTML Con link totalitarismo cambia colore al passaggio:

Codice: Seleziona tutto

<html>
   <body>
       <head>
         <link href="tua_grafica.css" rel="stylesheet" style="text/css">
         <title> Titolo Pagina </title>
       </head>
 
            <!-- Parte del titolo con reindirizzamento -->
 
            <div class="wrapper_superiore"> 
                 <a href="./menu_a_tendina.html" target="_blank" id="grafica_titolo">TOTALITARISMO</a>
            </div>

   </body>
</html>
Css:

Codice: Seleziona tutto


#grafica_titolo,visible{
  position: relative;
  text-align: center;
  color: red;
  left: 50%;
  size: 5%:  /* usa le percentuali per il responsive modifica tu a seconda della posizione */
  top: 10%;
}

#grafica_titolo:hover{
  color: #FFF;    /* cambio colore al passaggio del mouse */
}
Per quanto riguarda il menù a tendina che dicevi nella pagina dove avviene il reindirizzamento:

Codice: Seleziona tutto

<html>
 <body>
 <head>
 <title> Titolo pagina </title>
 <link href="tua_grafica.css" style="text/css" rel="stylesheet">
 </head>
  <div id="materie">
		<ul>
			<li>
				<a href="#">Meterie</a>
				<ul>
					<li><a href=".informatica.html">Informatica</a></li>
					<li><a href=".scienze.html">Scienze</a></li>
					<li><a href="./motorie.html">Motorie</a></li>
				</ul>
			</li>
		</ul>
	</div>
 </body>
</html>
Css:

Codice: Seleziona tutto

#materie ul {
	padding: 0;
	margin: 0;
}

#materie li {
	position: relative;
	width: 200px;
	text-align: center;
	list-style: none;
}

#materie li a {
	background-color: black;
	color: red;
	padding: 15px 20px;
	text-decoration: none;
	display: block;
}

#materie li a:hover {
	background-color: #22FF86;
	text-shadow: 0px 0px 1px #FFF;
}

#materie ul ul {
	position: absolute;
	top: 48px;
	visibility: hidden;   //qui gioca la comparsa del menù a tendina
}

#materie ul li:hover ul {
	visibility: visible;
}


Spero di esserti stato utile :)