Html 5

**Nedyc** · 19-01-2011, 13:24

Salve a tutti,
mi sto avvicinando da poco ai nuovi standard html 5 e mi era sorto qualche dubbio...
Guardando questo schema:

Se io volessi inserire più menu oltre al nav dovrei arrangiarmi con gli aside?
E inoltre, dentro il nav devo solo ed esclusivamente mettere links?

**fcaldera** · 19-01-2011, 13:33

Originariamente inviato da Nedyc
Se io volessi inserire più menu oltre al nav dovrei arrangiarmi con gli aside?

Puoi usare più elementi nav in pagina, magari li distingui semanticamente con l'attributo 'role'

Originariamente inviato da Nedyc
E inoltre, dentro il nav devo solo ed esclusivamente mettere links?

Ovviamente NO, essendo un elemento sezione puoi metterci quello che vuoi (di norma una lista di link dovrebbe ad esempio essere appunto wrappata da una lista <ul>[*]...)
Nel nav principale ha comunque senso metterci tutto ciò che è inerente alla navigazione globale quindi anche i link al proprio profilo, l'informazione se utente loggato o no, link per il cambio lingua...

p.s.: non so che tipo di informazioni tu stia descrvendo, ma a naso metterei un article dentro section a meno che tu non abbia ovviamente un buon motivo di fare il contrario.

**Nedyc** · 19-01-2011, 13:45

Grazie mille

**Nedyc** · 19-01-2011, 14:46

Ditemi se ho capito bene, vi posto lo scheletro di una pagina che ho tentato di fare con html 5 e il suo relativo css, ditemi se ci sono errori o se qualcosa si poteva fare in modo più efficiente!

INDEX.PHP

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Alessandro Taverna | Classical Italian Pianist</title>
<link href="templates/alessandrotaverna/css/core.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<section id='headerBack'>
    	<div id='hbUp'>
        
        </div>
        <section id='hbDown'>
        
        </section>
    </section>
	<header>
    	<div id='logo'>
        	<a id='logoLeft'>Alessandro</a> <a id='logoRight'>Taverna</a> 
       </div>
       <nav>
       		Home
            Bio
            Concerti
            Stampa
            Repertorio
            Contatti
       </nav>   
    </header>
    
    <section id='center'>
    
    </section>
    
    <footer>
    	

2011© Alessandro Taverna Copyright | Web Master Dorigo Andrea</p>
    </footer>
</body>
</html>

CORE.CSS

codice:

@charset "UTF-8";
/* CSS Document */

html{		
	width:100%;
	height:100%;
}

body{
	margin:0;	
	width:1000px;
	height:100%;
	margin-left:auto;
	margin-right:auto;
}

#headerBack{
	position:absolute;
	left:0;
	width:100%;
	z-index:-1000;
}

#headerBack #hbUp{
	background-color:#000;
	width:100%;
	height:70px;
}

#headerBack #hbDown{
	background-color:#DDD;
	width:100%;
	height:450px;
}

header{
	display:table;	
}

header #logo{
	display:table-cell;
	width:300px;
	height:100px;
	background-color:#272727;
	vertical-align:middle;
	text-align:center;
}

header #logo #logoLeft{
	color:#FFF;
	font-size:30px;
}

header #logo #logoRight{
	color:#445566;
	font-size:30px;
}

header nav{
	display:table-cell;
	vertical-align:middle;
	width:700px;
	text-align:right;
}

header nav a{
	color:#445566;
	text-decoration:none;
	margin-right:20px;
	font-size:25px;
}

header nav a:hover{
	color:#FFF;
}

#center{
	width:100%;
	min-height:70px;
	background-color:#FFF;
	margin-top:370px;
}

footer{
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:50px;
	font-size:13px;
	background-color:#000;
	color:#445566;
	text-align:center;
}

footer a{
	color:#445566;
}

footer a:hover{
	color:#FFF;	
}

**Vincent.Zeno** · 19-01-2011, 14:50

Originariamente inviato da Nedyc
vi posto lo scheletro di una pagina che ho tentato di fare con html 5 e il suo relativo css, ditemi se ci sono errori o se qualcosa si poteva fare in modo più efficiente!

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

**webdemo** · 19-01-2011, 14:55

il doc type sarà:

codice:

<!DOCTYPE HTML>
<html>
<head>
<meta http-eq...>

scusa Vincent.Zeno abbiamo postato contemporaneamente
(quasi contemporaneamente)

**Nedyc** · 19-01-2011, 15:10

Ah, ok, me lo dava dreamweaver di default... per il resto va bene?

**Vincent.Zeno** · 19-01-2011, 16:28

direi di si...

**Nedyc** · 20-01-2011, 10:23

Danke

Discussione: Html 5

Strumenti discussione

Ricerca discussione

Visualizza

Html 5

Re: Html 5

Permessi di invio