De nieuwe wereld van HTML5

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Pagina: 1 2 volgende »

George van Baasbank

George van Baasbank

23/01/2012 18:15:08
Quote Anchor link
Hallo allemaal,

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)
PHP script in nieuw venster Selecteer het PHP script
1
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>


Zoals te zien is heb ik bij <img /> getracht het plaatje in het midden te krijgen maar dat is niet gelukt.


George
 
PHP hulp

PHP hulp

29/03/2024 12:51:35
 
Mathias B

Mathias B

23/01/2012 18:21:24
Quote Anchor link
Alle stijlen worden nu geregeld in de css, dus die inline attributen mag je vervangen. Ik zou proberen de linkse en rechtse margin op auto te zetten.
 
Wouter J

Wouter J

23/01/2012 18:23:25
Quote Anchor link
Inline CSS moet je niet gebruiken. Plaats alle CSS in een stylesheet (.css) en link de style met een element doormiddel van een ID of Class.

Verder moet je direct na <head> de charset definiëren:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<meta charset="utf-8">


Alleen horizontaal centreren kan worden gedaan met:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
header img
{
  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

Ome Ko

23/01/2012 22:04:46
Quote Anchor link
Doet het gewoon met <center> </center>
 
Frank  C

Frank C

24/01/2012 02:46:52
Quote Anchor link
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
 
Wouter J

Wouter J

24/01/2012 08:41:45
Quote Anchor link
@Ome Ko, <center> is uit de 19e eeuw. Tegenwoordig gebruiken we dat niet meer....

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/
 
Frank  C

Frank C

24/01/2012 11:29:04
Quote Anchor link
Wouter,

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

Ome Ko

24/01/2012 11:32:06
Quote Anchor link
Ja maar lieve jongens het WERKT gewoon. De kans dat er binnenkort iets in de CSS standaarden verandert is veel groter dan dat browsers ineens ophouden dit soort archaische tags te ondersteunen.

Geloof mij nou, ik heb alle hypes al langs zien komen.
 
Andre Sep

Andre Sep

24/01/2012 11:49:06
Quote Anchor link
@Ome Ko

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
 
George van Baasbank

George van Baasbank

24/01/2012 12:02:20
Quote Anchor link
Ik vind de wijze van uitleg op w3schools wel goed maar als het inhoudelijk rammelt, ja.......... Weten jullie een site die zowel in de wijze als inhoudelijk goed zijn?

Een goede en betrouwbare uitleg is van eminent belang.

George
 
Wouter J

Wouter J

24/01/2012 15:01:04
Quote Anchor link
@George, als je de documentatie van W3C begrijpt vind ik dat de beste die er is.

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

Ome Ko

24/01/2012 15:02:45
Quote Anchor link
Ja inderdaad, Andre. Tabellen zijn ontzettend handig en geven NOOIT crossbrowser gezeik. En het blijft gewoon werken, browserversie na browserversie! Het scheelt zoveel tijd en ergenis, nooit zeurende klanten, en nooit ergenis omdat je weer eens in die kutcss-en te hoeven duiken omdat goegel met een nieuwe browser komt.

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

Erwin H

24/01/2012 15:08:20
Quote Anchor link
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.
 
Wouter J

Wouter J

24/01/2012 15:15:33
Quote Anchor link
@Ome Ko, heel handig die planken die je bij de Praxis kunt kopen. Een paar spijkers en een hamer erbij en je hebt zo een huis in elkaar. Ach, het woont niet echt lekker het werkt niet echt goed en het is een beetje koud in huis, maar goed nooit gedoe met al die nieuwe technieken die eigenlijk alleen maar meer werk kosten...

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

Ozzie PHP

24/01/2012 15:28:44
Quote Anchor link
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 :(
 
George van Baasbank

George van Baasbank

24/01/2012 16:30:02
Quote Anchor link
Waartoe een vraag over HTML5 toe kan leiden......

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)
PHP script in nieuw venster Selecteer het PHP script
1
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;
}


De CSS-code voor het menu:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
#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);}



... en dit is de code uit mijn php/html-bestand

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<?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>



Wie kan/wil mij een stap verder helpen??
Gewijzigd op 24/01/2012 16:32:43 door George van Baasbank
 
Ozzie PHP

Ozzie PHP

24/01/2012 16:42:28
Quote Anchor link
Voor de lay-out gebruiken we geen tabellen, maar css.

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
 
Wouter J

Wouter J

24/01/2012 16:45:23
Quote Anchor link
@Ozzie, maar ook <aside> (sidebar), <article>, <section>, <footer>, <header> moet je gebruiken.

Meer -en betere- informatie: https://developer.mozilla.org/en/Sections_and_Outlines_of_an_HTML5_document
 
Ozzie PHP

Ozzie PHP

24/01/2012 16:54:18
Quote Anchor link
Correct Wouter... maar hij had het over z'n menu... dus vandaar mijn tip over de navigation tag.
 
George van Baasbank

George van Baasbank

24/01/2012 17:01:44
Quote Anchor link
Die <nav>-tag werkt wel goed. Ik heb hem zelfs verder kunnen uitbouwen. Maar de tekstregel blijft geheel links op mijn scherm staan.
De breedte van mijn pagina wordt 90% van de breedte van mijn sc herm en natuurlijk moet alles gecentreerd komen.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
<body>
    <nav>
    <?php while($row=mysqli_fetch_array($cResultmenu)){ ?>
    <?php $cX = "<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 } ?>
    </nav>

</body>


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?
 
Andre Sep

Andre Sep

24/01/2012 17:52:28
Quote Anchor link
Werkelijk Ko?! businesswise?!!??!

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)
PHP script in nieuw venster Selecteer het PHP script
1
text-decoration: none;
denk ik zo
 

Pagina: 1 2 volgende »



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.