Virusscanner tips?
CSS layout met uitschuivende balken
Ik ben opzoek naar een layout die aan de bovenkant uitschuift naar beneden als je met je muis eroverheen gaat. Het liefst maak ik deze in een CSS Generator, alleen online vind ik alleen de CSS met de links aan de linkerkant, die niet kunnen uitschuiven.
Iemand tips?
Frank
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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
#hover-div {
background-color:#0FF;
width:150px;
height:30px;
text-align:center;
padding-top:10px;
}
#hover-div:hover {
background-color:#0AA;
height:300px;
}
</style>
<title>Hover Div</title>
</head>
<body>
<div id="hover-div">
Hover me!
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<style>
#hover-div {
background-color:#0FF;
width:150px;
height:30px;
text-align:center;
padding-top:10px;
}
#hover-div:hover {
background-color:#0AA;
height:300px;
}
</style>
<title>Hover Div</title>
</head>
<body>
<div id="hover-div">
Hover me!
</div>
</body>
</html>
Gewijzigd op 25/07/2013 21:12:50 door Frank Nietbelangrijk
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
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
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
header, nav, section, article, aside, footer {
display: block;
}
body {
font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
width: 100%;
height: 100%;
}
a {
color: blue;
outline: none;
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
p {
margin: 0 0 18px
}
img {
border: none;
}
input {
vertical-align: middle;
}
#wrapper {
width: 1000px;
margin: 0 auto;
min-height: 100%;
height: auto !important;
height: 100%;
}
/* Header
-----------------------------------------------------------------------------*/
#header {
height: 150px;
background: #FFE680;
}
/* Middle
-----------------------------------------------------------------------------*/
#middle {
width: 100%;
padding: 0 0 150px;
height: 1%;
position: relative;
}
#middle:after {
content: '';
clear: both;
display: table;
}
#container {
width: 100%;
float: left;
overflow: hidden;
}
#content {
padding: 0 0 0 270px;
}
/* Sidebar Left
-----------------------------------------------------------------------------*/
#sideLeft {
float: left;
width: 250px;
margin-left: -100%;
position: relative;
background: #B5E3FF;
}
/* Footer
-----------------------------------------------------------------------------*/
#footer {
width: 1000px;
margin: -150px auto 0;
height: 50px;
background: #BFF08E;
position: relative;
}
margin: 0;
padding: 0;
}
html {
height: 100%;
}
header, nav, section, article, aside, footer {
display: block;
}
body {
font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
width: 100%;
height: 100%;
}
a {
color: blue;
outline: none;
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
p {
margin: 0 0 18px
}
img {
border: none;
}
input {
vertical-align: middle;
}
#wrapper {
width: 1000px;
margin: 0 auto;
min-height: 100%;
height: auto !important;
height: 100%;
}
/* Header
-----------------------------------------------------------------------------*/
#header {
height: 150px;
background: #FFE680;
}
/* Middle
-----------------------------------------------------------------------------*/
#middle {
width: 100%;
padding: 0 0 150px;
height: 1%;
position: relative;
}
#middle:after {
content: '';
clear: both;
display: table;
}
#container {
width: 100%;
float: left;
overflow: hidden;
}
#content {
padding: 0 0 0 270px;
}
/* Sidebar Left
-----------------------------------------------------------------------------*/
#sideLeft {
float: left;
width: 250px;
margin-left: -100%;
position: relative;
background: #B5E3FF;
}
/* Footer
-----------------------------------------------------------------------------*/
#footer {
width: 1000px;
margin: -150px auto 0;
height: 50px;
background: #BFF08E;
position: relative;
}
Code (php)
1
overflow:hidden;
zorg je er voor dat de tekst die niet meer in de div past ook niet meer getoond wordt
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
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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script>
window.onload = function()
{
}
</script>
<style>
#hover-div {
background-color:#0FF;
width:150px;
height:30px;
text-align:center;
overflow:hidden;
}
#hover-div p {
margin:8px 0;
}
#hover-div:hover {
background-color:#0AA;
height:300px;
}
</style>
<title>Hover Div</title>
</head>
<body>
<div id="hover-div">
<p>Hover me!</p>
<ul>
<li><a href="http://www.google.nl">Google</a></li>
<li><a href="http://www.bing.nl">Bing</a></li>
</ul>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<script>
window.onload = function()
{
}
</script>
<style>
#hover-div {
background-color:#0FF;
width:150px;
height:30px;
text-align:center;
overflow:hidden;
}
#hover-div p {
margin:8px 0;
}
#hover-div:hover {
background-color:#0AA;
height:300px;
}
</style>
<title>Hover Div</title>
</head>
<body>
<div id="hover-div">
<p>Hover me!</p>
<ul>
<li><a href="http://www.google.nl">Google</a></li>
<li><a href="http://www.bing.nl">Bing</a></li>
</ul>
</div>
</body>
</html>