Layout probleem
Ik heb 2 problemen:
1)Mijn totaal layout staat wel helemaal tegen bovenkant aan, maar mijn header krijg ik niet hoog genoeg
2)Ik krijg mijn iframes niet fatsoenlijk in de div's verwerkt.
Onderstaand de code
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!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=ISO-8859-1" />
<title>ZSC Westerhoven</title>
<link rel="stylesheet" type="text/css" href="testcss.css">
</head>
<body>
<div id=totaal>
<div id=header>
<h1>ZSC HEADER</h1>
</div>
<div id=under>
<div id=content>
<iframe frameborder="0" name="contentframe" id="contentframe" src="home.php"></iframe>
</div>
<div id=menu>
<iframe frameborder="0" name="menuframe" id="menuframe" src="menu.php"></iframe>
</div>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>ZSC Westerhoven</title>
<link rel="stylesheet" type="text/css" href="testcss.css">
</head>
<body>
<div id=totaal>
<div id=header>
<h1>ZSC HEADER</h1>
</div>
<div id=under>
<div id=content>
<iframe frameborder="0" name="contentframe" id="contentframe" src="home.php"></iframe>
</div>
<div id=menu>
<iframe frameborder="0" name="menuframe" id="menuframe" src="menu.php"></iframe>
</div>
</div>
</div>
</body>
</html>
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
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
body {
overflow:auto;
text-align:center;
margin-left:auto;
margin-right:auto;
margin:0px;
padding:0px;
vertical-align:top;
background-color:#333333;
}
#totaal {
border:0px solid black;
margin-left:auto;
margin-right:auto;
margin-top:0px;
padding:0px;
width:1000px;
height:800px;
vertical-align:top;
box-sizing:border-box;
}
#header {
margin:0px;
padding:0px;
width:1000px;
height:100px;
vertical-align:top;
background-color:#CCCCCC;
}
#under {
border:0px solid black;
margin-top:5px;
margin-left:auto;
margin-right:auto;
width:1000px;
height:800px;
}
#menu {
border:0px solid black;
background-color:#CCCCCC;
border:0px solid black;
border-right:1px solid black;
width:200px;
height:700px;
}
#content {
border:0px solid black;
background-color:#CCCCCC;
border:0px solid black;
margin-left:200px;
width:795px;
height:700px;
float:right;
}
#menuframe {
width:200px;
height:700px;
}
#contentframe {
width:795px;
height:700px;
float:right;
}
overflow:auto;
text-align:center;
margin-left:auto;
margin-right:auto;
margin:0px;
padding:0px;
vertical-align:top;
background-color:#333333;
}
#totaal {
border:0px solid black;
margin-left:auto;
margin-right:auto;
margin-top:0px;
padding:0px;
width:1000px;
height:800px;
vertical-align:top;
box-sizing:border-box;
}
#header {
margin:0px;
padding:0px;
width:1000px;
height:100px;
vertical-align:top;
background-color:#CCCCCC;
}
#under {
border:0px solid black;
margin-top:5px;
margin-left:auto;
margin-right:auto;
width:1000px;
height:800px;
}
#menu {
border:0px solid black;
background-color:#CCCCCC;
border:0px solid black;
border-right:1px solid black;
width:200px;
height:700px;
}
#content {
border:0px solid black;
background-color:#CCCCCC;
border:0px solid black;
margin-left:200px;
width:795px;
height:700px;
float:right;
}
#menuframe {
width:200px;
height:700px;
}
#contentframe {
width:795px;
height:700px;
float:right;
}
En waarom eigenlijk het gebruik van iframe?
Ik wil mijn menu kunnen laten veranderen en ook mijn content-div moet kunnen veranderen naar andere bestandjes, is er een betere oplossing voor?
We zetten #under als position: relative. Daardoor wordt het een nieuw nulpunt voor #content en #menu, die we position: absolute geven.
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
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
#under {
border: 0px solid black;
margin-top: 5px;
height: 800px;
position: relative;
}
#menu {
background-color: #CCCCCC;
border-right: 1px solid black;
width: 200px;
height: 700px;
position: absolute;
z-index: 5;
left: 0;
top: 0;
}
#content {
border: 0px solid black;
background-color: #CCCCCC;
border: 0px solid black;
width: 795px;
height: 700px;
position: absolute;
z-index: 5;
left: 205px;
top: 0;
}
border: 0px solid black;
margin-top: 5px;
height: 800px;
position: relative;
}
#menu {
background-color: #CCCCCC;
border-right: 1px solid black;
width: 200px;
height: 700px;
position: absolute;
z-index: 5;
left: 0;
top: 0;
}
#content {
border: 0px solid black;
background-color: #CCCCCC;
border: 0px solid black;
width: 795px;
height: 700px;
position: absolute;
z-index: 5;
left: 205px;
top: 0;
}
Hiermee geholpen?
Gewijzigd op 08/01/2013 12:02:00 door Kris Peeters
Nu zit ik alleen nog met het probleem dat mijn header niet tegen de bovenkant aan staat (margin-top 0)
Mijn div Totaal staat namelijk wel helemaal tegen de bovenkant.
Heb je daar nog een oplossing voor?
Bedankt!
position:absolute;
top:0px;
margin:0px;
padding:0px;
width:1000px;
height:100px;
vertical-align:top;
background-color:#CCCCCC;
}
als je in de stylesheet dit zit ipv wat je had staan over je header.
dan zou ie als het goed is helemaal tegen de bovenkant van de pagina moeten komen
Obelix en Idefix op 08/01/2013 10:59:34:
Waarom zet je in je iframe zaken wel tussen " en niet in je div? -> niet consequent (en volgens mij is het wel zo netjes om het tussen " te zetten.
En waarom eigenlijk het gebruik van iframe?
En waarom eigenlijk het gebruik van iframe?
Hij werkt hier met SHORT TAGS, alleen dit moet je wel activeren. Kijk ik naar de Doctype dan is het geloof ik de bedoeling dat de opmaak geldige XHTML moet zijn (misschien moet je het eens valideren of dat zo is want als ik hem valideer krijg de response dat het hier om XHTML 1.0 transitional gaat en daarin accepteert hij short tags niet volgens de validator). Die Short tags werken ook als je voor HTML 4.01 kiest - geloof ik zo uit mijn hoofd. Ik gebruik het niet. Daarnaast als je niet de juiste Doctype kiest krijg je problemen. Een browser kijkt immers eerst naar de definitie van je document type om te bepalen hoe hij de pagina moet renderen.
Daarnaast gebruik je dan weer Nederlands en dan weer Engels in de ID's waarmee je de attributen selecteert. Dat deugt niet. Verder is het een goed idee om betekenisvolle css classes en id's te gebruiken bijv: </header></header> ipv van <div id="header"></id>. Of <div id="under"> vervangen door <footer> of <div id="voettekst"> als het tenminste om de voettekst gaat. Denk aan semantiek!
Je zou het ook gewoon zo kunnen doen (html 5 gebruiken):
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>ZSC Westerhoven</title>
<link rel="stylesheet" type="text/css" href="testcss.css">
</head>
<body>
<div id="totaal"><!-- eerste schil geopend / waarom is dit een NL id? -->
<header>
<h1>ZSC HEADER</h1><!-- beter om kapitaal-schrift van tekst te maken met css -->
</header>
<div id="under"><!-- tweede schil geopend -->
<div id="content">
<!-- iframe heb ik weggelaten -->
</div><!-- tweede schil geopend -->
</div>
</div><!-- eerste schil gesloten -->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>ZSC Westerhoven</title>
<link rel="stylesheet" type="text/css" href="testcss.css">
</head>
<body>
<div id="totaal"><!-- eerste schil geopend / waarom is dit een NL id? -->
<header>
<h1>ZSC HEADER</h1><!-- beter om kapitaal-schrift van tekst te maken met css -->
</header>
<div id="under"><!-- tweede schil geopend -->
<div id="content">
<!-- iframe heb ik weggelaten -->
</div><!-- tweede schil geopend -->
</div>
</div><!-- eerste schil gesloten -->
</body>
</html>
Gewijzigd op 27/01/2013 15:30:52 door Kev Rama
Quote:
Hij werkt hier met SHORT TAGS, alleen dit moet je wel activeren.
Er worden nergens short-tags gebruikt en in HTML en CSS moet je al helemaal niks activeren.
Quote:
Kijk ik naar de Doctype dan is het geloof ik de bedoeling dat de opmaak geldige XHTML moet zijn (misschien moet je het eens valideren of dat zo is want als ik hem valideer krijg de response dat het hier om XHTML 1.0 transitional gaat en daarin accepteert hij short tags niet volgens de validator).
xHTML heeft juist de mogelijkheid tot shorttags...
Quote:
Die Short tags werken ook als je voor HTML 4.01 kiest - geloof ik zo uit mijn hoofd. Ik gebruik het niet.
Short tags werken alleen in xml... (en dus ook in xHTML)
Quote:
Daarnaast als je niet de juiste Doctype kiest krijg je problemen. Een browser kijkt immers eerst naar de definitie van je document type om te bepalen hoe hij de pagina moet renderen.
Nee, fout. Een browser kan dat doctype helemaal geen zak schelen, alleen dat het er staat.
Quote:
Verder is het een goed idee om betekenisvolle css classes en id's te gebruiken bijv: </header></header> ipv van <div id="header"></id>. Of <div id="under"> vervangen door <footer> of <div id="voettekst"> als het tenminste om de voettekst gaat. Denk aan semantiek!
CSS classes en id's zijn betekenisvol, id="header" heeft voor mij helemaal een goede betekenis. <header> noemt men een HTML element, dat heeft niks met CSS te maken.
Tevens is het weglaten van id="header" omdat je <header> gebruikt een verkeerd idee.
Ook is jouw code nog zeker niet semantisch optimaal.
Kortom: Schoenmaker blijf bij je leest!
Wouter J op 27/01/2013 16:28:05:
Tevens is het weglaten van id="header" omdat je <header> gebruikt een verkeerd idee.
Waarom is dat Wouter?
Goed.
Wouter J op 27/01/2013 16:28:05:
(...)
Nee, fout. Een browser kan dat doctype helemaal geen zak schelen, alleen dat het er staat.
Nee, fout. Een browser kan dat doctype helemaal geen zak schelen, alleen dat het er staat.
Tja, als jij dat denkt. Het W3C denkt daar toch anders over,
'Why specify a doctype? Because it defines which version of (X)HTML your document is actually using, and this is a critical piece of information [mijn cursivering] needed by some tools processing the document.
(...)
But the most important thing is that with most families of browsers, a doctype declaration will make a lot of guessing unnecessary, and will thus trigger a "standard" rendering mode.'
Als je geen correcte Doctype definieert loop je het risico dat jouw pagina in bepaalde browsers anders weergegeven wordt dan beoogd. Er kunnen problemen ontstaan met hoe een browser de css interpreteert.
Jouw andere opmerkingen laat ik verder voor wat ze zijn. Alles wat ik heb geschreven kan ik ondersteunen met bronnen. Jij ook?
Ik probeerde alleen wat tips te geven. Daarnaast heb ik ook geen eigen 'opmaak' eronder gezet slechts een variant met wat aanbevelingen.
Wouter J op 27/01/2013 16:28:05:
Kortom: Schoenmaker blijf bij je leest!
Wat dit betreft. De pot verwijt de ketel...
Oh en als je naar html refereert praten we over opmaak en niet over code. Html is immers een opmaaktaal. ;)
Gewijzigd op 27/01/2013 18:44:19 door Kev Rama
Quote:
Wat dit betreft. De pot verwijt de ketel...
Tja, de toon van mijn reactie was misschien iets te (kan ik in mee komen), maar ik vind wel dat ik mag zeggen dat ik een HTML kennis heb die iets boven modaal HTML dev. ligt...
Quote:
Oh en als je naar html refereert praten we over opmaak en niet over code. Html is immers een opmaaktaal. ;)
Ik wil niet irritant zijn, maar opmaak en HTML zijn niet aan elkaar verwandt, behalve dat CSS de HTML elementen gebruikt om op te maken.
In HTML probeer je op een zo goed mogelijk methode de tekst die je hebt om te zetten in code waardoor elke robot weet welk woordje welke betekenis heeft. Is het bijv. een belangrijke titel, of slechts een bijzinnetje? Ect.
Quote:
Jouw andere opmerkingen laat ik verder voor wat ze zijn. Alles wat ik heb geschreven kan ik ondersteunen met bronnen. Jij ook?
Tuurlijk, anders zeg ik het niet (behalve sommige meningen die ik had verkondigd, zoals het hebben van een id attribuut op een header element, maar ook dat kan ik ondersteunen met artikelen die mij hebben overhaalt om dat te verkondigen aan de rest van de wereld). Kun je deze bronnen misschien naar me opsturen via een PM? Dan spammen we dit topic niet en leren we er toch alle 2 veel van.
Quote:
Tja, als jij dat denkt. Het W3C denkt daar toch anders over,
Ik zal de bronnen opzoeken en je die sturen....
Quote:
Waarom is dat Wouter?
Omdat een header element vaker in een code kan voorkomen voor verschillende doeleinden. Je hebt bijv. een header-top als header element van de pagina, maar ook elke artikel heeft een header. Daarom zul je alles een eigen class moeten meegeven en zul je nooit moeten afgaan op elementen apart (behalve met kleine simpele child selectors van, jawel, een id of class).