Forum Moderators: not2easy
I'm making all my client sites XHTML/CSS complaint, but I encountered a problem. Does anyone know how I can achieve the border effect I used for this site http://www.valentinus.be/web/valentinus/welkom.html (which only works well in IE/Windows, I know, shame on me) in CSS layers? I mean centering a div, giving it a vertical height of 100%, showing only it 's left and right beige border, and putting all of the content in there?
Thx a lot in advance.
I think you will find more answers than you have questions!
I certainly have.
Please edit your post to remove the URL reference to your site as site reviews are against the ToS.
If I understand your question the following should give you an idea of how to proceed:
<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<title>Test</title>
<meta http-equiv="Content-type" content="text/html;charset=ISO-8859-1" />
<meta http-equiv="Content-language" content="en" />
<style>
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
div#centre {
position: relative;
width: 80%;
height: 100%;
padding: 1em;
margin: 0 auto;
border: black solid;
border-width: 0 2px;
}
</style>
</head>
<body>
<div id="centre">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque adipiscing erat a lectus. Nunc tincidunt metus sit amet purus. Proin eget massa. Phasellus vel dui a tellus convallis bibendum. Vivamus hendrerit. Proin iaculis odio vitae massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque consectetuer varius urna. Sed a velit. Aliquam diam. Phasellus vel pede. Praesent pharetra urna rhoncus massa. Integer leo diam, semper sed, sagittis et, suscipit id, erat. Curabitur varius vehicula felis. Sed sit amet lorem id ligula porta luctus. Quisque vulputate lobortis massa. Maecenas nibh mi, vestibulum vel, aliquet id, varius vel, nulla. Phasellus nonummy, nulla id ullamcorper congue, urna sapien viverra massa, quis molestie justo sem at erat.</p>
</div>
</body>
</html>
Post code snippets or give a good description of any problems.
Also take a look through the site library or search the site - many questions have already been answered, many several times!