Originally Posted by
tiggerai
it also depends on the layout markup... can we have a sniffle of that??? (just the header/maincontent/footer will be fine) I wanna see what you're up to!
Sorry, I presume by that you wanna see the code to see what I'm doing? If so, see the below.
Sadly I had completely changed the layout after making this post, but still want to know if it's possible, so just chucked this together. Only took a couple of mins, so please excuse lack of "making it pretty". The god awful colours are used to easily point out the different sections.
index.html:
Code:
<html>
<head>
<title>Example</title>
<link href="main.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper">
<div id="header">Header</div>
<div id="left">Menu<br /><br />Option 1<br />Option 2<br />Option 3<br />Option 4<br /></div>
<div id="main">Main Section<br /><br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta, massa condimentum gravida ornare, lacus justo egestas tortor, et adipiscing justo odio vitae magna. Quisque nec urna a tortor eleifend sagittis non a augue. Fusce eget quam non mauris sollicitudin volutpat. Aenean vel erat et metus rutrum rutrum. Sed diam sapien, mollis vel mollis eget, auctor nec turpis. Donec mattis dui nec odio fermentum ultricies pretium ante viverra. Etiam interdum nunc ac augue blandit dapibus suscipit justo ornare. Nullam ut tortor enim, et varius ligula. Vestibulum felis quam, porttitor in pulvinar at, venenatis at mi. Phasellus hendrerit, nisl luctus pretium semper, nulla urna aliquam magna, in scelerisque erat enim a arcu.</p>
<p>Curabitur bibendum vehicula sollicitudin. Nam eget leo volutpat elit congue ullamcorper. Fusce ultricies convallis metus eget condimentum. Praesent vel leo vitae magna volutpat placerat et sed lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean condimentum tellus id quam consectetur accumsan. Aenean nisi turpis, ultricies et molestie at, hendrerit ac metus. Quisque adipiscing metus vel nibh condimentum eget sollicitudin leo feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas hendrerit, odio non semper posuere, lorem nibh iaculis urna, et mollis tortor lectus ut arcu. In hac habitasse platea dictumst. Vestibulum sollicitudin, dolor nec malesuada pharetra, enim purus faucibus sapien, id placerat neque massa quis augue. Integer odio mi, pellentesque sed congue sit amet, rhoncus eget lorem. Donec aliquet iaculis scelerisque. Integer pulvinar est a est pretium tristique. Vivamus placerat, erat et scelerisque luctus, ante nibh sagittis lorem, sit amet mollis ante dolor et massa. Morbi et augue vitae mauris vulputate rutrum et quis urna. Suspendisse aliquam pulvinar nisl, sed dapibus eros fringilla non. Nulla consequat tristique urna nec pretium. Integer eu est eu orci fringilla iaculis ut in eros.</p>
<p>Proin non porttitor sem. Mauris sit amet risus arcu. Vestibulum nec auctor urna. Nulla facilisi. Etiam in neque non augue tempor sodales sed in mi. Maecenas vestibulum urna vitae nunc facilisis vitae aliquet elit sodales. Phasellus pharetra nunc vel enim pulvinar id luctus quam convallis. Vivamus enim urna, placerat ac congue id, vestibulum nec dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat volutpat. Suspendisse porttitor dictum fermentum. Nullam congue nibh eget nisi aliquam mollis. Vivamus accumsan sem id sapien molestie ultricies. Phasellus eleifend elementum nulla, quis vulputate sapien commodo a. Mauris et sagittis ipsum.</p>
<p>Proin ac urna ut tortor eleifend cursus. Curabitur varius vulputate lacus vitae vehicula. Curabitur pharetra varius rhoncus. Duis ante enim, fringilla id fringilla cursus, vulputate sit amet odio. Duis tortor elit, pellentesque tempor porttitor in, imperdiet eu ligula. Morbi consectetur tortor vel libero gravida facilisis. Sed dapibus mi et felis aliquet tristique lobortis metus consectetur. Sed commodo egestas hendrerit. Praesent egestas imperdiet consectetur. Proin ligula neque, suscipit quis ullamcorper eget, facilisis eu tortor. Cras nec neque et nulla sodales vestibulum et sit amet nisl. Sed congue sem sed est ornare laoreet sodales elit luctus.</p>
<p>Phasellus suscipit fermentum justo id congue. Nullam vitae felis purus, et placerat nisi. Etiam tempor facilisis elementum. Phasellus ullamcorper nunc sit amet sapien dictum congue. Suspendisse porttitor turpis ut elit sagittis ut feugiat tortor aliquam. Suspendisse malesuada lorem eu lorem aliquet dapibus. Sed vestibulum dolor ut risus pharetra tincidunt. Curabitur dolor massa, vehicula non adipiscing ac, bibendum sed mi. Praesent vel leo diam. Proin ut ante quam, at cursus lectus. Mauris tincidunt tempus arcu, vitae lobortis mauris rhoncus sed. Aenean at ante ipsum. Donec sed leo nunc. Praesent sollicitudin faucibus imperdiet. Nullam libero orci, blandit sed sagittis eu, ultricies ut orci. </p>
</div>
<div id="footer">Footer</div>
</div>
</body>
</html>
main.css:
Code:
html, body {
background:#333333;
border:0;
padding:0;
font-family:Verdana;
font-size:12px;
}
div#wrapper {
position:relative;
width:900px;
height:1000px;
margin:0 auto;
background-color:#ffffff;
}
div#header {
width:900px;
height:100px;
top:0px;
background-color:#000000;
color:#ffffff;
}
div#left {
width:200px;
position:absolute;
top:100px;
left:0px;
background-color:#00ff00;
color:#000000;
}
div#main {
width:700px;
position:absolute;
top:100px;
left:200px;
background-color:#0000ff;
color:#000000;
}
div#footer {
width:900px;
height:100px;
position:absolute;
left:0px;
bottom:0px;
background-color:#ff0000;
margin:0 auto;
}
As you can see, by giving the wrapper div a height longer than the main div i can stick the footer at the bottom fine, but as I said in a previous post I don't want to have to change the wrapper div height for each page I make.
So, is there any way of making the left div and the main div the same length and to stick the footer at the bottom?
Hopefully my coding isn't too rubbish and at least half understandable, but please point out any errors I may have made.
LinkBack URL
About LinkBacks
) if I've made any mistakes or haven't made it clear enough what I need.
Reply With Quote
But not quite the layout that the OP was looking for, I admit.
). Using { position: fixed; } you can do some very nice CSS frame effects, but I don't think that's exactly what you're after: it'd make the header, menu and footer stay in the same place on the screen while the page content scrolls within the frames...
)
