De nieuwe wereld van HTML5
Ik ben de nieuwe wereld van HTML5, CSS3 en PHP ingestapt en loop direct tegen de eerste "problemen" aan.
Met behulp van onderstaande code wil ik het plaatje in het midden van het scherm plaatsen maar het aloude "align" wordt in HTML5 niet meer ondersteund.
Zo zijn er veel meer basisbegrippen uit de vroegere HTML-periode verdwenen.
Wie kan mij een hint geven hoe en waar deze verdwenen parameters worden opgevangen?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE HTML>
<html>
<head>
<title>Eerste scherm in HTML5</title>
</head>
<body style="margin-left: 0; margin-top: 0; width: 90%;" >
<header>
<img style="alignment-adjust: central;" src="../media/header.jpg" alt="" />
</header>
</body>
</html>
<html>
<head>
<title>Eerste scherm in HTML5</title>
</head>
<body style="margin-left: 0; margin-top: 0; width: 90%;" >
<header>
<img style="alignment-adjust: central;" src="../media/header.jpg" alt="" />
</header>
</body>
</html>
Zoals te zien is heb ik bij <img /> getracht het plaatje in het midden te krijgen maar dat is niet gelukt.
George
Verder moet je direct na <head> de charset definiëren:
Code (php)
1
<meta charset="utf-8">
Alleen horizontaal centreren kan worden gedaan met:
Code (php)
1
2
3
4
5
2
3
4
5
header img
{
width: XXXpx; // vul je de breedte in
margin: 0 auto;
}
{
width: XXXpx; // vul je de breedte in
margin: 0 auto;
}
Als je verticaal (en horizontaal) wilt centreren zul je eens hier naar moeten kijken: http://d-graff.de/fricca/center.html
Ome Ko op 23/01/2012 22:04:46:
Doet het gewoon met <center> </center>
<center> in HTML5??
Ga liever kijken op W3 Schools, daar vind je zo'n beetje alles wat je weten wilt, qua algemene zaken. En voor specifieke zaken als positioneren, centreren en meerlagige navmenuutjes heb ik nog een paar tutorials geschreven, die je kunt vinden op Website Laten Maken Amsterdam.
Gewijzigd op 24/01/2012 02:51:31 door Frank C
Frank C:
Ga liever kijken op W3 Schools, daar vind je zo'n beetje alles wat je weten wilt, qua algemene zaken.
Ga liever kijken in de echte documentatie van W3C: http://www.w3.org/TR/
W3Schools is niet van W3C en ze leren je veel verkeerde dingen aan, uitleg: http://www.w3fools.com/
Het aantal onvolkomenheden dat de auteurs van W3 Fools vonden op W3 Schools valt in het niet bij de gigantische omvang van W3 Schools. En geen van de gevonden fouten kan als fataal bestempeld worden.
In ieder geval is het zo dat didactiek ook belangrijk is. En daar blinkt W3 Schools in positieve zin uit, terwijl W3 Org zo ongeveer het schoolvoorbeeld is van slechte didactiek.
Wat mij betreft zijn de de auteurs van W3 Fools dus zelf fools.
Geloof mij nou, ik heb alle hypes al langs zien komen.
Jij gebruikt zeker ook nog framesets / frames of tabellen voor de opmaak van een website?
@Wouter
Bedankt... Nooit geweten dat er inderdaad zoveel fouten op staan. Kan hier wel het een en ander van op steken. Ik gebruik het best vaak als referentie (uiteraard wel een !DOCTYPE en ook UTF-8 codering, maar het is wel handig om snel even wat op te zoeken met een kort stukje uitleg
@Frank
Ik ben het met je eens wat didactiek betreft, maar om te zeggen dat het geen fouten zijn is kort door de bocht. Ze raden je zaken aan met aanbevelingen en voorbeelden die gewoon NIET WAAR zijn op basis van argumenten die ze ofwel zelf verzinnen ofwel argumenten die niet van toepassing zijn op dat specifieke voorbeeld.
Gewijzigd op 24/01/2012 11:52:29 door Andre Sep
Een goede en betrouwbare uitleg is van eminent belang.
George
Ik heb zelf 2 linkjes naar de W3C docs staan in mijn bookmarks:
- http://www.w3.org/TR/1999/REC-html401-19991224/ - de HTML4.01 Specification
- http://www.w3.org/TR/CSS2/ - de CSS2 Specification
Het zijn wel hele grootte documenten. Wat je het best kunt doen is Ctrl + f gebruiken en dan de tag intypen die je zoekt. Je wordt dan naar de juiste inhoudspagina doorverwezen en dan moet je op die link klikken en tataa, daar krijg je de documentatie.
Je kan eventueel ook de documentatie van What WG gebruiken, de tegenhanger van W3C.
Maar een site die ik ook zeker wil aanraden is Mozilla Developer Network (MDN). Een zeer duidelijke wiki waarin alles uitgebreid en goed wordt uitgelegd.
HTML5 kost alleen maar geld, terwijl HTML1.1 geld oplevert.
Het staat best heel interessant, dat HTML5 en tablelessdesign, maar het is businesswise gewoon ontzettend onnozel omdat het moeilijk doen is waar het makkelijk kan.
Ome Ko op 24/01/2012 15:02:45:
Het staat best heel interessant, dat HTML5 en tablelessdesign, maar het is businesswise gewoon ontzettend onnozel omdat het moeilijk doen is waar het makkelijk kan.
Totdat je opeens je site opnieuw wilt ontwerpen.... kan je echt alles opnieuw gaan doen. Het spijt me, maar jouw argumenten lijken eerder te komen van iemand die niet mee kan met de nieuwste technieken, dan iemand die allebei kent en er een overwogen keuze in heeft gemaakt.
Als je goede CSS schrijft werkt het voor altijd. Hoef je nooit iets aan te passen, ja als je dat soort verkeerde technieken gebruikt blijf je aanpassen.
En tabellen, wel eens naar SEO gekeken? HTML/Text ratio is een belangrijk punt wat je helemaal verpest met tabellen.
Ook eens gekeken naar wat nou echt HTML is? Wat nou het gebruik van de juiste HTML is?
HTML1.1, je weet hoop ik wel waar je over praat? Als je dat namelijk weet ga je sowieso voor iets als HTML2.0. Waarom? Omdat HTML1.1 het slechtste is wat je kunt verzinnen. Elk browser had zijn eigen tags, er waren toen totaal geen standaarden en alles was 1 grootte troep.
Ome Ko op 24/01/2012 15:02:45:
Het staat best heel interessant, dat HTML5 en tablelessdesign, maar het is businesswise gewoon ontzettend onnozel omdat het moeilijk doen is waar het makkelijk kan.
Nee, ik ga niks zeggen... nee, hou je in Ozzie... ik moet ik moet... niks zeggen...
nee, niet doen... niet...
WAT EEN DOMME OPMERKING!!!
sorry... ik kon me echt niet langer inhouden :(
Ik heb de suggesties van Wouter opgepakt en ga de stap maken naar HTML5 in combinatie met CSS3.
Blijf ik echter wel zitten met de vraag: Hoe krijg ik e.e.a. mooi in het midden van mijn scherm.
Even alles op een rij:
1. Ik heb de volledige menustructuur in een database (tabel) opgeslagen. Dit werkt echt goed en ga ik dus ook niet verlaten
2. Het menu wordt middels css opgebouwd
3. Blijf nu de vraag over: Gebruik ik een tabel in HTML5 om dit menu op te bouwen of biedt HTML5 mij andere, wellicht betere, mogelijkheden.
Allereerst de code uit mijn css:
De code zou de tabel die ik gebruik met een breedte van 90%, moeten centreren
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
/* Opbouw van het horizontale menu */
.menutabel {
width: 90%;
table-layout: auto;
background-color: white;
text-align: center;
}
/* Opbouw cellen horizontaal menu */
.menucel {
width: 80%;
text-align: left;
}
.menutabel {
width: 90%;
table-layout: auto;
background-color: white;
text-align: center;
}
/* Opbouw cellen horizontaal menu */
.menucel {
width: 80%;
text-align: left;
}
De CSS-code voor het menu:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
#pcm{display:none;}
ul.pureCssMenu ul{display:none}
ul.pureCssMenu li:hover>ul{display:block}
ul.pureCssMenu ul{position: absolute;right:-1px;top:98%;}
ul.pureCssMenu ul ul{position: absolute;right:98%;top:-2px;}
ul.pureCssMenu,ul.pureCssMenu ul {
margin:0px;
list-style:none;
padding:0px 2px 2px 0px;
background-color:#ffffff;
background-repeat:repeat;
border-color:#AAAAAA;
border-width:1px;
border-style:solid;
}
ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
display:block;
zoom:1;
float: left;
}
ul.pureCssMenu ul{
width:0px;
}
ul.pureCssMenu li{
display:block;
margin:2px 0px 0px 2px;
font-size:0px;
}
ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
outline-style:none;
}
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
display:block;
vertical-align:middle;
background-color:#ffffff;
border-width:0px;
border-color:#6655ff;
border-style:solid;
text-align:left;
text-decoration:none;
padding:4px;
_padding-left:0;
font:normal 11px Verdana;
color: #444444;
text-decoration:none;
cursor:default;
}
ul.pureCssMenu span{
overflow:hidden;
}
ul.pureCssMenu li {
float:left;
}
ul.pureCssMenu ul li {
float:none;
}
ul.pureCssMenu ul a {
text-align:left;
white-space:nowrap;
}
ul.pureCssMenu li.sep{
text-align:center;
padding:0px;
line-height:0;
height:100%;
}
ul.pureCssMenu li.sep span{
float:none; padding-right:0;
width:5;
height:16;
display:inline-block;
background-color:#AAAAAA; background-image:none;}
ul.pureCssMenu ul li.sep span{
width:80%;
height:3;
}
ul.pureCssMenu li:hover{
position:relative;
}
ul.pureCssMenu li:hover>a{
background-color:#4792E6;
border-color:#665500;
border-style:solid;
font:normal 11px Verdana;
color: #ffffff;
text-decoration:none;
}
ul.pureCssMenu li a:hover{
position:relative;
background-color:#4792E6;
border-color:#665500;
border-style:solid;
font:normal 11px Verdana;
color: #ffffff;
text-decoration:none;
}
ul.pureCssMenu li.dis a {
color: #AAAAAA !important;
}
ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:4px;width:16px;
height:16px;
}
ul.pureCssMenu ul img {width:16px;
height:16px;
}
ul.pureCssMenu img.over{display:none}
ul.pureCssMenu li.dis a:hover img.over{display:none !important}
ul.pureCssMenu li.dis a:hover img.def {display:inline !important}
ul.pureCssMenu li:hover > a img.def {display:none}
ul.pureCssMenu li:hover > a img.over {display:inline}
ul.pureCssMenu a:hover img.over{display:inline}
ul.pureCssMenu a:hover img.def{display:none}
ul.pureCssMenu span{
display:block;
background-image:url(./images/arrv_anim_1.gif);
background-position:right center;
background-repeat: no-repeat;
padding-right:11px;}
ul.pureCssMenu li:hover>a>span{ background-image:url(./images/arrv_anim_1o.gif);
}
ul.pureCssMenu a:hover span{ _background-image:url(./images/arrv_anim_1o.gif)}
ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{background-image:url(./images/arr_double_1.gif)}
ul.pureCssMenu ul li:hover > a span{ background-image:url(./images/arr_double_1o.gif);}
ul.pureCssMenu ul{display:none}
ul.pureCssMenu li:hover>ul{display:block}
ul.pureCssMenu ul{position: absolute;right:-1px;top:98%;}
ul.pureCssMenu ul ul{position: absolute;right:98%;top:-2px;}
ul.pureCssMenu,ul.pureCssMenu ul {
margin:0px;
list-style:none;
padding:0px 2px 2px 0px;
background-color:#ffffff;
background-repeat:repeat;
border-color:#AAAAAA;
border-width:1px;
border-style:solid;
}
ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
display:block;
zoom:1;
float: left;
}
ul.pureCssMenu ul{
width:0px;
}
ul.pureCssMenu li{
display:block;
margin:2px 0px 0px 2px;
font-size:0px;
}
ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
outline-style:none;
}
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
display:block;
vertical-align:middle;
background-color:#ffffff;
border-width:0px;
border-color:#6655ff;
border-style:solid;
text-align:left;
text-decoration:none;
padding:4px;
_padding-left:0;
font:normal 11px Verdana;
color: #444444;
text-decoration:none;
cursor:default;
}
ul.pureCssMenu span{
overflow:hidden;
}
ul.pureCssMenu li {
float:left;
}
ul.pureCssMenu ul li {
float:none;
}
ul.pureCssMenu ul a {
text-align:left;
white-space:nowrap;
}
ul.pureCssMenu li.sep{
text-align:center;
padding:0px;
line-height:0;
height:100%;
}
ul.pureCssMenu li.sep span{
float:none; padding-right:0;
width:5;
height:16;
display:inline-block;
background-color:#AAAAAA; background-image:none;}
ul.pureCssMenu ul li.sep span{
width:80%;
height:3;
}
ul.pureCssMenu li:hover{
position:relative;
}
ul.pureCssMenu li:hover>a{
background-color:#4792E6;
border-color:#665500;
border-style:solid;
font:normal 11px Verdana;
color: #ffffff;
text-decoration:none;
}
ul.pureCssMenu li a:hover{
position:relative;
background-color:#4792E6;
border-color:#665500;
border-style:solid;
font:normal 11px Verdana;
color: #ffffff;
text-decoration:none;
}
ul.pureCssMenu li.dis a {
color: #AAAAAA !important;
}
ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:4px;width:16px;
height:16px;
}
ul.pureCssMenu ul img {width:16px;
height:16px;
}
ul.pureCssMenu img.over{display:none}
ul.pureCssMenu li.dis a:hover img.over{display:none !important}
ul.pureCssMenu li.dis a:hover img.def {display:inline !important}
ul.pureCssMenu li:hover > a img.def {display:none}
ul.pureCssMenu li:hover > a img.over {display:inline}
ul.pureCssMenu a:hover img.over{display:inline}
ul.pureCssMenu a:hover img.def{display:none}
ul.pureCssMenu span{
display:block;
background-image:url(./images/arrv_anim_1.gif);
background-position:right center;
background-repeat: no-repeat;
padding-right:11px;}
ul.pureCssMenu li:hover>a>span{ background-image:url(./images/arrv_anim_1o.gif);
}
ul.pureCssMenu a:hover span{ _background-image:url(./images/arrv_anim_1o.gif)}
ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{background-image:url(./images/arr_double_1.gif)}
ul.pureCssMenu ul li:hover > a span{ background-image:url(./images/arr_double_1o.gif);}
... en dit is de code uit mijn php/html-bestand
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<?php
/**
* @author George van Baasbank
* @copyright 2012
*/
session_start();
error_reporting(0);
// Constanten voor mysql_connect() insluiten:
require_once("mysql_connect.inc.php");
// Databaseverbinding openen:
$verbinding = mysqli_connect(MYSQL_SERVER, MYSQL_GEBRUIKERSNAAM, MYSQL_WACHTWOORD, MYSQL_DATABASENAAM) or die("Database niet beschikbaar");
// Tabel selecteren met hoofdmenu
$sql = "SELECT * FROM menu WHERE actief = 'Ja' AND menunaam = 'hoofdmenu' ORDER BY volgnummer";
$cResultmenu = mysqli_query($verbinding,$sql);
// Database sluiten
mysqli_close($verbinding);
?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Language" content="en" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="google" content="notranslate" />
<meta name="description" content="Website VU Amsterdam" />
<meta name="keywords" content="VU, Amsterdam" />
<meta name="author" content="Ermelo Software (2012)" />
<meta name="robots" content="index, nofollow" />
<meta name="revisit-after" content="3 days" />
<title><?php echo $ES_Welkom ; ?></title>
<link rel="stylesheet" type="text/css" href="../css/vu.css" />
<link rel="stylesheet" type="text/css" href="../css/headermenu.css" />
<link rel="shortcut icon" href="media/favicon.ico" type="image/x-icon" />
</head>
<body>
<table class="menutabel">
<tr>
<td class="menucel">
<ul class="pureCssMenu pureCssMenum">
<?php while($row=mysqli_fetch_array($cResultmenu)){ ?>
<?php $cX = "<li><span class='".$row['class1']."'><a href='".$row['url']."' target='".$row['target']."' title='".$row['tip_nl']."'><span class='".$row['class2']."'>".$row['menu_nl']."</span></a></span></li>"; ?>
<?php echo $cX; ?>
<?php } ?>
</ul>
</td>
</tr>
</table>
</body>
</html>
/**
* @author George van Baasbank
* @copyright 2012
*/
session_start();
error_reporting(0);
// Constanten voor mysql_connect() insluiten:
require_once("mysql_connect.inc.php");
// Databaseverbinding openen:
$verbinding = mysqli_connect(MYSQL_SERVER, MYSQL_GEBRUIKERSNAAM, MYSQL_WACHTWOORD, MYSQL_DATABASENAAM) or die("Database niet beschikbaar");
// Tabel selecteren met hoofdmenu
$sql = "SELECT * FROM menu WHERE actief = 'Ja' AND menunaam = 'hoofdmenu' ORDER BY volgnummer";
$cResultmenu = mysqli_query($verbinding,$sql);
// Database sluiten
mysqli_close($verbinding);
?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Language" content="en" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="google" content="notranslate" />
<meta name="description" content="Website VU Amsterdam" />
<meta name="keywords" content="VU, Amsterdam" />
<meta name="author" content="Ermelo Software (2012)" />
<meta name="robots" content="index, nofollow" />
<meta name="revisit-after" content="3 days" />
<title><?php echo $ES_Welkom ; ?></title>
<link rel="stylesheet" type="text/css" href="../css/vu.css" />
<link rel="stylesheet" type="text/css" href="../css/headermenu.css" />
<link rel="shortcut icon" href="media/favicon.ico" type="image/x-icon" />
</head>
<body>
<table class="menutabel">
<tr>
<td class="menucel">
<ul class="pureCssMenu pureCssMenum">
<?php while($row=mysqli_fetch_array($cResultmenu)){ ?>
<?php $cX = "<li><span class='".$row['class1']."'><a href='".$row['url']."' target='".$row['target']."' title='".$row['tip_nl']."'><span class='".$row['class2']."'>".$row['menu_nl']."</span></a></span></li>"; ?>
<?php echo $cX; ?>
<?php } ?>
</ul>
</td>
</tr>
</table>
</body>
</html>
Wie kan/wil mij een stap verder helpen??
Gewijzigd op 24/01/2012 16:32:43 door George van Baasbank
Als je dan toch in html5 aan de slag gaat, dan zou ik je in ieder geval willen adviseren om eens te kijken naar de nieuwe <nav> (navigation) tag.
Check: http://www.w3schools.com/html5/tag_nav.asp
Meer -en betere- informatie: https://developer.mozilla.org/en/Sections_and_Outlines_of_an_HTML5_document
De breedte van mijn pagina wordt 90% van de breedte van mijn sc herm en natuurlijk moet alles gecentreerd komen.
Code (php)
Toevoeging op 24/01/2012 17:05:03:
Kijk voor het resultaat op http://vu.vanbaasbank.nl en zie hoe het menu er bij staat
Toevoeging op 24/01/2012 17:24:54:
Bij het gebruik van het <nav>-tag krijg ik wel een lijn onder de tekst. Weet iemand hoe ik deze kan uitzetten?
Ik zal mij inhouden en hier verder niet op reageren... Duidelijk is mij wel dat jij de uitdaging niet aan wil gaan om alles netjes met <span>s en <div>s te doen (wat nog maar een topje van de berg is van wat je allemaal met HTML en CSS kan doen (om al HELEMAAAAAAL niet te spreken over HTML5 icm CSS3 en de nieuwere browsers, lees: IE8+ MF3+ en de mij bekende Opera, Safari en Chrome)
Toevoeging op 24/01/2012 17:53:12:
Met
Code (php)
1
text-decoration: none;