hallo allen
Ik maak sinds kort mijn sites in divs ipv met tabellen. Ben er tot nu toe erg tevreden over, alleen heb ik een probleem waar ik maar niet uit kom.
Als je hier kijkt http://www. zie je in IE7 dat er bijna helemaal geen achtergrond getoond word, en in ff loopt hij niet helemaal door aan de onderkant. Met de firebug plug-in in ff heb ik gezien dat de body div daar gewoon stopt, misschien ligt het daaraan. Zou iemand er naar kunnen kijken?
en bijbehorend css bestand
Ik maak sinds kort mijn sites in divs ipv met tabellen. Ben er tot nu toe erg tevreden over, alleen heb ik een probleem waar ik maar niet uit kom.
Als je hier kijkt http://www. zie je in IE7 dat er bijna helemaal geen achtergrond getoond word, en in ff loopt hij niet helemaal door aan de onderkant. Met de firebug plug-in in ff heb ik gezien dat de body div daar gewoon stopt, misschien ligt het daaraan. Zou iemand er naar kunnen kijken?
code:
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
| <html lang="nl" xml:lang="nl" xmlns="http://www.w3.org/1999/xhtml">
<meta name="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<meta name="Content-Style-Type" content="text/css" />
<meta name="Content-Script-Type" content="text/javascript" />
<meta name="generator" content="Eclipse" />
<!--
-->
<title>Mijn site</title>
<link rel="icon" href="/stage/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/stage/favicon.ico" type="image/x-icon" />
<link rel="home" href="/" title="Homepage" />
<link type="text/css" rel="stylesheet" media="screen, tv, projection" href="/stage/common.css" />
</head>
<body>
<div id="body">
<div id="container">
<div id="header">
<div id="headervisual">
</div>
</div>
<div id="content"><h1>Weblog Stage</h1>
<div id="textboxje"><p class="textboxje">Mocht je nu meer info willen bezoek dan: <a href="http://www.mijnsite.nl" class="textboxje">mijnsite.nl</a></p></div>
<div id="navbox">
<ul>
<li><a id="nav1" href="http://link1" target="blank">link 1</a></li>
<li><a id="nav2" href="http://link2" target="blank">link 2</a></li>
<li><a id="nav3" href="http://link3" target="blank">link 3</a></li>
<li><a id="nav4" href="http://link4" target="blank">link 4</a></li>
<li><a id="nav5" href="http://link5" target="blank">link 5</a></li>
</ul>
<div id="banners">
<a href="http://www.mijnsite.nl" target="_blank">
<img src="/stage/plaatje.JPG" alt="e-grip" border="0"/>
</a><br/>
<a href="http://www.mijnsite.nl" target="_blank">
<img src="/stage/plaatje.JPG" alt="gripnet" border="0"/>
</a>
</div>
</div>
<div id="newsbox">
<h2>2e week ten einde (14-9-2007)</h2>
<div id="lijntje"> </div>
<p class="content">Nulla ullamcorper nunc ut leo. Vivamus suscipit. Morbi feugiat orci vel nibh. Pellentesque vitae nibh. Donec porttitor arcu viverra lectus. Donec dignissim placerat orci. Pellentesque et velit. Nam in lorem et massa lobortis lobortis. Vestibulum nec ligula. Proin sapien nisi, ultrices sit amet, faucibus vel, egestas vitae, dui. Curabitur ut augue. Aenean ut est. Sed tortor velit, dignissim at, vestibulum quis, condimentum eget, elit. Aenean risus magna, interdum fringilla, rhoncus nec, pulvinar ac, eros. Nam nulla mauris, ornare eget, aliquam vitae, viverra at, felis. Suspendisse ut enim suscipit orci euismod tincidunt. Morbi semper, lacus at fermentum sagittis, eros lorem laoreet nisl, sed imperdiet eros nunc vitae ante. Donec in ipsum id risus rhoncus laoreet.<br/></p>
</div>
<div id="newsbox">
<h2>Einde week 1 (7-9-2007)</h2>
<div id="lijntje"> </div>
<p class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse varius, elit eget tempor sollicitudin, quam dui facilisis tortor, et facilisis magna enim id mi. Integer ornare. Phasellus risus felis, euismod sed, fermentum sed, malesuada quis, lorem. Morbi libero urna, vulputate id, vulputate vel, faucibus sit amet, nisi. Cras eget pede sit amet ipsum molestie scelerisque. Etiam aliquet, magna at varius vestibulum, est dolor gravida turpis, vitae pellentesque urna ante cursus massa. Nam dapibus rutrum nisi. Cras justo ipsum, porttitor quis, gravida nec, malesuada et, sem. Cras lectus. Sed a ante eu quam hendrerit imperdiet. Donec facilisis massa eu erat. Fusce felis ligula, cursus quis, molestie ac, sodales vitae, enim. Cras consequat mattis arcu. Sed eget neque ut lacus posuere dictum. Sed auctor, risus eu tincidunt dictum, pede est dignissim libero, id porttitor augue lorem ac velit. Etiam fermentum venenatis velit.Nulla ullamcorper nunc ut leo. Vivamus suscipit. Morbi feugiat orci vel nibh. Pellentesque vitae nibh. Donec porttitor arcu viverra lectus. Donec dignissim placerat orci. Pellentesque et velit. Nam in lorem et massa lobortis lobortis. Vestibulum nec ligula. Proin sapien nisi, ultrices sit amet, faucibus vel, egestas vitae, dui. Curabitur ut augue. Aenean ut est. Sed tortor velit, dignissim at, vestibulum quis, condimentum eget, elit. Aenean risus magna, interdum fringilla, rhoncus nec, pulvinar ac, eros. Nam nulla mauris, ornare eget, aliquam vitae, viverra at, felis. Suspendisse ut enim suscipit orci euismod tincidunt. Morbi semper, lacus at fermentum sagittis, eros lorem laoreet nisl, sed imperdiet eros nunc vitae ante. Donec in ipsum id risus rhoncus laoreet. </p>
</div>
<div id="newsbox">
<h2>Einde week 1 (7-9-2007)</h2>
<div id="lijntje"> </div>
<p class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse varius, elit eget tempor sollicitudin, quam dui facilisis tortor, et facilisis magna enim id mi. Integer ornare. Phasellus risus felis, euismod sed, fermentum sed, malesuada quis, lorem. Morbi libero urna, vulputate id, vulputate vel, faucibus sit amet, nisi. Cras eget pede sit amet ipsum molestie scelerisque. Etiam aliquet, magna at varius vestibulum, est dolor gravida turpis, vitae pellentesque urna ante cursus massa. Nam dapibus rutrum nisi. Cras justo ipsum, porttitor quis, gravida nec, malesuada et, sem. Cras lectus. Sed a ante eu quam hendrerit imperdiet. Donec facilisis massa eu erat. Fusce felis ligula, cursus quis, molestie ac, sodales vitae, enim. Cras consequat mattis arcu. Sed eget neque ut lacus posuere dictum. Sed auctor, risus eu tincidunt dictum, pede est dignissim libero, id porttitor augue lorem ac velit. Etiam fermentum venenatis velit. Nulla ullamcorper nunc ut leo. Vivamus suscipit. Morbi feugiat orci vel nibh. Pellentesque vitae nibh. Donec porttitor arcu viverra lectus. Donec dignissim placerat orci. Pellentesque et velit. Nam in lorem et massa lobortis lobortis. Vestibulum nec ligula. Proin sapien nisi, ultrices sit amet, faucibus vel, egestas vitae, dui. Curabitur ut augue. Aenean ut est. Sed tortor velit, dignissim at, vestibulum quis, condimentum eget, elit. Aenean risus magna, interdum fringilla, rhoncus nec, pulvinar ac, eros. Nam nulla mauris, ornare eget, aliquam vitae, viverra at, felis. Suspendisse ut enim suscipit orci euismod tincidunt. Morbi semper, lacus at fermentum sagittis, eros lorem laoreet nisl, sed imperdiet eros nunc vitae ante. Donec in ipsum id risus rhoncus laoreet. </p>
</div>
<div id="footer">
<p class="footer">© van mij 2007</p>
</div>
</div>
</div>
</div>
</body>
</html> |
en bijbehorend css bestand
code:
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
| /* CSS voor mijnsite.nl */
/* headers */
h1, h2, h3, h4, h5, h6 { margin: 0 0 0 0; padding-left: 15px; font-family: Verdana, Helvetica, sans-serif; color: #000000; }
h1 { font-size: 1.6em; padding-bottom: 14px; }
h2 { font-size: 1.1em; color: #E79E00; text-decoration: underline; padding-top: 8px;}
h3 { font-size: 1em; }
a, a:link { padding: 0 0 1px 0; color: #0000FF; text-decoration: none; }
a:visited { color: #0000FF; }
a:active { color: #0000FF; }
a:hover { color: #0000FF; }
p.content { font-family: Verdana, Helvetica, sans-serif; color: #000000; font-size: .8em; padding-left: 15px; padding-bottom: 7px; line-height: 12pt;}
p.footer { font-family: Verdana, Helvetica, sans-serif; color: #737573; font-size: .7em; text-align: center; padding-left: 15px;}
p.header { font-family: Verdana, Helvetica, sans-serif; font-size: 2em; text-align: left; padding-left: 5px;}
p.textboxje { font-family: Verdana, Helvetica, sans-serif; color: #E79E00; font-size: .7em; text-align: right;}
#body { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; width: 100%; background: url(/stage/bg3.gif); }
#container { position: absolute; top: 0; left: 40px; width: 773px; background-color: #ffffff; border-left: 5px solid #404040; border-right: 5px solid #404040; }
#header { top: 0; width: 62%; height:130px; }
#headervisual { position: absolute; top: 0px; left: 11px; width: 750px; height: 122px; background: url(/stage/header1.jpg) top no-repeat transparent; }
#textboxje { position: absolute; top: 115px; left: 260px; height: 15px; width: 500px;}
#content { top: 0px; left: 20px; height: 100%; }
#navbox { position: absolute; top: 214px; left: 589px; width: 170px; height: 370px; background-color: #ffffbd; border: 1px solid #404040; }
#banners { position: relative; top: 40px; left: 4px; width: 170px; height: 150px; background-color: transparent; border: 0;}
#navbox ul { list-style-type: none; margin: 0; padding-bottom: 2px; margin: 0em; padding: 0.3em}
#navbox li { height: 20px; width: 140px; margin: .1em; padding: 5px 5px 5px 0px; border-bottom: 1px solid #E79E00;}
#navbox li a { display: block; width: 100%; height: 100%; font-family: Verdana, Helvetica, sans-serif; color: #E79E00; font-size: 0.8em; text-align: left; padding-bottom: 0px; padding-left: 7px; background-color: transparent; }
#nav1:hover { font-family: Verdana, Helvetica, sans-serif; color: #FFFFBD; font-size: 0.8em; text-align: left; padding-left: 6px; background-color: transparent; background-image: url(/stage/mouseover.JPG); background-repeat: no-repeat; }
#nav2:hover { font-family: Verdana, Helvetica, sans-serif; color: #FFFFBD; font-size: 0.8em; text-align: left; padding-left: 6px; background-color: transparent; background-image: url(/stage/mouseover.JPG); background-repeat: no-repeat; }
#nav3:hover { font-family: Verdana, Helvetica, sans-serif; color: #FFFFBD; font-size: 0.8em; text-align: left; padding-left: 6px; background-color: transparent; background-image: url(/stage/mouseover.JPG); background-repeat: no-repeat; }
#nav4:hover { font-family: Verdana, Helvetica, sans-serif; color: #FFFFBD; font-size: 0.8em; text-align: left; padding-left: 6px; background-color: transparent; background-image: url(/stage/mouseover.JPG); background-repeat: no-repeat; }
#nav5:hover { font-family: Verdana, Helvetica, sans-serif; color: #FFFFBD; font-size: 0.8em; text-align: left; padding-left: 6px; background-color: transparent; background-image: url(/stage/mouseover.JPG); background-repeat: no-repeat; }
#newsbox { width: 550px; border: 1px; }
#lijntje { height: 25px; padding-left: 15px; background: url(/stage/dotted.JPG) center left no-repeat transparent;}
#footer { width: 100%; height: 30px; } |
[ Voor 3% gewijzigd door Verwijderd op 17-09-2007 14:09 ]