Nieuw lid |
|
Heya,
Ik heb enkele probleempjes met mijn CSS layout.
<a href="http://www.kwb-oevel.be/Varia/BlogFlattened_blue.jpg">Dit</a> is hoe mijn layout er zou moeten uitzien en <a href="http://www.kwb-oevel.be/Varia/CSStest.html">dit</a> is hoe hij er nu uitziet...
Wat er dus mis is:
1) De title header bovenaan mijn pagina zou voorzien moeten zijn van een 1px dikke border aan de boven- en onderzijde...
2) Mijn container element zou op een bepaalde afstand van de rechtermarge moeten komen te staan.
3) Mijn top image van mijn navigatiemenuutje wordt te laag gepositioneerd... De Now(); afbeelding zou bovenaan het - voor de duidelijk - grijsgekleurde middelste gedeelte komen te staan.
4) Het calligrafisch stijl element in de rechterbovenhoek van de pagina zou ander alle andere lagen moeten komen te staan.
CSS code
/* CSS Document */
body {
background: #9999cc url(images/bl_gradient.gif) repeat-x;
font: 100% Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
margin: 0px;
padding: 0px;
}
#calligraph {
background: url(images/bl_calli.png) no-repeat top right;
position: relative;
float: right;
right: 0 px;
height: 229px;
width: 212px;
z-index: 0;
}
#container {
background: url(images/bl_container.png) repeat-y center top;
padding: 30px 0px 0px 0px;
float: right;
width: 734px;
z-index: 1;
}
#container p {
position: relative;
/*text-align: left;*/
padding: 20px 30px 16px 20px;
}
h1 {
background: #55638C url(images/bl_header.jpg) no-repeat center;
padding-left: 20px;
padding-right: 20px;
border-bottom: 1px #5E6E9C;
border-top: 1px #5E6E9C;
height: 40px;
width: 680px;
font-size: 1px;
text-align: center;
margin-left: 7px;
z-index: 2;
}
#footer {
background: url(images/bl_footer.jpg) repeat-x bottom;
position: relative;
height: 131px;
margin-left: 7px;
margin-right: 7px;
}
#mainNav {
/*background: url(images/bl_middle_nav.png) repeat-y;*/
text-align: left;
background-color:#999999;
margin-right: -100px;
float: right;
width: 172px;
z-index: 3;
}
#mainNav h2 {
background: url(images/bl_top_nav.png) no-repeat top left;
padding-top: 0px;
height: 40px;
}
#mainNav .last {
background: url(images/bl_bottom_nav.png) no-repeat bottom left;
height: 11px;
padding-bottom: 20px;
}
h2 span, h1 span, #calligraph span {
visibility: hidden;
}
/* CSS Document */ body { background: #9999cc url(images/bl_gradient.gif) repeat-x; font: 100% Verdana, Arial, Helvetica, sans-serif; font-size: 10px; margin: 0px; padding: 0px; } #calligraph { background: url(images/bl_calli.png) no-repeat top right; position: relative; float: right; right: 0 px; height: 229px; width: 212px; z-index: 0; } #container { background: url(images/bl_container.png) repeat-y center top; padding: 30px 0px 0px 0px; float: right; width: 734px; z-index: 1; } #container p { position: relative; /*text-align: left;*/ padding: 20px 30px 16px 20px; } h1 { background: #55638C url(images/bl_header.jpg) no-repeat center; padding-left: 20px; padding-right: 20px; border-bottom: 1px #5E6E9C; border-top: 1px #5E6E9C; height: 40px; width: 680px; font-size: 1px; text-align: center; margin-left: 7px; z-index: 2; } #footer { background: url(images/bl_footer.jpg) repeat-x bottom; position: relative; height: 131px; margin-left: 7px; margin-right: 7px; } #mainNav { /*background: url(images/bl_middle_nav.png) repeat-y;*/ text-align: left; background-color:#999999; margin-right: -100px; float: right; width: 172px; z-index: 3; } #mainNav h2 { background: url(images/bl_top_nav.png) no-repeat top left; padding-top: 0px; height: 40px; } #mainNav .last { background: url(images/bl_bottom_nav.png) no-repeat bottom left; height: 11px; padding-bottom: 20px; } h2 span, h1 span, #calligraph span { visibility: hidden; }
HTML code
<!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" />
<link href="him.css" rel="stylesheet" type="text/css">
<title>Untitled Document</title>
</head>
<body>
<div id="calligraph"><span>Calligraphic style element</span></div>
<div id="container">
<div id="shadowLeft"></div>
<div id="shadowRight"></div>
<div id="mainNav">
<h2><span>Recent entries</span></h2>
<ul>
<li>Blah</li>
<li>Blah, blah</li>
<li>Blah...</li>
<li>Blah</li>
<li>Blah, blah</li>
<li>Blah...</li>
<li>Blah</li>
<li>Blah, blah</li>
<li>Blah...</li>
</ul>
<div class="last"></div>
</div>
<h1><span>His blog</span></h1>
<p>Dummy text</p>
<div id="footer"></div>
</div>
</body>
</html>
<!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" /> <link href="him.css" rel="stylesheet" type="text/css"> <title>Untitled Document</title> </head> <body> <div id="calligraph"><span>Calligraphic style element</span></div> <div id="container"> <div id="shadowLeft"></div> <div id="shadowRight"></div> <div id="mainNav"> <h2><span>Recent entries</span></h2> <ul> <li>Blah</li> <li>Blah, blah</li> <li>Blah...</li> <li>Blah</li> <li>Blah, blah</li> <li>Blah...</li> <li>Blah</li> <li>Blah, blah</li> <li>Blah...</li> </ul> <div class="last"></div> </div> <h1><span>His blog</span></h1> <p>Dummy text</p> <div id="footer"></div> </div> </body> </html>
Ze hebben mij al aangeraden om geen absolute positionering te gebruiken, maar daardoor krijg ik mijn container element dus niet meer gepositioneerd zoals ik het wil...
|