|
|
Posted by Jonathan N. Little on 08/25/07 17:39
joker wrote:
> Look at this example:
>
>
> body {
> background-color:black;
> text-align:center;
> }
>
> html,body{margin:0; padding: 0; height:100%;}
>
>
> div#Container{
> position:relative;
> text_align: center;
^^^^^^^^^^
syntax: text-align: center; but not sure why you would do so, centered
text only works for very limited situations, like poetry maybe. Unless
this is a wrong-headed approach to center block elements...
> width: 800px;
BAD idea, what happens if the windows is larger or smaller, or the text
size is increased on the client?
> height: 100%;
Hmm this will try make the block as tall as the view port, okay what
happens if you have more content than that?
<snip>
>
> what is wrong here? can you see the footer position on your browser?
> where is it? I use ie 6xxx.... on xp
Of course not. You made 'Container' the height of your viewport then
have 'Footer' follow so 'Footer' will always render just below the
bottom of the viewport!
How about:
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">
<title>Footer</title>
<style type="text/css">
html,body { margin: 0; padding: 0; }
#content { overflow: hidden; background-color: #fdd;}
#footer { clear: both; background-color: #ffd; }
.c1 {background-color: #fdf; float: left; width: 31%; padding: .5em; }
.c2 {background-color: #dff; float: left; width: 31%; padding: .5em;}
.c3 { margin-left: 67%; padding: .5em;}
</style>
</head>
<body>
<div class="c1">
<h2>Column 1</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer...
</p>
<p>
Suspendisse egestas tempor erat...
</p>
</div>
<div class="c2">
<h2>Column 2</h2>
<p>
Suspendisse potenti. Suspendisse potenti...
</p>
<p>
Pellentesque eros purus, consequat...
</p>
<p>
Morbi mollis. Quisque sollicitudin...
</p>
<p>
Donec vel diam. Integer quis pede...
</p>
<p>
Suspendisse egestas tempor erat...
</p>
<p>
Morbi mollis. Quisque sollicitudin...
</p>
<p>
Donec vel diam. Integer quis pede...
</p>
<p>
Suspendisse egestas tempor erat...
</p>
<p>
Morbi mollis. Quisque sollicitudin...
</p>
<p>
Donec vel diam. Integer quis pede...
</p>
</div>
<div class="c3">
<h2>Column 3</h2>
<p>
Duis dapibus, dolor eget scelerisque...
</p>
<p>
Suspendisse egestas tempor erat...
</p>
<p>
Morbi mollis. Quisque sollicitudin...
</p>
<p>
Donec vel diam. Integer quis pede...
</p>
</div>
<div id="footer">
the footer
</div>
</body>
</html>
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Navigation:
[Reply to this message]
|