Header (width=100% en height=30px) fixed
Om deze header wil ik een border hebben.
De header moet ten aller tijde, ook bij het verkleinen van het venster, even hoog blijven.
(voorheen werkte ik met frames, maar daar wil ik van af)
Ik heb al verschillende pogingen gedaan om het in CSSvoor elkaar te krijgen, maar ik krijg dat niet voor elkaar.
HELLUP !?!?
Voorbeeld van header:
------------------------------------------------------------------------------------------------
TTV SYSTEEM v1.0 Ingelogd als: Tester 28/03/2013
------------------------------------------------------------------------------------------------
Ik zou de volgende teksten als volgt willen zien:
"TTV SYSTEEM v1.0" in grote letters (16px) willen hebben en in het blauw
"Ingelogd als:" default ; "Tester" vetgedrukt
"28/03/2013" :" default
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
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
<html>
<head>
<title>Header</title>
<style>
body {
margin:0;
}
.myheader {
height:100px;
border:2px solid red;
text-align:center;
}
#aligner {
height: 100%;
width:0;
display: inline-block;
vertical-align: middle;
}
#logo {
font-family:Verdana, Geneva, sans-serif;
font-size:16px;
color:blue;
font-weight:bold;
}
</style>
</head>
<body>
<div class='myheader'>
<span id="aligner"></span>
<span id="logo">TTV SYSTEEM v1.0</span>
Ingelogd als: <b>Tester</b> 28/03/2013
</div>
</body>
</html>
<head>
<title>Header</title>
<style>
body {
margin:0;
}
.myheader {
height:100px;
border:2px solid red;
text-align:center;
}
#aligner {
height: 100%;
width:0;
display: inline-block;
vertical-align: middle;
}
#logo {
font-family:Verdana, Geneva, sans-serif;
font-size:16px;
color:blue;
font-weight:bold;
}
</style>
</head>
<body>
<div class='myheader'>
<span id="aligner"></span>
<span id="logo">TTV SYSTEEM v1.0</span>
Ingelogd als: <b>Tester</b> 28/03/2013
</div>
</body>
</html>
Toevoeging op 29/03/2013 06:11:55:
of
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
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
<html>
<head>
<title>Header</title>
<style>
body {
margin:0;
}
.myheader {
height:100px;
border:2px solid red;
text-align:center;
}
.container {
width:400;
height:18;
/* berekening marge-top met de hoogte van de twee divs: (100px - 18px) / 2 = 41px */
margin:41px auto 0 auto;
/* border:2px solid green; */
}
#logo {
font-family:Verdana, Geneva, sans-serif;
font-size:16px;
color:blue;
font-weight:bold;
}
</style>
</head>
<body>
<div class='myheader'>
<div class='container'>
<span id="logo">TTV SYSTEEM v1.0</span>
Ingelogd als: <b>Tester</b> 28/03/2013
</div>
</div>
</body>
</html>
<head>
<title>Header</title>
<style>
body {
margin:0;
}
.myheader {
height:100px;
border:2px solid red;
text-align:center;
}
.container {
width:400;
height:18;
/* berekening marge-top met de hoogte van de twee divs: (100px - 18px) / 2 = 41px */
margin:41px auto 0 auto;
/* border:2px solid green; */
}
#logo {
font-family:Verdana, Geneva, sans-serif;
font-size:16px;
color:blue;
font-weight:bold;
}
</style>
</head>
<body>
<div class='myheader'>
<div class='container'>
<span id="logo">TTV SYSTEEM v1.0</span>
Ingelogd als: <b>Tester</b> 28/03/2013
</div>
</div>
</body>
</html>
Gewijzigd op 29/03/2013 04:56:50 door Frank Nietbelangrijk
Dit is helemaal wat ik bedoel.
(maar waarom kwam ik er nou niet uit.....damm :-) )
Maar nog een laatste vraag: ik zou "TTV SYSTEEM v1.0" helemaal links willen hebben staan en "28/03/2013" helemaal aan de rechterkant ?
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
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
<html>
<head>
<title>Header</title>
<style>
body {
margin:0;
}
.myheader {
min-width:430px; /* dit zorgt er voor dat de tekst niet verschoven wordt naar een nieuwe regel. */
height:100px;
border:2px solid red;
}
.container {
height:18;
/* berekening marge-top met de hoogte van de twee divs: (100px - 18px) / 2 = 41px */
margin:41px auto 0 auto;
}
.header-left {
font-family:Verdana, Geneva, sans-serif;
font-size:16px;
color:blue;
font-weight:bold;
padding-left:20px;
/* zet twee divs naast elkaar: */
clear:left;
float:left;
}
.header-right {
font-family:default;
font-size:default;
color:default;
font-weight:normal;
padding-right:20px;
text-align:right;
}
</style>
</head>
<body>
<div class='myheader'>
<div class='container'>
<div class='header-left'>TTV SYSTEEM v1.0</div>
<div class='header-right'>Ingelogd als: <b>Tester</b> 28/03/2013</div>
</div>
</div>
</body>
</html>
<head>
<title>Header</title>
<style>
body {
margin:0;
}
.myheader {
min-width:430px; /* dit zorgt er voor dat de tekst niet verschoven wordt naar een nieuwe regel. */
height:100px;
border:2px solid red;
}
.container {
height:18;
/* berekening marge-top met de hoogte van de twee divs: (100px - 18px) / 2 = 41px */
margin:41px auto 0 auto;
}
.header-left {
font-family:Verdana, Geneva, sans-serif;
font-size:16px;
color:blue;
font-weight:bold;
padding-left:20px;
/* zet twee divs naast elkaar: */
clear:left;
float:left;
}
.header-right {
font-family:default;
font-size:default;
color:default;
font-weight:normal;
padding-right:20px;
text-align:right;
}
</style>
</head>
<body>
<div class='myheader'>
<div class='container'>
<div class='header-left'>TTV SYSTEEM v1.0</div>
<div class='header-right'>Ingelogd als: <b>Tester</b> 28/03/2013</div>
</div>
</div>
</body>
</html>
Ik begin nu te begrijpen hoe CSS werkt. Sinds vorige maandag ben ik erin gedoken (voorheen nog nooit mee bezig gehouden) . Ik zat met CSS een beetje te stoeien, zonder dat ik de essentie ervan inzag (mijn vorige website zat ik nog met 'FRAMES' te knoeien).
Frank, dankzij jouw duidelijke/logische oplossing van mijn probleempje begin ik het door te krijgen. CSS is helemaal niet moeilijk, maar je moet het even door hebben.
Nogmaals bedankt !