Hello I'm working on a website for my upcoming web and shell hosting buisness using asp.net
I'm trying to avoid using a frameset but I cannot for the life of me get a masterpage to do what I want.
with frame sets I can specify the rows as 180,*,15 and I get a 180pixel high header a 15 pixel high footer and the rest in a content area
with frames that will put the header at the very top foot at very bottom and scroll the content area NO MATTER what screen size someone is using without fancy javascript or media queries. I believe in the keep it simple and as such will not use media queries
or javascript for something this simple.
I have not been able to duplicate this type of layout with a masterpage. Hopefully someone can point me in the direction I'm missing
I've tried the msdn unk and well to be honest its written for a seasoned programmer (they really should do a laymens version) and
can't make heads or tails out of half the stuff.
If this can't be done with master pages then I'll use frames but I'm hoping it can be done.
make use of div elements and CSS to make what you're after. Likely it'll be a div for the header and another one below that with a CSS on it that states overflow:scroll;
<div class="header" style="">Header</div>
<div class="content" style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam a lectus orci. Suspendisse eleifend nunc quis libero tristique tempus. Nam velit dui, tristique id bibendum in, sagittis nec risus. Suspendisse iaculis, arcu sit amet mollis auctor, mauris neque rhoncus nisl, a dignissim sapien ipsum at nisi. Integer pellentesque blandit enim ac dignissim. Nunc purus lorem, ornare at lacinia ac, interdum id sem. Nulla facilisi. Praesent lobortis mi nisi, sit amet blandit nisl. Integer rutrum tellus ultricies velit molestie non imperdiet dolor rhoncus. Aliquam suscipit interdum accumsan. In odio libero, ultricies eu egestas eu, tempor hendrerit ligula. Pellentesque a libero nibh. Mauris id nunc a velit tempor volutpat eu at felis.
Proin accumsan rhoncus arcu ut iaculis. Phasellus posuere ullamcorper blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent pulvinar, lorem blandit scelerisque sagittis, elit diam blandit turpis, a semper metus nisl ac tellus. Quisque mollis cursus velit, at tempus nibh ultrices eu. Suspendisse aliquet, dolor ut imperdiet iaculis, arcu magna sollicitudin lectus, at convallis libero diam at mauris. Maecenas neque velit, blandit in mattis ac, vestibulum vitae neque. Pellentesque at justo sit amet felis blandit luctus. Vivamus ornare, metus sed eleifend pellentesque, ipsum nunc iaculis purus, in viverra sem orci vitae tortor. Nullam ultricies elit ut magna viverra et volutpat magna pretium. Pellentesque pulvinar convallis iaculis.
Pellentesque convallis ante magna. Maecenas odio eros, mattis pulvinar lacinia pharetra, ornare sit amet nisi. Phasellus vestibulum varius sapien, dapibus ornare enim aliquam et. Vestibulum porttitor risus vel odio eleifend in euismod metus sagittis. Maecenas accumsan rutrum mi quis ultrices. Nam metus dolor, aliquam non lobortis vitae, placerat at mi. In aliquet condimentum felis, ut scelerisque lacus suscipit ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas dignissim mauris eget ligula eleifend non condimentum elit condimentum. Morbi congue tortor sit amet leo iaculis sagittis. Sed porttitor scelerisque odio sit amet tincidunt. Curabitur purus quam, tristique in ultrices eleifend, adipiscing ut turpis. Donec at lacus massa, in ullamcorper augue. Nulla facilisi. Duis ullamcorper sagittis eleifend.
Phasellus elementum facilisis malesuada. Duis sed mi non velit scelerisque feugiat ac semper velit. Proin facilisis, purus hendrerit hendrerit ullamcorper, arcu felis malesuada nulla, nec imperdiet metus magna non nulla. Mauris laoreet, libero eget dapibus ornare, neque nulla fringilla sapien, ut consequat erat tellus mattis nunc. Phasellus pharetra mauris quis tellus aliquam dapibus. Duis pharetra commodo eros vel blandit. Ut erat ante, gravida ut tristique quis, ultricies at odio. Ut metus lorem, scelerisque eu ullamcorper in, iaculis nec turpis. Donec egestas ligula ut ipsum vestibulum id tincidunt dolor hendrerit. Donec blandit ipsum ac tortor molestie at blandit augue placerat. Morbi lobortis tellus et urna adipiscing in rutrum lectus molestie. Maecenas et lectus velit, nec pretium eros. Aenean lobortis posuere volutpat.
Maecenas tristique aliquam ipsum, imperdiet hendrerit libero tincidunt at. Aenean et enim neque. Pellentesque felis massa, tincidunt ac lobortis eu, mattis vitae est. Fusce nibh sapien, scelerisque non hendrerit vitae, euismod id quam. Maecenas ac velit orci. Praesent placerat, quam sit amet egestas ultrices, nisl dui suscipit diam, a laoreet mi enim in erat. Nam accumsan, tortor eu posuere aliquet, diam dolor dictum nisi, at imperdiet dui metus id elit. Cras lacus turpis, euismod sit amet tempor quis, aliquet vitae felis. Quisque vulputate, felis vitae euismod iaculis, odio mauris semper justo, id ultricies neque sem quis nulla. Duis fringilla metus vel sem ultricies ornare. Duis lobortis, risus at auctor rhoncus, nulla quam ultricies diam, ut consectetur neque tellus at diam. Suspendisse potenti. Integer eleifend quam quis nulla accumsan semper. Etiam neque ipsum, pretium non lacinia nec, fringilla vitae lorem. Vivamus non diam turpis. Aenean sollicitudin pulvinar gravida.
</div>
<div class="footer" style="">footer</div>
Bloody finally I fought with this for almost a day and a half and what you pasted worked like a charm I know a bit about css but didn't realise if you set bottom to 0 and a height it "sticks" it to the bottom portion of the browser window.
ok now that you have fixed my issue can you explain how this works ? from what I understood top left of screen was 0,0 so does the css bottom attribute work backwords ? I'm just trying to grasp for future reference how bottom 0px glues it to the bottom I
figured 0 was the top because a top of 0px puts things at the top>
it boils down to the positioning of the div elements and chiming in some extra attributes like left, bottom or top. For example: open the link I provided to jsfiddle. Fork the code and take out the position:absolute of the footer class then run again. You'll
noticed that the text footer doesn't display anymore.
JackieMay
Member
2 Points
29 Posts
Frameset versus Masterpage
Dec 15, 2012 08:28 PM|LINK
Hello I'm working on a website for my upcoming web and shell hosting buisness using asp.net
I'm trying to avoid using a frameset but I cannot for the life of me get a masterpage to do what I want.
with frame sets I can specify the rows as 180,*,15 and I get a 180pixel high header a 15 pixel high footer and the rest in a content area
with frames that will put the header at the very top foot at very bottom and scroll the content area NO MATTER what screen size someone is using without fancy javascript or media queries. I believe in the keep it simple and as such will not use media queries or javascript for something this simple.
I have not been able to duplicate this type of layout with a masterpage. Hopefully someone can point me in the direction I'm missing
I've tried the msdn unk and well to be honest its written for a seasoned programmer (they really should do a laymens version) and
can't make heads or tails out of half the stuff.
If this can't be done with master pages then I'll use frames but I'm hoping it can be done.
Thank you
XIII
All-Star
182702 Points
23463 Posts
ASPInsiders
Moderator
MVP
Re: Frameset versus Masterpage
Dec 15, 2012 08:43 PM|LINK
Hi,
make use of div elements and CSS to make what you're after. Likely it'll be a div for the header and another one below that with a CSS on it that states overflow:scroll;
See an example here: http://jsfiddle.net/KvdM/2CTYM/.
The code that I made up there is:
HTML:
CSS:
.header { position:absolute; top:0px; left:0px; width:100%; height:180px; overflow:hidden; background-color:yellow; } .content { position:absolute; top:200px; bottom:15px; left:0px; overflow:auto; } .footer { position:absolute; bottom:0px; width:100%; height:15px; left:0px; overflow:hidden; background-color:yellow; }Grz, Kris.
Interested in Azure, ASP.NET (MVC), jQuery, WCF, EF, MS SQL, ...
Keep the forums clean: report to the moderation team!
JackieMay
Member
2 Points
29 Posts
Re: Frameset versus Masterpage
Dec 15, 2012 08:53 PM|LINK
Bloody finally I fought with this for almost a day and a half and what you pasted worked like a charm I know a bit about css but didn't realise if you set bottom to 0 and a height it "sticks" it to the bottom portion of the browser window.
THANK YOU so much.
You have saved my day
JackieMay
Member
2 Points
29 Posts
Re: Frameset versus Masterpage
Dec 15, 2012 09:20 PM|LINK
ok now that you have fixed my issue can you explain how this works ? from what I understood top left of screen was 0,0 so does the css bottom attribute work backwords ? I'm just trying to grasp for future reference how bottom 0px glues it to the bottom I figured 0 was the top because a top of 0px puts things at the top>
XIII
All-Star
182702 Points
23463 Posts
ASPInsiders
Moderator
MVP
Re: Frameset versus Masterpage
Dec 15, 2012 09:38 PM|LINK
Hi,
it boils down to the positioning of the div elements and chiming in some extra attributes like left, bottom or top. For example: open the link I provided to jsfiddle. Fork the code and take out the position:absolute of the footer class then run again. You'll noticed that the text footer doesn't display anymore.
If you want to advance in web development, and I get that impression from you, I suggest you take the time to study CSS. The site of w3c is interesting: http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning.
Grz, Kris.
Interested in Azure, ASP.NET (MVC), jQuery, WCF, EF, MS SQL, ...
Keep the forums clean: report to the moderation team!