Grafische interesse |
|
Hallo,
Ik ben net begonnen met HTML & CSS maar nu wil ik in het kader tekst hebben, daarom heb ik deze code gekregen:
<fieldset style="border: 1px solid black;"><legend>title</legend>lsdnflskdnflksndkldks</fielsdet>
<fieldset style="border: 1px solid black;"><legend>title</legend>lsdnflskdnflksndkldks</fielsdet>
Maar, nu wil ik hem in mijn source zetten:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<style type="text/css">
body, html {
background-color: #CCCCCC;
padding: 5px;
margin: 0px;
text-align: center;
}
.context_kop {
padding-left: 10px;
padding-right: 10px;
height: 30px;
padding-top: 5px;
margin-top: 10px;
font-family: "Trebuchet MS", Verdana, Arial, Sans-serif;
font-size: 24px;
font-weight: bold;
color: #006699;
}
.context_text {
border-bottom: 1px #006699 dashed;
border-top: 1px #006699 dashed;
font-family: "Bitstream Vera Sans", Verdana, Arial, Sans-serif;
font-size: 12px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
padding-right: 20px;
text-align: justify;
}
#content {
background-color: #DDDDDD;
padding: auto;
margin: auto;
width: 680px;
text-align: left;
border-top: 1px #006699 solid;
border-left: 1px #006699 solid;
border-right: 1px #006699 solid;
}
#footer {
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
border-top: 1px #006699 solid;
border-bottom: 1px #006699 solid;
}
#header_left {
border-right: 2px #006699 solid;
width: 100%;
color: #F60;
background: #006699;
padding-top: 3px;
font-family: Georgia,Times;
font-size: 54px;
font-weight: bold;
line-height: 1em;
padding-bottom: 5px;
}
#header_right {
font-family: geneva,arial;
color: #F60;
font-size: 12px;
font-weight: bold;
padding-left: 5px;
}
#sub_header {
border-left: 1px #006699 solid;
border-right: 1px #006699 solid;
border-bottom: 1px #006699 solid;
width:100%;
background:#F60;
text-align:center;
font-size:small;
font-family:system,geneva;
font-weight:bold;
}
#navAlpha {
position: absolute;
width: 150px;
top: 110px;
left: 10px;
border: 1px solid #006699;
background-color: #eee;
padding: 10px;
z-index: 2;
voice-family: "\"}\"";
voice-family: inherit;
width: 115px;
}
</style>
<title>UnlimitedPower.nl</title>
</head>
<body>
<div id="header_left"
onclick="top.location.href='http://www.unlimitedpower.nl/';">
<span title="UnlimitedPower.nl"
onmouseover="this.style.color='#006699';"
onmouseout="this.style.color='#F60';">
UnlimitedPower
</span>
<span id="header_right">Bla Bla Bla Bla</span>
</div>
<div id="sub_header">
Welkom dan maar he
</div>
<div id="content">
<div id="navAlpha">
blabalbla
</div>
<div class="context_kop">Lipsum</div>
<div class="context_text"> Lorem ipsum pro sanctus accumsan deterruisset et, ex exerci definiebas vix. Ei his deserunt principes deseruisse, nihil mucius detraxit ut quo. Has euismod mandamus consetetur ut, quo in nulla quidam efficiendi. In eos kasd iudico, graeci feugait ut vim. Quo viris melius erroribus et, ei altera offendit explicari nam. Vim iudico necessitatibus ea.</div>
<br \>
<div id="footer">© 2005, UnlimitedPower.nl, valideer: <a href="http://validator.w3.org/check?uri=referer" title="Gigadesign is valid Xhtml strict 1.0">Xhtml 1.0</a></div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <style type="text/css"> body, html { background-color: #CCCCCC; padding: 5px; margin: 0px; text-align: center; } .context_kop { padding-left: 10px; padding-right: 10px; height: 30px; padding-top: 5px; margin-top: 10px; font-family: "Trebuchet MS", Verdana, Arial, Sans-serif; font-size: 24px; font-weight: bold; color: #006699; } .context_text { border-bottom: 1px #006699 dashed; border-top: 1px #006699 dashed; font-family: "Bitstream Vera Sans", Verdana, Arial, Sans-serif; font-size: 12px; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 20px; text-align: justify; } #content { background-color: #DDDDDD; padding: auto; margin: auto; width: 680px; text-align: left; border-top: 1px #006699 solid; border-left: 1px #006699 solid; border-right: 1px #006699 solid; } #footer { text-align: center; padding-top: 5px; padding-bottom: 5px; border-top: 1px #006699 solid; border-bottom: 1px #006699 solid; } #header_left { border-right: 2px #006699 solid; width: 100%; color: #F60; background: #006699; padding-top: 3px; font-family: Georgia,Times; font-size: 54px; font-weight: bold; line-height: 1em; padding-bottom: 5px; } #header_right { font-family: geneva,arial; color: #F60; font-size: 12px; font-weight: bold; padding-left: 5px; } #sub_header { border-left: 1px #006699 solid; border-right: 1px #006699 solid; border-bottom: 1px #006699 solid; width:100%; background:#F60; text-align:center; font-size:small; font-weight:bold; } #navAlpha { position: absolute; width: 150px; top: 110px; left: 10px; border: 1px solid #006699; background-color: #eee; padding: 10px; z-index: 2; voice-family: "\"}\""; voice-family: inherit; width: 115px; } </style> <title>UnlimitedPower.nl</title> </head> <body> <div id="header_left" onclick="top.location.href='http://www.unlimitedpower.nl/';"> <span title="UnlimitedPower.nl" onmouseover="this.style.color='#006699';" onmouseout="this.style.color='#F60';"> UnlimitedPower </span> <span id="header_right">Bla Bla Bla Bla</span> </div> <div id="sub_header"> Welkom dan maar he </div> <div id="content"> <div id="navAlpha"> blabalbla </div> <div class="context_kop">Lipsum</div> <div class="context_text"> Lorem ipsum pro sanctus accumsan deterruisset et, ex exerci definiebas vix. Ei his deserunt principes deseruisse, nihil mucius detraxit ut quo. Has euismod mandamus consetetur ut, quo in nulla quidam efficiendi. In eos kasd iudico, graeci feugait ut vim. Quo viris melius erroribus et, ei altera offendit explicari nam. Vim iudico necessitatibus ea.</div> <br \> <div id="footer">© 2005, UnlimitedPower.nl, valideer: <a href="http://validator.w3.org/check?uri=referer" title="Gigadesign is valid Xhtml strict 1.0">Xhtml 1.0</a></div> </div> </body> </html>
Maar dat wil me niet lukken om het in CSS te krijgen. Zodat het ook valid is. Ik weet, dat de website niet goed te zien valt in IE, maar dat probeer ik later wel bij te werken. In FF is hij wel goed, en ik verwacht ook dat hij nog niet 100% valid is. Maar, ik heb dus de twee kaders, aan de linker en rechterzijde, en daar wil ik dat dus hebben. Zou iemand me kunnen helpen?
Bedankt!
|